/* =============================================================================
 * ATOMIC LANDING PAGE — DESIGN SYSTEM  (v1.0)
 * =============================================================================
 *
 * A reusable design system for Atomic landing pages built on the WordPress
 * "Blank Canvas" template. Host this stylesheet at a fixed URL, link it from
 * each page, and author markup as Custom HTML blocks scoped inside
 * `<div class="aa-lp">…</div>`.
 *
 * USAGE
 * -----
 *   1. <link rel="stylesheet" href="/path/to/atomic-lp.css">
 *   2. (optional) add `body.aa-lp-page` to opt in to the WordPress host resets.
 *   3. Wrap all page markup in `<div class="aa-lp">`.
 *   4. Compose from the component vocabulary below. Don't hand-roll new
 *      paddings, type sizes, or breakpoints — use the tokens.
 *
 * MVP PAGE COMPOSITION
 * --------------------
 * The smallest viable page is roughly:
 *     banner → hero → (wall|proof) → section--dark (objection block)
 *           → (flagships|grid)     → faq → final CTA → footer → sticky
 * Skip components you don't need; never duplicate one.
 *
 * COMPONENT VOCABULARY (what each class does, not what this page shows)
 * ---------------------------------------------------------------------
 *   banner       — slim top header with brand + trust accent
 *   hero         — 2-column above-the-fold: copy + photo, dark bleed
 *   wall         — vertical data table of KPI rows (number / text / label)
 *   steps        — 1/2/3 process card row, numbered, with optional ETA chip
 *   without      — 2x2 dark objection-handler grid ("what you skip")
 *   proof        — 3-up review/quote wall with attribution caption
 *   flagships    — 2-up featured product cards with "Best Seller" badge
 *   flag-closer  — bottom-rail wrapper under flagships; hosts pricenote + trust
 *   pricenote    — Q+A pair: mono kicker question + sans-serif answer
 *   trust        — responsive grid of label/body credential cells
 *   grid         — N-up secondary product cards (lighter than flagships)
 *   faq          — native <details> stack
 *   final        — closer section with one CTA
 *   footer       — contact row + copyright row
 *   sticky       — fixed-bottom single-CTA bar (mobile only, <901px)
 *
 * LAYOUT PRIMITIVES
 * -----------------
 *   .aa-lp-wrap            — content wrap (max 960px, centered)
 *   .aa-lp-wrap--wide      — wide wrap (max 1240px)
 *   .aa-lp-section         — paper background, vertical padding rhythm
 *   .aa-lp-section--bone   — bone background (alternates with paper)
 *   .aa-lp-section--dark   — charcoal background (objection break)
 *   .aa-lp-sub             — section sub-headline below the h2
 *   .lp-tag                — kicker label ("// LIKE THIS"); one per section
 *   .lp-br-md              — break helper: inline on mobile, <br> at >=781px
 *   .lp-accent             — accent slot inside an H1 (smaller, brand color)
 *   .lp-step-label         — labeled head inside a step card (e.g. "Step 01:")
 *
 * RHYTHM RULES
 * ------------
 *   1. STACK   — between siblings use ONE direction of margin OR a flex/grid
 *                gap. Never both.
 *   2. INSET   — all padding inside containers comes from --s-N. No raw px.
 *   3. SECTION — major section vertical padding is --s-9 mobile, --s-10 desktop.
 *   4. CARD    — title → s-2 → spec → s-5 → divider → s-5 → body → s-6 → price.
 *   5. ALT     — alternate paper / bone backgrounds; dark only as objection break.
 *
 * If a value doesn't snap to the scale, change the value, not the scale.
 *
 * DO NOT
 * ------
 *   • Hand-roll new padding values. Use --s-N or extend the scale.
 *   • Set raw px font-sizes. Use --t-* tokens or em-relative inside a token.
 *   • Use Roboto Mono for body copy. Mono is for kickers, specs, labels only.
 *   • Stack two paper sections in a row. Alternate paper ↔ bone.
 *   • Add new color hexes. Add a token or override an existing one per page.
 *   • Use !important except in the host-resets section (where it fights WP).
 *
 * BRAND COLOR OVERRIDE (per-page)
 * -------------------------------
 * Brand accent slots are `--acid` (bright accent) and `--acidink` (deep accent).
 * To rebrand a single page, override the two tokens inline:
 *
 *     <style>
 *       :root { --acid: #C18A2E; --acidink: #7A5512; }
 *     </style>
 *
 * Place that before the stylesheet link to ensure cascade order.
 *
 * BREAKPOINTS (mobile-first)
 * --------------------------
 *   481px  — grid cards go 2-up
 *   561px  — small tablet (typography step-up, container padding)
 *   601px  — without-cell goes 2-up
 *   701px  — grid 3-up, steps 3-up, flagships 2-up, proof 3-up
 *   781px  — wall row 3-col, .lp-br-md line break activates
 *   901px  — hide sticky CTA bar (desktop has its own CTAs)
 *   981px  — hero goes 2-col, full size typography
 *
 * ========================================================================== */


