/* Вариант 4 · «Кейноут»: светлая подача по центру, плитки с углами 8, поле единиц как язык графики.
   Поверх landing-v1.css (раскладка общих блоков, адаптив). Капс — только у служебных меток (.meta). */

.meta { display: block; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.kn-c { display: grid; justify-items: center; text-align: center; }
.kn-sub { max-width: 680px; margin-top: 28px; color: var(--text-secondary); }
.lnk { font-size: 18px; line-height: 24px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.lnk:focus-visible, a.tile:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

/* плитки */
.tile { display: flex; flex-direction: column; padding: 28px 32px; min-width: 0; }
.tile.ink { background: var(--bg-page); color: var(--text-primary); }
.tile.hot { background: var(--bg-accent); color: var(--key-on-brand); --text-primary: var(--key-on-brand); --text-secondary: var(--brand-900); }
a.tile { transition: filter var(--dur-hover) linear; }
@media (hover: hover) { a.tile:hover { filter: brightness(.96); } a.tile.hot:hover { filter: brightness(1.06); } }

/* поле единиц на ширину блока; на телефоне — свой вариант с другим числом рядов */
.ufw { display: block; }
.ufw .uf { display: block; } .ufw .uf .lay-base { width: 100%; }
.ufw.narrow { display: none; }
.kn .field .u { fill: var(--base-300); } .kn .field .u.h { fill: var(--accent-primary); }
.kn [data-theme="dark"] .field .u { fill: var(--base-400); } .kn [data-theme="dark"] .field .u.h { fill: var(--accent-primary); }
@media (max-width: 700px) { .ufw.wide { display: none; } .ufw.narrow { display: block; } }

/* ── первый экран ─────────────────────────────────────────────────── */
.kn-hero { padding-bottom: 16px; }
.kn-hero .kn-c { padding-top: 40px; }
.kn-hero h1 { max-width: 1120px; margin-top: 16px; }
.kn-hero h1 span { text-wrap: balance; }
.kn-cta { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: center; margin-top: 40px; }
.kn-proof { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 64px; align-items: center; margin-top: 80px; padding: 56px 64px; }
.kn-n { font-size: var(--fig-hero); }
.kn-pr .prose { max-width: 640px; }
.kn-pr .ufw { margin-top: 32px; }
.kn-proof .keys { color: var(--text-secondary); } .kn-proof .keys b { color: var(--text-primary); }
.kn-proof .keys span:first-child b { color: var(--accent-primary); }
.kn-proof .cap { margin-top: 20px; max-width: none; }
@media (max-width: 1100px) { .kn-proof { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding: 40px; margin-top: 56px; } }
@media (max-width: 700px) { .kn-hero .kn-c { padding-top: 16px; } .kn-cta { margin-top: 32px; } .kn-proof { padding: 28px 24px; margin-top: 48px; } .kn-pr .ufw { margin-top: 24px; } }

/* ── что нашли: бенто (скилл bento, раскладка 4 × 3) ──────────────── */
.kn-found { padding-top: var(--air); }
.kn-found h2 { max-width: 1120px; margin-top: 12px; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 288px; gap: 16px; grid-template-areas: "a a b c" "d e e c" "f e e g"; margin-top: 80px; }
.bento .meta { margin-bottom: auto; }

.num .fig, .nine .fig { font-size: 112px; margin-top: 20px; }
.num .act, .nine .act { margin-top: 12px; }

.hero99 .fig { font-size: 264px; margin-top: 20px; }
.hero99 .act { margin-top: 16px; max-width: 420px; }
.hero99 .ufw { margin-top: 28px; }
.hero99 .cap { margin-top: 12px; }

.casc ol { list-style: none; display: grid; row-gap: 8px; }
.casc li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40%; column-gap: 12px; align-items: center; min-height: 30px; }
.casc .fig { font-size: 32px; }
.casc .l { font-size: 16px; line-height: 20px; }
.casc .t { display: block; height: 12px; }
.casc .t i { display: block; height: 100%; border-radius: 4px; background: var(--text-primary); }
.casc li.h .fig { color: var(--accent-fine); } .casc li.h .t i { background: var(--accent-primary); }

.toc9 ol { list-style: none; display: grid; row-gap: 4px; }
.toc9 a { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; align-items: center; min-height: 44px; font-size: 20px; line-height: 26px; font-weight: 500; }
.toc9 .fig { font-size: 36px; color: var(--text-secondary); }
@media (hover: hover) { .toc9 a:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; } }
.toc9 a:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; grid-template-areas: "e e" "a a" "d b" "f g" "c c"; margin-top: 56px; }
  .bento .tile { min-height: 264px; } .bento .meta { margin-bottom: 20px; } .num .fig, .nine .fig { margin-top: auto; }
  .toc9 ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .bento .toc9 { min-height: 0; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "e" "a" "d" "b" "f" "g" "c"; gap: 12px; margin-top: 40px; }
  .tile { padding: 24px; } .bento .tile { min-height: 0; }
  .num, .nine { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .num .meta, .nine .meta { grid-column: 1 / -1; margin-bottom: 12px; }
  .num .fig, .nine .fig { font-size: 80px; margin-top: 0; } .num .act, .nine .act { margin-top: 0; }
  .hero99 .fig { font-size: 190px; margin-top: 0; }
  .casc li { grid-template-columns: 48px minmax(0, 1fr) 30%; }
  .toc9 ol { grid-template-columns: minmax(0, 1fr); }
}

