/* ============================================================================
   Marketing site kit — layout only. All colors/spacing/type come from tokens.
   MOBILE-FIRST: base rules target phones; min-width queries layer on tablet &
   desktop. Grids are fluid (auto-fit / golden-ratio splits). The hero fills
   the viewport on every breakpoint via .signco-section--viewport.
   Breakpoints (rem, so they respect the user's font size):
     48rem  (768px)  tablet — multi-column feature/footer grids
     56rem  (896px)  desktop — inline nav, two-pane hero & how-it-works
   ============================================================================ */
.msite {
  background: var(--signco-color-surface);
}

/* ── WCAG 2.2 AA contrast hardening ──────────────────────────────────────────
   Page-scoped overrides of two DS defaults that fall just under 4.5:1 on this
   page's surfaces. We darken only the failing roles, keeping the hierarchy:
   - secondary body text  #767b80 (4.27:1) → #60656a (5.7:1)
   - accent badge text    #b45a00 on amber tint (3.93:1) → #945000 (5.1:1)
   (success/info badges, trust pills and footer text already pass — untouched.) */
.msite {
  --signco-color-text-secondary: #60656a;
  --signco-color-accent: #945000;
}
/* The accent text token (#b45a00) only ever paints text/icons — never a fill —
   so darkening it to #945000 lifts every accent-on-tint pairing (badges, the
   upcoming step number, the "& Co" wordmark on light) over 4.5:1 at once. */
.msite-co {
  color: var(--signco-color-accent);
}
/* "& Co" sits on rijksblauw in the footer — a light amber clears AA there. */
.msite-footer .msite-co {
  color: #ffb86b;
}
/* The kit's nav-link color must not override the primary button's white label. */
.msite
  .signco-header__nav
  a.signco-btn:not(.signco-btn--secondary):not(.signco-btn--ghost) {
  color: #fff;
}

/* Controls & labels render on one line — flex-wrap still moves whole items to a
   new row when needed (prevents mid-word breaks with the wide Rijksoverheid Sans). */
.signco-header__brand,
.signco-header__nav a,
.signco-btn,
.signco-badge,
.signco-trust-pill {
  white-space: nowrap;
}

.msite-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--signco-color-primary);
  color: #fff;
}
.signco-header__brand {
  font-size: 1.125rem;
}

/* ── Navigation: mobile-first (menu button shown, inline nav hidden) ──────── */
.msite-nav {
  display: none;
}
.msite-menu-btn {
  display: block;
  margin-left: auto;
}
.msite-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: var(--signco-space-sm);
  padding-block: var(--signco-space-md);
}
.msite-mobile-nav a {
  padding: var(--signco-space-sm) 0;
  text-decoration: none;
  color: var(--signco-color-text);
  font-weight: 700;
  border-bottom: 1px solid var(--signco-color-divider);
  min-height: var(--signco-hit-target-min);
  display: flex;
  align-items: center;
}

/* ── Hero: fills the viewport, content vertically centered ───────────────── */
.msite-hero {
  /* viewport-filling math comes from .signco-section--viewport on the element */
  padding-block: var(--signco-space-section-sm);
  background: linear-gradient(
    180deg,
    var(--signco-color-section-lichtblauw),
    var(--signco-color-surface)
  );
}
.msite-hero__grid {
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  gap: var(--signco-space-xl);
  align-items: center;
  width: 100%;
}
.msite-display {
  font-size: var(--signco-font-size-display);
  line-height: 1.08;
  letter-spacing: var(--signco-letter-spacing-display);
  margin: var(--signco-space-md) 0;
}
.msite-lead {
  font-size: var(--signco-font-size-large);
  color: var(--signco-color-text-secondary);
  max-width: 46ch;
}
.msite-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--signco-space-sm);
  margin-top: var(--signco-space-lg);
}
.msite-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--signco-space-sm);
  margin-top: var(--signco-space-xl);
}
/* Phones: lead the hero with copy; the media reappears from tablet up so the
   hero fits the viewport cleanly without a tall stacked image. */
.msite-hero__media {
  display: none;
}

