/* Najdunes design base, on top of brand/tokens/tokens.css and brand/fonts/fonts.css.
   Colours come only from the token custom properties; the phase palette (`data-phase`, noon by default) swaps them.
   Logical properties throughout, so one stylesheet serves Arabic (RTL) and English (LTR). */

:root {
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout: a 12-column grid inside a 1280px measure, 8 columns on tablets, 4 on phones. */
  --container: 80rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --grid-gap: clamp(1rem, 2vw, 2rem);
  /* Section rhythm: the vertical space between page sections. */
  --section: clamp(4rem, 9vw, 8rem);
  --measure: 38rem;

  /* Radii. A rounded image inside a padded frame takes the frame's radius minus the padding. */
  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-device: 2.4rem;
  --radius-pill: 999px;
  --radius-round: 50%;
  --rule: 1px solid var(--color-line);
  --focus-ring: 2px solid var(--color-accent-text);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 40rem) {
  :root {
    /* A phone mockup is drawn smaller on phones. */
    --radius-device: 1.6rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-background);
  color: var(--color-text);
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
  background: var(--color-background);
  color: var(--color-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Each script in its own family, also for a word of the other language inside a page. */
:lang(ar) {
  font-family: var(--font-arabic);
}
:lang(en) {
  font-family: var(--font-latin);
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Static renders (headless Chromium sets navigator.webdriver) freeze motion, so every capture is identical. */
[data-still] *,
[data-still] *::before,
[data-still] *::after {
  animation-play-state: paused !important;
  animation-delay: 0s !important;
  transition: none !important;
  caret-color: transparent !important;
}

/* ---------- Type roles ---------- */

.t-display,
.t-h1,
.t-h2,
.t-h3,
h1,
h2,
h3 {
  text-wrap: balance;
}

.t-display {
  font-size: clamp(calc(var(--type-display-size) * 0.62), 6.2vw, var(--type-display-size));
  line-height: var(--type-display-line-height);
  font-weight: var(--type-display-weight);
  letter-spacing: var(--type-display-tracking);
}
h1,
.t-h1 {
  font-size: clamp(calc(var(--type-h1-size) * 0.78), 4.4vw, var(--type-h1-size));
  line-height: var(--type-h1-line-height);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-tracking);
}
h2,
.t-h2 {
  font-size: clamp(calc(var(--type-h2-size) * 0.82), 3.4vw, var(--type-h2-size));
  line-height: var(--type-h2-line-height);
  font-weight: var(--type-h2-weight);
  letter-spacing: var(--type-h2-tracking);
}
h3,
.t-h3 {
  font-size: clamp(calc(var(--type-h3-size) * 0.86), 2.6vw, var(--type-h3-size));
  line-height: var(--type-h3-line-height);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
}
.t-lead {
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
  font-weight: var(--type-lead-weight);
  letter-spacing: var(--type-lead-tracking);
}
.t-body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
}
.t-caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--type-caption-weight);
  letter-spacing: var(--type-caption-tracking);
}
/* Small label above a heading. Latin is set in spaced capitals; Arabic has no capitals and is never letterspaced. */
.t-eyebrow {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.t-eyebrow:lang(ar) {
  letter-spacing: 0;
  text-transform: none;
}
.t-muted {
  color: var(--color-text-muted);
}
.t-accent {
  color: var(--color-accent-text);
}
/* Prices, phone numbers, codes: Western digits that line up. */
.t-num {
  font-variant-numeric: tabular-nums lining-nums;
}
/* A price (`price()` in shared/site.ts): "SAR 1,900" never breaks across lines. */
.t-price {
  white-space: nowrap;
}

.prose {
  max-width: var(--measure);
}
.prose > * + * {
  margin-block-start: 1em;
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 12-column grid. Children span `--span` columns (12 by default), `--span-t` on tablets and `--span-m` on phones. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-xl);
}
.grid > * {
  grid-column: span var(--span, 12);
}
@media (max-width: 64rem) {
  .grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .grid > * {
    grid-column: span var(--span-t, 8);
  }
}
@media (max-width: 40rem) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid > * {
    grid-column: span var(--span-m, 4);
  }
}

/* As many equal columns as fit at `--min` wide. */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 18rem), 100%), 1fr));
  gap: var(--grid-gap);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack, var(--space-m));
}
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster, var(--space-s));
}

/* ---------- Section rhythm ---------- */

.section {
  padding-block: var(--section);
}
.section--tight {
  padding-block: calc(var(--section) * 0.6);
}
.section--surface {
  background: var(--color-surface);
}
.section--rule {
  border-block-start: var(--rule);
}
.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 46rem;
  margin-block-end: var(--space-2xl);
}

.rule {
  border: 0;
  border-block-start: var(--rule);
  margin: 0;
}

