/* Base styles: reset, typography, layout primitives, buttons, forms.
   Values come from css/tokens.css (brandbook-derived) — see
   docs/brand-system.md. Mobile-first: base rules target the smallest
   viewport; enhancements for wider screens live in responsive.css. */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.6;
  font-size: var(--text-body-size);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-text);
}

/* ---------- Typography scale (brand-system.md §2) ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  font-weight: 400;
}

h1, .h1 {
  font-weight: 300;
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
}

h2, .h2 {
  font-weight: 400;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  margin-top: calc(var(--text-h2-line) * 1.5);
}

h3, .h3 {
  font-weight: 500;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  letter-spacing: var(--text-h3-tracking);
}

.overline {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-overline-size);
  line-height: var(--text-overline-line);
  letter-spacing: var(--text-overline-tracking);
  color: var(--color-olive);
  margin: 0 0 var(--space-1);
}

.on-dark .overline,
[data-surface="dark"] .overline {
  color: var(--color-gold);
}

.lead {
  font-weight: 300;
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-line);
  max-width: 60ch;
}

p {
  margin: 0 0 var(--space-2);
  max-width: 75ch;
}

small, .caption {
  display: block;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  letter-spacing: var(--text-caption-tracking);
  color: var(--color-olive);
}

ul, ol {
  padding-left: 1.2em;
}

/* ---------- Layout ---------- */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding-mobile);
}

.section {
  padding: var(--section-spacing-mobile) 0;
}

.section__lead {
  color: var(--color-text-muted);
  max-width: 60ch;
}

.page-sections {
  display: flex;
  flex-direction: column;
}

/* ---------- Buttons ----------
   Brand rule: 48px height, straight corners everywhere, hover = darken
   8%, active = darken 14%, focus = 2px gold outline with 2px offset
   (mandatory), no scale/bounce animation (brand-system.md §4). */

.btn-primary,
.btn-secondary,
.btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--button-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: none;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-button-size);
  letter-spacing: var(--text-button-tracking);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-default), border-color var(--transition-default), color var(--transition-default);
}

.btn-primary {
  background: var(--color-gold);
  color: #fff;
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--color-gold) 92%, black);
}

.btn-primary:active {
  background: color-mix(in srgb, var(--color-gold) 86%, black);
}

.btn-primary[disabled] {
  background: var(--color-sand);
  color: var(--color-olive);
  cursor: not-allowed;
}

.btn-secondary {
  border-color: currentColor;
  color: inherit;
}

.btn-secondary:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.btn-secondary:active {
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.btn-text {
  min-height: auto;
  padding: 0;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-text:hover {
  color: var(--color-olive);
}

/* Mandatory visible focus state (brandbook p.25) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Mobile: full-width buttons (brandbook p.25 "mobile: buttons full width") */
@media (max-width: 639px) {
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }

  /* Card CTAs sit in a row (text link + secondary button); on mobile the
     full-width secondary button needs its own line, with the lighter
     text link below it rather than squeezed alongside. */
  .project-card__ctas .btn-secondary {
    order: -1;
    flex-basis: 100%;
  }
}

.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.checklist .icon {
  flex: none;
  margin-top: 3px;
  color: var(--color-gold);
}

.steps {
  display: grid;
  gap: var(--space-2);
  padding-left: 1.4em;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 10;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: var(--space-2);
}

/* The two official VEYRA ESTATE marks, taken verbatim from the brand
   pack: images/brand/veyra-lockup-gold.svg (stacked monogram over
   wordmark, ratio ~1.35:1) and images/brand/veyra-monogram-gold.svg
   (ratio ~1.41:1). Neither is recoloured, stretched, framed or shadowed
   — the files are already the brand gold and `height: auto` holds the
   ratio.

   Which one shows is decided in components.css, per breakpoint and
   scroll state. Both are in the DOM at all times so the swap costs no
   request and cannot flash. */
.site-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.site-logo img {
  display: block;
  height: auto;
}

/* 140px is the brandbook minimum for the full lockup. */
.site-logo__lockup { width: 140px; }

.site-logo__monogram { width: 44px; }

/* Only the funnel page carries both marks; every other page still has a
   single <img class="site-logo__lockup">, so the default is the lockup
   alone. */
.site-logo__monogram { display: none; }

/* Compact header CTA ("Связаться"). Scrolls to the quiz today; the
   click target/behavior can later become a real contact channel
   (WhatsApp, call widget, ...) without changing this markup — see
   js/app.js. Overrides the generic mobile full-width button rule: the
   header needs it to stay compact next to the logo. */
.site-header .btn-secondary {
  width: auto;
  min-height: 44px;
  padding: 0 var(--space-2);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-graphite);
  color: var(--color-sand);
  padding: var(--space-4) 0 var(--space-3);
}

.site-footer__disclaimer {
  max-width: 70ch;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--color-sand);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.site-footer__legal a {
  color: var(--color-ivory);
  font-size: var(--text-caption-size);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__copy {
  font-size: var(--text-caption-size);
  color: var(--color-olive);
  margin: 0;
}

/* Explicit, separate choices for application processing and advertising. */
.consent-fields{border:0;padding:0;margin:20px 0;min-width:0;font-size:14px;line-height:1.5;grid-column:1/-1}
.consent-fields legend{font-weight:600;margin-bottom:10px}
.consent-fields__row{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;cursor:pointer}
.consent-fields__row input[type=checkbox]{appearance:auto;flex:0 0 20px;width:20px;height:20px;min-width:20px;margin:2px 0 0;accent-color:#285c48}
.consent-fields__row span{min-width:0;overflow-wrap:anywhere}
.consent-fields a{text-decoration:underline;text-underline-offset:3px}
.consent-fields :focus-visible{outline:3px solid #aa7a28;outline-offset:3px}