/* Derived from new-home/contact/src/contact.css by build.mjs — edit it there. */
/* ============================================================
   Contact — «Not sure what you need?» / «Let’s talk»
   Approved composition (dark ground, questions + brief rows on the left, the
   light contact card on the right), stretched to the page: the section is the
   page width minus the site gutter. Left text starts on the left gutter, the
   card ends on the right gutter; nothing narrower sits in between.

   Geometry uses --ltk-u: 1px at the 1600 frame, proportional above and below
   it (floor 0.8 at 1280, ceiling 1.6 at 2560). From 1024 down the unit is 1px.
   Type follows the neighbouring Improving section: headings cap at 60px,
   explanatory copy at 18px, and controls stay readable at every width.
   Alexa, 19.10.2026: use “We improve your service” as the size reference.

   Monochrome of the site (00-global.css) — the purple accent and the glow
   were tried and dropped by Alexa on 16.09.2026.

   Motion follows the site law (css/95-chips.css): left → right, 300 ms in,
   240 ms out, cubic-bezier(.4, 0, .2, 1). The send button is Type B of
   Core/ui/buttons (fill left → right, 240 ms, cubic-bezier(.77, 0, .175, 1)).
   ============================================================ */

:root {
  /* Page gutter. A page that owns --g (the interim home) keeps its value;
     otherwise the ladder of 01-header.css / 14b-footer.css. */
  --ltk-g: var(--g, 24px);
  --ltk-u: clamp(0.8px, 0.0625vw, 1.6px);

  --ltk-top: calc(48 * var(--ltk-u));          /* rest edge of the block above → content */
  --ltk-gap: calc(80 * var(--ltk-u));          /* centre separation */
  --ltk-pad: calc(48 * var(--ltk-u));          /* card padding; left text starts on its line */
  --ltk-card-r: calc(28 * var(--ltk-u));

  --ltk-eyebrow: 12px;
  --ltk-title: clamp(35px, 3.5vw, 60px);
  --ltk-title-gap: calc(22 * var(--ltk-u));
  --ltk-lead: 18px;
  --ltk-lead-gap: calc(28 * var(--ltk-u));
  --ltk-measure: 31em;
  --ltk-briefs-gap: calc(40 * var(--ltk-u));
  --ltk-list-gap: calc(16 * var(--ltk-u));
  --ltk-row-pad: calc(12 * var(--ltk-u));
  --ltk-row-gap: calc(28 * var(--ltk-u));
  --ltk-tile: calc(52 * var(--ltk-u));
  --ltk-row-title: 18px;
  --ltk-row-desc: 15px;
  --ltk-action: 12px;
  --ltk-arrow: calc(18 * var(--ltk-u));

  --ltk-card-title: var(--ltk-title);
  --ltk-card-title-gap: calc(20 * var(--ltk-u));
  --ltk-card-sub: var(--ltk-lead);
  --ltk-card-sub-gap: calc(14 * var(--ltk-u));
  --ltk-form-gap: calc(30 * var(--ltk-u));
  --ltk-field-h: calc(58 * var(--ltk-u));
  --ltk-field-gap: calc(12 * var(--ltk-u));
  --ltk-field-pad: calc(22 * var(--ltk-u));
  --ltk-field-icon: calc(22 * var(--ltk-u));
  --ltk-field-font: 16px;
  --ltk-radius-s: calc(12 * var(--ltk-u));
  --ltk-send-h: calc(56 * var(--ltk-u));
  --ltk-send-gap: calc(8 * var(--ltk-u));
  --ltk-send-size: 14px;
  --ltk-status-size: 13px;
  --ltk-send-side: calc(26 * var(--ltk-u));
  --ltk-ch-gap: calc(28 * var(--ltk-u));       /* button → divider, minimum */
  --ltk-ch-top: calc(26 * var(--ltk-u));       /* divider → channels */
  --ltk-ch-icon: calc(50 * var(--ltk-u));
  --ltk-ch-name: 16px;
  --ltk-ch-addr: 14px;
  --ltk-stroke: max(1.25px, calc(1.5 * var(--ltk-u)));

  --ltk-in: 300ms;
  --ltk-out: 240ms;
  --ltk-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --ltk-ink: #eeeef0;
  --ltk-ink-dim: #d2d2d6;
  --ltk-ink-mute: #9b9ba2;
  --ltk-line: rgba(234, 234, 234, 0.14);

  --ltk-slash: #9b9ba2;
  --ltk-row-line: #eaeaea;
  --ltk-tile-hover-bg: #2a2a2d;
  --ltk-tile-hover-line: rgba(234, 234, 234, 0.34);
  --ltk-tile-hover-ink: #ffffff;
  --ltk-send-fill: #3f3f44;
  --ltk-send-fill-ink: #ffffff;
  --ltk-icon-bg: #e6e6e8;
  --ltk-channel-fill: #171719;
  --ltk-focus-dark: #eaeaea;
  --ltk-focus-light: #171719;
}

