:root {
  --qlk-root: #521508;
  --qlk-focus: #d9dadc;
  --qlk-action-down: #bdbfc5;
  --qlk-back: #202129;
  --qlk-above: #2a2b34;
  --qlk-deep: #191a20;
  --qlk-type: #ffffff;
  --qlk-faint: #c2c1c1;
  --qlk-border: #3a3b45;
  --qlk-edge-hard: #4d4e5a;
  --qlk-fade-top: #ffffff;
  --qlk-ramp-end: #f3f3f4;
  --qlk-age-band: #7f1d1d;

  --qlk-1: 8px;
  --qlk-2: 12px;
  --qlk-3: 16px;
  --qlk-4: 24px;
  --qlk-5: 32px;
  --qlk-6: 48px;
  --qlk-7: 72px;
  --qlk-8: 112px;
  --qlk-sec: 44px;

  --qlk-capsule: 9999px;
  --qlk-dot: 50%;
  --r-1: 0;
  --r-2: 0;
  --r-3: 4px;
  --r-4: 6px;
  --r-5: 10px;
  --r-6: 14px;
  --r-7: 18px;
  --r-8: 24px;

  --qlk-lead: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --qlk-reading: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --qlk-h1: 34px;
  --qlk-h2: 30px;
  --qlk-h3: 24px;
  --qlk-h4: 18px;
  --qlk-minor: 14px;
  --qlk-h6: 12px;
  --qlk-base: 14px;
  --qlk-sm: 12px;
  --qlk-micro: 10px;

  --qlk-close: 1.08;
  --l-base: 1.45;
  --qlk-loose: 1.65;
  --qlk-normal: 400;
  --qlk-semi: 700;
  --qlk-black: 900;
  --qlk-packed: -0.03em;
  --e-normal: 0;
  --qlk-wide: 0.08em;

  --d-1: none;
  --d-2: none;
  --d-3: none;
  --d-4: 0 0 0 1px rgba(0, 0, 0, 0.06);
  --d-5: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.1);
  --d-6: 0 0 0 2px rgba(0, 0, 0, 0.12), 0 14px 34px rgba(0, 0, 0, 0.16);
  --d-7: 0 18px 46px rgba(0, 0, 0, 0.24);
  --d-8: 0 26px 62px rgba(0, 0, 0, 0.3);

  --qlk-fast: 184ms;
  --qlk-mid: 360ms;
  --qlk-easy: 576ms;
  --qlk-release: cubic-bezier(0.2, 0.94, 0.28, 0.95);
  --qlk-start: cubic-bezier(0.44, 0.1, 0.51, 0.92);
  --qlk-swing: cubic-bezier(0.44, 0.1, 0.51, 0.92);
  --qlk-pop: cubic-bezier(0.28, 1.25, 0.65, 1.15);

  --qlk-main: 1280px;
  --qlk-inner: 1280px;
  --qlk-narrow: 640px;
  --qlk-padding-desktop: 64px;
  --qlk-pad-md: 32px;
  --qlk-pad-sm: 20px;
  --qlk-thin: 1px;
  --b-mid: 4px;
  --b-wide: 6px;

  --qlk-height-desktop: 84px;
  --qlk-height-mobile: 64px;
  --qlk-cookie: 0px;
  --qlk-rg: 46px;
  --qlk-gate: var(--qlk-pad-sm);
}

@media (min-width: 832px) {
  :root {
    --qlk-h1: 56px;
    --qlk-h2: 40px;
    --qlk-h3: 28px;
    --qlk-h4: 21px;
    --qlk-minor: 16px;
    --qlk-h6: 13px;
    --qlk-base: 15px;
    --qlk-sm: 13px;
    --qlk-micro: 11px;
    --qlk-sec: 52px;
    --qlk-gate: var(--qlk-pad-md);
  }
}

@media (min-width: 1136px) {
  :root {
    --qlk-h1: 80px;
    --qlk-h2: 48px;
    --qlk-h3: 30px;
    --qlk-h4: 22px;
    --qlk-close: 0.98;
    --qlk-gate: var(--qlk-padding-desktop);
  }
}