/* -----------------------------------------------------------------------------
 * 1. TOKENS
 *
 * Declared on `:root` so tokens are available anywhere on the page — including
 * outside the `.aa-lp` wrapper (e.g. theme-level overrides, embedded widgets).
 * Mirrored on `.aa-lp` so a scoped override block can rebrand a single page
 * without leaking to neighboring pages that share the stylesheet.
 * -------------------------------------------------------------------------- */

:root,
.aa-lp {
  /* Color — neutrals */
  --paper: #FAF9F7;
  --bone: #F1EFEB;
  --rule: #DDD9D2;
  --pencil: #5A5853;
  --ink: #1A1916;
  --charcoal: #0D0C0B;
  --smoke: #1F1E1C;
  --steel: #8E8C89;
  --bright: #FCFBFA;
  --dim: #CCCAC7;
  --dim-2: #E5E3E0;

  /* Color — brand accent (override these to rebrand a single page) */
  --acid: #32CD32;
  --acidink: #1f7e1f;

  /* Color — semantic */
  --warn: #B8351C;
  --alert: #ED5C4F;

  /* Type families */
  --mono: 'Roboto Mono', 'Courier New', monospace;
  --sans: 'Roboto', Arial, sans-serif;

  /* Type scale (1.25 ratio; --t-base aligns with 16px browser default) */
  --t-xs: 12px;
  --t-sm: 14px;
  --t-base: 16px;
  --t-md: 18px;
  --t-lg: 22px;
  --t-xl: 28px;
  --t-2xl: 36px;
  --t-3xl: 48px;
  --t-4xl: 64px;

  /* Spacing scale (base-8 modular) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Tracking (letter-spacing) */
  --track-tight: 0.04em;
  --track-default: 0.1em;
  --track-wide: 0.18em;
}


/* -----------------------------------------------------------------------------
 * 2. HOST RESETS — WordPress Blank Canvas integration
 *
 * Opt in by adding `body.aa-lp-page` to the page. The selectors below kill
 * theme chrome (headers, footers, breadcrumbs, sidebars) so the landing page
 * renders edge-to-edge. Remove or adjust selectors for non-WordPress hosts.
 * -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html:has(.aa-lp) {
    scroll-behavior: smooth;
  }
}

.wp-block-html:has(> .aa-lp),
.wp-block-html .aa-lp {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.aa-lp,
.aa-lp .aa-lp-wrap {
  overflow-x: hidden;
}

body.aa-lp-page .site-header,
body.aa-lp-page #masthead,
body.aa-lp-page .main-navigation,
body.aa-lp-page .site-footer,
body.aa-lp-page #colophon,
body.aa-lp-page #secondary,
body.aa-lp-page .sidebar,
body.aa-lp-page .widget-area,
body.aa-lp-page .breadcrumb,
body.aa-lp-page .woocommerce-breadcrumb,
body.aa-lp-page .entry-header,
body.aa-lp-page .page-title,
body.aa-lp-page .entry-title {
  display: none !important;
}

body.aa-lp-page #content,
body.aa-lp-page .site-content,
body.aa-lp-page .entry-content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.aa-lp-page {
  background: var(--paper);
  margin: 0;
  padding: 0;
}


/* -----------------------------------------------------------------------------
 * 3. BASE — element resets inside .aa-lp
 * -------------------------------------------------------------------------- */

