/* =========================================================
   static-pages.css — layout for the crawler-readable pages

   Used by /info, /faq, their /en counterparts and /404.html. Those pages are
   plain HTML: no React, no Babel, no JavaScript at all, so a bot that does not
   execute scripts still gets the full text. The React app never loads them.

   Everything here builds on the tokens in main.css — load main.css first.
   Never hardcode a colour, a font or a type size; if you need a new value,
   add a token there instead.
   ========================================================= */

/* ---------- Header ---------- */
.sp-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  padding-top: calc(var(--sp-4) + env(safe-area-inset-top));
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.sp-nav__logo { display: block; margin-right: var(--sp-4); }
.sp-nav__logo img { display: block; height: 34px; width: auto; }
.sp-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
  flex: 1;
}
.sp-nav a {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-fg-soft);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
}
.sp-nav a:hover { color: var(--tq-600); background: var(--color-primary-tint); }
.sp-nav__lang {
  border: 1.5px solid var(--tq-300);
  border-radius: var(--radius-md) !important;
  color: var(--tq-600) !important;
  letter-spacing: 0.05em !important;
}

/* ---------- Page body ---------- */
.sp-main {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-5) var(--sp-16);
}

/* A text page does not need the full editorial display scale — one step down
   from the hero sizes keeps long prose readable without leaving the tokens. */
.sp-main h1 {
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-tracking);
  margin-bottom: var(--sp-5);
}
.sp-main h2 {
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-tracking);
  margin-bottom: var(--sp-4);
}
.sp-main h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: var(--sp-2);
}
.sp-main p { margin-bottom: var(--sp-4); }
.sp-main p:last-child { margin-bottom: 0; }
.sp-main .lead { margin-bottom: var(--sp-8); display: block; }
.sp-main .eyebrow { display: block; margin-bottom: var(--sp-3); }

.sp-section {
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--sp-10);
  margin-top: var(--sp-10);
}

.sp-main ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.sp-main li {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--color-fg-soft);
  margin-bottom: var(--sp-2);
}

/* ---------- Fact list (label / value pairs) ---------- */
.sp-facts {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
}
.sp-facts dt { color: var(--color-fg-muted); }
.sp-facts dd { margin: 0; color: var(--color-fg-soft); }

/* ---------- Price table ---------- */
.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  margin-bottom: var(--sp-4);
}
.sp-table th,
.sp-table td {
  text-align: left;
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-fg-soft);
}
.sp-table th {
  font-weight: 500;
  color: var(--color-fg-muted);
  font-size: var(--caption-size);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.sp-table td:last-child { text-align: right; white-space: nowrap; color: var(--color-fg); }

/* ---------- Q&A ---------- */
.sp-qa { margin-top: var(--sp-8); }
.sp-qa:first-of-type { margin-top: 0; }
.sp-qa h2 { margin-bottom: var(--sp-3); }

/* ---------- Call to action ---------- */
.sp-cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  background: var(--color-primary);
  color: var(--neu-0);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-md);
}
.sp-cta:hover { background: var(--color-primary-hover); color: var(--neu-0); }

/* ---------- Footer ---------- */
.sp-footer {
  background: var(--text-primary);
  color: var(--neu-200);
  padding: var(--sp-12) var(--sp-5) calc(var(--sp-8) + env(safe-area-inset-bottom));
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
}
.sp-footer__inner {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}
.sp-footer h2 {
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tq-300);
  margin-bottom: var(--sp-3);
}
.sp-footer a { display: block; color: var(--neu-200); padding: 2px 0; }
.sp-footer a:hover { color: var(--neu-0); }
.sp-footer address { font-style: normal; color: var(--neu-200); }
.sp-footer__meta {
  max-width: 760px;
  margin: var(--sp-8) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--neu-400);
  font-size: var(--caption-size);
  color: var(--neu-300);
}
.sp-footer__meta a { display: inline; }

@media (max-width: 639px) {
  .sp-facts { grid-template-columns: 1fr; gap: 0 0; }
  .sp-facts dt { margin-top: var(--sp-3); font-size: var(--caption-size); }
  .sp-footer__inner { grid-template-columns: 1fr; gap: var(--sp-6); }

  /* On a phone the links would wrap to one line each and push the page down.
     Two rows instead: logo + language on top, the links as a single
     horizontally scrollable row underneath. */
  .sp-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }
  .sp-nav__logo { margin-right: 0; grid-row: 1; grid-column: 1; }
  .sp-nav__lang { grid-row: 1; grid-column: 2; justify-self: end; }
  .sp-nav__links {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--sp-4));
    padding: 0 var(--sp-4);
  }
  .sp-nav__links::-webkit-scrollbar { display: none; }
  .sp-nav__links a { white-space: nowrap; padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .sp-nav__links a:first-child { padding-left: 0; }
}