/* ── девять правок: каждая — «слайд» ──────────────────────────────── */
.kn-fixes h2 { max-width: 1000px; margin-top: 12px; }
.kfx { margin-top: 208px; scroll-margin-top: 40px; }
.kfx h3 { max-width: 920px; margin-top: 16px; }
.kfx-st { text-align: center; margin-top: 64px; }
.kfx p.kfx-v { font-size: clamp(84px, 22.5vw, 324px); white-space: nowrap; }
.kfx-v .h { color: var(--accent-primary); }
.kfx-q { max-width: 880px; margin: 28px auto 0; font-size: 33px; line-height: 40px; }
.kfx-viz { margin-top: 64px; text-align: center; }
.kfx-viz .ufw { margin: 0 auto; }
.kfx-viz .cap { margin: 16px auto 0; }
.kviz { max-width: 760px; margin: 0 auto; text-align: left; padding: 32px 40px 40px; }
.kviz .meta { margin-bottom: 24px; } .kviz .bars { max-width: none; }
.kcode .codediff { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; max-width: 960px; margin: 0 auto; text-align: left; align-items: stretch; }
.kfx-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; grid-template-areas: "y y d d" "y y w k"; margin-top: 64px; }
.kfx.flip .kfx-b { grid-template-areas: "d d y y" "w k y y"; }
.kfx-b .y { grid-area: y; } .kfx-b .d { grid-area: d; } .kfx-b .w { grid-area: w; } .kfx-b .k { grid-area: k; }
.kfx-b .meta { margin-bottom: 20px; }
.kfx-b .cap { margin-top: auto; padding-top: 24px; }
@media (max-width: 1100px) {
  .kfx { margin-top: 144px; } .kfx-st, .kfx-viz, .kfx-b { margin-top: 48px; }
  .kfx-b, .kfx.flip .kfx-b { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "y y" "d d" "w k"; }
}
@media (max-width: 700px) {
  .kfx { margin-top: 112px; } .kfx-st, .kfx-viz, .kfx-b { margin-top: 36px; }
  .kfx-q { font-size: 24px; line-height: 30px; margin-top: 20px; }
  .kfx-b, .kfx.flip .kfx-b { grid-template-columns: minmax(0, 1fr); grid-template-areas: "y" "d" "w" "k"; gap: 12px; }
  .kviz { padding: 24px; } .kcode .codediff { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
}

/* ── как выглядит хорошо ──────────────────────────────────────────── */
.kn-good h2 { max-width: 1000px; }
.kn-good .kn-sub { max-width: 820px; color: var(--text-primary); }
.kn-good .kn-groups { margin-top: 72px; padding: 48px 56px; display: block; }
.kn-groups .g.ok .fig { color: var(--text-primary); } .kn-groups .g.ok .u { fill: var(--text-primary); }
.kn-groups .g.on .fig { color: var(--accent-fine); }
.kn-groups .g.rest .fig { color: var(--base-400); } .kn-groups .g.rest .u { fill: var(--base-300); }
.kn-groups .cap { margin-top: 32px; max-width: none; }
@media (max-width: 700px) { .kn-good .kn-groups { padding: 28px 24px; margin-top: 48px; } }

/* ── проверь себя: три плитки-шага ────────────────────────────────── */
.kn-check { background: var(--bg-page); }
.kn-check .three { gap: 16px; }
.kn-check .three li { padding: 32px; min-height: 288px; }
.kn-check .three .act { margin-top: auto; padding-top: 32px; }
@media (max-width: 700px) { .kn-check .three { gap: 12px; } .kn-check .three li { display: grid; min-height: 0; padding: 24px; } .kn-check .three .act { padding-top: 0; } }

/* ── форма в плитке ───────────────────────────────────────────────── */
.kn .formsec .form { background: var(--bg-surface); border-radius: 8px; padding: 40px; }
.kn .formsec .form input { background: var(--bg-page); }
@media (max-width: 700px) { .kn .formsec .form { padding: 24px; } }