.aa-lp {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.aa-lp *,
.aa-lp *::before,
.aa-lp *::after {
  box-sizing: border-box;
}

.aa-lp img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

.aa-lp h1,
.aa-lp h2,
.aa-lp h3,
.aa-lp h4,
.aa-lp h5,
.aa-lp h6 {
  text-shadow: none;
  padding: 0;
  margin: 0;
}

.aa-lp a {
  text-decoration: none;
  color: inherit;
  box-shadow: none;
  border-bottom: 0;
}

.aa-lp p {
  padding: 0;
  margin: 0;
  font-size: var(--t-base);
}

.aa-lp ul,
.aa-lp ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.aa-lp h1,
.aa-lp h2,
.aa-lp h3 {
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}


/* -----------------------------------------------------------------------------
 * 4. LAYOUT PRIMITIVES
 *
 *   .aa-lp-section         — full-bleed background band (paper by default)
 *   .aa-lp-section--bone   — modifier: bone background
 *   .aa-lp-section--dark   — modifier: dark background, inverts text colors
 *   .aa-lp-wrap            — centered content wrapper (max 960px)
 *   .aa-lp-wrap--wide      — modifier: wide wrapper (max 1240px)
 *   .aa-lp-sub             — section sub-headline below the h2
 *   .lp-tag                — kicker label ("// LIKE THIS"); one per section
 *   .lp-br-md              — break helper: inline on mobile, <br> at >=781px
 *   .lp-accent             — accent slot inside an H1 (smaller, brand color)
 * -------------------------------------------------------------------------- */

.aa-lp .lp-tag {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--acidink);
  margin: 0 0 var(--s-3);
}

.aa-lp-section {
  background: var(--paper);
  color: var(--ink);
}

.aa-lp-section--bone {
  background: var(--bone);
}

.aa-lp-section .aa-lp-sub {
  color: var(--pencil);
}

.aa-lp-section--dark {
  background: var(--charcoal);
  color: var(--bright);
}

.aa-lp-section--dark h2,
.aa-lp-section--dark h3 {
  color: var(--bright);
}

.aa-lp-section--dark .lp-tag {
  color: var(--acid);
}

.aa-lp-section--dark .aa-lp-sub {
  color: var(--dim);
}

.aa-lp-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-4);
}

.aa-lp-wrap--wide {
  max-width: 1240px;
}

.aa-lp-wrap h2 {
  font-size: var(--t-xl);
  line-height: 1.15;
  margin-bottom: var(--s-3);
}

.aa-lp-wrap h2+p.aa-lp-sub {
  font-size: var(--t-base);
  margin-bottom: var(--s-6);
  max-width: 720px;
}

@media (min-width: 561px) {
  .aa-lp-wrap {
    padding: var(--s-10) var(--s-6);
  }

  .aa-lp-wrap h2 {
    font-size: var(--t-2xl);
    line-height: 1.12;
  }

  .aa-lp-wrap h2+p.aa-lp-sub {
    font-size: var(--t-md);
    margin-bottom: var(--s-7);
  }
}

.aa-lp .lp-br-md {
  display: none;
}

@media (min-width: 781px) {
  .aa-lp .lp-br-md {
    display: inline;
  }
}


/* -----------------------------------------------------------------------------
 * 5. COMPONENTS
 * -------------------------------------------------------------------------- */

/* --- Banner --------------------------------------------------------------- */

.aa-lp-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 10;
}

.aa-lp-banner-brand {
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}