/* ---------- Links ---------- */

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
a:hover {
  color: var(--color-accent-text);
}
.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-text-muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease);
}
.link:hover {
  color: var(--color-accent-text);
  text-decoration-color: currentColor;
}
.link--quiet {
  text-decoration: none;
}
.link--quiet:hover {
  text-decoration: underline;
}
/* A link that leads on (“See the work”): arrow follows the reading direction. */
.link--arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.link--arrow::after {
  content: "→";
  transition: transform 0.15s var(--ease);
}
.link--arrow:lang(ar)::after,
[dir="rtl"] .link--arrow::after {
  content: "←";
}
.link--arrow:hover::after {
  transform: translateX(0.2em);
}
[dir="rtl"] .link--arrow:hover::after {
  transform: translateX(-0.2em);
}

/* ---------- Focus: always visible for keyboard users ---------- */

:focus-visible,
.is-focus {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}
main:focus {
  outline: none;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn .icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}
/* The one accent: calls to action. */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn--primary:hover {
  background: color-mix(in oklab, var(--color-accent) 82%, var(--color-text));
  color: var(--color-on-accent);
}
.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn--secondary:hover {
  background: var(--color-text);
  color: var(--color-background);
}
.btn--text {
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  background: transparent;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.btn--text:hover {
  color: var(--color-accent-text);
}
.btn--small {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font-size: var(--type-caption-size);
}
.btn--block {
  display: flex;
  width: 100%;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Submitting: keeps its label, adds a spinner, ignores clicks. */
.btn[aria-busy="true"] {
  cursor: progress;
  pointer-events: none;
}
.btn[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"]::before {
    animation-duration: 2.4s;
  }
}

/* ---------- Rounded media ----------
   An image carries its own radius and crop (object-fit), never a clipping wrapper: an `overflow: hidden` +
   `border-radius` box around a large image antialiases differently from run to run and breaks repeatable captures.
   A wrapper may keep the radius for its own background; the image inside inherits it. */

.media {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--media-radius, var(--radius-m));
}

/* ---------- Card ---------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-xl);
  background: var(--color-surface);
  border: var(--rule);
  border-radius: var(--radius-m);
  color: var(--color-text);
}
.card__media {
  margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-xs);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  background: var(--color-line);
}
.card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.card__meta {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  color: var(--color-text-muted);
}
.card__title {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line-height);
  font-weight: var(--type-h3-weight);
}
.card__foot {
  margin-block-start: auto;
  padding-block-start: var(--space-m);
}
/* The whole card is one link: the title's link stretches over it. */
.card--link {
  position: relative;
  transition: border-color 0.15s var(--ease);
}
.card--link:hover {
  border-color: var(--color-text-muted);
}
.card--link .card__title a {
  text-decoration: none;
}
.card--link .card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card--link:has(:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
.card--link .card__title a:focus-visible {
  outline: none;
}
/* The featured offer: inverted, never a second accent colour. */
.card--feature {
  background: var(--color-text);
  color: var(--color-background);
  border-color: var(--color-text);
}
.card--feature .card__meta {
  color: inherit;
  opacity: 0.8;
}

/* A short label such as “Concept / Self-initiated”. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  width: fit-content;
  padding: 0.15em 0.75em;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
.tag--accent {
  color: var(--color-accent-text);
}

/* ---------- Forms ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field__label {
  padding: 0;
  font-weight: var(--font-weight-medium);
}
.field__optional {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}
.field__hint {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  color: var(--color-text-muted);
}
.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-text);
}
/* Error marker: an exclamation in a ring, so an error never relies on colour alone. */
.field__error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.35em;
  height: 1.35em;
  margin-block-start: 0.15em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-latin);
  font-size: 0.85em;
  line-height: 1;
}

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-s);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.textarea {
  min-height: 9rem;
  resize: vertical;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.85;
}
.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--color-text);
}
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.input.is-focus,
.select.is-focus,
.textarea.is-focus {
  border-color: var(--color-text);
  outline-offset: 2px;
}
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-accent-text);
  box-shadow: inset 0 0 0 1px var(--color-accent-text);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  border-style: dashed;
  background: transparent;
  color: var(--color-text-muted);
  cursor: not-allowed;
}
/* Phone numbers and email addresses read left to right in both languages. */
.input[type="email"],
.input[type="tel"],
.input[type="url"] {
  direction: ltr;
}
.input[type="email"]:lang(ar)::placeholder,
.input[type="tel"]:lang(ar)::placeholder {
  text-align: end;
}

