/* base.css: self-hosted fonts, reset, grounds, container, CTA, focus.
   Numbers come from Paper reads: hero CTA 2ZQ-0/2ZR-0, closing CTA 264-0/265-0,
   hero sub 2ZS-0 (get_computed_styles). Fallback font metrics were computed from
   the shipped font files (Liberation = Arial/Courier New metric twins). Inter's
   size-adjust is fitted on Chrome's rendered width of the page copy at 18px
   (kerning + optical size applied): Inter / Arial = 104.85%. */

/* 1. Fonts: latin subset, variable Inter (wght + opsz). IBM Plex Mono was
   dropped on 2026-10-24 (no mono text on the page any more). */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-standard-normal.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;
}
@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  /* The page sets one word in italic (hero h1, 800 at 36–52px): a static
     instance (wght 800, opsz 32) subset to Basic Latin + curly quotes,
     cut from the fontsource variable file with harfbuzz (subset-font). */
  src: url("../fonts/inter-italic-800-basic.woff2") format("woff2");
  unicode-range: U+0020-007E, U+2018-2019, U+201C-201D;
}

/* «Inter Slant» (2026-10-24): the upright variable file under a second
   family name with no italic face, so font-style: italic yields a
   synthesized oblique at any weight (the family Inter itself would pick its
   only true italic, the 800 instance). Same file, no extra request. Used for
   «rejection» in the hero title: light 400 italic inside the 800 line. */
@font-face {
  font-family: "Inter Slant";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-standard-normal.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;
}

/* Metric-matched fallbacks: the same average glyph width and line box as the
   web font, so the swap does not shift layout. Inter metrics: OS/2 typo (USE_TYPO_METRICS). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 104.85%;
  ascent-override: 92.39%;
  descent-override: 23.01%;
  line-gap-override: 0%;
}

/* 2. Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body,
h1, h2, h3, h4,
p, figure, blockquote,
ol, ul, dl, dd {
  margin: 0;
}
ol, ul {
  padding: 0;
}
img, svg, picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
button, input, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
a {
  color: inherit;
}
a, button, input, textarea, label, summary {
  touch-action: manipulation;
}
a, button, summary {
  -webkit-tap-highlight-color: transparent;
}
em {
  font-style: italic;
}

/* 3. Page: night outside, cream text (surface). --leading-body (145%) is used
   on elements as-is; the body default is its unitless twin so children inherit
   a ratio, not a frozen pixel value. */
html {
  background: var(--color-night);
  color-scheme: dark;
}
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.45;
  color: var(--color-surface);
  background: var(--color-night);
  font-optical-sizing: auto;
  overflow-wrap: break-word;
}

/* 4. Grounds */
.ground-night {
  background: var(--color-night);
  color: var(--color-surface);
}
.ground-paper {
  background: var(--color-paper);
  color: var(--color-ink);
  color-scheme: light;
}

/* 5. Container. Mobile composition below 1024px (column up to 640px, gutters
   20px, 32px from 768px); desktop composition from 1024px (1200px lane, gutters
   40px). At 1440 the lane is 1200 with 120px margins, as on the canvas. */
