/* 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.

   Sizes come from one unit, --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 and each band sets its own type.

   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: max(10px, calc(12 * var(--ltk-u)));
  --ltk-title: calc(66 * var(--ltk-u));
  --ltk-title-gap: calc(22 * var(--ltk-u));
  --ltk-lead: max(15px, calc(20 * var(--ltk-u)));
  --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: max(15px, calc(19 * var(--ltk-u)));
  --ltk-row-desc: max(13px, calc(15 * var(--ltk-u)));
  --ltk-action: max(11px, calc(13 * var(--ltk-u)));
  --ltk-arrow: calc(18 * var(--ltk-u));

  --ltk-card-title: calc(56 * var(--ltk-u));
  --ltk-card-title-gap: calc(20 * var(--ltk-u));
  --ltk-card-sub: max(15px, calc(20 * var(--ltk-u)));
  --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: max(16px, calc(17 * var(--ltk-u)));
  --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: max(12px, calc(14 * var(--ltk-u)));
  --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: max(13px, calc(16 * var(--ltk-u)));
  --ltk-ch-addr: max(12px, calc(14 * var(--ltk-u)));
  --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;
}
@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;
  grid-template-columns: minmax(0, 8fr) minmax(0, 7fr);
  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 max(12px, calc(13 * var(--ltk-u))) / 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; }
}

/* ============ ≤ 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: 60px;
    --ltk-title-gap: 22px;
    --ltk-lead: 18px;
    --ltk-lead-gap: 24px;
    --ltk-briefs-gap: 44px;
    --ltk-list-gap: 16px;
    --ltk-row-gap: 20px;
    --ltk-tile: 52px;
    --ltk-row-title: 18px;
    --ltk-row-desc: 14px;
    --ltk-action: 12px;
    --ltk-card-title: 48px;
    --ltk-card-title-gap: 16px;
    --ltk-card-sub: 17px;
    --ltk-form-gap: 26px;
    --ltk-field-h: 54px;
    --ltk-send-h: 54px;
    --ltk-ch-icon: 46px;
    --ltk-ch-name: 15px;
    --ltk-ch-addr: 13px;
  }
  .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-title: 52px;
    --ltk-lead: 17px;
    --ltk-briefs-gap: 40px;
    --ltk-card-title: 42px;
  }
}

/* ============ ≤ 720 ============ */
@media (max-width: 720px) {
  :root {
    --ltk-pad: 24px;
    --ltk-card-r: 22px;
    --ltk-title: 46px;
    --ltk-card-title: 38px;
    --ltk-card-sub: 16px;
    --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: 40px;
    --ltk-title-gap: 18px;
    --ltk-lead: 16px;
    --ltk-lead-gap: 18px;
    --ltk-briefs-gap: 32px;
    --ltk-list-gap: 12px;
    --ltk-row-pad: 12px;
    --ltk-row-gap: 14px;
    --ltk-tile: 44px;
    --ltk-row-title: 16px;
    --ltk-row-desc: 13px;
    --ltk-card-title: 34px;
    --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-ch-name: 14px;
    --ltk-ch-addr: 12px;
  }
  .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-title: 34px;
    --ltk-card-title: 30px;
    --ltk-lead: 15px;
    --ltk-field-h: 48px;
    --ltk-send-h: 48px;
    --ltk-ch-icon: 38px;
  }
}
@media (max-width: 340px) {
  :root { --ltk-title: 30px; }
}

/* ---------- 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; }
}