/* Real product screenshot framed to match the design-system surfaces:
   rounded, hairline border, one soft shadow. Understated on purpose. */
.msite-shot {
  margin: 0;
  border-radius: var(--signco-radius-md);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px var(--signco-color-border),
    0 18px 40px -24px rgba(16, 42, 67, 0.45);
}
.msite-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Section heads ───────────────────────────────────────────────────────── */
.msite-section-head {
  max-width: var(--signco-container-narrow);
  margin-bottom: var(--signco-space-xl);
}
.msite-section-head h2 {
  margin-top: var(--signco-space-xs);
}

/* ── Feature grid: intrinsically fluid (auto-fit), no breakpoint needed ───── */
.msite-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--signco-gap-grid);
}

/* ── How it works: single column on mobile ───────────────────────────────── */
.msite-how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--signco-space-xl);
  align-items: center;
}
.msite-how__grid h2 {
  margin-top: var(--signco-space-xs);
}
.msite-how__media {
  max-width: 360px;
  width: 100%;
  margin-inline: auto;
}

.msite-how__screenshot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--signco-color-border);
  border-radius: var(--signco-radius-lg);
  box-shadow: var(--signco-shadow-1);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.msite-footer {
  background: var(--signco-color-primary);
  color: #fff;
  padding-block: var(--signco-space-2xl) var(--signco-space-lg);
  margin-top: var(--signco-space-section);
}
.msite-footer .signco-header__brand {
  color: #fff;
}
.msite-footer .msite-logo-mark {
  background: #fff;
  color: var(--signco-color-primary);
}
.msite-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--signco-space-xl);
}
.msite-footer__note {
  color: color-mix(in srgb, #fff 80%, transparent);
  max-width: 38ch;
  margin-top: var(--signco-space-sm);
}
.msite-footer h4 {
  color: #fff;
  font-size: var(--signco-font-size-small);
  margin-bottom: var(--signco-space-sm);
}
.msite-footer nav {
  display: flex;
  flex-direction: column;
  gap: var(--signco-space-xs);
}
.msite-footer nav a {
  color: color-mix(in srgb, #fff 82%, transparent);
  text-decoration: none;
  font-size: var(--signco-font-size-small);
}
.msite-footer nav a:hover {
  color: #fff;
  text-decoration: underline;
}
.msite-footer__bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--signco-space-sm);
  margin-top: var(--signco-space-xl);
  padding-top: var(--signco-space-md);
  border-top: 1px solid color-mix(in srgb, #fff 18%, transparent);
  font-size: var(--signco-font-size-min-caption);
  color: color-mix(in srgb, #fff 70%, transparent);
}

/* ── Tablet (≥48rem): multi-column feature & footer grids, hero media back ─── */
@media (min-width: 48rem) {
  .msite-hero__media {
    display: block;
  }
  .msite-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* ── Desktop (≥56rem): inline nav, two-pane layouts on a golden split ─────── */
@media (min-width: 56rem) {
  .msite-nav {
    display: flex;
  }
  .msite-menu-btn {
    display: none;
  }
  .msite-mobile-nav {
    display: none;
  }

  /* Golden-ratio hero split: copy : media = φ : 1 (1.618fr : 1fr) */
  .msite-hero {
    padding-block: var(--signco-space-section);
  }
  .msite-hero__grid {
    grid-template-columns: 1.618fr 1fr;
    gap: var(--signco-space-2xl);
  }

  .msite-how__grid {
    grid-template-columns: 1.618fr 1fr;
    gap: var(--signco-space-2xl);
  }
}

/* ── Waitlist (pre-launch email capture) — two-pane like How it works ─────── */
.msite-waitlist__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--signco-space-xl);
  align-items: center;
}
.msite-waitlist__grid h2 {
  margin-top: var(--signco-space-xs);
}
.msite-waitlist__form {
  display: grid;
  gap: var(--signco-space-md);
}
.msite-waitlist__consent {
  display: grid;
  gap: var(--signco-space-2xs);
}
.msite-waitlist__fineprint {
  display: flex;
  align-items: flex-start;
  gap: var(--signco-space-2xs);
  color: var(--signco-color-text-secondary);
  margin: 0;
}
.msite-waitlist__fineprint .signco-icon {
  flex: none;
  margin-top: 1px;
}
.msite-waitlist__reset {
  display: inline-flex;
  align-items: center;
  gap: var(--signco-space-2xs);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  align-self: start;
}
@media (min-width: 56rem) {
  .msite-waitlist__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--signco-space-2xl);
  }
}

