/* De marketinglaag bovenop het designsysteem van de app (/assets/app.css):
   dezelfde kleuren en kaarten, met een kop, een voet en wat rasters. Alle
   kleuren komen uit de variabelen van de app, zodat een ander accent daar
   één keer verandert en hier meekomt. */

.site .page,
.site .page--wide {
  max-width: 64rem;
  padding: 1.5rem 1rem 3rem;
}

.site h1 {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  margin-bottom: 0.75rem;
}

.site h2 {
  margin-top: 2rem;
}

.site .btn {
  width: auto;
}

.btn--small {
  padding: 0.5rem 0.9rem;
  font-size: 0.72rem;
}

/* --- Kop en voet ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  padding: 0.6rem 1rem;
  background: rgb(10 10 12 / 88%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  flex: 1 1 auto;
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.site-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.site-actions .lang {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.5rem 1rem 2.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.site-footer p {
  margin: 0.25rem 0;
}

/* --- Inhoud --------------------------------------------------------------- */

.hero {
  padding: 2rem 0 1rem;
  max-width: 44rem;
}

.lead {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 40rem;
}

.hero-actions,
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Een vast aantal kolommen in plaats van auto-fit: vier kaarten in een raster dat zelf
   kolommen kiest geeft drie plus één weeskaart op een brede pagina. */
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 60rem) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 36rem) {
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

.grid .card {
  margin-bottom: 0;
}

.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card h3 {
  margin-top: 0;
}

.shots {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
}

.shot {
  flex: 0 0 auto;
  margin: 0;
  width: min(15rem, 70vw);
  scroll-snap-align: start;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.shot figcaption {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
}

.faq p {
  margin-bottom: 0;
  color: var(--muted);
}

.closing {
  text-align: center;
  padding: 2rem 0;
}

/* --- Prijzen -------------------------------------------------------------- */

.plans {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

@media (max-width: 60rem) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 36rem) {
  .plans {
    grid-template-columns: 1fr;
  }
}

/* De vier delen van elk blok (naam, omschrijving, prijs, een regel eronder) liggen op de
   rijen van het raster eromheen (subgrid): naast elkaar staande blokken krijgen zo dezelfde
   hoogte per deel, ook als hun omschrijving langer of korter is. */
.plan {
  margin-bottom: 0;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0.4rem;
}

.plan > * {
  margin: 0;
}

.plan .plan-extra {
  align-self: start;
}

/* Browsers zonder subgrid: de prijs onderaan, dan staan ze in elk geval naast elkaar. */
@supports not (grid-template-rows: subgrid) {
  .plan {
    display: flex;
    flex-direction: column;
    grid-row: auto;
  }

  .plan .price {
    margin-top: auto;
  }
}

.plan--soon {
  border-style: dashed;
  background: transparent;
}

.price {
  font-size: 1.1rem;
  margin: 0.25rem 0;
}

.price strong {
  font-size: 1.6rem;
}

.table-wrap {
  overflow-x: auto;
}

table.compare,
table.macros {
  width: 100%;
  border-collapse: collapse;
}

table.compare th,
table.compare td,
table.macros th,
table.macros td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

table.compare td {
  text-align: center;
}

table.compare thead th {
  text-align: center;
  position: sticky;
  top: 0;
}

table.compare thead th:first-child {
  text-align: left;
}

table.compare tr.group th {
  color: var(--accent);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom-color: var(--accent-line);
  padding-top: 1.25rem;
}

table.compare tbody th[scope="row"],
table.macros tbody th {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
}

table.compare thead th,
table.macros thead th {
  color: var(--muted);
  font-size: 0.75rem;
}

.yes {
  color: var(--success);
  font-weight: 700;
}

.no {
  color: var(--muted-dim);
}

/* --- Calculator ---------------------------------------------------------- */

.row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.label {
  margin: 1rem 0 0.35rem;
  font-weight: 600;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.choice input {
  width: auto;
}

/* Het lokveld voor robots: buiten beeld, maar niet display:none, want dan
   slaan sommige robots het over. Voor mensen en schermlezers is het er niet
   (aria-hidden, geen tabvolgorde). */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.notice {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  background: var(--surface);
}

.notice p {
  margin: 0.25rem 0;
}

.notice--error {
  border-color: var(--error);
  background: var(--error-bg);
}

.error-list {
  margin: 0.25rem 0 0;
  padding-left: 1.2rem;
}

.result-target {
  font-size: 1.1rem;
}

.result-target strong {
  display: block;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  line-height: 1.1;
  color: var(--accent-hi);
}

.result-target span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.cf-turnstile {
  margin: 0.75rem 0;
  min-height: 65px;
}

@media (max-width: 40rem) {
  .site-actions {
    width: 100%;
    justify-content: space-between;
  }
}