/* Heading scale from Improving (97b-improving-system.css); explanatory-copy
   bands from the homepage (lab.css). The existing phone size stays compact.
   Keep type separate from the geometric bands below: neither a wider page
   nor the Start a project panel should magnify the words. */
@media (max-width: 1024px) {
  :root {
    --ltk-lead: 17px;
    --ltk-row-desc: 14px;
    --ltk-ch-name: 15px;
    --ltk-ch-addr: 13px;
  }
}
@media (max-width: 719.98px) {
  :root {
    --ltk-title: 32px;
    --ltk-lead: 16px;
    --ltk-row-title: 16px;
    --ltk-row-desc: 13px;
    --ltk-ch-name: 14px;
    --ltk-ch-addr: 12px;
  }
}
@media (max-width: 1200px)   { :root { --ltk-g: var(--g, 20px); } }
@media (max-width: 1024px)   { :root { --ltk-g: var(--g, 16px); } }
@media (max-width: 768px)    { :root { --ltk-g: var(--g, 12px); } }
@media (max-width: 519.98px) { :root { --ltk-g: var(--g, 8px); } }
@media (max-width: 375px)    { :root { --ltk-g: var(--g, 6px); } }

/* ---------- Section ---------- */
.ltk {
  position: relative;
  padding: var(--ltk-top) var(--ltk-g) 0;
  color: var(--ltk-ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
.ltk *,
.ltk *::before,
.ltk *::after { box-sizing: border-box; }

.ltk svg path,
.ltk svg rect,
.ltk svg circle { vector-effect: non-scaling-stroke; }

.ltk-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ltk-grid {
  display: grid;
  /* The card with the form is 20% wider than the old 7 of 15 (Alexa,
     19.10.2026: «форму сделать чуть шире… процентов на двадцать… на всех
     страницах, где есть подобного типа блок»): 7 × 1.2 = 8.4, the intro
     gives up the same 1.4. ≤1024 the grid is one column and is unchanged. */
  grid-template-columns: minmax(0, 6.6fr) minmax(0, 8.4fr);
  column-gap: var(--ltk-gap);
  align-items: stretch;
}

/* ---------- Left: questions ---------- */
/* The eyebrow stands on the line of the card eyebrow; the last brief line
   stands on the bottom edge of the card. */
.ltk-intro {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--ltk-pad);
}

.ltk-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin: 0;
  font: 500 var(--ltk-eyebrow) / 1.3 "Inter", system-ui, sans-serif;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ltk-ink-mute);
}
.ltk-slash {
  letter-spacing: 0;
  color: var(--ltk-slash);
}

.ltk-title {
  margin: var(--ltk-title-gap) 0 0;
  font: 500 var(--ltk-title) / 0.94 "Inter", system-ui, sans-serif;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: #f5f5f6;
}
.ltk-lead {
  max-width: var(--ltk-measure);
  margin: var(--ltk-lead-gap) 0 0;
  font: 300 var(--ltk-lead) / 1.45 "Inter", system-ui, sans-serif;
  color: var(--ltk-ink-dim);
}

