/* ============================================================
   KOGNEV — homepage, "technical instrument" pass
   Scoped to body.kg2 so shared pages remain on the old system.

   Direction: the page should read like the tooling KOGNEV builds,
   not like a brochure about it. Structure carries the meaning —
   rules separate real groups, numbering appears only where the
   content is genuinely a sequence, and there is one moment of
   motion instead of a reveal on every block.

   Palette is derived from the logo (#1A8EB7 cyan), replacing the
   previous green, which was Tailwind's teal-700 default and bore
   no relationship to the brand mark.
   ============================================================ */

/* ---------- IBM Plex Mono — kept ONLY for machine data
     (step indices, field counters). Not used as a decorative
     label face, which is what made it read as template chrome. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/brand_assets/fonts/ibm-plex-mono-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/brand_assets/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/brand_assets/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
}

/* ============================================================
   1. TOKENS
   ============================================================ */
body.kg2 {
  /* Ground. Deliberately a neutral cool white, not the warm cream
     that has become the default generated-page background. */
  --paper: #FCFCFB;
  --paper-sunk: #F4F5F6;
  --surface: #FFFFFF;

  /* Text. Cool near-black rather than a tinted off-black. */
  --ink: #101418;
  --slate: #5A6672;        /* 5.72:1 on paper */
  --slate-quiet: #77828C;  /* meta only, never body copy */

  /* Brand cyan, sampled from brand_assets/kognev-logo.png */
  --signal: #1A8EB7;       /* 3.65:1 — graphics + large type only */
  --signal-ink: #0B5A78;   /* 7.44:1 — safe for links and body */
  --signal-lift: #52B3D4;  /* 7.38:1 on the dark band */
  --signal-wash: #EAF4F9;

  /* Dark band */
  --deep: #0E1A20;
  --deep-2: #16242C;
  --on-deep: #F2F6F8;      /* 17.2:1 */
  --on-deep-soft: #9CACB6; /* 7.57:1 */
  --on-deep-rule: rgba(255, 255, 255, 0.13);

  --rule: #DDE1E4;
  --rule-strong: #C3CAD0;
  --slate-pale: #838D96;    /* 3.29:1 — large type (>=24px) only */

  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale — 1.32 ratio, six steps replacing the previous
     fourteen ad-hoc sizes. */
  --t-micro: 0.8125rem;  /* 13 */
  --t-body: 1rem;        /* 16 */
  --t-lead: 1.3125rem;   /* 21 */
  --t-h3: 1.3125rem;     /* 21 */
  --t-h2: clamp(1.75rem, 1.15rem + 2.2vw, 2.3125rem);   /* 28 → 37 */
  --t-h1: clamp(2.3125rem, 1.35rem + 4.1vw, 3.4375rem); /* 37 → 55 */

  /* Spacing tokens — a real 8px-derived ramp, used consistently. */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: clamp(3.5rem, 2.4rem + 4.4vw, 6rem);

  /* Shadows are cyan-tinted and low-opacity, never neutral grey. */
  --sh-sm: 0 1px 2px rgba(16, 20, 24, 0.05);
  --sh-md: 0 1px 2px rgba(16, 20, 24, 0.05), 0 12px 28px -14px rgba(11, 90, 120, 0.28);

  /* Remap of the shared component vars used by styles.css */
  --surface-warm: #FCFCFB;
  --surface-white: #FFFFFF;
  --surface-tint: #F4F5F6;
  --surface-teal-light: #EAF4F9;
  --text-primary: #101418;
  --text-secondary: #5A6672;
  --text-muted: #5A6672;
  --text-placeholder: #6E7A85;
  --teal-600: #0B5A78;
  --teal-700: #0A4E68;
  --teal-800: #084258;
  --border-default: #DDE1E4;
  --border-strong: #C3CAD0;

  background-color: var(--paper);
  color: var(--ink);
  color-scheme: light;
  font-family: var(--sans);
}

body.kg2::after { opacity: 0.01; }

body.kg2 .btn-primary,
body.kg2 .btn-secondary,
body.kg2 .nav-link,
body.kg2 .text-link,
body.kg2 .footer-link { touch-action: manipulation; }

/* ============================================================
   2. SHARED COMPONENT NUDGES
   Square-ish geometry: 3px, applied only to interactive surfaces.
   Static blocks get no radius at all, so the radius means
   "you can act on this" rather than being uniform decoration.
   ============================================================ */