:root {
  --gutter: 20px;
  --lane: 640px;
}
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}
@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    /* 2026-10-24, human: one content edge for the whole page. The hero text
       starts 48px outside the 1200 lane (x 72 at 1440); the lane is widened
       to 1296 so every lane-pad section starts on the same line at every
       width: (W - 1296) / 2 = (W - 1200) / 2 - 48, the hero's own formula. */
    --lane: 1296px;
  }
}
.container {
  box-sizing: content-box;
  max-width: var(--lane);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 6. CTA «Book a call»: one component for hero, closing and final (2026-10-23,
   variant D + narrow form). Hover: 10% darker (HANDOFF §7). */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 20px; /* 2026-10-24: narrow form (N3, human's choice), the label breathes 20 each side */
  font-family: var(--font-sans);
  font-size: var(--text-cta);
  font-weight: var(--font-weight-semibold);
  line-height: 22px;
  letter-spacing: normal;
  color: var(--color-surface); /* 2026-10-23, variant D: cream on deep ground, 3.34:1 (human's decision; white 2.93:1 before) */
  background: var(--color-ground-deep);
  border-radius: 0; /* 2026-10-24, human: square corners on every button, like «Request the file» on the band (the 2px --radius-sharp token is unused) */
  text-decoration: none;
  white-space: nowrap;
}
.cta:hover,
.cta:active {
  background: color-mix(in oklab, var(--color-ground-deep) 90%, #000000);
}

/* 7. Focus: 2px ring, ground on night, ink on paper (HANDOFF §7). */
:focus-visible {
  outline: 2px solid var(--color-ground);
  outline-offset: 3px;
}
.ground-paper :focus-visible {
  outline-color: var(--color-ink);
}

/* 7b. Wide screens: the desktop canvas is 1440 wide; above that the whole
   composition scales with the viewport (like the artboard fitted to the
   window, at 0.917 of the full fit: 1.1 at 1728). zoom scales layout, unlike
   transform; media queries keep using the real viewport width. Two layers:
   a stepped ladder of literal values that every Chromium/WebKit understands
   (old browsers ignore calc() inside zoom), then the continuous formula
   where calc() in zoom and tan(atan2()) are supported. Viewport units are
   scaled by zoom as well, so the hero uses 100svh / --zoom. */
:root {
  --zoom: 1;
}
@media (min-width: 1440px) { :root { --zoom: 1; }    body { zoom: 1; } }
@media (min-width: 1580px) { :root { --zoom: 1.01; } body { zoom: 1.01; } }
@media (min-width: 1660px) { :root { --zoom: 1.06; } body { zoom: 1.06; } }
@media (min-width: 1728px) { :root { --zoom: 1.1; }  body { zoom: 1.1; } }
@media (min-width: 1820px) { :root { --zoom: 1.16; } body { zoom: 1.16; } }
@media (min-width: 1920px) { :root { --zoom: 1.22; } body { zoom: 1.22; } }
@media (min-width: 2100px) { :root { --zoom: 1.34; } body { zoom: 1.34; } }
@media (min-width: 2300px) { :root { --zoom: 1.46; } body { zoom: 1.46; } }
@media (min-width: 2560px) { :root { --zoom: 1.63; } body { zoom: 1.63; } }
@media (min-width: 2830px) { :root { --zoom: 1.8; }  body { zoom: 1.8; } }
@supports (zoom: calc(1 * 1)) and (width: calc(tan(atan2(1px, 1px)) * 1px)) {
  @media (min-width: 1440px) {
    :root {
      --zoom: clamp(1, 0.917 * tan(atan2(100vw, 1440px)), 1.8);
    }
    body {
      zoom: var(--zoom);
    }
  }
}

/* 8. Shared component: ruled display sheet (B2 statement, S2 closing, S4 final).
   Each line box equals a canvas row plus its 1px rule (1 + 16 + 36 + 16 = 69
   mobile; 1 + 24 + 76 + 24 = 125 desktop), so a repeating 1px gradient draws
   the rule above every line and padding-bottom: 1px leaves room for the
   closing rule. Inter 500, 34/36 mobile, 72/105% desktop, tracking -0.02em;
   rules 1px surface at 25%. */
.ruled {
  --rule: color-mix(in srgb, var(--color-surface) 25%, transparent);
  padding-bottom: 1px;
  font-size: 34px;
  font-weight: var(--font-weight-medium);
  line-height: 69px;
  letter-spacing: var(--tracking-tight);
  background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 69px);
}
@media (min-width: 1024px) {
  .ruled {
    font-size: var(--text-display-xl);
    line-height: 125px;
    background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px 125px);
  }
}

/* 8b. Shared component: signature row under a ruled display (S2 closing 262-0,
   S4 final 25E-0): sub + compact CTA. Stacked with gap 24 on mobile (3CJ-0);
   a row with the CTA on the right and bottoms level from 1024px. */
.signature {
  display: flex;
  flex-direction: column;
  padding-top: 32px;
}
.signature__cta {
  align-self: stretch;
}
/* 2026-10-24, human: the subs under the closing and final displays are
   gone; the button keeps its place at the right of the row on desktop. */
@media (min-width: 1024px) {
  .signature {
    flex-direction: row;
    justify-content: flex-end;
    padding-top: 32px; /* audit 2026-10-24: heading-to-content step 32 (was 40) */
  }
  .signature__cta {
    align-self: auto;
  }
}

/* 8c. Air between sections (2026-09-09, human: «чтобы контент дышал»):
   a transparent top border on every section after the hero and on the
   footer; the section's own background paints under it, so it reads as
   extra space of the same ground. 24px mobile, 32px desktop. */
:root {
  --section-air: 24px;
}
@media (min-width: 1024px) {
  :root {
    --section-air: 32px;
  }
}
main > section:not(.hero),
.footer {
  border-top: var(--section-air) solid transparent;
}

/* 9. Utilities */
/* Full-bleed row whose content sits on the lane: gutters on narrow screens,
   (100% - lane) / 2 once the lane fits (120px at 1440). */
.lane-pad {
  padding-inline: max(var(--gutter), calc((100% - var(--lane)) / 2));
}
/* Inline SVG definitions (the brand symbol): out of the flow and invisible. */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* Explicit line breaks that exist on one canvas only: .br-d desktop, .br-m mobile. */
.br-d {
  display: none;
}
@media (min-width: 1024px) {
  .br-d {
    display: inline;
  }
  .br-m {
    display: none;
  }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}