.aa-lp-banner-slash {
  color: var(--acidink);
  margin: 0 var(--s-1);
}

.aa-lp-banner-trust {
  display: none;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--pencil);
  letter-spacing: var(--track-default);
  text-transform: uppercase;
}

.aa-lp-banner-trust strong {
  color: var(--acidink);
  font-weight: 700;
}

@media (min-width: 561px) {
  .aa-lp-banner {
    padding: var(--s-4) var(--s-6);
  }

  .aa-lp-banner-trust {
    display: inline;
  }
}


/* --- Hero ----------------------------------------------------------------- */

.aa-lp-hero-bleed {
  position: relative;
  background: var(--charcoal);
  color: var(--bright);
}

.aa-lp-hero-bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(64, 62, 59, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(64, 62, 59, 0.15) 1px, transparent 1px);
  background-size: var(--s-7) var(--s-7);
  pointer-events: none;
}

.aa-lp-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--s-6);
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--s-6) var(--s-4) var(--s-7);
}

.aa-lp-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.aa-lp-hero-photo {
  position: relative;
  z-index: 2;
  order: -1;
}

.aa-lp-hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--smoke);
}

.aa-lp-hero .lp-tag {
  color: var(--acid);
}

.aa-lp-hero h1 {
  font-size: var(--t-xl);
  line-height: 1.08;
  margin-bottom: var(--s-5);
  color: var(--bright);
}

.aa-lp-hero h1 .lp-accent {
  display: inline-block;
  margin-top: var(--s-2);
  color: var(--acid);
  font-size: 0.55em;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
}

.aa-lp .aa-lp-hero-sub {
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--dim-2);
  margin: 0 0 var(--s-6);
  text-transform: none;
  letter-spacing: 0;
}

.aa-lp-hero-sub strong {
  color: var(--bright);
  font-weight: 500;
}

.aa-lp-hero-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--s-5);
  background: var(--acid);
  color: var(--charcoal) !important;
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: var(--track-default);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--acid);
  transition: all 0.15s ease;
  min-height: 60px;
  line-height: 1.25;
}

.aa-lp-hero-cta:hover {
  background: var(--bright);
  border-color: var(--bright);
  color: var(--charcoal) !important;
}

.aa-lp-hero-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
}

.aa-lp-hero-bullet {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--dim);
  letter-spacing: var(--track-default);
  text-transform: uppercase;
}

.aa-lp-hero-bullet::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--acid);
  border-radius: 50%;
  flex-shrink: 0;
}

@media (min-width: 561px) {
  .aa-lp-hero h1 {
    font-size: var(--t-2xl);
  }

  .aa-lp .aa-lp-hero-sub {
    font-size: var(--t-md);
    margin: 0 0 var(--s-6);
  }

  .aa-lp-hero-cta {
    display: inline-block;
    width: auto;
    padding: var(--s-5) var(--s-7);
    font-size: var(--t-md);
  }
}

@media (min-width: 981px) {
  .aa-lp-hero {
    grid-template-columns: 1.05fr 1fr;
    min-height: 92vh;
    padding: var(--s-7);
    gap: var(--s-5);
  }

  .aa-lp-hero-photo {
    order: 0;
  }

  .aa-lp-hero h1 {
    font-size: var(--t-3xl);
    line-height: 1.02;
  }

  .aa-lp .aa-lp-hero-sub {
    font-size: var(--t-lg);
    margin: 0 0 var(--s-7);
  }
}


/* --- Wall (measured-rows data table) -------------------------------------- */

.aa-lp-wall {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
}

.aa-lp-wall-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.aa-lp-wall-row:last-child {
  border-bottom: 0;
}

.aa-lp-wall-row:nth-child(even) {
  background: var(--bone);
}

.aa-lp-wall-meter {
  font-family: var(--mono);
  text-align: center;
}

.aa-lp-wall-meter-num {
  display: block;
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--acidink);
  line-height: 1;
  white-space: nowrap;
}

