@font-face {
  font-family: Manrope;
  src: url('/landing/fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/landing/fonts/Manrope-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('/landing/fonts/Manrope-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #39233d;
  --ink-soft: #725f69;
  --surface: #fff8f8;
  --surface-soft: #fff8f8;
  --line: #fee2e2;
  --coral: #f43f5e;
  --coral-deep: #be123c;
  --dark: #39233d;
  --shadow-soft: 0 18px 38px #39233d14;
  --container: 1320px;
}

body {
  background: linear-gradient(160deg, #feeef0 0%, #fff8f8 44%, #fef9f6 74%, #fef0df 100%);
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
}

.container { width: min(var(--container), calc(100% - 96px)); }
.topbar { padding: 22px 0; }
.brand-logo { width: 148px; }
.top-link { border-color: var(--ink); background: transparent; color: var(--ink); box-shadow: none; }
.top-link:hover { background: var(--ink); color: #fff8f8; }
.hero, .legal-hero { border: 0; background: #feeef0; padding-block: 62px; }
.hero h1, .legal-hero h1 { max-width: 920px; font-size: clamp(44px, 5vw, 68px); line-height: 1.06; letter-spacing: -.055em; }
.hero p { color: var(--ink-soft); }
.content { margin-inline: auto; }
.panel, .legal-doc { border-color: var(--line); border-radius: 26px; background: #fff8f8; box-shadow: 0 16px 40px #39233d12; }
.question + .question, .legal-doc section + section { border-color: var(--line); }
.assistance { background: #fff1f2; }
.footer, .legal-footer { background: transparent; color: var(--ink-soft); }
.footer a, .legal-footer a { color: var(--ink-soft); }
.legal-footer .brand { padding: 0; background: transparent; }
a:focus-visible { outline: 3px solid var(--coral-deep); outline-offset: 4px; }

@media (max-width: 1060px) {
  .container { width: min(var(--container), calc(100% - 60px)); }
}

@media (max-width: 760px) {
  .container { width: min(620px, calc(100% - 38px)); margin-inline: auto; }
  .topbar { flex-direction: row; align-items: center; }
  .hero, .legal-hero { padding-block: 45px; }
}

@media (max-width: 420px) {
  .topbar { gap: 10px; }
  .brand-logo { width: 125px; }
  .top-link { padding-inline: 12px; font-size: 12px; }
}