/* ==========================================================================
   pages.css — Kai-Signals: page-specific layouts
   Home · Legal · FAQ · HowItWorks · Methodology · Pricing · Conflicts · Risk
   ========================================================================== */

/* ── Shared section rhythm ───────────────────────────────────────────────── */
section { padding-block: var(--space-16); }

@media (max-width: 1023px) { section { padding-block: var(--space-12); } }
@media (max-width: 639px)  { section { padding-block: var(--space-10); } }

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.home-hero {
  background: var(--gradient-brand-linear);
  padding-block: var(--space-16) var(--space-16);
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Wave motif SVG overlay */
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/img/wave-motif.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 120% auto;
  opacity: 0.08;
  pointer-events: none;
}

.home-hero .container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.home-hero h1 {
  color: #fff;
  font-size: var(--text-display-lg-size);
  line-height: var(--text-display-lg-line);
  font-weight: var(--text-display-lg-weight);
  max-width: 760px;
  text-wrap: balance;
}

.home-hero h1 .accent {
  color: var(--color-brand-teal);
  display: inline-block;
  position: relative;
}

.home-hero p {
  color: rgb(255 255 255 / 0.85);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  max-width: 540px;
}

@media (max-width: 1023px) {
  .home-hero h1 { font-size: var(--text-display-md-size); line-height: var(--text-display-md-line); }
}
@media (max-width: 639px) {
  .home-hero h1 { font-size: var(--text-display-sm-size); line-height: var(--text-display-sm-line); }
  .home-hero p  { font-size: var(--text-body-md-size); }
}

/* ── Value props ─────────────────────────────────────────────────────────── */
.home-value-props {
  background-color: var(--surface-page);
  padding-block: var(--space-16);
}

.home-value-props .container { display: flex; flex-direction: column; gap: var(--space-10); }

.home-value-props > .container > h2 {
  text-align: center;
  margin-bottom: var(--space-2);
}

/* ── How it works teaser ─────────────────────────────────────────────────── */
.home-hiw-teaser {
  background-color: var(--surface-raised);
}

.home-hiw-teaser .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.home-hiw-teaser h2 { color: var(--text-primary); }

/* ── Pricing teaser ──────────────────────────────────────────────────────── */
.home-pricing-teaser {
  background: linear-gradient(135deg, var(--color-brand-teal-muted) 0%, var(--surface-page) 100%);
}

[data-theme="dark"] .home-pricing-teaser,
@media (prefers-color-scheme: dark) {
  :not([data-theme="light"]) .home-pricing-teaser {
    background: linear-gradient(135deg, var(--color-brand-teal-dim) 0%, var(--surface-page) 100%);
  }
}

.home-pricing-teaser .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

/* ── FAQ teaser ──────────────────────────────────────────────────────────── */
.home-faq-teaser {
  background-color: var(--surface-page);
}

.home-faq-teaser .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

/* ── Trust strip ─────────────────────────────────────────────────────────── */
.home-trust-strip {
  background-color: var(--surface-raised);
  padding-block: var(--space-8);
  border-top: 1px solid var(--surface-border);
}

.home-trust-strip .container { display: flex; justify-content: center; }

.home-trust-strip nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}

.home-trust-strip nav a {
  font-size: var(--text-body-sm-size);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-btn);
  transition: color var(--duration-fast), background-color var(--duration-fast);
}

.home-trust-strip nav a:hover {
  color: var(--text-brand);
  background-color: var(--color-brand-teal-muted);
}

