/* ============================================================ landing-f.css
   VARIANT F — «THE CODEX, OPENED»
   One light world. The Codex's parchment soul (variant E) carries the page:
   aged bone ground with fiber, graphite ink, engraved double hairlines,
   roman folios I–VI, the circular seal-mark, serif display with a drop cap,
   Scotch rules, the colophon footer. Every interactive surface — calculator,
   term-sheet wizard, rendered document, contact form, assistant — is set as
   a LIGHT DOCUMENT CARD in the base library's approachable language:
   white/ivory stock, 1px warm border, soft warm shadow, 8px radii, generous
   light inputs, crimson primary buttons. Crimson #9E1B2E is THE single
   accent; variant E's second (dark) world is deleted wholesale — no dark
   panel, no cold accent, no terminal texture or frame survives anywhere.
   Mono (JetBrains) survives only as small ink figures: refs and dates.
   Loads after tokens/base/components/pages-tools; overrides deliberately.
   ========================================================================= */

/* ---- mono voice, demoted to a figure hand (refs, dates) ----------------- */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../../shared/fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------ local scope */
body.page-landing {
  /* codex palette — every neutral is warm-biased; no cool grey survives */
  --cdx-bg: #EDE6D6;
  --cdx-bg-deep: #E6DDC7;
  --cdx-ink: #1B1A17;       /* 14.0:1 on --cdx-bg */
  --cdx-ink-soft: #45423A;  /* 8.1:1 on --cdx-bg */
  --cdx-ink-faint: #635D50; /* 5.26:1 on --cdx-bg, 5.06:1 on #EAE2CC, 6.5:1 on white */
  --cdx-line: rgba(27, 26, 23, 0.34);
  --cdx-line-soft: rgba(27, 26, 23, 0.16);
  /* Фирменные цвета с реального лого (assets/logo.jpg): нави + золото.
     Имена переменных исторические (crimson) — значения теперь нави, чтобы
     не трогать сотни ссылок ниже. Красный остался только для ошибок. */
  --cdx-crimson: #0F203E;
  --cdx-crimson-deep: #0A1730;
  --cdx-crimson-wash: rgba(15, 32, 62, 0.06);
  --cdx-gold: #DBA543;      /* декор: штамп, крупные элементы */
  --cdx-gold-ink: #8F6417;  /* читаемое тёмное золото: фолио, мелкие метки */
  --cdx-error: #9E1B2E;     /* семантика ошибок форм */

  /* the component library re-inked: crimson becomes THE accent, neutrals
     warm to parchment, shadows warm. Every components.css / pages-tools.css
     surface inherits this without a single dark panel surviving. */
  --accent: var(--cdx-crimson);
  --accent-hover: var(--cdx-crimson-deep);
  --accent-contrast: #FFFFFF;
  --accent-soft: rgba(15, 32, 62, 0.08); /* tint cap: never above 8% */
  --focus: var(--cdx-crimson);
  --neg: var(--cdx-error);
  --ink-1: var(--cdx-ink);
  --ink-2: var(--cdx-ink-soft);
  --ink-3: var(--cdx-ink-faint);
  --line: #DCD3BF;
  --line-strong: #C0B598;
  --bg-raised: #FDFBF6;
  --bg-band: var(--cdx-bg-deep);
  --elev:
    0 1px 2px rgba(46, 38, 20, 0.05),
    0 18px 40px -30px rgba(46, 38, 20, 0.35);

  /* card stock: white falling to ivory, the base "document card" grade */
  --card-stock: linear-gradient(180deg, #FFFFFF 0%, #FDFBF6 100%);
  --card-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 1px 2px rgba(46, 38, 20, 0.04),
    0 24px 48px -32px rgba(46, 38, 20, 0.4);

  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* parchment fiber — feTurbulence tile, applied at <=3% */
  --cdx-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23f)'/%3E%3C/svg%3E");

  background: var(--cdx-bg);
  color: var(--cdx-ink-soft);
  overflow-x: clip;
}

html { overflow-x: clip; }

/* fiber wash over the whole page — multiply, imperceptible on white cards */
body.page-landing::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  background-image: var(--cdx-fiber);
  opacity: 0.028;
  mix-blend-mode: multiply;
}