.ltk-briefs {
  margin-top: auto;
  padding-top: var(--ltk-briefs-gap);
}
.ltk-eyebrow--list {
  letter-spacing: 0.3em;
  color: #dcdcdf;
}

.ltk-rows {
  margin: var(--ltk-list-gap) 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--ltk-line);
}
.ltk-rows > li { border-top: 1px solid var(--ltk-line); }

/* A row is one link: icon, name, description and the action all press it. */
.ltk-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--ltk-row-gap);
  padding: var(--ltk-row-pad) 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.ltk-row * {
  -webkit-user-select: none;
  user-select: none;
}
/* Hover: the rule under the row is drawn left → right and taken back the same
   way; the tile lights up; the arrow turns to the new tab it opens. */
.ltk-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--ltk-row-line);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--ltk-out) var(--ltk-ease);
  pointer-events: none;
}

.ltk-row-icon {
  display: grid;
  place-items: center;
  width: var(--ltk-tile);
  height: var(--ltk-tile);
  border: 1px solid rgba(234, 234, 234, 0.10);
  border-radius: calc(var(--ltk-tile) * 0.25);
  background: #1d1d20;
  color: #dcdce0;
  transition:
    background-color var(--ltk-out) var(--ltk-ease),
    border-color var(--ltk-out) var(--ltk-ease),
    color var(--ltk-out) var(--ltk-ease);
}
.ltk-row-icon svg {
  width: 42%;
  height: 42%;
  stroke: currentColor;
  stroke-width: var(--ltk-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ltk-row-text { display: flex; flex-direction: column; gap: calc(3 * var(--ltk-u)); min-width: 0; }
.ltk-row-title {
  font: 400 var(--ltk-row-title) / 1.3 "Inter", system-ui, sans-serif;
  color: #f3f3f5;
}
.ltk-row-desc {
  font: 300 var(--ltk-row-desc) / 1.4 "Inter", system-ui, sans-serif;
  color: #a3a3aa;
}

.ltk-row-action {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--ltk-u));
  padding-right: calc(10 * var(--ltk-u));
  font: 500 var(--ltk-action) / 1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #eeeef0;
}
.ltk-arrow {
  flex: none;
  width: var(--ltk-arrow);
  height: var(--ltk-arrow);
  stroke: currentColor;
  stroke-width: max(1.4px, calc(1.6 * var(--ltk-u)));
  stroke-linecap: round;
  stroke-linejoin: round;
  rotate: 0deg;
  transition: rotate var(--ltk-out) var(--ltk-ease);
}

.ltk-row:hover::after,
.ltk-row:focus-visible::after {
  clip-path: inset(0);
  transition-duration: var(--ltk-in);
}
.ltk-row:hover .ltk-row-icon,
.ltk-row:focus-visible .ltk-row-icon {
  background-color: var(--ltk-tile-hover-bg);
  border-color: var(--ltk-tile-hover-line);
  color: var(--ltk-tile-hover-ink);
  transition-duration: var(--ltk-in);
}
.ltk-row:hover .ltk-arrow,
.ltk-row:focus-visible .ltk-arrow {
  rotate: -45deg;
  transition-duration: var(--ltk-in);
}
.ltk-row:focus-visible {
  outline: 2px solid var(--ltk-focus-dark);
  outline-offset: 3px;
}