/* ── Beeldprivacy: live one-drop before/after demo ───────────────────────── */
/* Both <image-slot> share id="privacy-foto", so one drop fills both; the
   "after" copy is blurred + stamped to show the anonymisation result. */
.msite-privacy__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.msite-privacy__media image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--signco-radius-md);
}
.msite-privacy__media--blur image-slot {
  filter: blur(11px) saturate(0.92);
}
.msite-privacy__media--blur::after {
  /* keep the blurred edges inside the rounded frame */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--signco-radius-md);
  box-shadow: inset 0 0 0 1px var(--signco-color-border);
  pointer-events: none;
}
.msite-privacy__stamp {
  position: absolute;
  left: var(--signco-space-sm);
  bottom: var(--signco-space-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--signco-space-2xs);
  padding: var(--signco-space-2xs) var(--signco-space-sm);
  border-radius: var(--signco-radius-pill);
  background: var(--signco-color-success);
  color: #fff;
  font-size: var(--signco-font-size-small);
  font-weight: 700;
  white-space: nowrap;
  z-index: 1;
}

/* ── Trust pills → quiet supporting line (subordinate to the single CTA) ──────
   One primary action per screen: the filled "Op de wachtlijst" button must
   dominate the hero. We strip the bordered/filled pill chrome so the three
   reassurance markers read as one muted line under the CTA instead of three
   competing chips. Page-scoped to .msite-trust-row → applies to the hero and
   the waitlist row, never to TrustPill elsewhere in the DS. */
.msite-trust-row {
  margin-top: var(--signco-space-lg);
  gap: var(--signco-space-2xs) var(--signco-space-lg);
}
.msite-trust-row .signco-trust-pill {
  background: transparent;
  border: 0;
  padding-inline: 0;
  color: var(--signco-color-text-secondary);
  font-weight: var(--signco-font-weight-regular);
  font-size: var(--signco-font-size-small);
}
/* The DS renders the pill icon as a bare <svg> (stroke="currentColor"), so it
   already inherits the muted pill color above; we only shrink it to 16px to sit
   quietly beside the regular-weight label. */
.msite-trust-row .signco-trust-pill svg {
  width: 16px;
  height: 16px;
  color: var(--signco-color-text-secondary);
}

/* ── Boot skeleton — shown inside #root until React mounts (no flash, no CLS) ──
   The "last 10%": reserves the first viewport on the hero's exact gradient so
   the swap to the real hero is seamless, instead of a blank #root flash + layout
   shift while the (now pre-compiled) JS parses. The shimmer bar signals loading
   and stops under prefers-reduced-motion (bar stays, just static). */
.msite-boot {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--signco-space-lg);
  padding: var(--signco-space-xl);
  background: linear-gradient(
    180deg,
    var(--signco-color-section-lichtblauw),
    var(--signco-color-surface)
  );
}
.msite-boot__lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--signco-space-sm);
  font-size: 1.25rem;
  font-weight: var(--signco-font-weight-bold);
  color: var(--signco-color-text);
}
.msite-boot__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--signco-radius-md);
  background: var(--signco-color-primary);
  color: #fff;
}
.msite-boot__mark svg {
  width: 24px;
  height: 24px;
}
.msite-boot__co {
  color: var(--signco-color-primary);
}
.msite-boot__bar {
  width: 140px;
  height: 4px;
  flex: none;
  border-radius: var(--signco-radius-pill);
  background: var(--signco-color-border);
  position: relative;
  overflow: hidden;
}
.msite-boot__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--signco-color-primary),
    transparent
  );
  animation: msite-boot-shimmer 1.3s ease-in-out infinite;
}
@keyframes msite-boot-shimmer {
  to {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .msite-boot__bar::after {
    animation: none;
    transform: none;
    opacity: 0.55;
  }
}