/*
 * Delade block mellan de två landningssidorna: views/landing.ejs
 * (privatsidan) och views/business.ejs (organisationssidan).
 *
 * Tio regler stod ordagrant i båda sidornas inline-<style>
 * (kodgranskning 2026-09-08, E-D12) — heroens rutnät och CTA-bandets hela
 * uppsättning. Det som *ser* likadant ut men skiljer sig i värden
 * (gradienterna i .hero::before och .cta::before, rubrikstorleken,
 * markeringsfärgen bakom .hero__title em, radbredden i .hero__sub) är
 * medveten sidfärg och står kvar i respektive vy.
 *
 * Laddas efter site.css och före sidans egen <style>, så kaskaden är
 * densamma som när reglerna låg inline.
 */

/* ============ Hero ============ */
.hero { position: relative; padding: 2.5rem 0 5rem; }

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 4rem;
  align-items: center;
}

/* Markeringen bakom ett <em> i rubriken ritas av sidans egen
   .hero__title em::after — rosa på privatsidan, blått på organisationssidan. */
.hero__title em {
  font-style: normal;
  position: relative;
  display: inline-block;
}

/* ============ CTA (mörkt band för kontrast) ============ */
.cta {
  background: var(--ink);
  color: #fff;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.cta__inner { position: relative; text-align: center; max-width: 640px; margin-inline: auto; }
.cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 1rem;
}
.cta__sub { color: rgba(255, 255, 255, 0.72); font-size: 1.08rem; margin-bottom: 2.2rem; }
.cta__buttons { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.cta .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.cta .btn--outline:hover { border-color: #fff; }