/* ---------- Right: the contact card ---------- */
.ltk-card {
  container: ltk-card / inline-size;
  min-width: 0;
  padding: var(--ltk-pad);
  border-radius: var(--ltk-card-r);
  background: linear-gradient(180deg, #f7f7f8 0%, #eeeef0 100%);
  color: #171719;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 calc(40 * var(--ltk-u)) calc(90 * var(--ltk-u)) rgba(0, 0, 0, 0.42);
}
.ltk-card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ltk-eyebrow--card { color: #707077; }
.ltk-card .ltk-slash { color: #8e8e95; }

.ltk-card-title {
  margin: var(--ltk-card-title-gap) 0 0;
  font: 700 var(--ltk-card-title) / 0.95 "Inter", system-ui, sans-serif;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #121214;
}
.ltk-card-sub {
  margin: var(--ltk-card-sub-gap) 0 0;
  font: 400 var(--ltk-card-sub) / 1.4 "Inter", system-ui, sans-serif;
  color: #2b2b30;
  text-wrap: pretty;
}

.ltk-form {
  display: grid;
  gap: var(--ltk-field-gap);
  margin: var(--ltk-form-gap) 0 var(--ltk-ch-gap);
}

.ltk-field {
  position: relative;
  display: block;
}
.ltk-field-icon {
  position: absolute;
  top: 50%;
  left: var(--ltk-field-pad);
  width: var(--ltk-field-icon);
  height: var(--ltk-field-icon);
  translate: 0 -50%;
  stroke: #3a3a40;
  stroke-width: var(--ltk-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.ltk-field input {
  display: block;
  width: 100%;
  height: var(--ltk-field-h);
  margin: 0;
  padding: 0 var(--ltk-field-pad) 0 calc(var(--ltk-field-pad) * 2 + var(--ltk-field-icon));
  border: 1px solid rgba(23, 23, 25, 0.08);
  border-radius: var(--ltk-radius-s);
  background: #e8e8eb;
  color: #171719;
  font: 400 var(--ltk-field-font) / 1.2 "Inter", system-ui, sans-serif;
  caret-color: var(--ltk-focus-light);
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--ltk-out) var(--ltk-ease),
    background-color var(--ltk-out) var(--ltk-ease);
}
.ltk-field input::placeholder { color: #6c6c73; opacity: 1; }
.ltk-field input:hover { border-color: rgba(23, 23, 25, 0.18); transition-duration: var(--ltk-in); }
.ltk-field input:focus { background-color: #f1f1f3; }
.ltk-field input:focus-visible {
  outline: 2px solid var(--ltk-focus-light);
  outline-offset: 2px;
}

/* Send — Type B (Core/ui/buttons): the label and its arrow stand still, the
   fill runs left → right to the edge, the copy in the fill colour opens with
   the same move and curve. Arrow sits in the label layer, it does not move. */
.ltk-send {
  --_h: var(--ltk-send-h);
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: var(--_h);
  min-height: var(--_h);
  max-height: var(--_h);
  margin: var(--ltk-send-gap) 0 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--ltk-radius-s);
  background: #171719;
  color: #f7f7f7;
  font: 500 var(--ltk-send-size) / 1 "Inter", system-ui, sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.ltk-send,
.ltk-send * {
  -webkit-user-select: none;
  user-select: none;
}
.ltk-send::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--ltk-send-fill);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
}
.ltk-send-face,
.ltk-send-fill {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(var(--ltk-arrow), 1fr) auto minmax(var(--ltk-arrow), 1fr);
  align-items: center;
  column-gap: calc(12 * var(--ltk-u));
  height: 100%;
  padding: 0 var(--ltk-send-side);
}
.ltk-send-fill {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--ltk-send-fill-ink);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 240ms cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
}
.ltk-send-label {
  grid-column: 2;
  margin-right: -0.26em; /* the tracking after the last letter */
}
.ltk-send-arrow {
  grid-column: 3;
  justify-self: end;
  width: calc(20 * var(--ltk-u));
  height: calc(20 * var(--ltk-u));
  stroke: currentColor;
  stroke-width: max(1.4px, calc(1.6 * var(--ltk-u)));
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ltk-send:hover::before,
.ltk-send:focus-visible::before { transform: scaleX(1); }
.ltk-send:hover .ltk-send-fill,
.ltk-send:focus-visible .ltk-send-fill { clip-path: inset(0); }
.ltk-send:focus-visible {
  outline: 2px solid var(--ltk-focus-light);
  outline-offset: 3px;
}
.ltk-send:disabled {
  opacity: 0.38;
  cursor: default;
}
.ltk-send:disabled::before,
.ltk-send:disabled .ltk-send-fill { display: none; }

.ltk-status {
  margin: calc(4 * var(--ltk-u)) 0 0;
  font: 400 var(--ltk-status-size) / 1.4 "Inter", system-ui, sans-serif;
  color: #4d4d53;
}

/* Channels: under a rule, pushed to the bottom edge of the card. */
.ltk-channels {
  display: grid;
  grid-template-columns: auto minmax(12px, 1fr) auto minmax(12px, 1fr) auto;
  align-items: stretch;
  margin: auto 0 0;
  padding: var(--ltk-ch-top) 0 0;
  list-style: none;
  border-top: 1px solid rgba(23, 23, 25, 0.10);
}
.ltk-channels > li { display: flex; align-items: center; min-width: 0; }
.ltk-channels > .ltk-sep {
  justify-self: center;
  width: 1px;
  background: rgba(23, 23, 25, 0.12);
}

.ltk-channel {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--ltk-u));
  min-height: 44px;
  color: #171719;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.ltk-channel * {
  -webkit-user-select: none;
  user-select: none;
}
.ltk-channel[href] { cursor: pointer; }
.ltk-channel[data-state="soon"] {
  opacity: 0.38;
  cursor: default;
}

.ltk-channel-icon {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--ltk-ch-icon);
  height: var(--ltk-ch-icon);
  overflow: hidden;
  border-radius: 50%;
  background: var(--ltk-icon-bg);
  color: #2a2a2f;
  transition: color var(--ltk-out) linear;
}
.ltk-channel-icon svg {
  position: relative;
  z-index: 1;
  width: 44%;
  height: 44%;
  stroke: currentColor;
  stroke-width: var(--ltk-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ltk-channel-fill {
  position: absolute;
  inset: 0;
  background: var(--ltk-channel-fill);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--ltk-out) var(--ltk-ease);
}
.ltk-channel[href]:hover .ltk-channel-fill,
.ltk-channel[href]:focus-visible .ltk-channel-fill {
  clip-path: inset(0);
  transition-duration: var(--ltk-in);
}
.ltk-channel[href]:hover .ltk-channel-icon,
.ltk-channel[href]:focus-visible .ltk-channel-icon {
  color: #ffffff;
  transition-duration: var(--ltk-in);
}
.ltk-channel[href]:focus-visible {
  outline: 2px solid var(--ltk-focus-light);
  outline-offset: 3px;
  border-radius: 999px;
}

.ltk-channel-text {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--ltk-u));
  white-space: nowrap;
}
.ltk-channel-name { font: 500 var(--ltk-ch-name) / 1.25 "Inter", system-ui, sans-serif; }
.ltk-channel-address {
  font: 400 var(--ltk-ch-addr) / 1.3 "Inter", system-ui, sans-serif;
  color: #5d5d64;
}

