/* GENERATED FILE - do not edit by hand.
   Sources: docs/source-materials/design-system-2026-08-28/tokens/*.css + src/landing/landing.css
   Generator: scripts/build_landing.py */

/* ---- tokens/colors.css ---- */
/* ── Tanya L / Neurocoach — colour system ──────────────────────────────────
   Base palette is taken verbatim from the brand book (slide 8, "Основная палитра").
   Every base colour is allowed to be a full-bleed background.
   The champagne/sand ink is sampled from the logo artwork (Frame 38).          */
:root {
  /* Base — brand */
  --green-900: #0A1712;  /* deepest, for shadows & overlays */
  --green-800: #0E231C;  /* ✦ Тёмно-зелёный — primary brand colour */
  --green-700: #14332A;  /* raised surface on dark */
  --green-600: #1A4B3B;  /* ✦ logo ink green */
  --green-500: #2E6A55;  /* interactive green on light */
  --green-300: #7FA697;  /* muted green, dividers on light */
  --green-100: #D3E0D9;  /* faint green wash */

  --sand-500: #C9B08C;   /* deepest champagne, for rules on dark */
  --sand-400: #D9C4A6;
  --sand-300: #EFE0CC;   /* ✦ logo champagne — the accent ink on dark */
  --sand-200: #F4EADC;

  --beige-500: #D8D1C6;  /* beige, shaded */
  --beige-400: #E8E3DB;  /* ✦ Бежевый — secondary background */
  --ivory-400: #FBF6ED;  /* ✦ Слоновая кость — lightest background */
  --white: #FFFFFF;
  --black: #000000;

  /* Base — neutrals (green-tinted, never pure grey) */
  --ink-900: #0E231C;
  --ink-700: #2C3E37;
  --ink-500: #55655E;
  --ink-300: #8B9992;
  --ink-100: #C4CCC8;

  /* Semantic — surfaces */
  --surface-page: var(--ivory-400);
  --surface-page-alt: var(--beige-400);
  --surface-inverse: var(--green-800);
  --surface-inverse-raised: var(--green-700);
  --surface-card: var(--white);
  --surface-card-quiet: var(--beige-400);
  --surface-card-inverse: var(--green-700);
  --surface-overlay: rgba(10, 23, 18, 0.60);
  --surface-glass: rgba(251, 246, 237, 0.72);
  --surface-glass-inverse: rgba(14, 35, 28, 0.62);

  /* Semantic — text */
  --text-strong: var(--green-800);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-300);
  --text-on-inverse: var(--ivory-400);
  --text-on-inverse-muted: rgba(251, 246, 237, 0.66);
  --text-accent: var(--sand-500);
  --text-accent-on-inverse: var(--sand-300);
  --text-link: var(--green-600);
  --text-link-hover: var(--green-800);

  /* Semantic — lines */
  --line-hairline: rgba(14, 35, 28, 0.12);
  --line-soft: rgba(14, 35, 28, 0.18);
  --line-strong: rgba(14, 35, 28, 0.38);
  --line-on-inverse: rgba(239, 224, 204, 0.20);
  --line-on-inverse-strong: rgba(239, 224, 204, 0.42);

  /* Semantic — actions */
  --action-primary-bg: var(--green-800);
  --action-primary-bg-hover: var(--green-600);
  --action-primary-text: var(--ivory-400);
  --action-secondary-border: var(--line-strong);
  --action-secondary-text: var(--green-800);
  --action-accent-bg: var(--sand-300);
  --action-accent-text: var(--green-800);
  --action-disabled-bg: var(--beige-500);
  --action-disabled-text: var(--ink-300);
  --focus-ring: rgba(46, 106, 85, 0.45);

  /* Semantic — status (used sparingly; the brand book defines none,
     so these are derived from the palette rather than invented hues) */
  --status-success: var(--green-500);
  --status-notice: #A8792F;
  --status-error: #8C3A2E;
  --status-info: var(--green-600);
}

/* ---- tokens/typography.css ---- */
/* ── Typography ────────────────────────────────────────────────────────────
   Tenor Sans = display/accent (headlines, the wordmark voice, numerals in
   editorial numbering). Manrope = everything functional.
   Display type is always tracked OUT, never tightened — the wordmark
   "TANYA L" is widely spaced and the type system echoes it.                  */