.page-landing section[id] { scroll-margin-top: 6rem; }

/* ---------------------------------------------------------------- a11y -- */
.page-landing :focus-visible {
  outline: 2px solid var(--cdx-crimson);
  outline-offset: 3px;
  border-radius: 1px;
}

/* the seal button's double ring would swallow a 3px-offset crimson outline —
   push the focus ring clear of the wax */
.page-landing .cdx-btn--seal:focus-visible {
  outline-offset: 7px;
}

body.page-landing ::selection { background: rgba(15, 32, 62, 0.16); }

/* one vellum scrollbar for one world */
body.page-landing { scrollbar-color: #AFA48A var(--cdx-bg-deep); }
body.page-landing::-webkit-scrollbar { width: 12px; }
body.page-landing::-webkit-scrollbar-track { background: var(--cdx-bg-deep); }
body.page-landing::-webkit-scrollbar-thumb {
  background: #AFA48A;
  border: 3px solid var(--cdx-bg-deep);
}
body.page-landing::-webkit-scrollbar-thumb:hover { background: #948A6F; }

.eddy-panel__log { scrollbar-width: thin; scrollbar-color: #C9BFA4 transparent; }
.eddy-panel__log::-webkit-scrollbar { width: 8px; }
.eddy-panel__log::-webkit-scrollbar-track { background: transparent; }
.eddy-panel__log::-webkit-scrollbar-thumb { background: #D8D0BB; }
.eddy-panel__log::-webkit-scrollbar-thumb:hover { background: #C9BFA4; }

/* --------------------------------------------------------------- shell -- */
.shell {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.cdx-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* default codex links — kept at (0,1,1) so component rules can win */
.page-landing a {
  color: var(--cdx-crimson);
  text-decoration-color: rgba(15, 32, 62, 0.4);
}

.page-landing a:hover {
  color: var(--cdx-crimson-deep);
  text-decoration-color: currentColor;
}

/* the skip link stays paper-on-ink */
body.page-landing .skip-link,
body.page-landing .skip-link:focus,
body.page-landing .skip-link:hover { color: var(--cdx-bg); }

/* =========================================================================
   HEADER — parchment masthead with engraved double hairline
   ========================================================================= */

.cdx-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(237, 230, 214, 0.94);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--cdx-line);
  box-shadow: 0 4px 0 -3px var(--cdx-line-soft);
}

.cdx-header__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  min-height: 4.25rem;
  padding-block: 0.5rem;
}

/* .page-landing prefix: must out-order `.page-landing a` (crimson) */
.page-landing .cdx-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--cdx-ink);
  text-decoration: none;
}

.page-landing .cdx-brand:hover { color: var(--cdx-ink); }

.cdx-brand__seal {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--cdx-crimson);
  flex: none;
}

.cdx-brand__name {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 420;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.cdx-nav { margin-left: auto; }

.cdx-nav__list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
}

body.page-landing .cdx-nav__link {
  display: inline-block;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cdx-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

body.page-landing .cdx-nav__link:hover { color: var(--cdx-crimson); }

.cdx-header__cta { flex: none; }

/* mobile toggle */
.cdx-navtoggle {
  display: none;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--cdx-line);
  border-radius: 2px;
  cursor: pointer;
}

.cdx-navtoggle__bars {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 1.5px;
  background: var(--cdx-ink);
  transition: background-color 120ms ease;
}

.cdx-navtoggle__bars::before,
.cdx-navtoggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--cdx-ink);
  transition: transform 200ms ease;
}

.cdx-navtoggle__bars::before { top: -6px; }
.cdx-navtoggle__bars::after { top: 6px; }

.cdx-navtoggle[aria-expanded='true'] .cdx-navtoggle__bars { background: transparent; }
.cdx-navtoggle[aria-expanded='true'] .cdx-navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
.cdx-navtoggle[aria-expanded='true'] .cdx-navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

.cdx-menu {
  display: none;
  border-top: 1px solid var(--cdx-line);
  background: var(--cdx-bg);
  max-height: calc(100vh - 4.25rem);
  overflow-y: auto;
}

.cdx-menu.is-open { display: block; }

.cdx-menu__in { padding-block: 1.25rem 2rem; }