/* reset / base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--qlk-back);
  color: var(--qlk-type);
  display: flex;
  flex-direction: column;
  font-family: var(--qlk-reading);
  font-size: var(--qlk-base);
  font-weight: var(--qlk-normal);
  line-height: var(--l-base);
  margin: 0;
  min-height: 100vh;
  padding-block-end: var(--qlk-rg);
  -webkit-font-smoothing: antialiased;
}

body.hasNotice {
  margin-block-start: var(--qlk-cookie);
}

img {
  max-width: 100%;
}

a {
  color: var(--qlk-focus);
}

a:hover {
  color: var(--qlk-action-down);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: anywhere;
  margin: 0;
}

h1 {
  font-family: var(--qlk-lead);
  font-size: var(--qlk-h1);
  font-weight: var(--qlk-black);
  letter-spacing: var(--qlk-packed);
  line-height: var(--qlk-close);
  text-transform: uppercase;
}

h2 {
  font-family: var(--qlk-lead);
  font-size: var(--qlk-h2);
  font-weight: var(--qlk-semi);
  letter-spacing: var(--qlk-packed);
  line-height: 1.12;
  text-transform: uppercase;
}

h3 {
  font-family: var(--qlk-lead);
  font-size: var(--qlk-h4);
  font-weight: var(--qlk-semi);
  letter-spacing: var(--e-normal);
  line-height: 1.28;
}

p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding-inline-start: 0;
}

table {
  border-collapse: collapse;
}

main {
  flex: 1 0 auto;
}

.mainFlow {
  display: block;
  width: 100%;
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.skipJump {
  background: var(--qlk-focus);
  border-radius: var(--r-4);
  color: var(--qlk-back);
  font-weight: var(--qlk-semi);
  inset-inline-start: var(--qlk-3);
  padding: var(--qlk-2) var(--qlk-4);
  position: fixed;
  text-decoration: none;
  top: var(--qlk-3);
  z-index: 200;
}

.skipJump:not(:focus) {
  top: -260px !important;
}

:focus-visible {
  outline: 3px solid var(--qlk-focus);
  outline-offset: 2px;
}

/* shared section shell */
.labelBunchCore,
.crateWrapperCore,
.boxBarCore,
.crateRegionCore,
.annexRegionCore,
.spikeGridCore,
.caseContainerCore,
.wingTileCore,
.flagRegionCore,
.capsuleGridCore,
.blockGroupCore,
.latchLaneCore,
.padTrackCore,
.nodeBunchCore,
.netHeaderCore,
.elementModuleCore {
  margin-inline: auto;
  max-width: calc(var(--qlk-main) + 2 * var(--qlk-padding-desktop));
  padding-inline: var(--qlk-gate);
  width: 100%;
}

.padTrackArticles,
.padTrackSkills {
  margin-inline: auto;
  max-width: calc(var(--qlk-main) + 2 * var(--qlk-padding-desktop));
  padding-inline: var(--qlk-gate);
  width: 100%;
}

/* motion */
[data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--qlk-mid) var(--qlk-release), transform var(--qlk-mid) var(--qlk-release);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 1ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ── header : HEAD-MIRROR ──────────────────────────────────────────── */
.labelBunch {
  background: var(--qlk-back);
  border-bottom: var(--qlk-thin) solid var(--qlk-border);
  inset-block-start: var(--qlk-cookie);
  position: sticky;
  transition: box-shadow var(--qlk-mid) var(--qlk-release), padding-block var(--qlk-mid) var(--qlk-release);
  z-index: 90;
}

.labelBunch.is-shrunk {
  box-shadow: var(--d-7);
}

.labelBunchCore {
  align-items: center;
  column-gap: var(--qlk-2);
  display: flex;
  height: 64px;
  padding-inline: var(--qlk-3);
  position: relative;
}

.labelBunchHandle {
  align-items: center;
  background: var(--qlk-back);
  border: var(--qlk-thin) solid var(--qlk-edge-hard);
  border-radius: var(--r-4);
  color: var(--qlk-type);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  min-height: 44px;
  min-width: 46px;
  padding: 0;
}

.labelBunchBarLine {
  background: var(--qlk-type);
  display: block;
  height: 2px;
  width: 20px;
}

