/* ============================================================
   Auto AI Agency — page-specific overlays on top of marketing.css
   ============================================================ */

:root {
  --ink: #111110;
  --bg: #fafaf7;
  --signal: #dc4c2a;
  --paper: #f0eee6;
  --rule: #111110;
  --font-mono: 'JetBrains Mono', monospace;
  --font-display: 'Big Shoulders Display', sans-serif;
}

/* ── Hero ───────────────────────────────────────────────────── */
.aaa-hero {
  border-bottom: 4px solid var(--ink);
  padding: 72px 32px 56px;
  background: var(--bg);
}
.aaa-hero-inner { max-width: 1320px; margin: 0 auto; }
.aaa-eyebrow {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--signal);
  display: inline-block; padding: 6px 10px; border: 2px solid var(--signal);
}
.aaa-h1 {
  font-family: var(--font-display); font-weight: 900; line-height: 0.86;
  font-size: clamp(3.4rem, 9vw, 8rem); letter-spacing: -0.02em;
  color: var(--ink); margin: 22px 0 18px; text-transform: uppercase;
}
.aaa-h1 em { font-style: normal; color: var(--signal); }
.aaa-lede {
  font-family: var(--font-mono); font-size: 1.05rem; line-height: 1.55;
  color: var(--ink); max-width: 780px; margin: 18px 0 28px; font-weight: 500;
}
.aaa-lede b { background: var(--ink); color: var(--bg); padding: 0 6px; }

.aaa-cta-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.aaa-cta {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink); color: var(--bg);
  padding: 18px 28px; border: 3px solid var(--ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  transition: transform 220ms cubic-bezier(.22,1,.36,1);
}
.aaa-cta:hover { background: var(--signal); border-color: var(--signal); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.aaa-cta .price { font-size: 1.05rem; }
.aaa-cta .strike { text-decoration: line-through; opacity: 0.55; margin-right: 6px; font-weight: 500; }
.aaa-meta {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink); opacity: 0.7;
}

/* ── Manifesto stats strip ──────────────────────────────────── */
.aaa-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 4px solid var(--ink);
  background: var(--ink); color: var(--bg);
}
.aaa-strip .cell {
  padding: 28px 22px; border-right: 2px solid var(--bg);
}
.aaa-strip .cell:last-child { border-right: 0; }
.aaa-strip .cell .label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; }
.aaa-strip .cell .num   { font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1; margin-top: 8px; }
.aaa-strip .cell.pop .num { color: var(--signal); }
@media (max-width: 800px) { .aaa-strip { grid-template-columns: repeat(2, 1fr); } }

/* ── Section frame ──────────────────────────────────────────── */
.aaa-section { border-bottom: 4px solid var(--ink); padding: 64px 32px; }
.aaa-section.alt { background: var(--paper); }
.aaa-section-inner { max-width: 1320px; margin: 0 auto; }
.aaa-h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 0.92;
  letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 28px;
}
.aaa-h2 em { font-style: normal; color: var(--signal); }
.aaa-kicker {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
  display: inline-block; padding: 6px 10px; border: 2px solid var(--ink);
  margin-bottom: 18px;
}

/* ── How it works ───────────────────────────────────────────── */
.aaa-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aaa-step {
  border: 3px solid var(--ink); padding: 28px 22px; background: var(--bg);
}
.aaa-step .num {
  font-family: var(--font-display); font-weight: 900; font-size: 3rem;
  line-height: 1; color: var(--signal);
}
.aaa-step h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; text-transform: uppercase; margin: 14px 0 10px; }
.aaa-step p  { font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.55; color: var(--ink); }
@media (max-width: 800px) { .aaa-flow { grid-template-columns: 1fr; } }

/* ── Inclusions list ────────────────────────────────────────── */
.aaa-includes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 3px solid var(--ink); }
.aaa-includes li {
  list-style: none; padding: 18px 22px; border-bottom: 2px solid var(--ink); border-right: 2px solid var(--ink);
  font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.5; background: var(--bg);
}
.aaa-includes li:nth-child(2n) { border-right: 0; }
.aaa-includes li:nth-last-child(-n+2) { border-bottom: 0; }
.aaa-includes li b { background: var(--ink); color: var(--bg); padding: 0 6px; margin-right: 6px; }
@media (max-width: 700px) {
  .aaa-includes { grid-template-columns: 1fr; }
  .aaa-includes li { border-right: 0 !important; border-bottom: 2px solid var(--ink) !important; }
  .aaa-includes li:last-child { border-bottom: 0 !important; }
}