.cdx-menu__in ul { list-style: none; }

.page-landing .cdx-menu__in a {
  display: block;
  padding: 0.8rem 0;
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--cdx-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cdx-line-soft);
}

.page-landing .cdx-menu__in a:hover { color: var(--cdx-crimson); }

@media (max-width: 64em) {
  .cdx-nav, .cdx-header__cta { display: none; }
  .cdx-navtoggle { display: inline-flex; }
}

/* =========================================================================
   CODEX PRIMITIVES — seal button, folios, section heads, notes
   ========================================================================= */

.cdx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px; /* room for the sealed double ring */
  min-height: 2.75rem; /* 44px touch target */
  padding: 0.78rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

body.page-landing .cdx-btn--seal {
  background: var(--cdx-crimson);
  color: #F5EFE0;
  box-shadow: 0 0 0 3px var(--cdx-bg), 0 0 0 4px var(--cdx-crimson);
}

body.page-landing .cdx-btn--seal:hover {
  background: var(--cdx-crimson-deep);
  color: #F5EFE0;
  box-shadow: 0 0 0 3px var(--cdx-bg), 0 0 0 4px var(--cdx-crimson-deep);
}

.cdx-btn--lg { padding: 1rem 1.9rem; font-size: 0.84rem; }

.cdx-micro {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--cdx-ink-faint);
}

/* roman folio + engraved double rule */
.cdx-folio {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--cdx-gold-ink);
}

.cdx-folio::after {
  content: '';
  display: block;
  width: 2.4rem;
  height: 4px;
  margin-top: 0.55rem;
  border-top: 1px solid var(--cdx-line);
  border-bottom: 1px solid var(--cdx-line);
}

.cdx-sechead { margin-bottom: clamp(2.2rem, 4vw, 3.4rem); max-width: 48rem; }

.cdx-kicker {
  margin-top: 1.1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cdx-ink-faint);
}

.cdx-h2 {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.7rem);
  font-weight: 370;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--cdx-ink);
  text-wrap: balance;
}

.cdx-sub {
  margin-top: 0.8rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  font-weight: 380;
  line-height: 1.55;
  color: var(--cdx-ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
}

.cdx-note {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--cdx-ink-soft);
  max-width: 66ch;
  text-wrap: pretty;
}

.cdx-note--muted { font-size: 0.8rem; color: var(--cdx-ink-faint); }

.cdx-cap { display: inline-block; }
.cdx-cap::first-letter { text-transform: uppercase; }

.cdx-link {
  font-weight: 650;
  color: var(--cdx-crimson);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cdx-sec { padding-block: clamp(3.8rem, 7vw, 6.2rem); }

/* =========================================================================
   FOLIO I · HERO — codex spread with the parchment specimen
   ========================================================================= */

.cdx-hero { padding-block: clamp(3.2rem, 6vw, 5.5rem) clamp(2.8rem, 5vw, 4.5rem); }

.cdx-hero__grid {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.cdx-hero__margin {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding-right: 1.25rem;
  border-right: 1px solid var(--cdx-line-soft);
  align-self: stretch;
}

.cdx-marginalia {
  font-family: var(--font-body);
  font-size: 0.6875rem; /* caps floor: 11px */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--cdx-ink-faint);
}

.cdx-marginalia--fig { margin-top: auto; }

.cdx-marginalia--fig .num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 420;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--cdx-ink-soft);
}

.cdx-hero__seal {
  width: 4.4rem;
  height: 4.4rem;
  color: var(--cdx-crimson);
  opacity: 0.9;
}

.cdx-h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(2.9rem, 1.9rem + 4.2vw, 5.1rem);
  font-weight: 335;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--cdx-ink);
  max-width: 15ch;
  text-wrap: balance;
}

.cdx-lede {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: 1.17rem;
  font-weight: 400;
  line-height: 1.62;
  color: var(--cdx-ink-soft);
  max-width: 52ch;
  text-wrap: pretty;
}

/* illuminated initial */
.cdx-lede::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.35em;
  line-height: 0.78;
  padding: 0.05em 0.12em 0 0;
  font-weight: 420;
  color: var(--cdx-crimson);
}

.cdx-ctastack {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  clear: left;
}

/* ---- the specimen: a parchment document, annotated in the margin -------- */

