/* Translated builds — Spanish and Catalan.

   The English pages are pinned to the Figma frame, which means several boxes
   carry the exact pixel width of their English string. Those measurements are
   meaningless in another language, so here the content sizes them. Structural
   geometry (section heights, column tracks, the grid) stays put. */

[lang="es"] .h3__nav .btn--primary,
[lang="ca"] .h3__nav .btn--primary,
[lang="es"] .h3__nav .btn--ghost,
[lang="ca"] .h3__nav .btn--ghost,
[lang="es"] .h3__lede .btn,
[lang="ca"] .h3__lede .btn,
[lang="es"] .stack__cta,
[lang="ca"] .stack__cta,
[lang="es"] .modules-intro__cta,
[lang="ca"] .modules-intro__cta,
[lang="es"] .founder__cta,
[lang="ca"] .founder__cta,
[lang="es"] .feature__cta,
[lang="ca"] .feature__cta,
[lang="es"] .closing .btn,
[lang="ca"] .closing .btn,
[lang="es"] .clay-hero .btn,
[lang="ca"] .clay-hero .btn {
  width: auto;
}

/* Headline row two and its lime marker: both were cut to "growth work." */
[lang="es"] .h3__row--b,
[lang="ca"] .h3__row--b { width: auto; }

[lang="es"] .h3__mark,
[lang="ca"] .h3__mark { width: auto; }

[lang="es"] .h3__mark::before,
[lang="ca"] .h3__mark::before { width: auto; left: 0; right: -23px; }

/* Diagram nodes were sized to DATA / PROCESS / GROWTH */
[lang="es"] .node,
[lang="ca"] .node { width: auto; }

/* The nav links frame is a Figma measurement, not a constraint */
[lang="es"] .h3__nav .nav__links,
[lang="ca"] .h3__nav .nav__links { width: auto; }

/* ---- Language switcher ---- */
.lang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 8px;
}

.lang a {
  font-family: var(--font-inter);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 150ms ease, color 150ms ease;
}

.lang a:hover { opacity: 1; color: var(--obsidian); }

.lang a[aria-current="page"] {
  color: var(--obsidian);
  opacity: 1;
}

.lang a:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* hairline between the three, in the design's rule weight */
.lang a + a { position: relative; padding-left: 11px; }

.lang a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 10px;
  margin-top: -5px;
  background: var(--muted);
  opacity: 0.4;
}

/* The headline is two fixed 140px rows sized to the English string; Spanish and
   Catalan are longer, so the display size steps down to keep one line per row. */
[lang="es"] .h3__row.t-display-l,
[lang="ca"] .h3__row.t-display-l { font-size: 54px; }

[lang="es"] .h3__mark,
[lang="ca"] .h3__mark { height: 53px; }

[lang="es"] .h3__mark::before,
[lang="ca"] .h3__mark::before { top: 5px; height: 59px; }

/* The "?" node is a circle, not a label — it keeps its 55px box. */
[lang="es"] .node--q,
[lang="ca"] .node--q { width: 55px; }