body.kg2 .btn-primary {
  border-radius: 3px;
  background: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: none;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background-color 160ms cubic-bezier(0.2, 0, 0, 1),
              border-color 160ms cubic-bezier(0.2, 0, 0, 1);
}
body.kg2 .btn-primary:hover {
  background: var(--signal-ink);
  border-color: var(--signal-ink);
  box-shadow: none;
}
body.kg2 .btn-primary:active { background: #08475F; border-color: #08475F; }
body.kg2 .btn-primary:focus-visible {
  outline: 2px solid var(--signal-ink);
  outline-offset: 2px;
}

body.kg2 .btn-secondary {
  border-radius: 3px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  box-shadow: none;
  transition: border-color 160ms cubic-bezier(0.2, 0, 0, 1),
              background-color 160ms cubic-bezier(0.2, 0, 0, 1);
}
body.kg2 .btn-secondary:hover { border-color: var(--ink); background: var(--paper-sunk); }
body.kg2 .btn-secondary:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 2px; }

body.kg2 .nav-wrapper {
  background: rgba(252, 252, 251, 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
body.kg2 .nav-logo { letter-spacing: -0.03em; font-weight: 600; }

/* Text links: the arrow glyph is gone from the markup. The link is
   marked by a rule that thickens on hover — a state change rather
   than an ornament that sits there permanently. */
body.kg2 .text-link {
  color: var(--signal-ink);
  font-weight: 500;
  font-size: var(--t-micro);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: border-color 160ms cubic-bezier(0.2, 0, 0, 1),
              color 160ms cubic-bezier(0.2, 0, 0, 1);
}
body.kg2 .text-link:hover { border-bottom-color: var(--signal-ink); }
body.kg2 .text-link:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 3px; border-radius: 1px; }
body.kg2 .text-link .arrow { display: none; }

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
/* The eyebrow is retired. Kept as a no-op so any stray markup
   in other locales cannot leave a floating all-caps label. */
.kg2 .kg-eyebrow { display: none; }

.kg2 .kg-h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.kg2 .kg-h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.kg2 .kg-h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.kg2 .kg-lead {
  font-family: var(--sans);
  font-size: var(--t-lead);
  line-height: 1.52;
  letter-spacing: -0.012em;
  color: var(--slate);
  max-width: 34ch;
}
.kg2 .kg-body { font-size: var(--t-body); line-height: 1.62; color: var(--slate); max-width: 68ch; }
.kg2 .kg-body-s { font-size: var(--t-body); line-height: 1.6; color: var(--slate); max-width: 68ch; }

/* ============================================================
   4. SECTION RHYTHM
   Headings sit in a narrow left column and the content runs in a
   wide right column, so a section heading reads as a margin note
   against its content instead of a centred banner over cards.
   ============================================================ */
.kg2 .kg-section { padding: var(--s-7) 0; }
.kg2 .kg-section--line { border-top: 1px solid var(--rule); }
.kg2 .kg-section--dark {
  padding: var(--s-7) 0;
  background: var(--deep);
  color: var(--on-deep-soft);
}
.kg2 .kg-section--dark .kg-h2,
.kg2 .kg-section--dark .kg-h3 { color: var(--on-deep); }
.kg2 .kg-section--dark .kg-body,
.kg2 .kg-section--dark .kg-body-s { color: var(--on-deep-soft); }
.kg2 .kg-section--dark .text-link {
  color: var(--signal-lift);
  border-bottom-color: rgba(82, 179, 212, 0.4);
}
.kg2 .kg-section--dark .text-link:hover { border-bottom-color: var(--signal-lift); }
.kg2 .kg-section--dark .btn-primary {
  background: var(--signal-lift);
  border-color: var(--signal-lift);
  color: #06222E;
}
.kg2 .kg-section--dark .btn-primary:hover { background: #7ACAE4; border-color: #7ACAE4; }

.kg2 .kg-head { max-width: 44rem; }

/* ============================================================
   5. HERO
   ============================================================ */
.kg2 .kg-hero { padding: clamp(2.5rem, 1.6rem + 4vw, 4.5rem) 0 var(--s-7); }
.kg2 .kg-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: center;
}
.kg2 .kg-hero__copy .kg-h1 { margin-top: 0; }
.kg2 .kg-hero__copy .kg-lead { margin-top: var(--s-4); max-width: 46ch; }
.kg2 .kg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.kg2 .kg-hero__visual { align-self: center; }
.kg2 .kg-net { width: 100%; height: auto; max-height: 400px; display: block; }


/* ============================================================
   6. SERVICES — spec list, not a card grid
   Three identical bordered cards were the single most templated
   block on the page. The same content is now a ruled list: name
   in a fixed left column, description and outcome in the wide
   column. It reads as a specification sheet, which is what the
   content actually is.

   The section shares its outer anatomy with PROCESS below it —
   same aside width, same column gap, same hairline rule weight —
   so the list's content column starts at the same x position in
   both sections. Before this, the heading here sat flush with its
   own list while the next section's heading sat in a narrow rail
   with its list indented past it; the two blocks didn't share a
   left edge and read as unrelated systems stacked on the page.
   ============================================================ */
.kg2 .kg-svc-wrap {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 1.4rem + 3.4vw, 4.5rem);
  align-items: start;
}
.kg2 .kg-svc {
  display: block;
  border-top: 1px solid var(--rule);
}
.kg2 .kg-svc__item {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  align-items: start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}
.kg2 .kg-svc__item .kg-h3 { font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; }
.kg2 .kg-svc__item > p {
  color: var(--slate);
  font-size: var(--t-micro);
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}
/* The outcome line is the one thing a buyer scans for, so it gets
   ink weight while the description stays quiet. */