.cdx-spec { margin: 0; position: relative; }

.cdx-spec__card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #F7F1E2 0%, #F0E9D7 55%, #EAE2CC 100%);
  border: 1px solid #C6B999;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 26px 52px -30px rgba(46, 38, 20, 0.5);
  padding: clamp(1.4rem, 2.5vw, 2rem);
}

.cdx-spec__card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--cdx-fiber);
  opacity: 0.03;
  mix-blend-mode: multiply;
}

/* the wax-red INDICATIVE mark, pressed once on arrival */
.cdx-spec__stamp {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  transform: rotate(6deg);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cdx-gold-ink);
  border: 1px solid var(--cdx-gold-ink);
  outline: 1px solid var(--cdx-gold);
  outline-offset: 2px;
  border-radius: 1px;
  padding: 0.32rem 0.55rem;
  opacity: 0.92;
  animation: cdx-stamp 360ms cubic-bezier(0.2, 0.7, 0.3, 1) 700ms backwards;
}

@keyframes cdx-stamp {
  0% { opacity: 0; transform: rotate(6deg) scale(1.16); }
  62% { opacity: 1; transform: rotate(6deg) scale(0.99); }
  100% { opacity: 0.92; transform: rotate(6deg) scale(1); }
}

/* Scotch rule: thick over thin */
.cdx-spec__mast {
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--cdx-ink);
  box-shadow: 0 4px 0 -3px var(--cdx-ink);
}

.cdx-spec__brand {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cdx-ink-faint);
}

.cdx-spec__title {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--cdx-ink);
  text-wrap: balance;
}

.page-landing .tsdoc__title { text-wrap: balance; }

.cdx-spec__ref {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--cdx-ink-faint);
  max-width: none;
}

/* refs and dates: the one place the mono hand still writes — ink on paper */
.cdx-spec__num {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cdx-ink-soft);
}

.cdx-spec__rows { margin: 0.4rem 0 0; }

.cdx-spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(27, 26, 23, 0.14);
}

.cdx-spec__row dt {
  font-size: 0.72rem;
  font-weight: 550;
  color: var(--cdx-ink-faint);
}

.cdx-spec__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.98rem;
  color: var(--cdx-ink);
  text-align: right;
  white-space: nowrap;
}

.cdx-spec__row--sum { border-bottom-color: rgba(27, 26, 23, 0.4); }

.cdx-spec__row--sum dd {
  font-size: 1.5rem;
  font-weight: 350;
  color: var(--cdx-crimson);
}

.cdx-spec__foot {
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--cdx-ink-faint);
}

/* the codex annotates its own plate — italic serif, no caption bar */
.cdx-spec__caption {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 370;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--cdx-ink-faint);
  max-width: 38ch;
  text-wrap: pretty;
}

/* =========================================================================
   TRUST — the ledger of record, engraved
   ========================================================================= */

.cdx-trust { padding-block: 0 clamp(1rem, 2vw, 1.5rem); }

.cdx-trust__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.2rem 3rem;
  padding: 1.35rem 0.25rem;
  border-top: 1px solid var(--cdx-line);
  border-bottom: 1px solid var(--cdx-line);
  box-shadow:
    0 -4px 0 -3px var(--cdx-line-soft),
    0 4px 0 -3px var(--cdx-line-soft);
}

.cdx-trust__stat {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.cdx-trust__fig {
  font-family: var(--font-display);
  font-variant-numeric: oldstyle-nums tabular-nums;
  font-size: 1.9rem;
  font-weight: 330;
  letter-spacing: -0.01em;
  color: var(--cdx-ink);
}

.cdx-trust__lbl {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cdx-ink-faint);
}

.cdx-trust__note {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--cdx-ink-faint);
}

/* =========================================================================
   FOLIO II · PROGRAMS — the rate table as an engraved codex spread
   ========================================================================= */

.codexled {
  border-top: 2px solid var(--cdx-ink);
  position: relative;
}

.codexled::before {
  content: '';
  display: block;
  height: 1px;
  margin-top: 2px;
  background: var(--cdx-ink);
}

.codexled__head {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1.1fr) minmax(0, 1.6fr) 7rem 7.5rem;
  column-gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: end;
  padding: 0.8rem 0.25rem 0.5rem;
}