/* A narrow card stands the channels up: icon over the words. */
@container ltk-card (max-width: 470px) {
  .ltk-channel {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .ltk-channel-text { align-items: center; }
}

/* Wider than the 1512 laptop the 1fr gaps kept pushing the channels to the
   card edges: 100px apart at 1920, 185 at 2560, 484 at 3840. The gap stops
   at the laptop proportion (50 × --ltk-u, 47px at 1512) and the row stands
   in the centre of the card. Alexa, 19.10.2026: «нужно друг к другу»,
   «они по центру должны быть». */
@media (min-width: 1513px) {
  .ltk-channels {
    grid-template-columns:
      auto minmax(12px, calc(50 * var(--ltk-u)))
      auto minmax(12px, calc(50 * var(--ltk-u))) auto;
    justify-content: center;
  }
}

/* ============ ≤ 1024: one column, the card under the questions ============ */
@media (max-width: 1024px) {
  :root {
    --ltk-u: 1px;
    --ltk-top: 48px;
    --ltk-pad: 32px;
    --ltk-card-r: 24px;
    --ltk-title-gap: 22px;
    --ltk-lead-gap: 24px;
    --ltk-briefs-gap: 44px;
    --ltk-list-gap: 16px;
    --ltk-row-gap: 20px;
    --ltk-tile: 52px;
    --ltk-card-title-gap: 16px;
    --ltk-form-gap: 26px;
    --ltk-field-h: 54px;
    --ltk-send-h: 54px;
    --ltk-ch-icon: 46px;
  }
  .ltk-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }
  .ltk-intro { padding-top: 0; }
  .ltk-briefs { margin-top: 0; }

  /* A wide card lies down: title and channels on the left, the form right.
     The button stands on the line of the channels' bottom edge. */
  @container ltk-card (min-width: 660px) {
    .ltk-card-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      grid-template-rows: auto 1fr;
      column-gap: 40px;
    }
    .ltk-card-head { grid-column: 1; grid-row: 1; }
    .ltk-form {
      grid-column: 2;
      grid-row: 1 / 3;
      grid-template-rows: auto auto auto 1fr;
      margin: 0;
    }
    .ltk-send { align-self: end; }
    .ltk-channels {
      grid-column: 1;
      grid-row: 2;
      align-self: end;
      margin-top: 24px;
      padding-top: 18px;
    }
    .ltk-channel {
      flex-direction: column;
      gap: 8px;
      text-align: center;
    }
    .ltk-channel-text { align-items: center; }
  }
}