.kg2 .kg-svc__out {
  color: var(--ink) !important;
  font-size: var(--t-micro) !important;
  line-height: 1.6 !important;
}
.kg2 .kg-svc__link { grid-column: 2 / -1; justify-self: start; margin-top: var(--s-1); }

/* ============================================================
   7. PROCESS — editorial numerals, no card chrome
   Numbers are the only structural device: no markers, no rail, no
   dot indicating "ongoing" vs "solid". Each step is a large quiet
   numeral beside a heading, separated from the next by one thin
   rule — the same restrained device used for the services list,
   at a lighter weight because this list is shorter and less dense.
   ============================================================ */
.kg2 .kg-flow {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  grid-template-areas:
    "head list"
    "cta  list";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 1.4rem + 3.4vw, 4.5rem);
  row-gap: var(--s-4);
  align-items: start;
}
.kg2 .kg-flow__head { grid-area: head; }
.kg2 .kg-flow__cta { grid-area: cta; align-self: end; }
.kg2 .kg-flow__list {
  grid-area: list;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.kg2 .kg-flow__step {
  display: grid;
  grid-template-columns: minmax(3.5rem, 4.5rem) minmax(0, 1fr);
  column-gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}

/* The numeral is the only marker: large, thin-weight, and pale
   enough to sit behind the heading rather than compete with it —
   a typographic cue, not a UI element. */
.kg2 .kg-flow__n {
  grid-column: 1;
  grid-row: 1 / 3;
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--slate-pale);
}
.kg2 .kg-flow__step h3 { grid-column: 2; margin: 0; }
.kg2 .kg-flow__desc { grid-column: 2; margin-top: var(--s-2); max-width: 56ch; font-size: var(--t-micro); }

.kg2 .kg-flow__cta { display: grid; gap: var(--s-2); justify-items: start; }
.kg2 .kg-flow__note { margin: 0; font-size: var(--t-micro); color: var(--slate); max-width: 22rem; }

/* ============================================================
   8. TRAINING (dark band)
   Same aside+list anatomy as the two light sections above it —
   heading in a left rail, content list starting at the same x
   position — so the dark ground reads as one section of a
   continuous page rather than a different site bolted on. The
   darkness itself stays as the one deliberate break in rhythm;
   only the underlying grid is shared.

   No numbering: these are two parallel offerings a buyer chooses
   between, not steps in a sequence.
   ============================================================ */
.kg2 .kg-tr-wrap {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 1.4rem + 3.4vw, 4.5rem);
  align-items: start;
}
.kg2 .kg-tr__intro { margin-top: var(--s-4); }
.kg2 .kg-tr__list { margin: 0; border-top: 1px solid var(--on-deep-rule); }
.kg2 .kg-tr__row {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--s-2) var(--s-5);
  align-items: start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--on-deep-rule);
}
.kg2 .kg-tr__row > div { min-width: 0; }
.kg2 .kg-tr__row .kg-h3 { font-size: var(--t-body); }
.kg2 .kg-tr__row p { margin: 0; font-size: var(--t-micro); max-width: 60ch; }
.kg2 .kg-tr__link { display: inline-block; margin-top: var(--s-3); }