.codexled__head span {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cdx-ink-faint);
}

.codexled__coll { text-align: right; }

body.page-landing .codexled__row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1.1fr) minmax(0, 1.6fr) 7rem 7.5rem;
  column-gap: clamp(0.9rem, 2vw, 1.5rem);
  align-items: baseline;
  padding: 1.3rem 0.25rem;
  border-top: 1px solid var(--cdx-line-soft);
  text-decoration: none;
  color: inherit;
  transition: background-color 160ms ease;
}

.codexled__row:last-of-type { border-bottom: 1px solid var(--cdx-line); }

body.page-landing .codexled__row:hover {
  background: var(--cdx-crimson-wash);
  color: inherit;
}

.codexled__ord {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--cdx-crimson);
}

.codexled__name {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 40;
  font-size: 1.4rem;
  font-weight: 385;
  color: var(--cdx-ink);
  transition: color 160ms ease;
}

.codexled__row:hover .codexled__name { color: var(--cdx-crimson); }

.codexled__who {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cdx-ink-faint);
}

.codexled__term {
  text-align: right;
  font-variant-numeric: oldstyle-nums tabular-nums;
  font-size: 0.98rem;
  color: var(--cdx-ink-soft);
  white-space: nowrap;
}

.codexled__rate {
  text-align: right;
  font-variant-numeric: oldstyle-nums tabular-nums;
  font-size: 1.5rem;
  font-weight: 340;
  color: var(--cdx-ink);
  white-space: nowrap;
}

.codexled__from {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cdx-ink-faint);
  margin-right: 0.15rem;
}

@media (max-width: 47.5em) {
  .codexled__head { display: none; }

  /* must match the base selector's specificity or the 5-col grid survives */
  body.page-landing .codexled__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'name rate'
      'who  who'
      'term term';
    row-gap: 0.45rem;
  }

  .codexled__ord { display: none; }
  .codexled__name { grid-area: name; }
  .codexled__rate { grid-area: rate; }
  .codexled__who { grid-area: who; }
  .codexled__term { grid-area: term; text-align: left; font-size: 0.9rem; }
}

/* =========================================================================
   FOLIO III · PROCESS — a three-panel engraving
   ========================================================================= */

.cdx-sec--process { padding-top: clamp(2.6rem, 5vw, 4.2rem); }

.cdx-proc {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--cdx-line);
}

.cdx-proc li { padding: 1.7rem 1.6rem 0.5rem 0; }

.cdx-proc li + li {
  border-left: 1px solid var(--cdx-line-soft);
  padding-left: 1.6rem;
}

.cdx-proc__n {
  display: block;
  font-family: var(--font-display);
  font-variant-numeric: oldstyle-nums;
  font-size: 2.7rem;
  font-weight: 300;
  line-height: 1;
  color: var(--cdx-crimson);
}

.cdx-proc__t {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 385;
  color: var(--cdx-ink);
}

.cdx-proc__body {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--cdx-ink-soft);
  max-width: 36ch;
  text-wrap: pretty;
}

@media (max-width: 46em) {
  .cdx-proc { grid-template-columns: minmax(0, 1fr); }

  .cdx-proc li { padding-right: 0; }

  .cdx-proc li + li {
    border-left: 0;
    border-top: 1px solid var(--cdx-line-soft);
    padding-left: 0;
  }
}

/* =========================================================================
   FOLIOS IV–V · THE WORKING PAGES — light document cards on parchment.
   The base library's 60% language (white stock, warm border, soft warm
   shadow, 8px radii) set into the codex ground. No dark surface survives.
   ========================================================================= */

.cdx-sec--tool { padding-top: clamp(3rem, 6vw, 5rem); }

.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 60em) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
}

/* the document card — white falling to ivory, 1px warm border, warm shadow */
.tool-card {
  position: relative;
  background: var(--card-stock);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-m);
  box-shadow: var(--card-shadow);
  padding: clamp(1.4rem, 3vw, 2.1rem);
}

.tool-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
  margin-bottom: 1.3rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cdx-ink-faint);
  max-width: none;
}

.tool-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cdx-gold);
  flex: none;
}