/* ── Homepage redesign: split hero + marketing sections ────────────────────── */
.home-hero__layout {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
  text-align: left;
  width: 100%;
}
.home-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.home-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label-size);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.85);
  padding: var(--space-1) var(--space-3);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 999px;
}
.home-hero__layout h1 { text-align: left; max-width: none; margin: 0; }
.home-hero__layout p { text-align: left; margin: 0; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.home-hero .btn--secondary { background-color: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.5); color: #fff; }
.home-hero .btn--secondary:hover { background-color: rgb(255 255 255 / 0.2); color: #fff; }
.home-hero__microcopy {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  color: rgb(255 255 255 / 0.8) !important;
  font-size: var(--text-body-sm-size) !important;
  font-weight: 500;
}
.home-hero__media { display: flex; justify-content: center; }
.home-hero__media img { width: 100%; max-width: 520px; height: auto; }

@media (max-width: 1023px) {
  .home-hero__layout { grid-template-columns: 1fr; text-align: center; gap: var(--space-8); }
  .home-hero__content { align-items: center; }
  .home-hero__layout h1, .home-hero__layout p { text-align: center; }
  .home-hero__microcopy { justify-content: center; }
  .home-hero__media { order: -1; }
  .home-hero__media img { max-width: 380px; }
}

/* Generic centred marketing section container used by the homepage */
.home-section .container { display: flex; flex-direction: column; }
.home-section__cards { margin-top: var(--space-4); }

.home-problem { background-color: var(--surface-sunken); }
.home-problem .container { max-width: var(--container-narrow); text-align: center; gap: var(--space-4); }
.home-problem h2 { font-family: var(--font-display); font-size: var(--text-display-sm-size); color: var(--text-primary); text-wrap: balance; }
.home-problem p { color: var(--text-secondary); font-size: var(--text-body-lg-size); }
.home-problem strong { color: var(--text-brand); }

.home-preview .container { max-width: 920px; }

.home-faq-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.home-faq-list details {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background-color: var(--card-bg);
  padding: var(--space-4) var(--space-5);
}
.home-faq-list summary {
  cursor: pointer; font-weight: 600; color: var(--text-primary);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.home-faq-list summary::-webkit-details-marker { display: none; }
.home-faq-list summary::after { content: '+'; color: var(--text-brand); font-size: 1.4em; line-height: 1; }
.home-faq-list details[open] summary::after { content: '\2212'; }
.home-faq-list details p { color: var(--text-secondary); margin-top: var(--space-3); }

/* ── Reusable inner-page hero ──────────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(180deg, var(--color-brand-teal-muted) 0%, var(--surface-page) 100%);
  padding-block: var(--space-16) var(--space-12);
  text-align: center;
}
[data-theme="dark"] .page-hero { background: linear-gradient(180deg, var(--color-brand-teal-dim) 0%, var(--surface-page) 100%); }
.page-hero .container { max-width: var(--container-narrow); display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.page-hero .eyebrow { color: var(--text-brand); }
.page-hero h1 { font-family: var(--font-display); font-size: var(--text-display-md-size); line-height: var(--text-display-md-line); font-weight: 700; color: var(--text-primary); text-wrap: balance; }
.page-hero > .container > p { font-size: var(--text-body-lg-size); color: var(--text-secondary); max-width: 60ch; }
.page-hero__media img { width: 100%; max-width: 460px; height: auto; margin-top: var(--space-4); }
@media (max-width: 639px) { .page-hero h1 { font-size: var(--text-display-sm-size); line-height: var(--text-display-sm-line); } }

/* ══════════════════════════════════════════════════════════════════════════
   PRICING PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.pricing-page {
  padding-block: var(--space-16);
}

.pricing-page .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pricing-page h1 {
  margin-bottom: var(--space-4);
}

.pricing-page > .container > p {
  max-width: 560px;
  font-size: var(--text-body-lg-size);
}

/* ══════════════════════════════════════════════════════════════════════════
   LEGAL PAGES (Terms, Privacy, Cookies, AiTransparency, RegulatoryStatus, Imprint, Complaints)
   ══════════════════════════════════════════════════════════════════════════ */

.legal-page {
  padding-block: var(--space-12);
}

.legal-page .container {
  max-width: var(--container-narrow);
}

.legal-page__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.legal-page__body h1 {
  font-size: var(--text-display-sm-size);
  line-height: var(--text-display-sm-line);
  font-weight: var(--text-display-sm-weight);
  margin-bottom: var(--space-2);
}

.legal-page__body h2 {
  font-size: var(--text-heading-lg-size);
  line-height: var(--text-heading-lg-line);
  font-weight: var(--text-heading-lg-weight);
  font-family: var(--font-body);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.legal-page__body h3 {
  font-size: var(--text-heading-md-size);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.legal-page__body p {
  color: var(--text-secondary);
}

.legal-page__body a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }

/* Legal visual shell: premium readable typography, anchored headings, lists */
.legal-page__body { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); }
.legal-page__body > h1:first-child {
  font-size: var(--text-display-md-size);
  line-height: var(--text-display-md-line);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--surface-border);
}
.legal-page__body h2, .legal-page__body h3 { scroll-margin-top: 88px; }
.legal-page__body ul, .legal-page__body ol {
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--text-secondary);
}
.legal-page__body li { line-height: var(--text-body-lg-line); }
.legal-page__body strong { color: var(--text-primary); }
.legal-page__body hr { border: none; border-top: 1px solid var(--surface-border); margin-block: var(--space-6); }
.legal-page__body blockquote {
  border-left: 3px solid var(--color-brand-teal);
  padding: var(--space-2) var(--space-5);
  color: var(--text-secondary);
  background-color: var(--surface-sunken);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}

/* Markdown tables */
.legal-page__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-md-size);
  color: var(--text-secondary);
}
.legal-page__body thead tr {
  background-color: var(--surface-sunken);
}
.legal-page__body th,
.legal-page__body td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--surface-border);
  text-align: left;
  vertical-align: top;
}
.legal-page__body th {
  font-weight: 600;
  color: var(--text-primary);
}
.legal-page__body tbody tr:nth-child(even) {
  background-color: var(--surface-sunken);
}