/* ============================================================
   9. CONTACT
   ============================================================ */
.kg2 .kg-contact__grid {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
}
.kg2 .kg-contact__aside { display: flex; flex-direction: column; gap: var(--s-4); padding-top: 0.25rem; }
.kg2 .kg-contact__grid .form-label { font-size: var(--t-micro); font-weight: 500; color: var(--ink); }
.kg2 .kg-contact__grid .form-input {
  padding: 11px 13px;
  border-radius: 3px;
  border: 1px solid var(--rule-strong);
  font-size: var(--t-body);
  background: var(--surface);
  transition: border-color 160ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 160ms cubic-bezier(0.2, 0, 0, 1);
}
.kg2 .kg-contact__grid .form-input:focus {
  border-color: var(--signal-ink);
  box-shadow: 0 0 0 3px rgba(26, 142, 183, 0.16);
  outline: none;
}
.kg2 .kg-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6672' stroke-width='1.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ============================================================
   10. FOOTER
   Previous footer text ran at 2.54:1 and 4.12:1 against the dark
   ground. Raised to 7.57:1.
   ============================================================ */
.kg2 footer {
  background: var(--deep);
  border-top: 1px solid var(--on-deep-rule);
  color: var(--on-deep-soft);
}
.kg2 footer p,
.kg2 footer .footer-link { color: var(--on-deep-soft); }
.kg2 footer .footer-link:hover { color: var(--on-deep); }
.kg2 footer .footer-heading {
  color: var(--on-deep-soft);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.kg2 footer span[style*="DM Serif"] {
  color: var(--on-deep) !important;
  font-family: var(--sans) !important;
  font-size: 1.3125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}
.kg2 footer .copy-email-button { color: var(--on-deep); }
.kg2 footer .copy-email-button:hover { color: #FFFFFF; }
.kg2 footer hr.divider { border-top-color: var(--on-deep-rule); }
.kg2 footer a[href="/privatumo-politika/"] { color: var(--on-deep-soft) !important; }
.kg2 footer img[src*="kognev-logo"] { display: none; }

/* Footer + nav tap targets. Measured at 17px tall; padding lifts
   the hit area past the 24px pointer minimum without changing the
   visual rhythm of the list. */
.kg2 footer .footer-link,
.kg2 footer a[href="/privatumo-politika/"] {
  display: inline-block;
  padding-block: 5px;
}

/* ============================================================
   11. MOTION
   One orchestrated moment on load, in the hero only. The blanket
   fade-and-slide on every section title, intro and grid child is
   removed — that pattern is the clearest motion tell of a
   generated page, and it delayed content for no informational
   gain.
   ============================================================ */
.kg2 .kg-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .kg2 .kg-hero__copy > *,
  .kg2 .kg-hero__visual {
    animation: kg-rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .kg2 .kg-hero__copy > *:nth-child(1) { animation-delay: 40ms; }
  .kg2 .kg-hero__copy > *:nth-child(2) { animation-delay: 100ms; }
  .kg2 .kg-hero__copy > *:nth-child(3) { animation-delay: 160ms; }
  .kg2 .kg-hero__visual { animation-delay: 220ms; }
}

@keyframes kg-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kg2 .kg-hero__copy > *,
  .kg2 .kg-hero__visual {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  /* The restored node-graph carries its own internal SVG <animate> /
     <animateMotion> loops (pulsing rings, dots travelling the
     connecting lines). styles.css only gates the legacy
     .hero-visual class, not this section's .kg-net, so it is
     gated here to actually respect Reduce Motion. */
  .kg2 .kg-net animate,
  .kg2 .kg-net animateMotion {
    display: none;
  }
}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .kg2 .kg-hero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .kg2 .kg-hero__visual { max-width: 32rem; }
  .kg2 .kg-svc-wrap { grid-template-columns: 1fr; }
  .kg2 .kg-svc__head { margin-bottom: var(--s-5); }
  .kg2 .kg-svc__item { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
  .kg2 .kg-svc__item .kg-svc__out { grid-column: 2; }
  .kg2 .kg-svc__link { grid-column: 2; }
  .kg2 .kg-flow {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "list" "cta";
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }
  .kg2 .kg-flow__head { margin-bottom: var(--s-5); }
  .kg2 .kg-flow__cta { margin-top: var(--s-5); }
  .kg2 .kg-tr-wrap { grid-template-columns: 1fr; }
  .kg2 .kg-tr__head { margin-bottom: var(--s-5); }
  .kg2 .kg-tr__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
  .kg2 .kg-contact__grid { grid-template-columns: 1fr; }
}

/* The hero diagram earns its place beside the headline. Stacked under the CTAs on a
   phone it is a graphic with no context, it pushes the real content down, and its 9px
   labels are unreadable, so it is dropped there. The founder photo on Apie shares the
   wrapper class and must stay, hence the modifier. */
@media (max-width: 700px) {
  .kg2 .kg-hero__visual--net { display: none; }
  .kg2 .kg-hero__grid { gap: 0; }

  /* The language switcher took 126px of a 390px header, as wide as the logo itself,
     while the same switcher already sits at the top of the mobile menu. Dropping it
     here gives the brand room and leaves one obvious control beside it. */
  .kg2 .nav-lang { display: none; }

  /* With the bar reduced to a logo and a button, the menu is the only navigation on a
     phone, so every target in it has to clear 44px. This submenu link sat at 39. */
  .kg2 #mobile-menu .mobile-menu-sub {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 700px) {
  .kg2 .kg-svc__item {
    grid-template-columns: 1fr;
    gap: var(--s-2);
    padding: var(--s-3) 0;
  }
  .kg2 .kg-svc__item .kg-svc__out,
  .kg2 .kg-svc__link { grid-column: 1; }
  .kg2 .kg-tr__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .kg2 .kg-hero__actions .btn-primary,
  .kg2 .kg-hero__actions .btn-secondary { width: 100%; justify-content: center; }
}

/* Touch targets: 44px minimum on coarse pointers. */
@media (pointer: coarse) {
  .kg2 footer .footer-link,
  .kg2 footer a[href="/privatumo-politika/"] {
    padding-block: 12px;
  }
  .kg2 .text-link { display: inline-block; padding-block: 10px; }
}

/* ============================================================
   13. CORRECTIONS FROM SCREENSHOT REVIEW
   ============================================================ */

/* The footer's primary button inherited --ink (#101418) on the
   footer's #0E1A20 ground — 1.1:1, effectively invisible. It takes
   the same lifted cyan the dark band uses. */
.kg2 footer .btn-primary {
  background: var(--signal-lift);
  border-color: var(--signal-lift);
  color: #06222E;
}
.kg2 footer .btn-primary:hover { background: #7ACAE4; border-color: #7ACAE4; }
.kg2 footer .btn-primary:focus-visible { outline: 2px solid var(--signal-lift); outline-offset: 2px; }

/* ============================================================
   14. MEASURED FIXES (round 2)
   ============================================================ */

/* Nav logo was the last thing still set in DM Serif. */
.kg2 .nav-logo,
.kg2 .nav-logo span {
  font-family: var(--sans) !important;
  font-size: 1.3125rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}

/* Footer copy is written with inline color:var(--text-secondary) /
   var(--text-muted). Those tokens are tuned for dark-on-paper, so on
   the dark footer they landed at 3.01:1. Rebinding the tokens inside
   the footer fixes every inline use at once, rather than chasing
   each element with an !important override. */
.kg2 footer {
  --text-secondary: var(--on-deep-soft);
  --text-muted: var(--on-deep-soft);
  --text-primary: var(--on-deep);
}


/* Pull the last strays onto the scale. */
.kg2 .kg-rev__title { font-size: var(--t-h2); }
.kg2 .nav-lang a,
.kg2 .nav-lang span,
.kg2 .mobile-lang a,
.kg2 .mobile-lang span { font-size: var(--t-micro); }

/* ============================================================
   14B. MOBILE TYPE SCALE
   Measured at 390px before this block: the display sizes stayed
   near their desktop values (h1 37.6px on a 39.1px line) while
   every supporting paragraph collapsed to 13px. A ~3:1 spread with
   nothing occupying the middle, so the page read as small text
   drifting in large voids instead of a set hierarchy — the desktop
   layout shrunk down rather than a design for the device.

   The correction is symmetrical: lower the ceiling, raise the
   floor, and close the section gaps to match. Everything here is
   scoped to <=700px; the desktop scale is untouched.
   ============================================================ */
@media (max-width: 700px) {
  body.kg2 {
    /* 13px was carrying real content — service outcomes, process
       step descriptions, the training copy — not captions. 15px is
       the smallest that still reads as body copy on a phone while
       staying clearly below the 16px primary tier. */
    --t-micro: 0.9375rem;   /* 13 -> 15 */
    --t-h1: 2rem;           /* 37.6 -> 32 */
    --t-h3: 1.1875rem;      /* 21 -> 19 */
  }

  /* -0.035em is calibrated for the 55px desktop h1; at 32px it
     starts closing the counters. And 1.04 leading let the
     descenders in "efektyviau" run into the caps below across a
     three-line wrap, which is what made the hero feel cramped
     rather than confident. */
  .kg2 .kg-h1 { line-height: 1.12; letter-spacing: -0.02em; }
  .kg2 .kg-h2 { line-height: 1.18; letter-spacing: -0.022em; }

  .kg2 .kg-lead { font-size: 1.0625rem; line-height: 1.55; }

  /* 56px top plus 56px bottom put 112px between every pair of
     sections. Against 15px copy that reads as drift, not rhythm. */
  .kg2 .kg-section,
  .kg2 .kg-section--dark { padding: 2.75rem 0; }

  /* 16px gutters let a 32px headline sit against the screen edge.
     The nav moves with it so the logo stays on the same margin as
     the content beneath it. */
  .kg2 .container { padding-left: 18px; padding-right: 18px; }
  .kg2 .nav-inner { padding-left: 18px; padding-right: 18px; }

  /* The step numeral outweighed the heading it marks: 32px at
     weight 300 beside 19px at 600. It is a marker, not content. */
  .kg2 .kg-flow__n { font-size: 1.25rem; font-weight: 500; line-height: 1.45; }

  /* The rail was sized for the old 32px numeral and cost 96px of a
     390px screen, leaving the step description about 30 characters
     a line — narrow enough that every sentence broke raggedly. A
     20px numeral needs 2rem, which gives the text back ~40. */
  .kg2 .kg-flow__step {
    grid-template-columns: 2rem minmax(0, 1fr);
    column-gap: var(--s-3);
    padding: var(--s-4) 0;
  }

  /* A full-width primary action under a 32px headline needs a
     label with matching presence. */
  .kg2 .btn-primary,
  .kg2 .btn-secondary { font-size: 1rem; min-height: 48px; }

  /* The hero's own bottom padding was still 56px against the 44px
     the sections below it now use. */
  .kg2 .kg-hero { padding-bottom: 2.75rem; }

  /* Raising --t-micro to 15px left the service headings only 1px
     above their own body copy. On desktop the rail keeps those two
     apart; with it collapsed the size has to do that work. */
  .kg2 .kg-svc__item .kg-h3,
  .kg2 .kg-tr__row .kg-h3 { font-size: 1.0625rem; }

  /* These four carry style="font-size:..." inline, left over from
     the pre-kg2 markup, so a class rule cannot reach them. The
     inline values are shared with desktop and desktop is signed
     off, which leaves !important inside this query as the only
     mobile-only lever. The validation errors are the reason it is
     worth using: 12px is too small for the one message a person
     has to read to finish sending the form.

     If that markup is ever cleaned up, delete this block with it. */
  .kg2 form p,
  .kg2 [data-fs-error] { font-size: 0.8125rem !important; }
  .kg2 footer .btn-primary { font-size: 1rem !important; }
}

/* ============================================================
   15. HERO PROPORTION (round 3)
   The hero was carrying ~200px of dead space under the buttons
   before the next section's own padding began, and the lead ran
   past a comfortable measure at 21px.
   ============================================================ */
@media (min-width: 1024px) {
  .kg2 .kg-hero { padding-bottom: clamp(2.5rem, 1rem + 3vw, 4rem); }
  .kg2 .kg-hero__copy .kg-lead { max-width: 44ch; }
}

/* ============================================================
   16. TOUCH TARGETS
   Measured on a 390px touch viewport: carousel controls, the
   language switch, the menu button and the copy-email button all
   sat between 27px and 38px. Minimum comfortable control size on
   a touch screen is 44px, so each gets a real hit box rather than
   a larger glyph.
   ============================================================ */
@media (pointer: coarse) {
  .kg2 .nav-lang a,
  .kg2 .nav-lang span,
  .kg2 .mobile-lang a,
  .kg2 .mobile-lang span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
  }

  .kg2 .hamburger,
  .kg2 .mobile-menu-close {
    min-width: 44px;
    min-height: 44px;
  }

  .kg2 .copy-email-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* The footer privacy link is inline-styled with no class, and
     measured 22px on the English and Japanese pages, where the
     bottom row does not stretch it the way the Lithuanian one
     happens to. Matched by href so every locale is covered. */
  .kg2 footer a[href$="privacy-policy/"],
  .kg2 footer a[href$="privatumo-politika/"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .kg2 .form-input,
  .kg2 .kg-select { min-height: 44px; }

  .kg2 .text-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 0;
  }
  /* The link keeps its underline tight to the text rather than
     dropping to the bottom of the enlarged hit box. */
  .kg2 .text-link {
    border-bottom: none;
    box-shadow: inset 0 -1px 0 0 var(--rule-strong);
    background-size: 0;
  }
  .kg2 .text-link:hover { box-shadow: inset 0 -1px 0 0 var(--signal-ink); }
}

@media (pointer: coarse) {
  .kg2 .nav-logo,
  .kg2 footer a:has(> img[src*="kognev-logo"]),
  .kg2 footer a:has(> span) { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ============================================================
   17. REVIEWS — colour only, for every kg2 page
   The marquee mechanism (track/marquee/set, the keyframe, the
   reduced-motion fallback) is defined once, unscoped, in
   reviews.css — every page shares that same moving strip. This
   file only recolours it: reviews.css is shared with pages still
   on the old green system, so its own defaults stay untouched and
   this is where a kg2 page's palette takes over instead.

   Every card — written testimonial or logo-only — shares the same
   solid card surface. The logo cards previously used a
   transparent/dashed treatment to signal "lighter content"; on a
   strip where cards actually move that read as broken cards
   instead of a deliberate choice, so it is gone.
   ============================================================ */
.kg2 .kg-rev { background: var(--paper-sunk); }
.kg2 .kg-rev__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h2);
  letter-spacing: -0.028em;
  color: var(--ink);
}
.kg2 .kg-rev__stars { color: var(--signal-ink); }
.kg2 .kg-rev__card {
  background: var(--surface);
  border-color: var(--rule);
  border-radius: 3px;
  box-shadow: none;
  min-height: 16rem;
}
.kg2 .kg-rev__body p { color: var(--ink); }
.kg2 .kg-rev__cite { border-top-color: var(--rule); }
.kg2 .kg-rev__name { color: var(--ink); }
.kg2 .kg-rev__meta { color: var(--slate); }

/* A logo-and-rating card still carries less content than a written
   testimonial, so it keeps a smaller footprint — just with the same
   solid white surface as every other card now. */
.kg2 .kg-rev__card:has(.kg-rev__logo) { flex: 0 0 clamp(190px, 42vw, 224px); }
.kg2 .kg-rev__card:has(.kg-rev__logo) .kg-rev__body { justify-content: center; }
.kg2 .kg-rev__logo { mix-blend-mode: multiply; opacity: 1; }

/* ============================================================
   18. FAQ — shared disclosure component
   First built for Paslaugos, now reused by DI mokymai. Native
   <details>/<summary> so it works without JavaScript and is
   announced correctly. The marker is a plain rotating rule rather
   than a "+" glyph in an accent colour: it reads as state, not
   decoration, and it survives greyscale.

   Works on both grounds: base rules are for a light section, the
   dark-band block below only touches colour. Measured against the
   #0E1A20 ground: summary 16.3:1, answers 7.6:1, focus ring
   7.4:1 — all clear of the 7:1 the dark-mode guidance asks for on
   custom colour pairs, rather than just the 4.5:1 minimum.
   ============================================================ */
.kg2 .kg-faq { border-top: 1px solid var(--rule); }
.kg2 .kg-faq__q { border-bottom: 1px solid var(--rule); }
.kg2 .kg-faq__q summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  /* 44px minimum hit height on touch, without changing the rhythm. */
  min-height: 44px;
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.kg2 .kg-faq__q summary::-webkit-details-marker { display: none; }
.kg2 .kg-faq__q summary::after {
  content: "";
  flex: none;
  align-self: center;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--slate);
  border-bottom: 1.5px solid var(--slate);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}
.kg2 .kg-faq__q[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}
.kg2 .kg-faq__q summary:focus-visible {
  outline: 2px solid var(--signal-ink);
  outline-offset: 2px;
  border-radius: 2px;
}
.kg2 .kg-faq__q > p {
  margin: 0;
  padding: 0 var(--s-6) var(--s-4) 0;
  max-width: 68ch;
}
@media (prefers-reduced-motion: reduce) {
  .kg2 .kg-faq__q summary::after { transition: none; }
}
@media (max-width: 700px) {
  .kg2 .kg-faq__q > p { padding-right: 0; }
}

/* Dark band: colour only. */
.kg2 .kg-section--dark .kg-faq { border-top-color: var(--on-deep-rule); }
.kg2 .kg-section--dark .kg-faq__q { border-bottom-color: var(--on-deep-rule); }
.kg2 .kg-section--dark .kg-faq__q summary { color: var(--on-deep); }
.kg2 .kg-section--dark .kg-faq__q summary::after {
  border-right-color: var(--on-deep-soft);
  border-bottom-color: var(--on-deep-soft);
}
.kg2 .kg-section--dark .kg-faq__q summary:hover::after {
  border-right-color: var(--on-deep);
  border-bottom-color: var(--on-deep);
}
.kg2 .kg-section--dark .kg-faq__q summary:focus-visible {
  outline-color: var(--signal-lift);
}

/* ============================================================
   19. SUB-PAGE HERO + ASIDE WRAP — shared by Paslaugos, DI mokymai
   Text-only hero (breadcrumb, h1, lead, actions) for pages whose
   job is to be read rather than looked at — the homepage carries
   the one diagram on the site, and repeating that idea on every
   sub-page would dilute it. kg-ps-wrap/kg-ps__head is the aside
   anatomy each of those pages also uses for at least one section
   (their FAQ, so far).
   ============================================================ */
.kg2 .kg-ps-hero {
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem) 0 var(--s-7);
  background: var(--paper);
}
.kg2 .kg-ps-hero .breadcrumb {
  margin-bottom: var(--s-5);
  font-size: var(--t-micro);
  color: var(--slate);
}
.kg2 .kg-ps-hero .breadcrumb a {
  color: var(--slate);
  display: inline-block;
  padding-block: 4px;
}
@media (pointer: coarse) {
  .kg2 .kg-ps-hero .breadcrumb a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
.kg2 .kg-ps-hero .breadcrumb a:hover { color: var(--signal-ink); }
.kg2 .kg-ps-hero .breadcrumb-sep { color: var(--rule-strong); }
.kg2 .kg-ps-hero .kg-h1 { max-width: 20ch; }
.kg2 .kg-ps-hero__lead { margin-top: var(--s-4); max-width: 58ch; }
.kg2 .kg-ps-hero__actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }

.kg2 .kg-ps-wrap {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 1.4rem + 3.4vw, 4.5rem);
  align-items: start;
}
.kg2 .kg-ps__head { display: grid; gap: var(--s-3); justify-items: start; }

@media (max-width: 1023px) {
  .kg2 .kg-ps-hero .kg-h1 { max-width: none; }
  .kg2 .kg-ps-wrap { grid-template-columns: 1fr; }
  .kg2 .kg-ps__head { margin-bottom: var(--s-5); }
}
@media (max-width: 700px) {
  .kg2 .kg-ps-hero__actions .btn-primary { width: 100%; justify-content: center; }
}

/* ============================================================
   20. TEXT ROWS — shared list component
   First built for DI mokymai's two closing notes, now reused
   wherever a section is a short list of heading+body items with
   no numeral and no evidence panel — SEO audit's "Ką vertiname",
   "Kada auditas naudingiausias" and "Audito rezultatas" are all
   this same component with different content.
   ============================================================ */
.kg2 .kg-tx-wrap { border-top: 1px solid var(--rule); }
.kg2 .kg-tx__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 1.4rem + 3.4vw, 4.5rem);
  align-items: start;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}
.kg2 .kg-tx__row h2,
.kg2 .kg-tx__row h3 { margin: 0; }
.kg2 .kg-tx__row div { display: grid; gap: var(--s-3); }
.kg2 .kg-tx__row p { margin: 0; max-width: 62ch; }

@media (max-width: 1023px) {
  .kg2 .kg-tx__row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .kg2 .kg-tx__row { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) 0; }
}