/* ── Buy block ──────────────────────────────────────────────── */
.aaa-buy {
  border: 4px solid var(--ink); padding: 44px; background: var(--bg);
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.aaa-buy .left .price {
  font-family: var(--font-display); font-weight: 900; font-size: 5.6rem; line-height: 0.9;
}
.aaa-buy .left .price small { font-size: 1rem; font-family: var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; vertical-align: top; opacity: 0.6; }
.aaa-buy .left p { font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.55; max-width: 56ch; margin-top: 10px; }
@media (max-width: 800px) { .aaa-buy { grid-template-columns: 1fr; } }

/* ── FAQ ────────────────────────────────────────────────────── */
.aaa-faq { border-top: 3px solid var(--ink); }
.aaa-faq details {
  border-bottom: 2px solid var(--ink); padding: 22px 0;
}
.aaa-faq summary {
  font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.aaa-faq summary::-webkit-details-marker { display: none; }
.aaa-faq summary::after { content: ' +'; color: var(--signal); }
.aaa-faq details[open] summary::after { content: ' −'; }
.aaa-faq p { font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.6; margin-top: 12px; }

/* ── Inline forms ────────────────────────────────────────────── */
.aaa-form { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.aaa-form label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.aaa-form input {
  font-family: var(--font-mono); font-size: 1rem; padding: 14px 16px;
  border: 3px solid var(--ink); background: var(--bg); color: var(--ink);
}
.aaa-form input:focus { outline: 3px solid var(--signal); outline-offset: 2px; }
.aaa-error { color: var(--signal); font-family: var(--font-mono); font-weight: 700; }

/* ── Auth/dashboard frame ────────────────────────────────────── */
.aaa-frame {
  min-height: 100vh; display: grid; place-items: center; padding: 32px;
  background:
    repeating-linear-gradient(45deg, transparent 0 28px, rgba(17,17,16,0.04) 28px 30px),
    var(--bg);
}
.aaa-card {
  width: 100%; max-width: 480px; background: var(--bg); border: 4px solid var(--ink); padding: 36px;
}
.aaa-card h1 { font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; text-transform: uppercase; margin-bottom: 18px; line-height: 0.9; }
.aaa-card .hint { font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.7; margin-top: 12px; }

/* ── App shell (post-purchase dashboard) ─────────────────────── */
.aaa-app { background: var(--bg); min-height: 100vh; }
.aaa-app-top {
  border-bottom: 3px solid var(--ink); padding: 18px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.aaa-app-top .brand { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.aaa-app-top nav a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); text-decoration: none; margin-left: 18px; }
.aaa-app-top nav a:hover, .aaa-app-top nav a.active { color: var(--signal); }
.aaa-app main { max-width: 1100px; margin: 40px auto; padding: 0 32px; }

.aaa-card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.aaa-tile {
  border: 3px solid var(--ink); padding: 24px; background: var(--bg);
  transition: transform 220ms cubic-bezier(.22,1,.36,1);
}
.aaa-tile:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.aaa-tile h3 { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; margin-bottom: 10px; }
.aaa-tile p  { font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.5; opacity: 0.85; margin-bottom: 18px; }
.aaa-tile a.btn {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.78rem;
  text-decoration: none; padding: 12px 16px; background: var(--ink); color: var(--bg); display: inline-block; border: 3px solid var(--ink);
}
.aaa-tile a.btn:hover { background: var(--signal); border-color: var(--signal); }

.aaa-step-list { counter-reset: step; }
.aaa-step-list .item {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start;
  padding: 22px 0; border-bottom: 2px solid var(--ink);
}
.aaa-step-list .item:last-child { border-bottom: 0; }
.aaa-step-list .item .dot {
  font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; color: var(--signal); line-height: 1;
}
.aaa-step-list .item h4 { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; text-transform: uppercase; }
.aaa-step-list .item p  { font-family: var(--font-mono); font-size: 0.95rem; line-height: 1.55; margin-top: 6px; }

.aaa-empty {
  border: 3px dashed var(--ink); padding: 36px; text-align: center;
  font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink); opacity: 0.7;
}

/* ── Admin uploader ─────────────────────────────────────────── */
.aaa-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.9rem; }
.aaa-table th, .aaa-table td { padding: 12px 14px; border-bottom: 2px solid var(--ink); text-align: left; }
.aaa-table th { background: var(--ink); color: var(--bg); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }

.aaa-flash {
  border: 3px solid var(--ink); padding: 14px 18px; margin-bottom: 22px;
  font-family: var(--font-mono); font-weight: 700;
}
.aaa-flash.ok { background: var(--ink); color: var(--bg); }
.aaa-flash.error { border-color: var(--signal); color: var(--signal); }