.aa-lp-wall-meter-unit {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--pencil);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.aa-lp-wall-text {
  font-size: var(--t-base);
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}

.aa-lp-wall-text strong {
  font-weight: 600;
}

.aa-lp-wall-label {
  display: block;
  grid-column: 1 / 3;
  text-align: left;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--pencil);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

.aa-lp-wall-label-emp {
  color: var(--acidink);
}

@media (min-width: 781px) {
  .aa-lp-wall-row {
    grid-template-columns: 220px 1fr 200px;
    gap: var(--s-6);
    padding: var(--s-5) var(--s-6);
  }

  .aa-lp-wall-label {
    grid-column: auto;
    text-align: right;
  }

  .aa-lp-wall-meter-num {
    font-size: var(--t-2xl);
  }
}


/* --- Steps (numbered process cards) --------------------------------------- */

.aa-lp-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.aa-lp-step {
  background: var(--paper);
  padding: var(--s-6) var(--s-5);
}

.aa-lp-step-num {
  font-family: var(--mono);
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--acidink);
  line-height: 1;
  margin-bottom: var(--s-4);
}

.aa-lp-step h3 {
  font-size: var(--t-md);
  font-weight: 700;
  margin-bottom: var(--s-3);
  line-height: 1.2;
  color: var(--ink);
}

.aa-lp-step h3 .lp-step-label {
  display: block;
  font-weight: 400;
  color: var(--pencil);
}

.aa-lp-step p {
  font-size: var(--t-sm);
  color: var(--pencil);
  line-height: 1.55;
}

.aa-lp-step-eta {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--acidink);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

@media (min-width: 701px) {
  .aa-lp-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .aa-lp-step {
    padding: var(--s-7) var(--s-6);
  }

  .aa-lp-step-num {
    font-size: var(--t-3xl);
    margin-bottom: var(--s-4);
  }

  .aa-lp-step h3 {
    font-size: var(--t-lg);
  }
}


/* --- Without (objection-handler grid; dark) ------------------------------- */

.aa-lp-without {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--pencil);
  border: 1px solid var(--pencil);
}

.aa-lp-without-cell {
  background: var(--charcoal);
  padding: var(--s-5);
}

.aa-lp-without-cell::before {
  content: "WITHOUT \2014";
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--alert);
  letter-spacing: var(--track-wide);
}

.aa-lp-without-cell p {
  font-size: var(--t-base);
  color: var(--dim-2);
  line-height: 1.55;
  margin: 0;
}

.aa-lp-without-cell p strong {
  color: var(--bright);
  font-weight: 500;
}

@media (min-width: 601px) {
  .aa-lp-without {
    grid-template-columns: 1fr 1fr;
  }

  .aa-lp-without-cell {
    padding: var(--s-6);
  }
}


/* --- Proof (3-up testimonial/quote wall with attribution caption) --------- */

.aa-lp-proof {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

.aa-lp-proof-quote {
  margin: 0;
  padding: var(--s-6);
  background: var(--bone);
  border-left: 3px solid var(--acid);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.aa-lp-proof-quote blockquote {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

.aa-lp-proof-quote figcaption {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--pencil);
  letter-spacing: var(--track-default);
  text-transform: uppercase;
}

.aa-lp-proof-quote figcaption strong {
  color: var(--ink);
  font-weight: 700;
}

.aa-lp-proof-quote figcaption span {
  text-transform: none;
  letter-spacing: 0;
}

@media (min-width: 701px) {
  .aa-lp-proof {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


/* --- Flagships (2-up featured product cards w/ badge) --------------------- */

.aa-lp-flagships {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

.aa-lp-flag {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aa-lp-flag:hover {
  border-color: var(--acid);
  box-shadow: 0 10px 28px rgba(26, 25, 22, 0.10);
}

.aa-lp-flag-imgwrap {
  padding: var(--s-5) var(--s-5) 0;
}

.aa-lp-flag-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bone);
}

.aa-lp-flag-badge {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 2;
  padding: var(--s-2) var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--acid);
  line-height: 1;
}

.aa-lp-flag-body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  flex: 1;
}

.aa-lp-flag-head { margin: 0; }

.aa-lp-flag h3 {
  font-size: var(--t-lg);
  font-weight: 700;
  margin: 0 0 var(--s-1);
  line-height: 1.2;
  color: var(--ink);
}

.aa-lp-flag-spec {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--pencil);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  line-height: 1.5;
}

.aa-lp-flag-benefit {
  flex: 1;
  margin: 0;
  font-size: var(--t-sm);
  color: var(--pencil);
  line-height: 1.7;
}

.aa-lp-flag-benefit strong {
  color: var(--ink);
  font-weight: 600;
}

.aa-lp-flag-pricerow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin: 0;
}