/* Cookies page "re-open banner" button */
.legal-page__body button[data-action="open-cookie-banner"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  font-weight: 600;
  color: var(--text-brand);
  background: transparent;
  border: 1px solid var(--color-brand-teal);
  border-radius: var(--radius-btn);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  margin-top: var(--space-4);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}

.legal-page__body button[data-action="open-cookie-banner"]:hover {
  background-color: var(--color-brand-teal-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   FAQ PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.faq {
  padding-block: var(--space-12);
}

.faq .container {
  max-width: var(--container-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.faq h1 {
  margin-bottom: var(--space-2);
}

.faq section {
  padding: 0;
  border-bottom: 1px solid var(--surface-border);
  padding-bottom: var(--space-6);
}

.faq section:last-of-type { border-bottom: none; }

.faq h2 {
  font-size: var(--text-heading-lg-size);
  line-height: var(--text-heading-lg-line);
  font-weight: var(--text-heading-lg-weight);
  font-family: var(--font-body);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  scroll-margin-top: 80px; /* account for sticky header */
}

.faq p { color: var(--text-secondary); }

.faq nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--surface-border);
}

.faq nav a {
  font-size: var(--text-body-sm-size);
  font-weight: 500;
  text-decoration: none;
  color: var(--text-link);
  border: 1px solid var(--color-brand-teal);
  border-radius: var(--radius-btn);
  padding: var(--space-2) var(--space-4);
  transition: background-color var(--duration-fast);
}

.faq nav a:hover { background-color: var(--color-brand-teal-muted); }

/* FAQ accordion (redesign) */
.faq-accordion { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item { border: 1px solid var(--card-border); border-radius: var(--radius-card); background-color: var(--card-bg); overflow: hidden; transition: border-color var(--duration-fast); }
.faq-item[open] { border-color: color-mix(in srgb, var(--color-brand-teal) 45%, var(--card-border)); }
.faq-item > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: '+'; color: var(--text-brand); font-size: 1.5em; line-height: 1; flex-shrink: 0; }
.faq-item[open] > summary::after { content: '\2212'; }
.faq-item__q { font-family: var(--font-body); font-size: var(--text-heading-lg-size); line-height: var(--text-heading-lg-line); font-weight: 600; color: var(--text-primary); margin: 0; scroll-margin-top: 88px; }
.faq-item__a { padding: 0 var(--space-5) var(--space-6); }
.faq-item__a p { color: var(--text-secondary); margin: 0; font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); }
.faq-related { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--surface-border); }
.faq-related a { font-size: var(--text-body-sm-size); font-weight: 600; text-decoration: none; color: var(--text-link); border: 1px solid var(--color-brand-teal); border-radius: var(--radius-btn); padding: var(--space-2) var(--space-4); transition: background-color var(--duration-fast); }
.faq-related a:hover { background-color: var(--color-brand-teal-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.how-it-works {
  padding-block: var(--space-12);
}

.how-it-works .container {
  max-width: var(--container-narrow);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.how-it-works h1 { margin-bottom: var(--space-4); }

.how-it-works section {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.how-it-works h2 {
  font-size: var(--text-heading-lg-size);
  font-family: var(--font-body);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.how-it-works h2::before {
  content: '';
  display: block;
  width: 4px;
  height: 24px;
  background-color: var(--color-brand-teal);
  border-radius: 2px;
  flex-shrink: 0;
}

.how-it-works p { color: var(--text-secondary); }

/* ── How It Works: numbered step badges ─────────────────────────────────── */

.hiw-steps {
  counter-reset: hiw-step;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.hiw-step {
  counter-increment: hiw-step;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
}

.hiw-step > h2::before {
  /* Replace the teal bar with a numbered circle badge */
  content: counter(hiw-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-brand-teal);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-body-sm-size);
  flex-shrink: 0;
  /* Override the bar dimensions */
  width: 2rem;
  height: 2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   METHODOLOGY PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.methodology {
  padding-block: var(--space-12);
}

.layout--sidebar {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 1023px) {
  .layout--sidebar {
    grid-template-columns: 1fr;
  }

  .methodology__sidebar { order: -1; }
}

.methodology__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.methodology__content h1 { margin-bottom: var(--space-2); }
.methodology__content h2 {
  font-size: var(--text-heading-lg-size);
  font-family: var(--font-body);
  color: var(--text-primary);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.methodology__content p, .methodology__content li {
  color: var(--text-secondary);
}

.methodology__lead {
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.methodology__last-updated {
  font-size: var(--text-body-sm-size);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  margin-top: var(--space-2);
}

.methodology__sidebar {
  position: sticky;
  top: calc(64px + var(--space-6));
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--card-shadow);
}

.methodology__sidebar h3 {
  font-size: var(--text-label-size);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.methodology__sidebar ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.methodology__sidebar a {
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  display: block;
  transition: color var(--duration-fast), background-color var(--duration-fast);
}

.methodology__sidebar a:hover,
.methodology__sidebar a.active {
  color: var(--text-brand);
  background-color: var(--color-brand-teal-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   RISK DISCLOSURE PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.risk-disclosure {
  padding-block: var(--space-12);
}

.risk-disclosure .container { max-width: var(--container-narrow); }

.risk-disclosure__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.risk-disclosure__body h1 { margin-bottom: var(--space-2); }

.risk-disclosure__body h2 {
  font-size: var(--text-heading-lg-size);
  font-family: var(--font-body);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.risk-disclosure__body p { color: var(--text-secondary); }

/* ══════════════════════════════════════════════════════════════════════════
   CONFLICTS PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.conflicts {
  padding-block: var(--space-12);
}

.conflicts .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.conflicts h1 { margin-bottom: var(--space-2); }

.conflicts__last-reviewed {
  font-size: var(--text-body-sm-size);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}

.conflicts__empty {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background-color: var(--surface-raised);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  color: var(--text-tertiary);
}

.conflicts__table {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.conflicts__table table {
  font-size: var(--text-body-sm-size);
}

/* ══════════════════════════════════════════════════════════════════════════
   ERROR PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-16) var(--side-padding-desktop);
  min-height: 60vh;
  gap: var(--space-6);
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 700;
  color: var(--color-brand-teal);
  line-height: 1;
}

.error-page h1 {
  font-size: var(--text-display-sm-size);
}

.error-page p { max-width: 480px; }

/* ══════════════════════════════════════════════════════════════════════════
   COMING SOON PAGE
   ══════════════════════════════════════════════════════════════════════════ */

.coming-soon {
  padding-block: var(--space-16);
}

.cs-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  max-width: 640px;
  margin-inline: auto;
}

/* ── Hero headline ────────────────────────────────────────── */

.cs-hero {
  font-family: var(--font-display);
  font-size: var(--text-display-md-size);
  line-height: var(--text-display-md-line);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.cs-hero__accent {
  color: var(--color-brand-teal);
}

/* ── Subheadline ──────────────────────────────────────────── */

.cs-sub {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0;
}

/* ── Waitlist form ────────────────────────────────────────── */

.cs-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 520px;
}

.cs-input {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-body-lg-size);
  font-family: var(--font-body);
  color: var(--input-text);
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--easing-default);
}

.cs-input:focus {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-teal) 15%, transparent);
}

.cs-input::placeholder {
  color: var(--input-placeholder);
}

.cs-btn {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-body-lg-size);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-default),
              transform var(--duration-fast) var(--easing-default);
}

.cs-btn:hover {
  background-color: var(--btn-primary-bg-hover);
}

.cs-btn:active {
  transform: translateY(1px);
}

/* ── Field errors ─────────────────────────────────────────── */

.cs-field-error {
  font-family: var(--font-body);
  font-size: var(--text-body-sm-size);
  color: var(--color-danger);
  margin: 0;
  text-align: left;
}

/* ── Success message ──────────────────────────────────────── */

.cs-success {
  font-family: var(--font-body);
  font-size: var(--text-body-lg-size);
  color: var(--color-success);
  font-weight: 500;
  margin: 0;
}

/* ── Coming soon value props + trust ──────────────────────────── */
.cs-valueprops {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--surface-border);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.cs-valueprops__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  width: 100%;
  text-align: left;
}
.cs-valueprop h2 {
  font-family: var(--font-body);
  font-size: var(--text-heading-md-size);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.cs-valueprop p { color: var(--text-secondary); font-size: var(--text-body-md-size); }
@media (max-width: 767px) { .cs-valueprops__grid { grid-template-columns: 1fr; text-align: center; } }

/* ── Mobile breakpoint (≤ 480px) ──────────────────────────── */

@media (max-width: 480px) {
  .cs-hero {
    font-size: var(--text-display-sm-size);
    line-height: var(--text-display-sm-line);
  }

  .cs-form {
    max-width: 100%;
  }
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cs-input,
  .cs-btn {
    transition: none;
  }
}

/* ── Account auth (login / access-denied / dashboard) ──────── */

.account-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height, 64px) - 120px);
  padding: var(--space-6) var(--space-3);
}

.account-auth__card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-auth__heading {
  font-family: var(--font-display);
  font-size: var(--text-display-sm-size);
  line-height: var(--text-display-sm-line);
  font-weight: 700;
  margin: 0;
  text-align: center;
}

.account-auth__alert {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: var(--text-body-sm-size);
  padding: var(--space-3);
}

.account-auth__alert p { margin: 0; }

.account-auth form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.account-auth form label {
  font-size: var(--text-label-size);
  font-weight: 500;
  color: var(--text-secondary);
}

.account-auth form input[type="email"],
.account-auth form input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  transition: border-color 150ms, box-shadow 150ms;
  box-sizing: border-box;
}