.tool-card__by {
  margin-left: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--cdx-ink-faint);
}

/* readout rows — the hero specimen grown up, still a table of figures */
.tool-rows { margin: 0; }

.tool-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.68rem 0;
  border-bottom: 1px solid var(--line);
}

.tool-row dt {
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--cdx-ink-faint);
}

.tool-row dd {
  margin: 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 1.08rem;
  color: var(--cdx-ink);
  text-align: right;
  white-space: nowrap;
}

/* the total under a doubled accounting rule, inked crimson like the seal */
.tool-row--sum {
  margin-top: 0.45rem;
  border-top: 3px double var(--cdx-ink);
  border-bottom: 0;
  padding-top: 0.95rem;
}

.tool-row--sum dd {
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2rem);
  font-weight: 330;
  letter-spacing: -0.01em;
  color: var(--cdx-crimson);
}

.tool-fine {
  margin-top: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--cdx-ink-faint);
  max-width: 64ch;
  text-wrap: pretty;
}

.tool-jump { margin-top: 1rem; max-width: none; }

.tool-micro { margin-top: 0.8rem; }

/* ---- fields: generous light inputs, crimson focus (via re-inked tokens) - */

.page-landing .field label,
.page-landing .field-label-line {
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cdx-ink-soft);
}

.page-landing .field input,
.page-landing .field select,
.page-landing .field textarea {
  background: #FFFFFF;
  border-radius: var(--radius-s);
  padding: 0.75rem 0.875rem;
  /* border + focus + invalid colors stay with components.css — they now
     resolve to the warm hairline and crimson through the scoped tokens */
}

.page-landing .field input:hover:not(:focus),
.page-landing .field select:hover:not(:focus),
.page-landing .field textarea:hover:not(:focus) { border-color: var(--cdx-ink-faint); }

.page-landing .field input[type='number'] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---- buttons on cards: the base 60% clay language, re-inked crimson ----- */

.page-landing .btn--secondary {
  background: var(--bg-surface);
  color: var(--cdx-crimson);
  border-color: rgba(158, 27, 46, 0.45);
}

.page-landing .btn--secondary:hover {
  color: var(--cdx-crimson-deep);
  border-color: var(--cdx-crimson-deep);
  background: var(--accent-soft);
}

/* =========================================================================
   FOLIO V · TERM-SHEET WIZARD — question card in, paper document out
   ========================================================================= */

.tool-wizard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.2rem);
  max-width: 50rem;
}

/* progress + error come from pages-tools.css (.ts-progress/.ts-error) and
   now read crimson through --accent/--neg; only the error wash is repainted
   from the old negative red to the page's own crimson */
.page-landing .ts-error { background: rgba(158, 27, 46, 0.06); }

/* option tiles — white stock, warm border, crimson selected state */
.page-landing .opt {
  background: var(--bg-surface);
  border-radius: var(--radius-s);
}

.page-landing .opt:has(input:checked) {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--cdx-crimson);
}

/* the wizard's question, in the codex's reading voice */
.page-landing .ts-q {
  font-variation-settings: 'opsz' 40;
  color: var(--cdx-ink);
  text-wrap: balance;
}

/* ---- the rendered term sheet: white paper, ink text, crimson stamp ------ */

.page-landing .tsdoc {
  border-color: var(--line-strong);
  box-shadow: var(--card-shadow);
}

/* Scotch rule under the masthead — the codex signs the machine-free page */
.page-landing .tsdoc hr {
  height: 4px;
  border: 0;
  border-top: 2px solid var(--cdx-ink);
  border-bottom: 1px solid var(--cdx-ink);
  background: none;
}

/* stamp joins the seal grammar: double crimson ring, one-shot press */
.page-landing .tsdoc__stamp {
  border: 1px solid var(--cdx-crimson);
  outline: 1px solid var(--cdx-crimson);
  outline-offset: 2px;
  border-radius: 1px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--cdx-crimson);
  opacity: 0.92;
  animation: cdx-stamp 360ms cubic-bezier(0.2, 0.7, 0.3, 1) 150ms backwards;
}

/* doc micro-caps join the 11px caps floor */
.page-landing .tsdoc__brand { font-size: 0.6875rem; }

.tsdoc__rows { margin: 0; }

