/* ============================================================
   companies-redesign.css
   Scoped entirely within .t2a-cmp — no impact on shared nav/footer/layout.
   B2B visual language (blue/purple, Figtree body, Google Sans Flex
   headings) from the "Pro společnosti" redesign, kept local to this
   page's content only.
   Mirrors the pattern used by organizations-redesign.css.
   ============================================================ */

.t2a-cmp {
  --cmp-blue: #0a6cc1;
  --cmp-blue-dark: #08579d;
  --cmp-blue-light: #2E9BE0;
  --cmp-blue-deep: #0a4f8d;
  --cmp-purple: #833cad;
  --cmp-ink: #16243d;
  --cmp-muted: #43536b;
  --cmp-line: #d8e3f2;
  --cmp-bg-soft: #f4f9ff;
  --cmp-radius-lg: 24px;
  --cmp-radius: 20px;
  --cmp-sans: 'Figtree', 'Figtree Fallback', 'Noto Sans', 'Noto Sans Fallback', system-ui, -apple-system, sans-serif;
  --cmp-section-y: 96px;
  --cmp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: var(--cmp-sans);
  color: var(--cmp-muted);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* `overflow-x: hidden` forces the used `overflow-y` to `auto`, which turns
     this page root into a scroll container (breaking any position:sticky
     descendant and nesting a second scroller). `clip` contains the same
     horizontal overflow while leaving `overflow-y` at `visible`. The
     `hidden` line stays first as the fallback for Safari < 16. */
  overflow-x: hidden;
  overflow-x: clip;
}
.t2a-cmp *, .t2a-cmp *::before, .t2a-cmp *::after { box-sizing: border-box; }
.t2a-cmp img { max-width: 100%; height: auto; display: block; }
.t2a-cmp a { color: inherit; text-decoration: none; }
.t2a-cmp h1, .t2a-cmp h2, .t2a-cmp h3, .t2a-cmp h4 { margin: 0; line-height: 1.1; font-family: 'Google Sans Flex', 'Google Sans Flex Fallback', var(--cmp-sans); }
.t2a-cmp p { margin: 0; }

.t2a-cmp .t2a-cmp-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.t2a-cmp .t2a-cmp-section { padding: var(--cmp-section-y) 0; position: relative; }
.t2a-cmp .t2a-cmp-section--soft { background: var(--cmp-bg-soft); }

.t2a-cmp .t2a-cmp-title {
  font-family: 'Google Sans Flex', 'Google Sans Flex Fallback', var(--cmp-sans);
  font-size: 40px;
  font-weight: 800;
  color: var(--cmp-ink);
  text-align: center;
  letter-spacing: -0.5px;
  margin: 0 0 40px;
}
.t2a-cmp .t2a-cmp-emph { color: var(--cmp-blue); }