:root {
  --font-display: "Tenor Sans", "Times New Roman", serif;
  --font-core: "Manrope", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights — Manrope only; Tenor Sans is single-weight by design */
  --weight-extralight: 200; /* @kind font */
  --weight-light: 300; /* @kind font */
  --weight-regular: 400; /* @kind font */
  --weight-medium: 500; /* @kind font */
  --weight-semibold: 600; /* @kind font */
  --weight-bold: 700; /* @kind font */

  /* Sizes — a 1.25 major-third scale, rounded to whole px */
  --size-3xs: 11px;
  --size-2xs: 12px;
  --size-xs: 13px;
  --size-sm: 15px;
  --size-md: 17px;
  --size-lg: 20px;
  --size-xl: 24px;
  --size-2xl: 30px;
  --size-3xl: 38px;
  --size-4xl: 48px;
  --size-5xl: 62px;
  --size-6xl: 80px;
  --size-7xl: 104px;

  --leading-tight: 1.06; /* @kind font */
  --leading-snug: 1.18; /* @kind font */
  --leading-normal: 1.4; /* @kind font */
  --leading-relaxed: 1.62; /* @kind font */
  --leading-loose: 1.8; /* @kind font */

  --tracking-display: 0.02em; /* @kind font */   /* Tenor Sans headlines */
  --tracking-wordmark: 0.14em; /* @kind font */  /* TANYA L lockup, nav brand */
  --tracking-eyebrow: 0.22em; /* @kind font */   /* uppercase micro-labels */
  --tracking-normal: 0; /* @kind font */
  --tracking-body: 0.005em; /* @kind font */

  /* Semantic roles */
  --text-hero-font: var(--font-display);
  --text-hero-size: clamp(42px, 6.2vw, var(--size-7xl));
  --text-hero-leading: var(--leading-tight);

  --text-display-size: clamp(34px, 4.4vw, var(--size-5xl));
  --text-title-size: clamp(26px, 2.6vw, var(--size-3xl));
  --text-heading-size: var(--size-2xl);
  --text-subheading-size: var(--size-xl);
  --text-lead-size: clamp(17px, 1.35vw, var(--size-lg));
  --text-body-size: var(--size-md);
  --text-small-size: var(--size-sm);
  --text-caption-size: var(--size-xs);
  --text-eyebrow-size: var(--size-2xs);
}

/* ---- tokens/spacing.css ---- */
/* ── Spacing ───────────────────────────────────────────────────────────────
   4px base. Premium/VIP layouts breathe: section rhythm starts at 96px and
   the page gutter never goes below 24px on mobile.                           */
:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* Semantic */
  --gutter-mobile: var(--space-6);
  --gutter-desktop: var(--space-12);
  --section-y: clamp(var(--space-20), 9vw, var(--space-40));
  --section-y-tight: clamp(var(--space-16), 6vw, var(--space-24));
  --stack-tight: var(--space-3);
  --stack: var(--space-6);
  --stack-loose: var(--space-10);
  --card-padding: var(--space-8);
  --card-padding-lg: var(--space-12);

  /* Measures */
  --measure-narrow: 46ch; /* @kind spacing */
  --measure: 62ch; /* @kind spacing */
  --measure-wide: 76ch; /* @kind spacing */
  --container: 1240px; /* @kind spacing */
  --container-narrow: 880px; /* @kind spacing */
  --container-wide: 1440px; /* @kind spacing */
}

/* ---- tokens/radius.css ---- */
/* ── Radius ────────────────────────────────────────────────────────────────
   The brand's own artefacts (business cards, brand-book slides) use soft
   rectangles, not pills — except for buttons and tags, which are fully
   rounded to echo the ellipses in the mark.                                  */
:root {
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --radius-card: var(--radius-lg);
  --radius-card-lg: var(--radius-xl);
  --radius-button: var(--radius-pill);
  --radius-input: var(--radius-md);
  --radius-image: var(--radius-lg);
  --radius-media-hero: var(--radius-2xl);
}

/* ---- tokens/elevation.css ---- */
/* ── Elevation & effects ───────────────────────────────────────────────────
   Shadows are green-tinted and very low-contrast: this is a calm brand, so
   depth reads as air, not as a drop shadow. Never use black shadows.        */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(14, 35, 28, 0.05);
  --shadow-sm: 0 2px 8px rgba(14, 35, 28, 0.06);
  --shadow-md: 0 8px 28px rgba(14, 35, 28, 0.08);
  --shadow-lg: 0 22px 60px rgba(14, 35, 28, 0.10);
  --shadow-xl: 0 40px 110px rgba(14, 35, 28, 0.14);
  --shadow-inset-hairline: inset 0 0 0 1px var(--line-hairline);
  --shadow-inset-on-inverse: inset 0 0 0 1px var(--line-on-inverse);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  --blur-glass: 18px; /* @kind other */
  --blur-glass-strong: 30px; /* @kind other */

  /* Protection gradients — laid over photography so type stays legible */
  --scrim-bottom: linear-gradient(to top, rgba(10, 23, 18, 0.72) 0%, rgba(10, 23, 18, 0.28) 45%, rgba(10, 23, 18, 0) 100%); /* @kind other */
  --scrim-top: linear-gradient(to bottom, rgba(10, 23, 18, 0.55) 0%, rgba(10, 23, 18, 0) 70%); /* @kind other */
  --scrim-side: linear-gradient(to right, rgba(10, 23, 18, 0.70) 0%, rgba(10, 23, 18, 0) 62%); /* @kind other */

  /* Halo — the one decorative gradient the brand owns, taken from the
     backlit circle behind the spinning top in the brand imagery */
  --halo-warm: radial-gradient(circle at 50% 45%, rgba(239, 224, 204, 0.55) 0%, rgba(239, 224, 204, 0.14) 38%, rgba(239, 224, 204, 0) 68%); /* @kind other */
  --halo-on-dark: radial-gradient(circle at 50% 40%, rgba(239, 224, 204, 0.16) 0%, rgba(239, 224, 204, 0.04) 42%, rgba(239, 224, 204, 0) 70%); /* @kind other */
}