/* ref + date figures in the small mono hand, ink on paper */
.tsdoc__num {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--cdx-ink-soft);
}

.page-landing .tsdoc__row--big dd {
  color: var(--cdx-crimson);
  font-weight: 320;
}

/* binding-cap note as a document rule, not a status widget */
.page-landing .tsdoc__constraint {
  border-left: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  padding: var(--space-3) 0;
  color: var(--ink-2);
}

/* =========================================================================
   MARGINAL QUOTE — codex
   ========================================================================= */

.cdx-quote { padding-block: clamp(4rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem); }

.cdx-quote__q {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.cdx-quote__q::before {
  content: '\201C';
  display: block;
  font-family: var(--font-display);
  font-size: 4.6rem;
  line-height: 0.55;
  margin-bottom: 1.1rem;
  color: var(--cdx-crimson);
}

.cdx-quote__q p {
  font-family: var(--font-display);
  font-style: italic;
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 50;
  font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.9rem);
  font-weight: 350;
  line-height: 1.5;
  color: var(--cdx-ink);
  max-width: none;
  text-wrap: pretty;
}

.cdx-quote__q footer { margin-top: 1.4rem; }

.cdx-quote__q cite {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cdx-ink-soft);
}

.cdx-quote__by {
  display: inline-block;
  margin-left: 0.6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--cdx-ink-faint);
}

/* =========================================================================
   FOLIO VI · CONTACT — codex letterhead + the correspondence card
   ========================================================================= */

.cdx-contact {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 60em) {
  .cdx-contact { grid-template-columns: minmax(0, 1fr); }
}

.cdx-infoline { margin-bottom: 1.3rem; }

.cdx-infoline__lbl {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cdx-ink-faint);
}

.cdx-infoline,
.page-landing .cdx-infoline a {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--cdx-ink);
}

.page-landing .cdx-infoline a {
  text-decoration-color: rgba(15, 32, 62, 0.4);
}

.page-landing .cdx-infoline a:hover { color: var(--cdx-crimson); }

.cdx-infoline__note {
  margin-top: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cdx-line-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cdx-ink-faint);
  max-width: 34ch;
  text-wrap: pretty;
}

.tool-card--form form > .btn { margin-top: var(--space-2); }

/* in-card thank-you state (data-form-success) */
.tool-success {
  padding: var(--space-4) 0 var(--space-2) var(--space-5);
  border-left: 2px solid var(--money);
}

.tool-success h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 390;
  color: var(--cdx-ink);
  margin-bottom: var(--space-2);
}

.tool-success p { color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.tool-success h3 { text-wrap: balance; }

/* =========================================================================
   FOOTER — colophon under the seal
   ========================================================================= */

.cdx-footer {
  border-top: 2px solid var(--cdx-ink);
  position: relative;
  padding-block: clamp(2.8rem, 5vw, 4rem) clamp(2.2rem, 4vw, 3rem);
}

.cdx-footer::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cdx-ink);
}

.cdx-footer__in {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.9rem;
}

.cdx-footer__seal {
  width: 3.1rem;
  height: 3.1rem;
  color: var(--cdx-crimson);
}

.cdx-footer__brand {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 420;
  letter-spacing: 0.05em;
  color: var(--cdx-ink);
}

.cdx-footer__contact {
  font-size: 0.88rem;
  color: var(--cdx-ink-soft);
  max-width: none;
}

.page-landing .cdx-footer__contact a { color: var(--cdx-ink); }
.page-landing .cdx-footer__contact a:hover { color: var(--cdx-crimson); }

.cdx-footer__states {
  font-size: 0.8rem;
  color: var(--cdx-ink-faint);
  max-width: 62ch;
  text-wrap: pretty;
}

.cdx-footer__disclosure {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--cdx-ink-faint);
  max-width: 74ch;
  text-align: justify;
  hyphens: auto;
}

.cdx-footer__legalrow {
  margin-top: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cdx-line-soft);
  width: 100%;
  font-size: 0.76rem;
  color: var(--cdx-ink-faint);
  max-width: none;
}

.page-landing .cdx-footer__legalrow a { color: var(--cdx-ink-soft); }
.page-landing .cdx-footer__legalrow a:hover { color: var(--cdx-crimson); }