/* ---------- Buttons ---------- */
.t2a-cmp .t2a-cmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  border-radius: 999px;
  padding: 15px 32px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.t2a-cmp .t2a-cmp-btn--primary {
  background: var(--cmp-blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(10, 108, 193, 0.35);
}
.t2a-cmp .t2a-cmp-btn--primary:hover { background: var(--cmp-blue-dark); color: #fff; transform: translateY(-2px); text-decoration: none; }
.t2a-cmp .t2a-cmp-btn--ghost {
  background: #fff;
  color: var(--cmp-ink);
  border: 1.5px solid var(--cmp-line);
}
.t2a-cmp .t2a-cmp-btn--ghost:hover { border-color: var(--cmp-blue); color: var(--cmp-blue); text-decoration: none; }

/* ============================================================
   HERO
   ============================================================ */
/* padding-top clears the shared site nav (position:fixed, ~91px tall) plus
   breathing room under it — half the gap of the initial fix, per design. */
.t2a-cmp .t2a-cmp-hero { background: linear-gradient(180deg, #f4f9ff 0%, #e7f2fd 100%); padding: 140px 0 0; overflow: hidden; }
.t2a-cmp .t2a-cmp-hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: end;
  padding-bottom: 64px;
}
/* A grid item's automatic minimum size is its min-content width, so a single
   long German/Polish word ("Entscheidungen", "pracownikam") inflates the `fr`
   column past the container and the H1/lead run off the right edge. */
.t2a-cmp .t2a-cmp-hero__grid > * { min-width: 0; }
.t2a-cmp .t2a-cmp-hero__eyebrow { color: var(--cmp-blue); font-weight: 700; font-size: 24px; margin-bottom: 14px; }
.t2a-cmp .t2a-cmp-hero__title {
  font-size: 48px;
  font-weight: 900;
  color: var(--cmp-ink);
  line-height: 1.14;
  letter-spacing: -1px;
  margin: 0 0 22px;
  text-wrap: pretty;
  /* No hyphens/overflow-wrap on headings: words must never be broken (product
     decision). Long de/pl words are handled by the viewport-scaled font-size
     below and by :lang() rules. */
}
/* At 48px a single compound word ("Entscheidungen") is wider than a 280px
   phone column. Scaling the H1 with the viewport lets it wrap between words;
   9.5vw keeps the longest de/pl words inside the column at 320px without
   any mid-word break. */
@media (max-width: 480px) {
  .t2a-cmp .t2a-cmp-hero__title { font-size: clamp(30px, 9.5vw, 48px); letter-spacing: -0.5px; }
}
.t2a-cmp .t2a-cmp-hero__lead { font-size: 16px; font-weight: 600; color: var(--cmp-ink); line-height: 1.6; max-width: 520px; margin: 0 0 12px; }
.t2a-cmp .t2a-cmp-hero__sub { font-size: 16px; line-height: 1.65; max-width: 520px; margin: 0 0 30px; }
.t2a-cmp .t2a-cmp-hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.t2a-cmp .t2a-cmp-hero__photo { width: 100%; max-width: 440px; margin: 0 auto; }

/* ---------- Centered variant (text-only hero, no photo) — used by
   AboutUs, Contact, Pricing ---------- */
.t2a-cmp .t2a-cmp-hero--center { padding-bottom: 64px; text-align: center; }
.t2a-cmp .t2a-cmp-hero--center .t2a-cmp-hero__inner { max-width: 700px; margin: 0 auto; }
.t2a-cmp .t2a-cmp-hero--center .t2a-cmp-hero__eyebrow { margin-bottom: 14px; }
.t2a-cmp .t2a-cmp-hero--center .t2a-cmp-hero__title { margin: 0 0 22px; }
.t2a-cmp .t2a-cmp-hero--center .t2a-cmp-hero__lead,
.t2a-cmp .t2a-cmp-hero--center .t2a-cmp-hero__sub {
  max-width: 640px; margin: 0 auto 14px; font-weight: 400;
}
.t2a-cmp .t2a-cmp-hero--center .t2a-cmp-hero__lead:last-child,
.t2a-cmp .t2a-cmp-hero--center .t2a-cmp-hero__sub:last-child { margin-bottom: 0; }

/* ---------- Trust logos ---------- */
.t2a-cmp .t2a-cmp-trust { padding: 64px 0 30px; }
.t2a-cmp .t2a-cmp-trust__label {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #8ba0bd;
  margin-bottom: 12px;
}
.t2a-cmp .t2a-cmp-trust__sub { text-align: center; font-size: 15px; margin: 0 0 30px; color: var(--cmp-muted); }
.t2a-cmp .t2a-cmp-marquee { overflow: hidden; position: relative; }
.t2a-cmp .t2a-cmp-marquee::before,
.t2a-cmp .t2a-cmp-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2;
}
.t2a-cmp .t2a-cmp-marquee::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.t2a-cmp .t2a-cmp-marquee::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.t2a-cmp .t2a-cmp-marquee__track {
  display: flex; align-items: center; gap: 72px; width: max-content;
  animation: t2a-cmp-marquee 32s linear infinite;
}
.t2a-cmp .t2a-cmp-marquee__track img { height: 40px; width: auto; filter: grayscale(1); opacity: 0.7; transition: filter 0.2s ease, opacity 0.2s ease; }
.t2a-cmp .t2a-cmp-marquee__track img:hover { filter: grayscale(0); opacity: 1; }
@keyframes t2a-cmp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   "KDE VYUŽIJETE" — 4-tile grid with photo header
   ============================================================ */
.t2a-cmp .t2a-cmp-usage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.t2a-cmp .t2a-cmp-usage-card {
  background: #fff;
  border-radius: var(--cmp-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 26px rgba(22, 36, 61, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.t2a-cmp .t2a-cmp-usage-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(22, 36, 61, 0.14); }
.t2a-cmp .t2a-cmp-usage-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.t2a-cmp .t2a-cmp-usage-card__body { padding: 24px 28px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
/* `.t2a-cmp-usage-card` clips (`overflow: hidden`), so a long single-word
   title ("Mitarbeiterentwicklung") was cut mid-word instead of wrapping. */
.t2a-cmp .t2a-cmp-usage-card__title { font-size: 24px; font-weight: 700; color: var(--cmp-ink); }
@media (max-width: 1399.98px) {
  .t2a-cmp .t2a-cmp-usage-card__title { font-size: 20px; }
}
/* German compound titles ("Mitarbeiterentwicklung") do not fit a 262px card even
   at 20px; shrink for de only rather than breaking the word. */
:lang(de) .t2a-cmp .t2a-cmp-usage-card__title { font-size: 19px; letter-spacing: -0.2px; }
.t2a-cmp .t2a-cmp-usage-card__body p { font-size: 16px; line-height: 1.6; }
.t2a-cmp .t2a-cmp-cta-row { display: flex; justify-content: center; margin-top: 44px; }

/* ============================================================
   "JAK FUNGUJE" — 3-step grid
   ============================================================ */
.t2a-cmp .t2a-cmp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.t2a-cmp .t2a-cmp-step { display: flex; flex-direction: column; gap: 8px; transition: transform 0.25s ease; }
.t2a-cmp .t2a-cmp-step:hover { transform: translateY(-6px); }
.t2a-cmp .t2a-cmp-step__media {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: 22px; box-shadow: 0 14px 34px rgba(22, 36, 61, 0.12); margin-bottom: 14px;
}
/* Flat bold numeral (matches the Individuals page's step numbers) — no
   hand-drawn script font. */
.t2a-cmp .t2a-cmp-step__num { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--cmp-blue); }
.t2a-cmp .t2a-cmp-step--2 .t2a-cmp-step__num { color: var(--cmp-blue-light); }
.t2a-cmp .t2a-cmp-step--3 .t2a-cmp-step__num { color: var(--cmp-blue-deep); }
.t2a-cmp .t2a-cmp-step__title { font-size: 24px; font-weight: 700; color: var(--cmp-ink); }
.t2a-cmp .t2a-cmp-step p { font-size: 16px; line-height: 1.6; }

/* ============================================================
   SAFETY — gradient band
   ============================================================ */
.t2a-cmp .t2a-cmp-safety {
  background: linear-gradient(120deg, var(--cmp-blue-deep) 0%, var(--cmp-blue) 55%, var(--cmp-blue-light) 100%);
}
.t2a-cmp .t2a-cmp-safety__inner {
  max-width: 860px; margin: 0 auto; padding: 84px 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.t2a-cmp .t2a-cmp-safety__icon {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
}
.t2a-cmp .t2a-cmp-safety__icon svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t2a-cmp .t2a-cmp-safety__title { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -0.5px; margin: 0; }
.t2a-cmp .t2a-cmp-safety__lead { font-size: 16px; font-weight: 600; color: #fff; }
.t2a-cmp .t2a-cmp-safety__text { font-size: 16px; line-height: 1.7; max-width: 640px; color: rgba(255,255,255,0.88); }

/* ============================================================
   "CO ZÍSKÁTE" — icon-box benefit grid
   ============================================================ */
.t2a-cmp .t2a-cmp-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.t2a-cmp .t2a-cmp-benefit-card {
  display: flex; flex-direction: column; gap: 18px;
  background: #fff; border-radius: 26px; padding: 30px 26px;
  box-shadow: 0 8px 26px rgba(22, 36, 61, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.t2a-cmp .t2a-cmp-benefit-card:hover { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(10, 108, 193, 0.18); }
.t2a-cmp .t2a-cmp-benefit-card__icon {
  width: 68px; height: 68px; border-radius: 20px; background: var(--cmp-blue);
  box-shadow: 0 10px 24px rgba(10, 108, 193, 0.35);
  display: flex; align-items: center; justify-content: center;
  align-self: center;
}
.t2a-cmp .t2a-cmp-benefit-card--purple .t2a-cmp-benefit-card__icon { background: var(--cmp-purple); box-shadow: 0 10px 24px rgba(131, 60, 173, 0.35); }
.t2a-cmp .t2a-cmp-benefit-card__icon svg { width: 32px; height: 32px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.t2a-cmp .t2a-cmp-benefit-card__title { font-size: 24px; font-weight: 700; color: var(--cmp-ink); text-align: center; }
.t2a-cmp .t2a-cmp-benefit-card p { font-size: 16px; line-height: 1.6; }

/* ============================================================
   TESTIMONIAL — single quote
   ============================================================ */
.t2a-cmp .t2a-cmp-testimonial {
  max-width: 860px; margin: 0 auto; padding: 84px 24px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.t2a-cmp .t2a-cmp-testimonial__sub { font-size: 16px; margin: 0; color: var(--cmp-muted); }
.t2a-cmp .t2a-cmp-testimonial__quote {
  margin: 14px 0 0; font-size: 22px; font-weight: 500; line-height: 1.55; color: var(--cmp-ink);
  max-width: 760px; text-wrap: pretty; font-style: normal;
}
.t2a-cmp .t2a-cmp-testimonial__attribution { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
.t2a-cmp .t2a-cmp-testimonial__logo { height: 64px; width: auto; }
.t2a-cmp .t2a-cmp-testimonial__person { font-weight: 700; color: var(--cmp-ink); font-size: 16px; }
.t2a-cmp .t2a-cmp-testimonial__company { font-size: 14px; color: #7b8aa5; margin-top: -8px; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.t2a-cmp .t2a-cmp-finalcta__inner {
  max-width: 760px; margin: 0 auto; text-align: center; margin-bottom: 40px;
}
.t2a-cmp .t2a-cmp-finalcta__title { font-size: 40px; font-weight: 800; color: var(--cmp-ink); margin: 0 0 14px; letter-spacing: -0.5px; text-wrap: pretty; }
.t2a-cmp .t2a-cmp-finalcta__text { font-size: 16px; line-height: 1.6; margin: 0; color: var(--cmp-muted); }
/* ---------- Contact form card ---------- */
.t2a-cmp .t2a-cmp-form-card {
  max-width: 760px; margin: 0 auto; background: #fff; border-radius: 26px;
  box-shadow: 0 12px 34px rgba(22, 36, 61, 0.08); padding: 40px 40px 36px;
  display: flex; flex-direction: column; gap: 20px;
}
.t2a-cmp .t2a-cmp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.t2a-cmp .t2a-cmp-form-field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: var(--cmp-ink); }
.t2a-cmp .t2a-cmp-form-input {
  /* 16px minimum: iOS Safari zooms the viewport on focus for anything
     smaller and never zooms back out. Shared by References/Pricing/
     AboutUs/Contact, which reuse this same input primitive. */
  font-family: var(--cmp-sans); font-size: 16px; color: var(--cmp-ink);
  padding: 14px 16px; border: 1.5px solid var(--cmp-line); border-radius: 12px;
  outline: none; background: #f8fbff; transition: border-color 0.2s, background 0.2s;
}
.t2a-cmp .t2a-cmp-form-input:focus { border-color: var(--cmp-blue); background: #fff; }
.t2a-cmp .t2a-cmp-form-consent { margin: 0; font-size: 13px; line-height: 1.6; color: #7b8aa5; }
.t2a-cmp .t2a-cmp-form-consent a { color: var(--cmp-blue); font-weight: 600; text-decoration: none; }
.t2a-cmp .t2a-cmp-form-consent a:hover { text-decoration: underline; }
.t2a-cmp .t2a-cmp-form-submit { align-self: center; border: none; font-family: var(--cmp-sans); }
.t2a-cmp .t2a-cmp-form-success {
  display: none; background: #e9f5ee; border: 1.5px solid #2e8b57; color: #1f6a41;
  border-radius: 12px; padding: 14px 18px; font-size: 15px; font-weight: 600; text-align: center;
}
.t2a-cmp .t2a-cmp-form-card.is-sent .t2a-cmp-form-grid,
.t2a-cmp .t2a-cmp-form-card.is-sent .t2a-cmp-form-consent,
.t2a-cmp .t2a-cmp-form-card.is-sent .t2a-cmp-form-submit { display: none; }
.t2a-cmp .t2a-cmp-form-card.is-sent .t2a-cmp-form-success { display: block; }
.t2a-cmp .t2a-cmp-form-error {
  background: #fdecea; border: 1.5px solid #d0453b; color: #a12f27;
  border-radius: 12px; padding: 14px 18px; font-size: 15px; font-weight: 600; text-align: center;
}
.t2a-cmp .t2a-cmp-form-error[hidden],
.t2a-cmp .t2a-cmp-form-card.is-sent .t2a-cmp-form-error { display: none; }
@media (max-width: 560px) {
  .t2a-cmp .t2a-cmp-form-grid { grid-template-columns: 1fr; }
  .t2a-cmp .t2a-cmp-form-card { padding: 32px 24px 28px; }
}

/* ============================================================
   SCROLL REVEAL (same mechanism as the shared theme.css .reveal)
   ============================================================ */
/* Uses the standalone `translate` property (not `transform`) for the entrance
   offset, so it can never out-specificity a `:hover { transform: ... }` rule
   on the same element (e.g. a card's hover-lift) — the two properties compose
   independently instead of competing for the same `transform` declaration.
   The `transition` shorthand here also folds in the hover-lift's own
   transform/box-shadow timing (shared by every hover-lift card on this page)
   — `transition` is a single property, so this higher-specificity rule would
   otherwise silently replace a card's own `transition: transform ...` and
   leave its hover state animating abruptly (no transition at all). */
.t2a-cmp .reveal { opacity: 1; translate: 0 0; }
.t2a-cmp.t2a-cmp-ready .reveal {
  opacity: 0; translate: 0 24px;
  transition: opacity 0.7s var(--cmp-ease), translate 0.7s var(--cmp-ease), transform 0.25s ease, box-shadow 0.25s ease;
}
.t2a-cmp.t2a-cmp-ready .reveal.in { opacity: 1; translate: 0 0; }
.t2a-cmp .reveal.d1 { transition-delay: 0.08s; }
.t2a-cmp .reveal.d2 { transition-delay: 0.16s; }
.t2a-cmp .reveal.d3 { transition-delay: 0.24s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199.98px) {
  .t2a-cmp { --cmp-section-y: 70px; }
  /* Below xl the top nav is fixed at every width (see components/_mobile-nav.scss)
     and body already reserves its real height via padding-top — the hero's
     own 140px (sized to clear the old in-flow/desktop nav) just adds a second,
     much bigger gap on top of that. Small fixed breathing room instead, same
     value across every page hero (also used verbatim by professionals/
     organizations/schools/publicsector-redesign.css, and inherited here by
     References/Pricing/AboutUs/Contact/Home, which all reuse .t2a-cmp-hero). */
  .t2a-cmp .t2a-cmp-hero { padding-top: 24px; }
  /* Tighter logo spacing in the trust marquee on mobile — 72px (desktop)
     reads as sparse/slow on a narrow screen. Desktop untouched. */
  .t2a-cmp .t2a-cmp-marquee__track { gap: 24px; }
  .t2a-cmp .t2a-cmp-hero__grid { grid-template-columns: 1fr; padding-bottom: 30px; }
  .t2a-cmp .t2a-cmp-hero__photo { max-width: 340px; }
  .t2a-cmp .t2a-cmp-usage-grid { grid-template-columns: repeat(2, 1fr); }
  .t2a-cmp .t2a-cmp-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .t2a-cmp .t2a-cmp-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .t2a-cmp .t2a-cmp-container { padding: 0 20px; }
  .t2a-cmp .t2a-cmp-usage-grid { grid-template-columns: 1fr; }
  .t2a-cmp .t2a-cmp-benefits-grid { grid-template-columns: 1fr; }
  .t2a-cmp .t2a-cmp-hero__actions { flex-direction: column; align-items: stretch; }
  .t2a-cmp .t2a-cmp-hero__actions .t2a-cmp-btn { width: 100%; }
  /* "Jak Talk2Amy funguje" steps: number, image, title, text — desktop
     keeps the DOM order (image, number, title, text). */
  .t2a-cmp .t2a-cmp-step__num { order: 1; }
  .t2a-cmp .t2a-cmp-step__media,
  .t2a-cmp .t2a-media-quote-wrap { order: 2; }
  .t2a-cmp .t2a-cmp-step__title { order: 3; }
  .t2a-cmp .t2a-cmp-step p { order: 4; }
}
/* Step 3's "Amy speaking" quote (.t2a-media-quote, scss/components/_t2a-landing.scss)
   is absolutely positioned over the photo. In German at 320px it grows taller
   than the photo itself, spills out of the wrapper and covers the step title.
   Below 480px there is no room to overlay it at all — put it back in flow
   under the photo. Desktop/tablet keep the overlay. */
@media (max-width: 480px) {
  .t2a-cmp .t2a-media-quote {
    position: static;
    max-width: 100%;
    margin-top: 12px;
    font-size: 14px;
    border-bottom-left-radius: 14px;
  }
}

/* Final CTA title has no phone scaling; German "kennenzulernen?" (336px @40px)
   overflowed a 280px column at 320px. Words are never broken — scale instead. */
@media (max-width: 480px) {
  .t2a-cmp .t2a-cmp-finalcta__title { font-size: clamp(28px, 9vw, 40px); }
}