/* ============ ≤ 768 ============ */
@media (max-width: 768px) {
  :root {
    --ltk-top: 40px;
    --ltk-pad: 28px;
    --ltk-briefs-gap: 40px;
  }
}

/* ============ ≤ 720 ============ */
@media (max-width: 720px) {
  :root {
    --ltk-pad: 24px;
    --ltk-card-r: 22px;
    --ltk-form-gap: 22px;
    --ltk-field-h: 52px;
    --ltk-send-h: 52px;
    --ltk-ch-gap: 24px;
    --ltk-ch-top: 20px;
    --ltk-ch-icon: 44px;
  }
}

/* ============ ≤ 520 ============ */
@media (max-width: 519.98px) {
  :root {
    --ltk-top: 32px;
    --ltk-pad: 20px;
    --ltk-card-r: 20px;
    --ltk-title-gap: 18px;
    --ltk-lead-gap: 18px;
    --ltk-briefs-gap: 32px;
    --ltk-list-gap: 12px;
    --ltk-row-pad: 12px;
    --ltk-row-gap: 14px;
    --ltk-tile: 44px;
    --ltk-card-title-gap: 14px;
    --ltk-card-sub-gap: 10px;
    --ltk-form-gap: 20px;
    --ltk-field-h: 50px;
    --ltk-field-pad: 16px;
    --ltk-field-icon: 20px;
    --ltk-send-h: 50px;
    --ltk-send-side: 18px;
    --ltk-ch-icon: 40px;
  }
  .ltk-grid { row-gap: 32px; }
  /* The row itself is the button; at this width its name is the label and
     the action keeps only the arrow. */
  .ltk-row-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ltk-row-action { padding-right: 6px; }
}

/* ============ ≤ 375 ============ */
@media (max-width: 375px) {
  :root {
    --ltk-pad: 16px;
    --ltk-field-h: 48px;
    --ltk-send-h: 48px;
    --ltk-ch-icon: 38px;
  }
}

/* ---------- Without motion: states change at once, nothing travels ---------- */
@media (prefers-reduced-motion: reduce) {
  .ltk-row::after,
  .ltk-row-icon,
  .ltk-arrow,
  .ltk-field input,
  .ltk-send::before,
  .ltk-send-fill,
  .ltk-channel-icon,
  .ltk-channel-fill { transition: none; }
  .ltk-row:hover .ltk-arrow,
  .ltk-row:focus-visible .ltk-arrow { rotate: 0deg; }
}

@media (forced-colors: active) {
  .ltk-send::before,
  .ltk-send-fill,
  .ltk-channel-fill { display: none; }
  .ltk-row::after { background: Highlight; }
}