.aa-lp-flag-price {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.aa-lp-flag-price small {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--pencil);
  letter-spacing: var(--track-default);
  text-transform: uppercase;
}

.aa-lp-flag-from {
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--acidink);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}

.aa-lp-flag-cta {
  display: block;
  padding: var(--s-4) var(--s-5);
  background: var(--ink);
  color: var(--paper) !important;
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--track-default);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: all 0.15s ease;
  min-height: 52px;
  line-height: 1.25;
}

.aa-lp-flag-cta:hover {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--charcoal) !important;
}

@media (min-width: 701px) {
  .aa-lp-flagships {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }

  .aa-lp-flag-imgwrap {
    padding: var(--s-6) var(--s-6) 0;
  }

  .aa-lp-flag-body {
    padding: var(--s-7);
  }

  .aa-lp-flag h3 {
    font-size: var(--t-xl);
  }
}

.aa-lp-flag-closer {
  width: 100%;
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aa-lp .aa-lp-trust {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  width: 100%;
  max-width: 960px;
  text-align: center;
}

.aa-lp .aa-lp-trust li {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
}

.aa-lp-trust-icon {
  width: 28px;
  height: 28px;
  margin-bottom: var(--s-2);
  color: var(--ink);
  flex-shrink: 0;
}

.aa-lp-trust-label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--track-default);
  text-transform: uppercase;
  color: var(--ink);
}

.aa-lp-trust-body {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--pencil);
}

@media (min-width: 561px) {
  .aa-lp .aa-lp-trust {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
}

@media (min-width: 901px) {
  .aa-lp .aa-lp-trust {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* --- Grid (3-up secondary product cards, anchor-wrapped) ------------------ */

.aa-lp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}

.aa-lp-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.aa-lp-card:hover {
  border-color: var(--acid);
  box-shadow: 0 6px 18px rgba(26, 25, 22, 0.08);
}

.aa-lp-card-imgwrap {
  padding: var(--s-5) var(--s-5) 0;
}

.aa-lp-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bone);
}

.aa-lp-card-body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  flex: 1;
}

.aa-lp-card-head { margin: 0; flex: 1; }

.aa-lp-card h4 {
  margin: 0 0 var(--s-1);
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  line-height: 1.2;
}

.aa-lp-card-spec {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--pencil);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  line-height: 1.5;
}

.aa-lp-card-pricerow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin: 0;
}

.aa-lp-card-price {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.aa-lp-card-price small {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--pencil);
  letter-spacing: var(--track-default);
  text-transform: uppercase;
}

.aa-lp-card-from {
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--acidink);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}

.aa-lp-card-cta {
  display: block;
  padding: var(--s-4) var(--s-5);
  background: var(--ink);
  color: var(--paper) !important;
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--track-default);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: all 0.15s ease;
  min-height: 52px;
  line-height: 1.25;
}

.aa-lp-card-cta:hover {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--charcoal) !important;
}

@media (min-width: 481px) {
  .aa-lp-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
}

@media (min-width: 701px) {
  .aa-lp-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }

  .aa-lp-card-imgwrap {
    padding: var(--s-6) var(--s-6) 0;
  }

  .aa-lp-card-body {
    padding: var(--s-6);
  }
}