.account-auth form input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-border-focus) 20%, transparent);
}

.account-auth__remember {
  display: flex;
  align-items: center;
}

.account-auth__checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm-size);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.account-auth__submit {
  margin-top: var(--space-1);
}

.account-auth__links {
  text-align: center;
  font-size: var(--text-body-sm-size);
}

.account-auth__links a {
  color: var(--text-link);
  text-decoration: none;
}

.account-auth__links a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

.account-auth__signout {
  margin-top: var(--space-2);
}

/* Premium auth backdrop (CSS-only polish; markup/ids unchanged) */
.account-auth {
  background: linear-gradient(180deg, var(--color-brand-teal-muted) 0%, var(--surface-page) 42%);
}
[data-theme="dark"] .account-auth {
  background: linear-gradient(180deg, var(--color-brand-teal-dim) 0%, var(--surface-page) 42%);
}
.account-auth__card {
  box-shadow: var(--shadow-lg);
  max-width: 460px;
}
.account-auth__consents {
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.account-auth__consents-legend {
  font-size: var(--text-label-size);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: 0 var(--space-2);
}
.account-auth__consent-row { font-size: var(--text-body-sm-size); color: var(--text-secondary); }
.account-auth__consent-row a { color: var(--text-link); }
.auth-form__switch { text-align: center; font-size: var(--text-body-sm-size); color: var(--text-secondary); }
.auth-form__switch a { color: var(--text-link); text-decoration: none; }
.auth-form__switch a:hover { text-decoration: underline; }

/* ── Auth split layout: brand panel + form card ───────────────── */
.account-auth__split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.account-auth__split .account-auth__card {
  box-shadow: none;
  border: none;
  border-radius: 0;
  max-width: none;
  margin: 0;
  width: 100%;
  padding: var(--space-8);
}
.account-auth__brand {
  background: var(--gradient-brand-linear);
  color: #fff;
  padding: var(--space-10);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.account-auth__brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/img/wave-motif.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 130% auto;
  opacity: 0.1;
  pointer-events: none;
}
.account-auth__brand-inner { position: relative; display: flex; flex-direction: column; gap: var(--space-5); }
.account-auth__brand-mark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-heading-md-size); letter-spacing: -0.01em; }
.account-auth__brand-heading { font-family: var(--font-display); font-size: var(--text-display-sm-size); line-height: var(--text-display-sm-line); font-weight: 700; color: #fff; text-wrap: balance; }
.account-auth__brand-points { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; }
.account-auth__brand-points li { display: flex; align-items: flex-start; gap: var(--space-2); color: rgb(255 255 255 / 0.92); font-size: var(--text-body-md-size); }
.account-auth__brand-points svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: #fff; }
.account-auth__brand-fine { color: rgb(255 255 255 / 0.7); font-size: var(--text-body-sm-size); }
.account-auth__brand-links { display: flex; gap: var(--space-4); margin-top: var(--space-1); }
.account-auth__brand-links a { color: #fff; font-weight: 600; font-size: var(--text-body-sm-size); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .account-auth__split { grid-template-columns: 1fr; max-width: 460px; }
  .account-auth__brand { display: none; }
  .account-auth__split .account-auth__card { padding: var(--space-6); }
}

/* ── Contact form ─────────────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--card-shadow);
}
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 639px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form .field label { font-size: var(--text-label-size); font-weight: 500; color: var(--text-secondary); }
.contact-form input:not([type="checkbox"]),
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-input);
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body-md-size);
  box-sizing: border-box;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.contact-form input:not([type="checkbox"]):focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-border-focus) 20%, transparent);
}
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .field--error input:not([type="checkbox"]),
.contact-form .field--error textarea,
.contact-form .field--error select { border-color: var(--color-danger); }
.contact-form__consent .account-auth__checkbox-label { align-items: flex-start; white-space: normal; gap: var(--space-3); }
.contact-form__consent a { color: var(--text-link); }
.contact-form button[type="submit"] { align-self: flex-start; }
.contact-form__hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.contact-form__success {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
  border-radius: var(--radius-card);
  color: var(--text-primary);
}
.contact-form__success svg { width: 28px; height: 28px; color: var(--color-success); flex-shrink: 0; }
.contact-form__success p { margin: 0; }

/* ── Error page polish ────────────────────────────────────────── */
.error-page__icon { width: 64px; height: 64px; color: var(--color-brand-teal); }
.error-page__reqid { font-size: var(--text-body-sm-size); color: var(--text-tertiary); }
.error-page__reqid code { font-family: var(--font-mono); }