.labelBunchGuide {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.labelBunchRun {
  align-items: center;
  column-gap: var(--qlk-4);
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
}

.labelBunchUnit {
  flex: 0 0 auto;
  position: relative;
}

.labelBunchPath {
  color: var(--qlk-type);
  display: inline-block;
  font-family: var(--qlk-reading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--qlk-wide);
  line-height: 44px;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform var(--qlk-fast) var(--qlk-release), color var(--qlk-fast) var(--qlk-release);
  white-space: nowrap;
}

.labelBunchPath:hover {
  color: var(--qlk-focus);
  transform: translateY(-2px);
}

.labelBunchPath.is-here {
  color: var(--qlk-type);
  font-weight: 900;
}

.labelBunchMoreSlot {
  position: relative;
}

.labelBunchMoreToggle {
  background: var(--qlk-back);
  border: var(--qlk-thin) solid var(--qlk-edge-hard);
  border-radius: var(--r-4);
  color: var(--qlk-type);
  cursor: pointer;
  font-family: var(--qlk-reading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--qlk-wide);
  min-height: 40px;
  padding-inline: var(--qlk-2);
  text-transform: uppercase;
  white-space: nowrap;
}

.labelBunchMoreToggle:hover {
  background: var(--qlk-above);
  color: var(--qlk-focus);
}

.labelBunchMoreMenu {
  background: var(--qlk-above);
  border: var(--qlk-thin) solid var(--qlk-edge-hard);
  border-radius: var(--r-5);
  display: none;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  list-style: none;
  margin: 0;
  max-height: 64vh;
  min-width: 230px;
  overflow-y: auto;
  padding: var(--qlk-1);
  position: absolute;
  z-index: 40;
}

.labelBunchMoreMenu.is-open {
  display: block;
}

.labelBunchMoreMenu .labelBunchPath {
  color: var(--qlk-type);
  display: block;
  line-height: 1.3;
  padding: var(--qlk-2);
  white-space: normal;
}

.labelBunchMoreMenu .labelBunchPath:hover {
  background: var(--qlk-back);
  color: var(--qlk-focus);
  transform: none;
}

.labelBunchButtons {
  display: flex;
  flex: 0 0 auto;
  gap: var(--qlk-1);
  margin-inline-start: auto;
}

.labelBunchCta {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  white-space: nowrap;
}

.labelBunchMark {
  align-items: center;
  background: var(--qlk-deep);
  border: var(--qlk-thin) solid var(--qlk-border);
  border-radius: var(--r-4);
  color: var(--qlk-type);
  display: inline-flex;
  flex-shrink: 0;
  padding: 5px 6px;
}

.labelBunchImg {
  display: block;
  flex-shrink: 0;
  height: 30px;
  width: auto;
}

.labelBunchButtons .labelBunchCta {
  font-size: var(--qlk-micro);
  padding-inline: var(--qlk-2);
}

.labelBunchFlyout {
  background: var(--qlk-back);
  border-top: var(--qlk-thin) solid var(--qlk-border);
  display: none;
  inset-block-start: 100%;
  inset-inline: 0;
  max-height: 72vh;
  overflow-y: auto;
  padding: var(--qlk-3) var(--qlk-gate) var(--qlk-4);
  position: absolute;
  z-index: 60;
}

.labelBunchFlyout.is-open {
  display: block;
}

.labelBunchFlyoutGuide {
  display: block;
}

.labelBunchFlyoutRun {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.labelBunchFlyoutUnit {
  display: block;
}

.labelBunchFlyoutRun .labelBunchPath {
  border-bottom: var(--qlk-thin) solid var(--qlk-border);
  display: block;
  line-height: 1.3;
  padding-block: var(--qlk-2);
  white-space: normal;
}

.labelBunchFlyoutRun .labelBunchPath:hover {
  color: var(--qlk-focus);
  transform: none;
}

@media (min-width: 488px) {
  .labelBunchCore {
    column-gap: var(--qlk-3);
  }

  .labelBunchImg {
    height: 38px;
  }

  .labelBunchMark {
    padding: 5px var(--qlk-1);
  }

  .labelBunchButtons .labelBunchCta {
    font-size: var(--qlk-sm);
    padding-inline: var(--qlk-4);
  }
}

@media (min-width: 1136px) {
  .labelBunchCore {
    height: 84px;
    padding-inline: var(--qlk-4);
  }

  .labelBunchGuide {
    display: block;
  }

  .labelBunchHandle {
    display: none;
  }

  .labelBunchFlyout {
    display: none !important;
  }

  .labelBunchImg {
    height: 60px;
  }

  .labelBunchMark {
    order: 3;
    padding: 6px var(--qlk-2);
  }

  .labelBunchButtons {
    order: 2;
  }

  .labelBunch.is-shrunk .labelBunchCore {
    height: 70px;
  }

  .labelBunch.is-shrunk .labelBunchImg {
    height: 46px;
  }
}

/* ── hero : HERO-10 ────────────────────────────────────────────────── */
.boxBar {
  align-items: center;
  background: linear-gradient(160deg, var(--qlk-back) 0%, var(--qlk-deep) 62%, var(--qlk-root) 100%);
  display: flex;
  min-height: clamp(440px, calc(100vh - 260px), 600px);
  overflow: hidden;
  position: relative;
}

.boxBarGlyph {
  color: var(--qlk-type);
  font-family: var(--qlk-lead);
  font-size: 46vh;
  font-weight: var(--qlk-black);
  inset-block-start: 50%;
  inset-inline-start: var(--qlk-pad-sm);
  line-height: 0.8;
  opacity: 0.05;
  pointer-events: none;
  position: absolute;
  transform: translateY(-50%);
  user-select: none;
}

.boxBarCore {
  padding-block: var(--qlk-sec);
  position: relative;
}

.boxBarNote {
  color: var(--qlk-focus);
  display: block;
  font-size: var(--qlk-sm);
  font-weight: var(--qlk-semi);
  letter-spacing: var(--qlk-wide);
  margin-block-end: var(--qlk-2);
  text-transform: uppercase;
}

.boxBarName {
  margin-block-end: var(--qlk-4);
  max-width: 16ch;
}

.boxBarDeck {
  color: var(--qlk-faint);
  font-size: var(--qlk-h4);
  line-height: var(--l-base);
  margin-block-end: var(--qlk-5);
  max-width: var(--qlk-narrow);
}

.boxBarButtons {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--qlk-2);
}

.boxBarFine {
  color: var(--qlk-faint);
  display: block;
  font-size: var(--qlk-sm);
  max-width: var(--qlk-narrow);
}

@media (min-width: 832px) {
  .boxBar {
    min-height: clamp(520px, calc(100vh - var(--qlk-height-desktop)), 760px);
  }
}

@media (min-width: 1136px) {
  .boxBarGlyph {
    inset-inline-start: max(var(--qlk-padding-desktop), calc((100vw - var(--qlk-main)) / 2));
  }

  .boxBarCore {
    padding-inline-start: calc(var(--qlk-padding-desktop) + 22%);
  }

  .boxBarName {
    max-width: 14ch;
  }
}

/* ── page header : PHEAD-10 ────────────────────────────────────────── */
.crateRegion {
  background: var(--qlk-deep);
  padding-block: var(--qlk-sec);
}

.crateRegionCore {
  text-align: center;
}

.crateRegionNote {
  color: var(--qlk-focus);
  display: block;
  font-size: var(--qlk-sm);
  font-weight: var(--qlk-semi);
  letter-spacing: var(--qlk-wide);
  margin-block-end: var(--qlk-2);
  text-transform: uppercase;
}

.crateRegionName {
  font-size: clamp(30px, 6vw, 66px);
  margin-inline: auto;
}

.crateRegionDot {
  color: var(--qlk-focus);
  display: block;
  font-size: var(--qlk-h2);
  line-height: 1;
  margin-block: var(--qlk-2);
}

.crateRegionDeck {
  color: var(--qlk-faint);
  font-size: var(--qlk-h4);
  font-style: italic;
  line-height: var(--l-base);
  margin-inline: auto;
  max-width: var(--qlk-narrow);
}

/* ── prose : PROSE-15 ──────────────────────────────────────────────── */
.flagRegion {
  padding-block: var(--qlk-sec);
}

.flagRegionHead {
  font-size: var(--qlk-h2);
  margin-block-end: var(--qlk-4);
}

.flagRegionProse {
  color: var(--qlk-faint);
  font-size: var(--qlk-base);
  line-height: var(--qlk-loose);
  margin-block-end: var(--qlk-3);
}

.flagRegionHead + .flagRegionProse {
  color: var(--qlk-type);
  font-weight: var(--qlk-semi);
}

.flagRegionProse strong {
  color: var(--qlk-type);
}

.flagRegionPath {
  color: var(--qlk-focus);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.flagRegionPath:hover {
  color: var(--qlk-action-down);
}

.flagRegionRun,
.flagRegionSteps {
  color: var(--qlk-faint);
  display: flex;
  flex-direction: column;
  gap: var(--qlk-1);
  line-height: var(--qlk-loose);
  margin-block-end: var(--qlk-4);
  padding-inline-start: var(--qlk-4);
}

.flagRegionRun {
  list-style: square;
}

.flagRegionSteps {
  list-style: decimal;
}

.flagRegionUnit {
  padding-inline-start: var(--qlk-1);
}

.flagRegionUnit strong {
  color: var(--qlk-type);
}

.flagRegionFig {
  margin-block: var(--qlk-4);
}

.flagRegionShot {
  border: var(--qlk-thin) solid var(--qlk-border);
  border-radius: var(--r-5);
  display: block;
  height: 240px;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

@media (min-width: 832px) {
  .flagRegionShot {
    height: 360px;
  }
}

/* ── items grid : GRID-10 ──────────────────────────────────────────── */
.annexRegion {
  padding-block: var(--qlk-sec);
}

.annexRegionHead {
  margin-block-end: var(--qlk-5);
}

.annexRegionRun {
  display: grid;
  gap: var(--qlk-4);
  grid-template-columns: minmax(0, 1fr);
}

.annexRegionTile {
  background: var(--qlk-above);
  border: var(--qlk-thin) solid var(--qlk-border);
  border-radius: var(--r-3);
  color: var(--qlk-type);
  min-height: 180px;
  padding: var(--qlk-4);
  transition: background var(--qlk-fast) var(--qlk-release), border-color var(--qlk-fast) var(--qlk-release);
}

.annexRegionTile:hover {
  background: var(--qlk-deep);
  border-color: var(--qlk-edge-hard);
}

.annexRegionImg {
  color: var(--qlk-focus);
  display: block;
  fill: currentColor;
  height: 30px;
  margin-block-end: var(--qlk-2);
  width: 30px;
}

.annexRegionLabel {
  color: var(--qlk-type);
  margin-block-end: var(--qlk-1);
}

.annexRegionTile .annexRegionProse {
  color: var(--qlk-faint);
  font-size: var(--qlk-sm);
  line-height: var(--l-base);
}

@media (min-width: 488px) {
  .annexRegionRun {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 832px) {
  .annexRegionRun {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1136px) {
  .annexRegionRun {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── reviews : REV-06 ──────────────────────────────────────────────── */
.caseContainer {
  padding-block: var(--qlk-sec);
  scroll-margin-block-start: calc(var(--qlk-height-desktop) + var(--qlk-3));
}

.caseContainerHead {
  margin-block-end: var(--qlk-4);
}

.caseContainerRun {
  list-style: none;
  margin: 0;
  padding: 0;
}

.caseContainerUnit {
  border-bottom: var(--qlk-thin) solid var(--qlk-border);
  display: block;
  padding-block: var(--qlk-4);
}

.caseContainerFile {
  align-items: baseline;
  column-gap: var(--qlk-2);
  display: flex;
  flex-wrap: wrap;
  margin-block-end: var(--qlk-1);
}

.caseContainerTitle {
  color: var(--qlk-type);
  font-size: var(--qlk-base);
  font-weight: var(--qlk-semi);
}

.caseContainerScore {
  color: var(--qlk-focus);
  font-size: var(--qlk-sm);
  font-weight: var(--qlk-semi);
  letter-spacing: var(--qlk-wide);
}

.caseContainerStars {
  color: var(--qlk-focus);
  letter-spacing: 1px;
}

.caseContainerProse {
  color: var(--qlk-faint);
  line-height: var(--qlk-loose);
}

/* ── faq : FAQ-10 ──────────────────────────────────────────────────── */
.spikeGrid {
  padding-block: var(--qlk-sec);
}

.spikeGridCore {
  display: grid;
  gap: var(--qlk-5);
  grid-template-columns: minmax(0, 1fr);
}

.spikeGridSide {
  align-self: start;
  background: var(--qlk-above);
  border-radius: var(--r-5);
  color: var(--qlk-type);
  padding: var(--qlk-4);
}

.spikeGridHead {
  margin-block-end: var(--qlk-2);
}

.spikeGridDeck {
  color: var(--qlk-faint);
  line-height: var(--l-base);
}

.spikeGridRun {
  display: flex;
  flex-direction: column;
  gap: var(--qlk-4);
}

.spikeGridUnit {
  border-bottom: var(--qlk-thin) solid var(--qlk-border);
  padding-block-end: var(--qlk-4);
}

.spikeGridSum {
  align-items: baseline;
  cursor: pointer;
  display: flex;
  gap: var(--qlk-2);
  justify-content: space-between;
  list-style: none;
}

.spikeGridSum::-webkit-details-marker {
  display: none;
}

.spikeGridLabel {
  color: var(--qlk-type);
  font-size: var(--qlk-h4);
}

.spikeGridMark {
  border-bottom: 2px solid var(--qlk-focus);
  border-right: 2px solid var(--qlk-focus);
  display: block;
  flex-shrink: 0;
  height: 9px;
  transform: rotate(45deg);
  width: 9px;
}

.spikeGridUnit[open] .spikeGridMark {
  transform: rotate(225deg);
}

.spikeGridFill {
  padding-block-start: var(--qlk-2);
}

.spikeGridProse {
  color: var(--qlk-faint);
  line-height: var(--qlk-loose);
}

@media (min-width: 1136px) {
  .spikeGridCore {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }

  .spikeGridSide {
    position: sticky;
    top: calc(var(--qlk-height-desktop) + var(--qlk-4));
  }
}

/* ── data table : TABLE-05 ─────────────────────────────────────────── */
.capsuleGrid {
  padding-block: var(--qlk-sec);
}

.capsuleGridHead {
  font-family: var(--qlk-lead);
  font-size: var(--qlk-h3);
  font-weight: var(--qlk-semi);
  margin-block-end: var(--qlk-3);
  text-transform: uppercase;
}

.capsuleGridScroll {
  overflow-x: auto;
  width: 100%;
}

.capsuleGridTable {
  border-collapse: collapse;
  width: 100%;
}

.capsuleGridFile {
  border-bottom: var(--qlk-thin) solid var(--qlk-border);
}

.capsuleGridCell {
  color: var(--qlk-faint);
  font-size: var(--qlk-sm);
  line-height: var(--l-base);
  overflow-wrap: anywhere;
  padding: var(--qlk-1) var(--qlk-2);
  text-align: start;
  vertical-align: top;
}

.capsuleGridTable thead .capsuleGridCell {
  background: var(--qlk-above);
  color: var(--qlk-type);
  font-family: var(--qlk-reading);
  font-size: var(--qlk-micro);
  font-weight: var(--qlk-semi);
  letter-spacing: var(--qlk-wide);
  padding: var(--qlk-2);
  text-transform: uppercase;
}

.capsuleGridTable tbody .capsuleGridFile:first-child .capsuleGridCell {
  color: var(--qlk-type);
}

/* ── cta block : CTA-10 ────────────────────────────────────────────── */
.wingTile {
  padding-block: var(--qlk-sec);
  scroll-margin-block-start: calc(var(--qlk-height-desktop) + var(--qlk-3));
}

.wingTileCore {
  text-align: center;
}

.wingTileName {
  color: var(--qlk-type);
  font-family: var(--qlk-lead);
  font-size: clamp(28px, 5.2vw, 60px);
  font-style: italic;
  font-weight: var(--qlk-black);
  letter-spacing: var(--qlk-packed);
  line-height: 1.06;
  margin-inline: auto;
  max-width: 18ch;
  position: relative;
}

.wingTileName::before {
  color: var(--qlk-focus);
  content: "\201C";
  display: block;
  font-size: 2.2em;
  line-height: 0.7;
  opacity: 0.45;
}

.wingTileDeck {
  color: var(--qlk-faint);
  line-height: var(--qlk-loose);
  margin-block: var(--qlk-4);
  margin-inline: auto;
  max-width: var(--qlk-narrow);
}

.wingTileButtons {
  display: flex;
  justify-content: center;
}

.wingTileFine {
  color: var(--qlk-faint);
  display: block;
  font-size: var(--qlk-sm);
  margin-block-start: var(--qlk-2);
}

/* ── inline cta : INLINE-CTA-06 ────────────────────────────────────── */
.slateGrid {
  display: block;
  padding-block: var(--qlk-4);
  padding-inline: var(--qlk-gate);
}

.slateGridCore {
  background: var(--qlk-above);
  border: var(--qlk-thin) solid var(--qlk-border);
  border-radius: var(--r-5);
  color: var(--qlk-type);
  display: flex;
  flex-direction: column;
  gap: var(--qlk-2);
  margin-inline: auto;
  max-width: var(--qlk-main);
  padding: var(--qlk-4);
  text-align: center;
}

.slateGridProse {
  color: var(--qlk-faint);
  margin-inline: auto;
  max-width: var(--qlk-narrow);
}

.slateGridButtons {
  display: flex;
  flex-direction: column;
  gap: var(--qlk-1);
  justify-content: center;
}

.slateGridGhost {
  align-items: center;
  background: var(--qlk-back);
  border: var(--qlk-thin) solid var(--qlk-edge-hard);
  border-radius: var(--r-4);
  color: var(--qlk-type);
  display: inline-flex;
  font-family: var(--qlk-lead);
  font-size: var(--qlk-sm);
  font-weight: var(--qlk-semi);
  justify-content: center;
  letter-spacing: var(--qlk-wide);
  min-height: 46px;
  padding-inline: var(--qlk-4);
  text-decoration: none;
  text-transform: uppercase;
}

.slateGridGhost:hover {
  background: var(--qlk-deep);
  border-color: var(--qlk-type);
  color: var(--qlk-type);
}

.slateGridCell {
  background: var(--qlk-root);
  border: var(--qlk-thin) solid var(--qlk-edge-hard);
  border-radius: var(--r-3);
  color: var(--qlk-type);
  display: flex;
  flex-direction: column;
  gap: var(--qlk-2);
  justify-content: center;
  min-height: 180px;
  padding: var(--qlk-4);
}

.slateGridCell .slateGridProse {
  color: var(--qlk-type);
  font-size: var(--qlk-sm);
  margin-inline: 0;
}

.caseContainerPlug,
.spikeGridPlug {
  display: block;
  padding-block: var(--qlk-4);
}

.caseContainerPlug {
  border-bottom: var(--qlk-thin) solid var(--qlk-border);
}

@media (min-width: 832px) {
  .slateGridButtons {
    flex-direction: row;
  }
}

/* ── legal : LEGAL-05 ──────────────────────────────────────────────── */
.blockGroup {
  padding-block: var(--qlk-sec);
}

.blockGroupIntro {
  color: var(--qlk-type);
  font-size: var(--qlk-h4);
  line-height: var(--l-base);
  margin-block-end: var(--qlk-5);
}

.blockGroupList {
  display: block;
}

.blockGroupTerm {
  color: var(--qlk-type);
  font-family: var(--qlk-lead);
  font-size: var(--qlk-h4);
  font-weight: var(--qlk-semi);
  margin-block-end: var(--qlk-1);
  margin-block-start: var(--qlk-5);
}

.blockGroupTerm::before {
  background: var(--qlk-focus);
  content: "";
  display: block;
  height: 2px;
  margin-block-end: var(--qlk-1);
  width: 30px;
}

.blockGroupDef {
  margin-block-end: var(--qlk-4);
  margin-inline-start: 0;
}

.blockGroupProse {
  color: var(--qlk-faint);
  line-height: var(--qlk-loose);
  margin-block-end: var(--qlk-2);
}

.blockGroupRun {
  color: var(--qlk-faint);
  display: flex;
  flex-direction: column;
  gap: var(--qlk-1);
  line-height: var(--qlk-loose);
  list-style: square;
  padding-inline-start: var(--qlk-4);
}

.blockGroupPoint {
  padding-inline-start: var(--qlk-1);
}

.blockGroupNote {
  border-top: var(--qlk-thin) solid var(--qlk-border);
  color: var(--qlk-faint);
  display: block;
  font-size: var(--qlk-sm);
  line-height: var(--l-base);
  margin-block-start: var(--qlk-5);
  padding-block-start: var(--qlk-4);
}

/* ── contact form : FORM-01 ────────────────────────────────────────── */
.latchLane {
  padding-block: var(--qlk-sec);
}

.latchLaneIntro {
  color: var(--qlk-faint);
  line-height: var(--qlk-loose);
  margin-block-end: var(--qlk-5);
}

.latchLaneDone {
  background: #14331f;
  border: var(--qlk-thin) solid #2f7346;
  border-radius: var(--r-4);
  color: var(--qlk-type);
  display: none;
  margin-block-end: var(--qlk-4);
  padding: var(--qlk-4);
}

.latchLaneDone.is-visible {
  display: block;
}

.latchLaneForm {
  background: var(--qlk-above);
  border-radius: var(--r-4);
  color: var(--qlk-type);
  display: flex;
  flex-direction: column;
  gap: var(--qlk-4);
  padding: var(--qlk-4);
}

.latchLaneCell {
  display: flex;
  flex-direction: column;
  gap: var(--qlk-1);
}

.latchLaneNote {
  color: var(--qlk-type);
  font-size: var(--qlk-sm);
  font-weight: var(--qlk-semi);
  letter-spacing: var(--qlk-wide);
  text-transform: uppercase;
}

.latchLaneInput {
  background: var(--qlk-back);
  border: var(--qlk-thin) solid var(--qlk-edge-hard);
  border-radius: var(--r-4);
  color: var(--qlk-type);
  font-family: var(--qlk-reading);
  font-size: var(--qlk-base);
  min-height: 48px;
  padding: var(--qlk-2) var(--qlk-3);
  width: 100%;
}

textarea.latchLaneInput {
  min-height: 132px;
  resize: vertical;
}

.latchLaneInput:focus {
  border-color: var(--qlk-focus);
}

.latchLaneSend {
  align-self: flex-start;
  background: var(--qlk-focus);
  border: 0;
  border-radius: var(--r-4);
  color: var(--qlk-back);
  cursor: pointer;
  font-family: var(--qlk-lead);
  font-size: var(--qlk-sm);
  font-weight: var(--qlk-black);
  letter-spacing: var(--qlk-wide);
  min-height: 48px;
  padding-inline: var(--qlk-5);
  text-transform: uppercase;
}

.latchLaneSend:hover {
  background: var(--qlk-action-down);
  color: var(--qlk-back);
}

/* ── author byline : BYLINE-01 ─────────────────────────────────────── */
.nodeBunch {
  display: block;
  padding-block: var(--qlk-4);
}

.nodeBunchCore {
  align-items: center;
  border-top: var(--qlk-thin) solid var(--qlk-border);
  display: flex;
  gap: var(--qlk-3);
  padding-block-start: var(--qlk-4);
}

.nodeBunchFace {
  border-radius: var(--qlk-dot);
  display: block;
  flex-shrink: 0;
  height: 48px;
  overflow: hidden;
  width: 48px;
}

.nodeBunchImg {
  display: block;
  height: 48px;
  object-fit: cover;
  object-position: center top;
  width: 48px;
}

.nodeBunchFill {
  display: block;
}

.nodeBunchSub {
  color: var(--qlk-faint);
  font-size: var(--qlk-base);
}

.nodeBunchTitle {
  color: var(--qlk-focus);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nodeBunchRole {
  color: var(--qlk-faint);
  font-size: var(--qlk-sm);
  font-style: italic;
  margin-block-start: var(--qlk-1);
}

/* ── author card : AUTH-08 ─────────────────────────────────────────── */
.padTrack {
  display: block;
  padding-block: var(--qlk-4);
}

.padTrackCore {
  align-items: center;
  display: flex;
  gap: var(--qlk-2);
}

.padTrackFace {
  border-radius: var(--qlk-dot);
  display: block;
  flex-shrink: 0;
  height: 40px;
  overflow: hidden;
  width: 40px;
}

.padTrackImg {
  display: block;
  height: 40px;
  object-fit: cover;
  object-position: center top;
  width: 40px;
}

.padTrackFill {
  display: block;
}

.padTrackTitle {
  color: var(--qlk-type);
  display: block;
  font-size: var(--qlk-base);
  font-weight: var(--qlk-semi);
}

.padTrackRole {
  color: var(--qlk-faint);
  display: block;
  font-size: var(--qlk-micro);
}

.padTrackSkills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qlk-1);
  list-style: none;
  margin-block-start: var(--qlk-4);
}

.padTrackSkill {
  background: var(--qlk-above);
  border: var(--qlk-thin) solid var(--qlk-border);
  border-radius: var(--qlk-capsule);
  color: var(--qlk-faint);
  font-size: var(--qlk-sm);
  padding: var(--qlk-1) var(--qlk-3);
}

.padTrackArticles {
  display: block;
  padding-block: var(--qlk-sec);
}

.padTrackArtHead {
  font-size: var(--qlk-h3);
  margin-block-end: var(--qlk-4);
}

.padTrackArtRun {
  display: flex;
  flex-direction: column;
  gap: var(--qlk-2);
  list-style: none;
  padding: 0;
}

.padTrackArtUnit {
  border-bottom: var(--qlk-thin) solid var(--qlk-border);
  padding-block-end: var(--qlk-2);
}

.padTrackPath {
  color: var(--qlk-focus);
  text-decoration: none;
}

.padTrackPath:hover {
  color: var(--qlk-action-down);
  text-decoration: underline;
}

/* ── error : ERR-01 ────────────────────────────────────────────────── */
.elementModule {
  padding-block: var(--qlk-sec);
}

.elementModuleCore {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--qlk-4);
  text-align: center;
}

.elementModuleDigits {
  color: var(--qlk-focus);
  display: block;
  font-family: var(--qlk-lead);
  font-size: clamp(80px, 18vw, 200px);
  font-weight: var(--qlk-black);
  line-height: 1;
}

.elementModuleName {
  max-width: var(--qlk-narrow);
}

.elementModuleProse {
  color: var(--qlk-faint);
  font-size: var(--qlk-h4);
  line-height: var(--l-base);
  max-width: var(--qlk-narrow);
}

.elementModuleBack {
  align-items: center;
  background: var(--qlk-focus);
  border-radius: var(--r-4);
  color: var(--qlk-back);
  display: inline-flex;
  font-family: var(--qlk-lead);
  font-size: var(--qlk-sm);
  font-weight: var(--qlk-black);
  letter-spacing: var(--qlk-wide);
  min-height: 52px;
  padding-inline: var(--qlk-5);
  text-decoration: none;
  text-transform: uppercase;
}

.elementModuleBack:hover {
  background: var(--qlk-action-down);
  color: var(--qlk-back);
}

/* ── footer : FOOT-04 (compact mini bar) ───────────────────────────── */
.crateWrapper {
  background: var(--qlk-deep);
  border-top: var(--qlk-thin) solid var(--qlk-border);
  flex-shrink: 0;
  padding-block: var(--qlk-4);
}

.crateWrapperCore {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--qlk-3);
  justify-content: space-between;
}

.crateWrapperBrandLane {
  display: flex;
  flex-direction: column;
  gap: var(--qlk-1);
}

.crateWrapperImg {
  display: block;
  height: 34px;
  width: auto;
}

.crateWrapperNote {
  color: var(--qlk-faint);
  font-size: var(--qlk-micro);
  max-width: 46ch;
}

.crateWrapperGuide {
  display: block;
}

.crateWrapperRun {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qlk-1) 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.crateWrapperUnit {
  display: block;
}

.crateWrapperUnit + .crateWrapperUnit {
  border-left: var(--qlk-thin) solid var(--qlk-border);
}

.crateWrapperPath {
  color: var(--qlk-faint);
  display: block;
  font-size: var(--qlk-micro);
  letter-spacing: var(--qlk-wide);
  padding-inline: var(--qlk-1);
  text-decoration: none;
  text-transform: uppercase;
}

.crateWrapperPath:hover {
  color: var(--qlk-type);
}

.crateWrapperGuideLegal .crateWrapperPath {
  color: var(--qlk-type);
}

.crateWrapperGuideLegal .crateWrapperPath:hover {
  color: var(--qlk-focus);
}

@media (min-width: 832px) {
  .crateWrapperCore {
    align-items: center;
    column-gap: var(--qlk-5);
    flex-direction: row;
    flex-wrap: wrap;
  }

  .crateWrapperGuide {
    flex: 1 1 340px;
  }

  .crateWrapperGuideLegal {
    flex: 0 0 auto;
  }

  .crateWrapperGuideLegal .crateWrapperRun {
    justify-content: flex-end;
  }
}

/* ── rg banner : RG-06 ─────────────────────────────────────────────── */
.rgBand {
  background: var(--qlk-age-band);
  color: var(--qlk-type);
  font-size: var(--qlk-micro);
  inset-block-end: 0;
  inset-inline: 0;
  line-height: 1.3;
  min-height: var(--qlk-rg);
  padding: var(--qlk-1) var(--qlk-2);
  pointer-events: none;
  position: fixed;
  text-align: center;
  z-index: 80;
}

.rgBandFill {
  color: var(--qlk-type);
  display: inline-block;
  max-width: 78ch;
}

.rgBandSign {
  background: var(--qlk-type);
  border-radius: var(--r-3);
  color: var(--qlk-age-band);
  font-weight: var(--qlk-black);
  padding: 1px 5px;
}

.rgBandPath {
  color: var(--qlk-type);
  pointer-events: auto;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rgBandPath:hover {
  color: var(--qlk-type);
}

/* ── cookie banner : COOK-12 ───────────────────────────────────────── */
.netHeader {
  background: var(--qlk-above);
  border-bottom: var(--qlk-thin) solid var(--qlk-edge-hard);
  clip-path: inset(0 0 0 0);
  color: var(--qlk-type);
  inset-block-start: 0;
  inset-inline: 0;
  padding-block: var(--qlk-3);
  position: fixed;
  transition: clip-path var(--qlk-easy) var(--qlk-release);
  z-index: 95;
}

.netHeader.is-hidden {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  visibility: hidden;
}

.netHeaderCore {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--qlk-2);
  justify-content: space-between;
}

.netHeaderMessage {
  color: var(--qlk-faint);
  font-size: var(--qlk-sm);
  line-height: 1.35;
}

.netHeaderButtons {
  display: flex;
  flex-shrink: 0;
  gap: var(--qlk-1);
  width: 100%;
}

.netHeaderOk,
.netHeaderReject {
  border-radius: var(--r-4);
  cursor: pointer;
  flex: 1 1 0;
  font-family: var(--qlk-lead);
  font-size: var(--qlk-micro);
  font-weight: var(--qlk-semi);
  letter-spacing: var(--e-normal);
  min-height: 40px;
  min-width: 0;
  padding-inline: var(--qlk-1);
  text-transform: uppercase;
}

.netHeaderOk {
  background: var(--qlk-focus);
  border: var(--qlk-thin) solid var(--qlk-focus);
  color: var(--qlk-back);
}

.netHeaderOk:hover {
  background: var(--qlk-action-down);
  border-color: var(--qlk-action-down);
  color: var(--qlk-back);
}

.netHeaderReject {
  background: var(--qlk-back);
  border: var(--qlk-thin) solid var(--qlk-edge-hard);
  color: var(--qlk-type);
}

.netHeaderReject:hover {
  background: var(--qlk-deep);
  color: var(--qlk-focus);
}

@media (min-width: 488px) {
  .netHeaderOk,
  .netHeaderReject {
    flex: 0 0 auto;
    font-size: var(--qlk-sm);
    letter-spacing: var(--qlk-wide);
    min-height: 44px;
    padding-inline: var(--qlk-3);
    white-space: nowrap;
  }

  .netHeaderButtons {
    width: auto;
  }
}

@media (min-width: 832px) {
  .netHeaderCore {
    align-items: center;
    flex-direction: row;
    gap: var(--qlk-4);
  }
}

/* ── offer buttons (scripts/cta-style.mjs, seed = domain) ──────────── */
.boxBarCta,
.wingTileCta,
.slateGridCta,
.labelBunchCta {
  flex-shrink: 0;
  max-width: 100%;
  text-align: center;
}

.jakija-go{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--qlk-4);min-height:46px;border-radius:var(--r-4);border:var(--qlk-thin) solid var(--qlk-edge-hard);font-size:var(--qlk-sm);font-weight:var(--qlk-semi);letter-spacing:var(--qlk-wide)}
.jakija-go{
  background:#0891B2;color:#191A20;text-decoration:none;text-transform:uppercase;
  transition:background 0.18s cubic-bezier(.2,.7,.3,1),box-shadow 0.18s cubic-bezier(.2,.7,.3,1);}
.jakija-go.jakija-go{color:#191A20;text-decoration:none;}
.jakija-go:hover{background:#0E7490;color:#FFFFFF;animation:none}
.jakija-go.jakija-go:hover{color:#FFFFFF;text-decoration:none}
.jakija-go:hover::after{animation:none}
.jakija-go:active{background:#155E75;color:#FFFFFF}
.jakija-go:focus-visible{outline:3px solid #191A20;outline-offset:3px}
@keyframes jakija-glow{0%{transform:translateX(0)}22.222%{transform:translateX(2px)}44.444%,100%{transform:translateX(0)}}
.jakija-go{animation:jakija-glow 1.35s linear infinite}
@media (prefers-reduced-motion:reduce){.jakija-go,.jakija-go::after{animation:none!important;transition:none!important}}

/* nojs guard 28.09.2026: без JS контент виден */
html.no-js [data-reveal],
html.no-js .boxBarGlyph{opacity:1!important;transform:none!important;visibility:visible!important;clip-path:none!important}