/* =========================================================================
   ASSISTANT — the light pill and panel from the 60% base, re-inked
   (components.css owns the structure; only warmth + crimson land here)
   ========================================================================= */

.page-landing .eddy-launcher {
  gap: 0.6rem;
  box-shadow: var(--elev), 0 12px 32px -18px rgba(46, 38, 20, 0.35);
}

.page-landing .eddy-launcher .eddy-dot { background: var(--cdx-gold); }

.page-landing .eddy-panel {
  background: var(--bg-surface);
  border-color: var(--line-strong);
  box-shadow:
    0 1px 2px rgba(46, 38, 20, 0.05),
    0 24px 64px -24px rgba(46, 38, 20, 0.5);
}

.page-landing .eddy-msg[data-from='user'] {
  background: var(--cdx-crimson);
  color: #FFFFFF;
}

.page-landing .eddy-panel__bar input { background: #FFFFFF; }

/* =========================================================================
   RESPONSIVE — hero + margins + cards
   ========================================================================= */

@media (max-width: 64em) {
  .cdx-hero__grid { grid-template-columns: minmax(0, 1fr); }

  .cdx-hero__margin {
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
    border-right: 0;
    border-bottom: 1px solid var(--cdx-line-soft);
    padding: 0 0 0.9rem;
  }

  .cdx-marginalia--fig { margin-top: 0; margin-left: auto; }

  .cdx-hero__seal { width: 2.3rem; height: 2.3rem; }

  .cdx-folio::after { display: none; }

  .cdx-spec { max-width: 34rem; }
}

@media (max-width: 40em) {
  .cdx-trust__note { margin-left: 0; }
  .cdx-marginalia--fig { display: none; }
  .ts-actions .btn { width: 100%; }
  .ts-nav { flex-wrap: wrap; }

  /* 16px floor stops iOS Safari's focus zoom in the chat bar */
  .page-landing .eddy-panel__bar input { font-size: 1rem; }
}

/* narrowest phones: release nowrap figures so nothing forces a scrollbar */
@media (max-width: 26.25em) {
  .tool-row dd,
  .cdx-spec__row dd {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* =========================================================================
   REDUCED MOTION — base.css zeroes durations globally; the page's own
   one-shot stamp presses are made explicitly inert as well.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .cdx-spec__stamp,
  .page-landing .tsdoc__stamp { animation: none; }
}

/* =========================================================================
   PRINT SAFETY — print-termsheet.css owns the layout; this only lifts the
   page's screen dressing off the paper.
   ========================================================================= */

@media print {
  body.page-landing::after { display: none; } /* fiber overlay off paper */

  .tsdoc {
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }

  .tsdoc::after { display: none; } /* paper grain */

  .page-landing .tsdoc__stamp { animation: none; }

  .tsdoc__num { font-family: inherit; color: inherit; }

  .ts-actions { display: none; }
}


/* ============================ ребрендинг: жирнее сансовые подписи/значения
   в инструментах (клиент: «шрифт должен быть более жирным») ============== */
.page-landing .field label,
.page-landing .field-label-line { font-weight: 700; color: var(--cdx-ink-soft); }
.page-landing .field input,
.page-landing .field select,
.page-landing .field textarea { font-weight: 600; color: var(--cdx-ink); }
.page-landing .outrow dt { font-weight: 600; color: var(--cdx-ink-soft); }
.page-landing .outrow dd { font-weight: 700; }
.page-landing .tool-card__head { font-weight: 800; color: var(--cdx-ink); }
.page-landing .cdx-nav__link { font-weight: 700; }
.page-landing .field-hint,
.page-landing .calc-note { font-weight: 500; }

/* контакт: заголовок живёт в левой колонке — верх выровнен с формой */
.cdx-contact .cdx-sechead { margin-bottom: 1.4rem; max-width: none; }

/* реальный логотип (assets/logo.jpg, белый фон гасится multiply на пергаменте) */
.cdx-brand__logo {
  height: 2.55rem;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
  flex: none;
}
.cdx-hero__logo {
  height: 2.9rem;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
}
.cdx-footer__logo {
  height: 3.4rem;
  width: auto;
  display: block;
  margin-inline: auto;
  mix-blend-mode: multiply;
}