/* ── AI- och SEO-analysen (/sv/ai-seo-analys) ──
   Bara den här sidan laddar filen. Formulär, snabbanalys och bekräftelse i en bonepanel
   (radie 12, som övriga inramade kort). Fälten och knapparna är sajtens egna (.wl-field,
   .waitlist-input, .waitlist-submit, .wl-back). Inga nya färger. */

.aa-hero .product-title { max-width: 16ch; text-wrap: balance; }

.aa-panel {
  margin-top: 48px;
  max-width: 1000px;
  background: var(--bone);
  border-radius: 12px;
  padding: 32px;
}

/* Formuläret: sajten på egen rad (det analysen handlar om), e-post och förnamn bredvid
   varandra, knappen under. Fyra i en rad blev för trångt för en e-postadress. */
.aa-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 16px;
  max-width: 720px;
}
.aa-fields .wl-field + .wl-field { margin-top: 0; }
.aa-fields .wl-field:first-child { grid-column: 1 / -1; }
.aa-turnstile { grid-column: 1 / -1; min-height: 65px; }
.aa-turnstile:empty { min-height: 0; }
.aa-submit { grid-column: 1 / -1; justify-self: start; margin-top: 8px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; }

/* Honeypot: utanför skärmen, aldrig i tabb-ordningen. Fylls bara i av robotar. */
.aa-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.aa-stop { outline: none; }
.aa-stop-text { font-size: 18px; line-height: 1.5; max-width: 60ch; }
.aa-stop .wl-back { margin-top: 12px; }

/* ── Slutbeskedet ── */
.aa-done { outline: none; }
.aa-done-text {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  max-width: 40ch;
  overflow-wrap: anywhere;
}
.aa-staging { margin-top: 20px; font-size: 15px; color: var(--text-muted); }
.aa-panel .waitlist-error { margin-top: 20px; }

/* ── Innehållet under panelen ── */
.aa-section { border-bottom: 0; }
.aa-section .product-section-inner { padding-top: 96px; padding-bottom: 96px; }
.aa-gets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.aa-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: var(--bg);
}
.aa-card-tag { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.aa-card p { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; margin-top: auto; }
.aa-how { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.45; max-width: 720px; }
.aa-faq .faq-list { max-width: 800px; }
.aa-page .faq-answer a.text-link { color: var(--text); border-bottom: 0; padding-bottom: 0; }
.aa-page .faq-answer a.text-link:hover { color: var(--accent); }

@media (max-width: 900px) {
  .aa-hero .product-title { max-width: none; }
  .aa-panel { padding: 24px 20px; margin-top: 40px; }
  .aa-fields { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .aa-submit { justify-self: stretch; width: 100%; margin-top: 4px; }
  .aa-done-text { font-size: 19px; }
  .aa-gets { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .aa-card { gap: 20px; padding: 22px 20px 24px; }
  .aa-card p { font-size: 18px; }
  .aa-how { font-size: 19px; }
  .aa-section .product-section-inner { padding: 72px 24px; }
}