.select-wrap {
  position: relative;
}
.select {
  appearance: none;
  padding-inline-end: 2.75rem;
  cursor: pointer;
}
.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--color-text);
  border-bottom: 1.5px solid var(--color-text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select-wrap:has(.select:disabled)::after {
  border-color: var(--color-text-muted);
}

/* Native checkbox or radio with its label. */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-xs);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.3em 0 0;
  accent-color: var(--color-accent);
}
.check:has(input:disabled) {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Choice chips: a checkbox or radio group shown as pills (services, budget, timeline). */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.choice {
  position: relative;
  display: inline-flex;
}
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.choice:hover span {
  border-color: var(--color-text);
}
.choice input:checked + span {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-background);
}
/* Tick drawn with borders (physical, so it never mirrors in Arabic). */
.choice input:checked + span::before {
  content: "";
  width: 0.35em;
  height: 0.7em;
  margin-block-start: -0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.choice input:focus-visible + span,
.choice input.is-focus + span {
  outline: var(--focus-ring);
  outline-offset: 3px;
}
.choice input:disabled + span {
  border-style: dashed;
  background: transparent;
  color: var(--color-text-muted);
}
.choice input:disabled {
  cursor: not-allowed;
}
/* A group in error: `aria-invalid="true"` on its fieldset (or on a single choice). */
.field[aria-invalid="true"] .choice span,
.field--error .choice span,
.choice input[aria-invalid="true"] + span {
  border-color: var(--color-accent-text);
}

/* Form-level message: success, failure, or an error summary. */
.notice {
  display: flex;
  gap: var(--space-m);
  align-items: flex-start;
  padding: var(--space-l);
  border: var(--rule);
  border-inline-start: 3px solid var(--color-text);
  border-radius: var(--radius-s);
  background: var(--color-surface);
}
.notice--error {
  border-inline-start-color: var(--color-accent-text);
}
.notice__title {
  font-weight: var(--font-weight-semibold);
}
.notice > .icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

/* ---------- Utilities ---------- */

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A pending founder fact (#18): the placeholder value, outlined and labelled so nobody mistakes it for real.
   The outline sits 3px outside the box (2px offset + 1px line); the margins keep neighbouring text clear of it. */
.pending {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15em 0.5em;
  margin-block: 3px;
  margin-inline: calc(3px + 0.2em);
  padding-inline: 0.3em;
  outline: 1px dashed var(--color-accent-text);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.pending::after {
  content: attr(data-label);
  font-size: 0.75em;
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-text);
}

/* ---------- Brand motifs (shared/motifs.ts) ---------- */

/* The sun dot: the one accent used as a mark, as in the symbol. `--sun` sets its size. */
.sun-dot {
  display: block;
  width: var(--sun, 1.25rem);
  height: var(--sun, 1.25rem);
  border-radius: var(--radius-round);
  background: var(--color-accent);
}

/* A box with a contour layer behind its content. It needs no `overflow: hidden`: the layer takes its radius. Its
   other children stack above the layer; `:where` keeps that rule weak, so a child can still be positioned. */
.contour-host {
  position: relative;
}
.contour-host > :where(:not(.contour-layer)) {
  position: relative;
}
/* Contour artwork (Mud lines) covering its host: soft on light phases, at line strength on dark ones. */
.contour-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  opacity: var(--contours, 0.35);
  pointer-events: none;
}
[data-phase="dusk"] .contour-layer,
[data-phase="night"] .contour-layer {
  opacity: calc(var(--contours, 0.35) + 0.45);
}

/* ---------- Design note (shared/note.ts) ---------- */

/* An annotation for reviewers or the founder, never page copy: dashed and labelled. */
.design-note {
  display: grid;
  gap: var(--space-2xs);
  max-width: 52rem;
  padding: var(--space-l);
  border: 1px dashed var(--color-accent-text);
  border-radius: var(--radius-s);
}
.design-note--caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}
.design-note__label {
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-text);
}
.design-note__title {
  font-weight: var(--font-weight-semibold);
}
.design-note__body {
  color: var(--color-text-muted);
}

/* ---------- Process (shared/process.ts) ---------- */

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps__item {
  border-block-start: var(--rule);
}
.steps__num {
  line-height: 1;
  font-weight: var(--font-weight-light);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.steps__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}
.steps__text {
  color: var(--color-text-muted);
}
.steps__gate {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
}
.steps__gate .icon {
  width: 1.25em;
  height: 1.25em;
  margin-block-start: 0.05em;
  color: var(--color-accent-text);
}
.steps__gate-label {
  color: var(--color-text-muted);
}

/* Compact (Services): a row of columns, number above title. */
.steps--compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-2xl) var(--grid-gap);
}
.steps--compact .steps__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding-block-start: var(--space-l);
  border-block-start-color: var(--color-text);
}
.steps--compact .steps__num {
  font-size: var(--type-h2-size);
}
.steps--compact .steps__title {
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-line-height);
  font-weight: var(--font-weight-medium);
}

/* Full (Studio): number beside the phase, stacked phases between rules. */
.steps--full .steps__item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-l);
  padding-block: var(--space-xl);
}
.steps--full .steps__item:last-child {
  border-block-end: var(--rule);
}
.steps--full .steps__num {
  font-size: clamp(calc(var(--type-h1-size) * 0.78), 4.4vw, var(--type-h1-size));
}
.steps--full .steps__title {
  font-size: clamp(calc(var(--type-h3-size) * 0.86), 2.6vw, var(--type-h3-size));
  line-height: var(--type-h3-line-height);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-tracking);
}
.steps--full .steps__gate {
  padding-block: var(--space-2xs);
  padding-inline: var(--space-s);
  border: var(--rule);
  border-radius: var(--radius-pill);
}
@media (max-width: 40rem) {
  .steps--full .steps__item {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-m);
  }
  .steps--full .steps__num {
    font-size: var(--type-h2-size);
  }
}