/* --- FAQ (native <details>) ----------------------------------------------- */

.aa-lp-faq details {
  border-top: 1px solid var(--rule);
  padding: 0;
}

.aa-lp-faq details:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.aa-lp-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  line-height: 1.3;
}

.aa-lp-faq summary::-webkit-details-marker {
  display: none;
}

.aa-lp-faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: var(--t-xl);
  color: var(--acidink);
}

.aa-lp-faq details[open] summary::after {
  content: "\2212";
}

.aa-lp-faq details[open] summary {
  color: var(--acidink);
}

.aa-lp-faq details>div {
  padding: 0 0 var(--s-5);
  font-size: var(--t-base);
  color: var(--ink);
  line-height: 1.65;
}

.aa-lp-faq details>div p {
  margin: 0 0 var(--s-3);
  color: var(--pencil);
}

.aa-lp-faq details>div p:last-child {
  margin-bottom: 0;
}

@media (min-width: 561px) {
  .aa-lp-faq summary {
    font-size: var(--t-md);
    padding: var(--s-6) 0;
  }
}


/* --- Final CTA (closer) --------------------------------------------------- */

.aa-lp-final {
  text-align: center;
  padding: var(--s-8) var(--s-5) var(--s-9);
  background: var(--charcoal);
  color: var(--bright);
  border-top: 2px solid var(--acid);
}

.aa-lp-final .lp-tag {
  color: var(--acid);
  margin: 0 0 var(--s-4);
}

.aa-lp-final h2 {
  font-size: var(--t-xl);
  margin-bottom: var(--s-4);
  color: var(--bright);
}

.aa-lp-final p {
  font-size: var(--t-base);
  color: var(--dim);
  margin: 0 auto var(--s-7);
  max-width: 640px;
}

.aa-lp-final .aa-lp-hero-cta {
  margin-top: var(--s-2);
}

@media (min-width: 561px) {
  .aa-lp-final {
    padding: var(--s-9) var(--s-6) var(--s-10);
  }

  .aa-lp-final h2 {
    font-size: var(--t-2xl);
  }

  .aa-lp-final p {
    font-size: var(--t-md);
    margin-bottom: var(--s-7);
  }
}


/* --- Footer --------------------------------------------------------------- */

.aa-lp-footer {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: var(--s-6) var(--s-5) var(--s-10);
}

.aa-lp-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  align-items: center;
  justify-content: center;
  max-width: 960px;
  margin: 0 auto;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--pencil);
  letter-spacing: var(--track-default);
  text-transform: uppercase;
}

.aa-lp-footer-row a {
  color: var(--pencil);
  transition: color 0.15s ease;
}

.aa-lp-footer-row a:hover {
  color: var(--acidink);
}

.aa-lp-footer-contact {
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}

.aa-lp-footer-contact strong {
  color: var(--ink);
  font-weight: 700;
}

.aa-lp-footer-contact a {
  color: var(--acidink);
  font-weight: 700;
}

@media (min-width: 901px) {
  .aa-lp-footer {
    padding: var(--s-6) var(--s-6) var(--s-7);
  }
}


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

.aa-lp-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: var(--s-3);
  background: rgba(13, 12, 11, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--smoke);
}

.aa-lp-sticky-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  padding: var(--s-4);
  min-height: 52px;
  background: var(--acid);
  color: var(--charcoal);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--track-default);
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 901px) {
  .aa-lp-sticky {
    display: none;
  }
}


/* -----------------------------------------------------------------------------
 * 6. PRINT
 * -------------------------------------------------------------------------- */

@media print {
  .aa-lp {
    background: #fff !important;
    color: #000 !important;
  }

  .aa-lp * {
    color: #000 !important;
    background: #fff !important;
  }

  .aa-lp-sticky,
  .aa-lp-hero-cta,
  .aa-lp-flag-cta {
    display: none !important;
  }
}