/* ---- tokens/motion.css ---- */
/* ── Motion ────────────────────────────────────────────────────────────────
   Nothing bounces. The metaphor is a spinning top holding balance: motion is
   continuous, gentle, and self-correcting. Fades and small lifts only.       */
:root {
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.30, 1); /* @kind other */
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-linear: linear; /* @kind other */

  --duration-instant: 80ms; /* @kind other */
  --duration-fast: 160ms; /* @kind other */
  --duration-base: 260ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
  --duration-reveal: 720ms; /* @kind other */
  --duration-ambient: 24s; /* @kind other */   /* slow rotation of ambient halo/ripples */

  --transition-control: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); /* @kind other */
  --transition-surface: transform var(--duration-base) var(--ease-out-soft), box-shadow var(--duration-base) var(--ease-out-soft); /* @kind other */

  --lift-hover: translateY(-2px); /* @kind other */
  --press-scale: scale(0.985); /* @kind other */
}

/* ---- tokens/base.css ---- */
/* ── Base ──────────────────────────────────────────────────────────────────
   Minimal element defaults so any page linking styles.css already feels
   like the brand. No component classes live here.                            */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-core);
  font-size: var(--text-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--text-strong);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-display-size); line-height: var(--leading-tight); }
h2 { font-size: var(--text-title-size); }
h3 { font-size: var(--text-heading-size); }
h4 { font-size: var(--text-subheading-size); }
h5, h6 {
  font-family: var(--font-core);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
p { margin: 0; text-wrap: pretty; }
a {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  transition: var(--transition-control);
}
a:hover { color: var(--text-link-hover); border-bottom-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}
img, svg { display: block; max-width: 100%; }
hr { border: none; border-top: 1px solid var(--line-hairline); margin: 0; }
::selection { background: var(--sand-300); color: var(--green-800); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---- src/landing/landing.css ---- */
/* ── Landing page layer ───────────────────────────────────────────────────
   Appended after the design-system tokens by scripts/build_landing.py.
   Two jobs only:
     1. vendored @font-face rules — the kit imports Google Fonts; this site makes
        no external requests (the same rule the questionnaires live by);
     2. a responsive layer for the kit's inline desktop grids (see the
        className hooks in src/landing/Sections.jsx). Colours, type, spacing
        and radii stay the design system's.                                   */

/* Manrope v20 variable (200–800), vendored from Google Fonts; unicode-ranges
   copied verbatim from the css2 response so subsetting is unchanged. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-var-v20-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-var-v20-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-var-v20-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Tenor Sans v21 — the same files the questionnaires use. */
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tenor-sans-v21-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tenor-sans-v21-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/tenor-sans-v21-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Page — the window scrolls (the design-canvas preview scrolled an inner div). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { overflow-x: hidden; } /* the halo blooms bleed past their frames on purpose */
#root { min-height: 100vh; }

/* Responsive layer. The kit is desktop-first with inline grids; below the
   container's comfortable width every two-column split stacks and the gutter
   drops to the mobile token. `!important` is the only way to beat an inline
   style. */
@media (max-width: 880px) {
  :root { --gutter-desktop: var(--gutter-mobile); }
  .l-cols, .l-cols-3 { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-10) !important; }
  .l-nowrap { white-space: normal !important; }
  .l-hero { min-height: 0 !important; padding-top: 128px !important; padding-bottom: var(--space-16) !important; }
  /* Nav: keep the brand and primary action compact on phones. */
  header nav { gap: var(--space-4) !important; }
  header nav > a { display: none; }
}
@media (max-width: 480px) {
  header { padding-left: var(--gutter-mobile) !important; padding-right: var(--gutter-mobile) !important; gap: var(--space-4) !important; }
  /* Phone: the bar keeps brand + action; the hero CTA is one screen below. */
  header nav > button { display: none !important; } /* the Button sets display inline */
  header nav { gap: var(--space-3) !important; }
  header > a > span > span { font-size: 15px !important; } /* the wordmark, one step down */
}