:root {
  color-scheme: light;

  --palette-charcoal-900: #1e1f23;
  --palette-coral-600: #d95743;
  --palette-coral-700: #b84a3a;
  --palette-amber-500: #e59a32;
  --palette-ivory-50: #f7f3ec;
  --palette-white: #ffffff;
  --palette-border: #e4e5e8;
  --palette-muted: #5a5d66;
  --palette-soft: #f4f5f7;

  --color-text-primary: var(--palette-charcoal-900);
  --color-text-muted: var(--palette-muted);
  --color-text-inverse: var(--palette-white);
  --color-brand-primary: var(--palette-coral-600);
  --color-brand-strong: var(--palette-coral-700);
  --color-process-line: #e36a52;
  --color-process-line-hover: #de6049;
  --process-line-width: 1px;
  --process-line-overlap: 0.06rem;
  --color-action-primary: var(--palette-coral-600);
  --color-action-primary-hover: var(--palette-coral-700);
  --color-action-primary-active: #a64133;
  --color-accent-warm: var(--palette-amber-500);
  --color-surface-primary: var(--palette-white);
  --color-surface-subtle: var(--palette-soft);
  --color-surface-warm: var(--palette-ivory-50);
  --color-surface-elevated: var(--palette-white);
  --color-surface-inverse: var(--palette-charcoal-900);
  --color-border-subtle: var(--palette-border);

  /* Interaction focus — ETZAM Warm Amber (not Coral, not browser black) */
  --color-focus-ring: var(--palette-amber-500);
  --focus-ring-width: 0.125rem; /* 2px */
  --focus-ring-offset: 0.125rem;
  --focus-ring-inset-offset: -0.125rem;

  /* Validation error — distinct from Coral action branding */
  --palette-error-600: #b42318;
  --palette-error-700: #912018;
  --color-error: var(--palette-error-600);
  --color-error-strong: var(--palette-error-700);
  --color-error-border: rgb(180 35 24 / 72%);

  --color-warning-text: #6b3d00;
  --color-warning-surface: #fff7e8;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  --radius-sm: 0.45rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.15rem;

  --shadow-soft: 0 1rem 2.4rem rgb(30 31 35 / 7%);
  --shadow-lift: 0 1.4rem 2.8rem rgb(30 31 35 / 10%);
  --readable: 74rem;

  /* Scroll system — native mechanics; restrained styling where supported */
  --scrollbar-thumb: #adb0b8;
  --scrollbar-thumb-hover: #90949d;
  --scrollbar-track: transparent;
  --scrollbar-thumb-internal: rgb(30 31 35 / 22%);
  --scrollbar-thumb-internal-hover: rgb(30 31 35 / 34%);
  --scrollbar-size-document: 0.65rem;
  --scrollbar-size-internal: 0.3rem;

  /* Matches .site-header bar: padding + tallest control + border */
  --site-header-bar-padding-block: 0.85rem;
  --site-header-control-block-size: 2.85rem;
  --site-header-border-block-size: 0.06rem;
  --site-header-block-size: calc(
    var(--site-header-bar-padding-block) * 2 +
      var(--site-header-control-block-size) +
      var(--site-header-border-block-size)
  );
  --scroll-padding-block-start: var(--site-header-block-size);

  --font-sans: "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --font-display: "Segoe UI Semibold", "Segoe UI", "Helvetica Neue", system-ui,
    sans-serif;

  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.1rem, 1.04rem + 0.3vw, 1.22rem);
  --step-2: clamp(1.35rem, 1.18rem + 0.75vw, 1.75rem);
  --step-3: clamp(1.85rem, 1.45rem + 1.5vw, 2.65rem);
  --step-4: clamp(2.45rem, 1.9rem + 2.1vw, 3.55rem);

  font-family: var(--font-sans);
  font-size: 100%;
  line-height: 1.65;
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
}

* {
  box-sizing: border-box;
}

html {
  /*
    Keep load / cross-document landing instantaneous. Same-page fragment links
    still reach the correct section via native hash navigation + scroll-padding
    (sticky Header offset). Smooth animation was contributing to mid-page
    “landing” races when combined with late scroll restoration handlers.
  */
  scroll-behavior: auto;
  scroll-padding-block-start: var(--scroll-padding-block-start);
  width: 100%;
  max-width: 100%;
  max-inline-size: 100%;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

html::-webkit-scrollbar {
  width: var(--scrollbar-size-document);
}

html::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 0.15rem solid transparent;
  background-clip: content-box;
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
}

/* Internal bounded panels — native overflow, subtler scrollbar */
.scroll-region--internal {
  overflow-y: auto;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-internal) var(--scrollbar-track);
}

.scroll-region--internal::-webkit-scrollbar {
  inline-size: var(--scrollbar-size-internal);
}

.scroll-region--internal::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--scrollbar-thumb-internal);
}

@media (hover: hover) {
  .scroll-region--internal::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-internal-hover);
  }
}

body,
.site-body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 18rem;
  min-block-size: 100vh;
  background: var(--color-surface-primary);
  color: var(--color-text-primary);
}

html[dir="rtl"] body,
html[dir="rtl"] .site-body {
  direction: ltr;
}

html[dir="rtl"] .site-header,
html[dir="rtl"] main,
html[dir="rtl"] .site-footer {
  direction: rtl;
}

main,
article,
section,
header,
footer,
nav,
ul,
li {
  min-inline-size: 0;
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-brand-strong);
}

/* Mouse/touch: no permanent browser outline; keyboard keeps Amber focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/*
  Amber focus is for discrete interactive controls only.
  Do NOT style [tabindex='-1'] globally — <main tabindex="-1"> is a skip-link
  target and would paint a page-wide Amber ring (visible as a line above footer).
*/
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role='button']:focus-visible,
[role='menuitem']:focus-visible,
[role='option']:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Skip-link / programmatic focus host — no layout-wide Amber frame */
main:focus,
main:focus-visible {
  outline: none;
}

button:disabled:focus,
button:disabled:focus-visible,
button[aria-disabled='true']:focus,
button[aria-disabled='true']:focus-visible {
  outline: none;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 40;
  padding: 0.75rem 1rem;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  transform: translateY(-160%);
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 2.85rem;
  padding-inline: 1.25rem;
  border: 0.08rem solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  /* Grounded CTAs: tone changes only — no lift/glow elevation. */
  box-shadow: none;
  transition:
    background-color 170ms ease,
    border-color 170ms ease,
    color 170ms ease;
}

.button:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.button:disabled:focus-visible,
.button[aria-disabled='true']:focus-visible {
  outline: none;
}

.button--primary {
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
  border-color: rgb(184 74 58 / 42%);
}

@media (hover: hover) {
  .button--primary:hover {
    background: var(--color-action-primary-hover);
    border-color: var(--color-action-primary-active);
    color: var(--color-text-inverse);
  }
}

.button--primary:active {
  background: var(--color-action-primary-active);
  border-color: #94372b;
}

.button--secondary {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
}

@media (hover: hover) {
  .button--secondary:hover {
    border-color: rgb(217 87 67 / 42%);
    color: var(--color-text-primary);
    background: rgb(217 87 67 / 4%);
  }
}

.button--secondary:active {
  background: rgb(217 87 67 / 6%);
  border-color: rgb(217 87 67 / 32%);
}

.button--quiet {
  background: transparent;
  color: var(--color-text-primary);
}

@media (hover: hover) {
  .button--quiet:hover {
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
  }
}

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-brand-strong);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

html[dir='rtl'] .eyebrow,
html[dir='rtl'] .site-footer__heading {
  letter-spacing: normal;
  text-transform: none;
}

.brand-logo {
  display: block;
  inline-size: auto;
  block-size: 2.05rem;
  width: auto;
  height: 2.05rem;
}

.brand-logo--header {
  block-size: 2.2rem;
  height: 2.2rem;
}

.brand-logo--footer {
  block-size: 2.45rem;
  height: 2.45rem;
}

/* Header */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: #ffffff;
  border-block-end: 0.06rem solid var(--color-border-subtle);
}

.site-header__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  max-inline-size: var(--readable);
  margin-inline: auto;
  padding-block: 0.85rem;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-header__center {
  display: none;
  justify-content: center;
}

.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-inline-size: 0;
}

.primary-nav .nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .primary-nav .nav-list {
    flex-wrap: nowrap;
    gap: 0.1rem 0.2rem;
  }
}

@media (min-width: 900px) and (max-width: 1080px) {
  .primary-nav a {
    padding-inline: 0.55rem;
    font-size: 0.92rem;
  }
}

.primary-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.25rem;
  padding-inline: 0.7rem;
  border-radius: 0.35rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--color-text-muted);
  position: relative;
}

.primary-nav a:hover {
  color: var(--color-text-primary);
  background: transparent;
}

.primary-nav a:focus-visible {
  color: var(--color-text-primary);
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.primary-nav a.is-active,
.primary-nav a[aria-current="page"] {
  color: var(--color-text-primary);
  background: transparent;
  font-weight: 700;
}

.primary-nav a.is-active::after,
.primary-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-inline: 0.55rem;
  inset-block-end: 0.2rem;
  block-size: 0.12rem;
  border-radius: 999px;
  background: var(--color-brand-primary);
}

.language-switcher {
  --language-panel-width: 9.625rem; /* ~154px: shared trigger + popover */
  --language-menu-width: var(--language-panel-width);
  position: relative;
}

.language-switcher__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  inline-size: var(--language-menu-width);
  min-block-size: 2.25rem;
  padding-inline: 0.45rem;
  padding-block: 0.15rem;
  border: 0.06rem solid transparent;
  border-radius: 0.45rem;
  background: #ffffff;
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
}

.language-switcher__trigger:hover,
.language-switcher__trigger[aria-expanded='true'] {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-subtle);
}

.language-switcher__trigger:focus-visible {
  border-color: var(--color-focus-ring);
  background: var(--color-surface-subtle);
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.language-switcher__globe {
  display: inline-flex;
  flex: 0 0 auto;
  margin-inline-end: 0.7rem;
  color: var(--color-text-muted);
}

.language-switcher__trigger-name {
  flex: 0 1 auto;
  min-inline-size: 0;
  max-inline-size: max-content;
  margin-inline-end: 0.65rem;
  /* Ellipsis for long names; padding + line-height keep descenders (g, y) visible. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.5;
  padding-block: 0.15rem;
  color: var(--color-text-primary);
  unicode-bidi: isolate;
}

.language-switcher__trigger-name--code {
  display: none;
}

.language-switcher__chevron {
  flex: 0 0 auto;
  inline-size: 0.34rem;
  block-size: 0.34rem;
  border-inline-end: 0.1rem solid currentColor;
  border-block-end: 0.1rem solid currentColor;
  color: var(--color-text-primary);
  transform: rotate(45deg) translateY(-0.07rem);
  opacity: 0.8;
}

.language-switcher__trigger[aria-expanded="true"] .language-switcher__chevron {
  transform: rotate(225deg) translateY(-0.01rem);
}

.language-switcher__panel {
  /* Reset Popover UA centering (inset:0 + margin:auto). Positioned by JS. */
  position: fixed;
  inset: auto;
  margin: 0;
  box-sizing: border-box;
  inline-size: var(--language-panel-width);
  max-inline-size: min(var(--language-panel-width), calc(100vw - 1rem));
  max-block-size: min(20rem, 70vh);
  padding: 0.3rem;
  border: 0.06rem solid var(--color-border-subtle);
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 0.5rem 1.15rem rgb(30 31 35 / 10%);
}

.language-switcher__panel:not(:popover-open) {
  display: none;
}

.language-switcher__heading {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  margin: 0 0 0.1rem;
  padding: 0.25rem 0.4rem 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  border-block-end: 0.06rem solid var(--color-border-subtle);
  background: #ffffff;
}

.language-switcher__list {
  margin: 0.1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.05rem;
}

.language-switcher__option {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 0.625rem;
  align-items: center;
  column-gap: 0.4rem;
  min-block-size: 1.9rem;
  padding: 0.2rem 0.4rem;
  border-radius: 0.35rem;
  text-decoration: none;
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: start;
}

.language-switcher__option:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
}

.language-switcher__option:focus-visible {
  background: var(--color-surface-subtle);
  color: var(--color-text-primary);
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-inset-offset);
}

.language-switcher__option.is-selected,
.language-switcher__option[aria-current="true"] {
  background: rgb(232 90 79 / 8%);
  color: var(--color-text-primary);
  font-weight: 650;
}

.language-switcher__option-code {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  line-height: 1;
}

.language-switcher__option-name {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  line-height: 1.5;
  padding-block: 0.1rem;
  unicode-bidi: isolate;
}

.language-switcher__option.is-selected .language-switcher__option-name,
.language-switcher__option[aria-current="true"] .language-switcher__option-name {
  font-weight: 650;
}

.language-switcher__check,
.language-switcher__check-spacer {
  justify-self: end;
  align-self: center;
  inline-size: 0.625rem;
  block-size: 0.625rem;
}

.language-switcher__check {
  color: var(--color-brand-primary);
  display: block;
  margin-inline-start: auto;
}

@media (max-width: 52rem) {
  .language-switcher {
    --language-menu-width: auto;
    --language-panel-width: 9.625rem;
  }

  .language-switcher__trigger {
    inline-size: auto;
    min-inline-size: 4.75rem;
    padding-inline: 0.4rem;
  }

  .language-switcher__trigger-name--full {
    display: none;
  }

  .language-switcher__trigger-name--code {
    display: inline;
    overflow: visible;
    text-overflow: clip;
    max-inline-size: none;
    margin-inline-end: 0.45rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
}

.site-header__mobile {
  position: relative;
}

.site-header__menu-toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.35rem;
  block-size: 2.35rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  cursor: pointer;
}

.site-header__menu-toggle:hover {
  background: var(--color-surface-subtle);
}

.site-header__menu-toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.site-header__menu-toggle::-webkit-details-marker {
  display: none;
}

.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
  display: block;
  inline-size: 1rem;
  block-size: 0.12rem;
  background: var(--color-text-primary);
  border-radius: 999px;
}

.site-header__menu-icon {
  position: relative;
}

.site-header__menu-icon::before,
.site-header__menu-icon::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.site-header__menu-icon::before {
  inset-block-start: -0.35rem;
}

.site-header__menu-icon::after {
  inset-block-start: 0.35rem;
}

.site-header__mobile[open] .site-header__menu-icon {
  background: transparent;
}

.site-header__mobile[open] .site-header__menu-icon::before {
  inset-block-start: 0;
  transform: rotate(45deg);
}

.site-header__mobile[open] .site-header__menu-icon::after {
  inset-block-start: 0;
  transform: rotate(-45deg);
}

.site-header__mobile-panel {
  --mobile-nav-panel-width: 13rem; /* ~208px — compact; grows only if locale labels need it */
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 0.35rem);
  z-index: 30;
  display: grid;
  gap: 0.45rem;
  box-sizing: border-box;
  inline-size: max-content;
  min-inline-size: min(var(--mobile-nav-panel-width), calc(100vw - 1.25rem));
  max-inline-size: min(14.25rem, calc(100vw - 1.25rem)); /* ~228px cap; never overflow viewport */
  padding: 0.3rem;
  border: 0.06rem solid var(--color-border-subtle);
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 0.4rem 0.95rem rgb(30 31 35 / 8%);
}

.site-header__mobile-panel .nav-list {
  flex-direction: column;
  align-items: stretch;
  gap: 0.05rem;
}

.site-header__mobile-panel .primary-nav a {
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 2.75rem; /* ~44px touch target */
  padding-block: 0.55rem;
  padding-inline: 0.8rem;
  border-radius: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-muted);
  text-align: start;
  white-space: nowrap;
}

.site-header__mobile-panel .primary-nav a:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-subtle);
}

.site-header__mobile-panel .primary-nav a:focus-visible {
  color: var(--color-text-primary);
  background: var(--color-surface-subtle);
}

/* Mobile active: desktop-family Coral underline — not a peach/coral pill */
.site-header__mobile-panel .primary-nav a.is-active,
.site-header__mobile-panel .primary-nav a[aria-current='page'] {
  color: var(--color-text-primary);
  background: transparent;
  font-weight: 700;
}

.site-header__mobile-panel .primary-nav a.is-active::after,
.site-header__mobile-panel .primary-nav a[aria-current='page']::after {
  inset-inline: 0.8rem;
  inset-block-end: 0.32rem;
  block-size: 0.12rem;
}

.site-header__cta--desktop {
  display: none;
}

@media (min-width: 900px) {
  .site-header__center {
    display: flex;
  }

  .site-header__cta--desktop {
    display: inline-flex;
  }

  .site-header__mobile {
    display: none;
  }
}

@media (max-width: 899px) {
  .site-header__bar {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .site-header__center {
    display: none;
  }
}

/* Footer */

.site-footer {
  margin-block-start: 0;
  border-block-start: none;
  background: var(--color-surface-inverse);
  color: rgb(255 255 255 / 88%);
}

.site-footer a {
  color: rgb(255 255 255 / 88%);
  text-decoration: none;
  transition: color 170ms ease;
}

@media (hover: hover) {
  .site-footer a:hover {
    color: var(--color-brand-primary);
  }
}

.site-footer a:focus-visible {
  color: var(--color-text-inverse);
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-6);
  max-inline-size: var(--readable);
  margin-inline: auto;
  padding-block: var(--space-7) var(--space-6);
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.site-footer__logo {
  display: inline-flex;
}

.site-footer__tagline {
  max-inline-size: 30rem;
  margin-block: 1.25rem 0;
  color: rgb(255 255 255 / 68%);
  font-size: 0.98rem;
  line-height: 1.62;
}

.site-footer__columns {
  display: grid;
  gap: var(--space-5);
}

.site-footer__heading {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 55%);
}

.site-footer__columns ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.65rem;
}

.site-footer__columns a {
  font-weight: 600;
}

.site-footer__base {
  border-block-start: 0.06rem solid rgb(255 255 255 / 10%);
}

.site-footer__base-inner {
  max-inline-size: var(--readable);
  margin-inline: auto;
  padding-block: 1rem;
  padding-inline: clamp(1rem, 3vw, 2rem);
  color: rgb(255 255 255 / 52%);
  font-size: 0.88rem;
  letter-spacing: 0.01em;
}

.site-footer__base-inner p {
  margin: 0;
}

@media (max-width: 859px) {
  .site-footer__inner {
    gap: var(--space-5);
    padding-block: var(--space-6) var(--space-5);
  }

  /* Identity block only — navigation groups stay start-aligned. */
  .site-footer__brand {
    text-align: center;
  }

  .site-footer__logo {
    justify-content: center;
  }

  .site-footer__tagline {
    margin-inline: auto;
    margin-block: 0.85rem 0;
    max-inline-size: 22rem;
  }

  .site-footer__columns {
    gap: var(--space-4);
    text-align: start;
  }

  .site-footer__heading {
    margin-block-end: 0.55rem;
  }

  .site-footer__columns ul {
    gap: 0.45rem;
  }

  .site-footer__base-inner {
    padding-block: 0.75rem;
    text-align: center;
  }
}

@media (min-width: 860px) {
  .site-footer__inner {
    grid-template-columns: minmax(14rem, 1.15fr) minmax(0, 1.35fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
  }

  .site-footer__columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    column-gap: clamp(1.25rem, 2.5vw, 2rem);
  }
}

/* Interior pages */

.page-shell {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding-block: var(--space-7) var(--space-8);
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.page-heading h1 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.page-heading .lede,
.page-shell .lede {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step-1);
}

.page-shell section {
  margin-block-start: var(--space-6);
  padding: 1.25rem 1.3rem;
  border: 0.06rem solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
}

.page-shell h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--step-2);
  line-height: 1.2;
}

.page-shell p,
.page-shell li {
  color: var(--color-text-muted);
}

.page-shell ul {
  padding-inline-start: 1.15rem;
}

/* Legal documents — calm reading flow (all locales) */
.legal-doc {
  max-inline-size: 42rem;
  padding-block: clamp(1.75rem, 3.5vw, 2.5rem) clamp(2rem, 4vw, 2.75rem);
  /* English article body stays LTR even inside RTL site chrome. */
  unicode-bidi: isolate;
}

.legal-doc__language-note {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.legal-doc__header {
  margin-block-end: 1.35rem;
  padding-block-end: 1.15rem;
  border-block-end: 0.06rem solid rgb(30 31 35 / 12%);
}

.legal-doc__header h1 {
  margin-block-end: 0.7rem;
  font-size: clamp(1.7rem, 1.4rem + 0.9vw, 2.15rem);
  letter-spacing: -0.02em;
}

.legal-doc__header .lede {
  max-inline-size: 38rem;
  line-height: 1.55;
  font-size: 1rem;
}

.legal-doc__updated {
  margin: 0.85rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.legal-doc.page-shell .legal-doc__section {
  margin-block-start: 0;
  padding: 1.15rem 0 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.legal-doc.page-shell .legal-doc__section + .legal-doc__section {
  margin-block-start: 1.15rem;
  padding-block-start: 1.15rem;
  border-block-start: 0.06rem solid rgb(30 31 35 / 10%);
}

.legal-doc.page-shell .legal-doc__section h2 {
  margin: 0 0 0.65rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.legal-doc.page-shell .legal-doc__section p,
.legal-doc.page-shell .legal-doc__section li {
  color: var(--color-text-muted);
  font-size: 0.94rem;
  line-height: 1.58;
}

.legal-doc.page-shell .legal-doc__section p {
  margin: 0 0 0.7rem;
}

.legal-doc.page-shell .legal-doc__section p:last-child {
  margin-block-end: 0;
}

.legal-doc.page-shell .legal-doc__section ul {
  margin: 0 0 0.7rem;
  padding-inline-start: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.legal-doc.page-shell .legal-doc__section ul:last-child {
  margin-block-end: 0;
}

.legal-doc__index-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.legal-doc__index-list a {
  color: var(--color-text-primary);
  font-weight: 650;
  text-decoration: none;
}

.legal-doc__index-list a:hover {
  color: var(--color-brand-strong);
}

.legal-doc__action {
  margin-block-start: 0.35rem;
}

.legal-doc__action a {
  color: var(--color-text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.legal-doc__action a:hover {
  color: var(--color-brand-strong);
}

.legal-doc__action a:focus-visible,
.legal-doc__index-list a:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.legal-doc__related {
  margin-block-start: 1.5rem;
  padding-block-start: 1.15rem;
  border-block-start: 0.06rem solid rgb(30 31 35 / 12%);
}

.legal-doc__related h2 {
  margin: 0 0 0.7rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
}

.legal-doc__related ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.15rem;
}

.legal-doc__related a {
  color: var(--color-text-primary);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.legal-doc__related-current {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  font-weight: 650;
}

.legal-doc__related a:hover {
  color: var(--color-brand-strong);
}

.legal-doc__related a:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.related {
  margin-block-start: var(--space-7);
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
  border: 0.06rem solid var(--color-border-subtle);
}

.related h2 {
  margin: 0;
  font-size: 1rem;
}

.related ul {
  display: grid;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.related a {
  font-weight: 650;
  text-decoration: none;
}

.contact-note {
  margin-block-start: var(--space-5);
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  border: 0.06rem solid var(--color-border-subtle);
}

.draft-banner {
  display: flex;
  gap: 0.9rem;
  margin-block-end: var(--space-5);
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
  border: 0.06rem solid rgb(229 154 50 / 28%);
}

.draft-banner h2 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: inherit;
}

.draft-banner p,
.draft-facts {
  margin: 0;
  color: inherit;
}

.draft-facts {
  display: grid;
  gap: 0.35rem;
  margin-block-start: 0.75rem;
}

.draft-facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.draft-facts dt {
  font-weight: 700;
}

.draft-facts dd {
  margin: 0;
}

.status-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.6rem;
  block-size: 1.6rem;
  border-radius: 999px;
  background: var(--color-accent-warm);
  color: var(--color-text-inverse);
  font-weight: 700;
  flex: 0 0 auto;
}

/* English + locale homes */

.home-en {
  padding-block-end: 0;
}

.home-en > .home-hero {
  padding-block-end: var(--space-6);
}

.home-en > .home-hero + .home-section {
  padding-block-start: var(--space-6);
}

.home-en > .home-section + .home-section {
  padding-block-start: var(--space-5);
}

.home-locale {
  padding-block-end: var(--space-8);
}

.home-hero,
.home-section,
.home-locale__hero {
  max-inline-size: var(--readable);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.home-hero,
.home-locale__hero {
  display: grid;
  gap: var(--space-6);
  padding-block: clamp(2.75rem, 7vw, 5.5rem) var(--space-7);
  align-items: center;
}

.home-hero__copy h1 {
  margin: 0 0 var(--space-4);
  max-inline-size: 19ch;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.home-locale__hero-copy h1 {
  margin: 0 0 var(--space-4);
  max-inline-size: 14.5ch;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.home-hero__lede,
.home-locale__lede {
  margin: 0;
  max-inline-size: 36rem;
  color: var(--color-text-muted);
  font-size: var(--step-1);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: var(--space-5);
}

.home-hero__visual {
  min-inline-size: 0;
}

.home-hero__journey-steps {
  --journey-marker-size: 1.62rem;
  --journey-line-width: var(--process-line-width);
  --journey-line-color: var(--color-process-line);
  --journey-line-color-hover: var(--color-process-line-hover);
  --journey-step-row-gap: 1.44rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-hero__journey-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--journey-marker-size) minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: start;
  padding-block: calc(var(--journey-step-row-gap) / 2);
  transition:
    transform 170ms ease,
    color 170ms ease,
    border-color 170ms ease;
}

.home-hero__journey-step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline-start: calc(
    var(--journey-marker-size) / 2 - var(--journey-line-width) / 2
  );
  inset-block-start: calc(
    var(--journey-step-row-gap) / 2 + var(--journey-marker-size) -
      var(--process-line-overlap)
  );
  inset-block-end: calc(
    -1 * var(--journey-step-row-gap) / 2 - var(--process-line-overlap)
  );
  inline-size: var(--journey-line-width);
  background: var(--journey-line-color);
  transition: background-color 170ms ease;
}

@media (hover: hover) {
  .home-hero__journey-step:hover {
    transform: translateY(-1px);
  }

  .home-hero__journey-step:hover::after {
    background: var(--journey-line-color-hover);
  }

  .home-hero__journey-step:hover .home-hero__journey-copy strong {
    color: #b84a3a;
  }

  .home-hero__journey-step:hover .home-hero__journey-index {
    border-color: rgb(217 87 67 / 62%);
    color: #d95743;
  }
}

.home-hero__journey-index {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--journey-marker-size);
  block-size: var(--journey-marker-size);
  border-radius: 999px;
  background: var(--color-surface-primary);
  border: 0.07rem solid rgb(227 106 82 / 58%);
  color: #b84a3a;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  flex: 0 0 auto;
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    color 170ms ease;
}

.home-hero__journey-copy {
  position: relative;
  z-index: 1;
  padding-block-start: 0.08rem;
  transition: transform 170ms ease;
}

.home-hero__journey-copy strong {
  display: block;
  margin-block-end: 0.18rem;
  color: #1e1f23;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.18;
  transition: color 170ms ease;
}

.home-hero__journey-copy p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.48;
}

.home-locale__hero-panel {
  position: relative;
  min-block-size: 22rem;
  padding: 1.4rem;
  border-radius: 1.4rem;
  background:
    linear-gradient(155deg, #232429 0%, #1e1f23 55%, #17181c 100%);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  color: var(--color-text-inverse);
}

.home-locale__hero-panel::before {
  content: "";
  position: absolute;
  inset-inline-end: -20%;
  inset-block-start: -28%;
  inline-size: 18rem;
  block-size: 18rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(217 87 67 / 48%),
    rgb(229 154 50 / 16%) 42%,
    transparent 70%
  );
}

.home-locale__flow {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.65rem;
  margin-block-end: 1.2rem;
}

.home-locale__flow span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  border: 0.06rem solid rgb(255 255 255 / 12%);
  font-weight: 700;
}

.home-locale__hero-panel p {
  position: relative;
  z-index: 1;
  margin: 0;
  max-inline-size: 12rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}

.home-section {
  padding-block: var(--space-7);
}

.home-section__intro {
  max-inline-size: 40rem;
  margin-block-end: var(--space-5);
}

.home-section__intro h2,
.home-outlook__intro h2,
.home-closing__panel h2,
.home-locale__primary-card + * {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.home-section__intro h2,
.home-outlook__intro h2,
.home-closing__panel h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.home-section__intro p,
.home-outlook__intro > p,
.home-closing__panel > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step-1);
}

.home-paths .home-section__intro {
  margin-block-end: var(--space-6);
}

.home-paths__grid {
  position: relative;
  display: grid;
  gap: var(--space-5);
  align-items: stretch;
}

@media (min-width: 860px) {
  .home-paths__grid::before {
    content: "";
    position: absolute;
    inset-inline-start: 50%;
    inset-block: 2.5rem 2.5rem;
    inline-size: 0.075rem;
    background: linear-gradient(
      180deg,
      rgb(217 87 67 / 0%) 0%,
      rgb(217 87 67 / 14%) 38%,
      rgb(217 87 67 / 14%) 62%,
      rgb(217 87 67 / 0%) 100%
    );
    pointer-events: none;
    transform: translateX(-50%);
  }

  html[dir="rtl"] .home-paths__grid::before {
    transform: translateX(50%);
  }
}

.home-locale__grid {
  display: grid;
  gap: var(--space-4);
}

.home-why__layout {
  display: grid;
  gap: var(--space-6);
}

.home-why__intro {
  max-inline-size: 28rem;
}

.home-why__intro h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.home-why__intro > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.52;
}

.home-why__cue {
  margin-block-start: 1.1rem !important;
  color: var(--color-brand-strong);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.home-why__principles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-why__principle {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  padding-block: 1.15rem;
  border-block-end: 0.06rem solid rgb(30 31 35 / 10%);
  transition: border-color 170ms ease;
}

.home-why__principle:first-child {
  padding-block-start: 0;
}

.home-why__principle:last-child {
  padding-block-end: 0;
  border-block-end: none;
}

.home-why__index {
  padding-block-start: 0.1rem;
  color: var(--color-brand-primary);
  font-size: 0.775rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.045em;
  line-height: 1;
  transition: color 170ms ease;
}

.home-why__copy h3 {
  margin: 0 0 0.42rem;
  color: #1e1f23;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.24;
  transition: color 170ms ease;
}

.home-why__copy p {
  margin: 0;
  max-inline-size: 34rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

@media (hover: hover) {
  .home-why__principle:hover {
    border-block-end-color: rgb(30 31 35 / 18%);
  }

  .home-why__principle:last-child:hover {
    border-block-end-color: transparent;
  }

  .home-why__principle:hover .home-why__index,
  .home-why__principle:hover .home-why__copy h3 {
    color: #b84a3a;
  }
}

@media (min-width: 860px) {
  .home-why__layout {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    column-gap: clamp(1.75rem, 3.5vw, 3.25rem);
    align-items: start;
  }

  .home-why__intro {
    max-inline-size: 31rem;
  }

  .home-why__principle {
    padding-block: 1.25rem;
  }
}

.path-card {
  display: flex;
  flex-direction: column;
  min-block-size: 100%;
  padding: 1.6rem 1.7rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-primary);
  border: 0.06rem solid var(--color-border-subtle);
  transition:
    transform 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease,
    color 170ms ease;
}

.path-card__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-end: 0.95rem;
}

.path-card__index {
  flex: 0 0 auto;
  min-inline-size: 1.125rem;
  color: var(--color-brand-primary);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1;
}

.path-card__kicker {
  margin: 0;
  color: var(--color-brand-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
}

.path-card h3 {
  margin: 0 0 0.7rem;
  color: #1e1f23;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.22;
  transition: color 170ms ease;
}

.path-card__body {
  flex: 0 1 auto;
  margin: 0 0 0.95rem;
  color: var(--color-text-muted);
  font-size: var(--step-0);
  line-height: 1.52;
}

.path-card__cue {
  margin-block-start: auto;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid rgb(30 31 35 / 12%);
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.48;
}

@media (hover: hover) {
  .path-card:hover {
    border-color: rgb(217 87 67 / 28%);
    box-shadow: 0 0.35rem 1rem rgb(30 31 35 / 4%);
    transform: translateY(-1px);
  }

  .path-card:hover h3 {
    color: #b84a3a;
  }
}

.why-card,
.home-locale__primary-card {
  padding: 1.45rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  border: 0.06rem solid var(--color-border-subtle);
  box-shadow: 0 0.7rem 1.7rem rgb(30 31 35 / 4%);
}

.why-card h3,
.why-card h2 {
  margin: 0 0 0.55rem;
  font-size: 1.18rem;
}

.why-card p,
.home-locale__primary-card p,
.home-locale__primary-card li,
.why-card li {
  margin: 0;
  color: var(--color-text-muted);
}

.home-locale__primary-card ul,
.why-card ul {
  margin: 0.85rem 0 0;
  padding-inline-start: 1.1rem;
}

.home-how__steps {
  --how-marker-size: 1.55rem;
  --how-line-width: var(--process-line-width);
  --how-line-color: var(--color-process-line);
  --how-line-color-hover: var(--color-process-line-hover);
  --how-step-gap: 1.35rem;
  --how-step-inline-padding: 0.85rem;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.home-how__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--how-marker-size) minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: start;
  padding-block: calc(var(--how-step-gap) / 2);
  transition: transform 170ms ease;
}

.home-how__step:not(:last-child)::after {
  content: none;
}

.home-how__index {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--how-marker-size);
  block-size: var(--how-marker-size);
  border-radius: 999px;
  background: var(--color-surface-primary);
  border: 0.07rem solid rgb(227 106 82 / 58%);
  color: #b84a3a;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  transition:
    border-color 170ms ease,
    color 170ms ease;
}

.home-how__copy h3 {
  margin: 0 0 0.45rem;
  color: #1e1f23;
  font-family: var(--font-display);
  font-size: 1.09rem;
  font-weight: 700;
  line-height: 1.22;
  transition: color 170ms ease;
}

.home-how__copy p {
  margin: 0;
  max-inline-size: 22rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

@media (hover: hover) {
  .home-how__step:hover {
    transform: translateY(-1px);
  }

  .home-how__step:hover .home-how__copy h3 {
    color: #b84a3a;
  }

  .home-how__step:hover .home-how__index {
    border-color: rgb(217 87 67 / 62%);
    color: #d95743;
  }

  .home-how__steps:has(.home-how__step:hover)::before {
    border-block-start-color: var(--how-line-color-hover);
  }
}

@media (max-width: 639px) {
  .home-how__step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset-inline-start: calc(
      var(--how-marker-size) / 2 - var(--how-line-width) / 2
    );
    inset-block-start: calc(
      var(--how-step-gap) / 2 + var(--how-marker-size) -
        var(--process-line-overlap)
    );
    inset-block-end: calc(
      -1 * var(--how-step-gap) / 2 - var(--process-line-overlap)
    );
    inline-size: var(--how-line-width);
    background: var(--how-line-color);
    transition: background-color 170ms ease;
  }

  @media (hover: hover) {
    .home-how__step:hover::after {
      background: var(--how-line-color-hover);
    }
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .home-how__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    row-gap: var(--space-5);
  }

  .home-how__step {
    padding-block: 0;
  }
}

@media (min-width: 900px) {
  .home-how__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    padding-block-start: 0.2rem;
  }

  .home-how__steps::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset-block-start: calc(
      0.2rem + var(--how-marker-size) / 2 - var(--how-line-width) / 2
    );
    inset-inline-start: calc(var(--how-marker-size) / 2);
    inset-inline-end: calc(var(--how-marker-size) / 2);
    block-size: 0;
    border-block-start: var(--how-line-width) solid var(--how-line-color);
    background: none;
    pointer-events: none;
    transition: border-block-start-color 170ms ease;
  }

  .home-how__step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-block: 0;
    padding-inline: var(--how-step-inline-padding);
  }

  .home-how__step:first-child {
    padding-inline-start: 0;
  }

  .home-how__step:last-child {
    padding-inline-end: 0;
  }

  .home-how__copy {
    padding-block-start: 0.68rem;
  }

  .home-how__copy p {
    max-inline-size: none;
  }
}

.home-section.home-outlook {
  padding-block: var(--space-7) var(--space-5);
}

.home-outlook__intro {
  max-inline-size: 40rem;
  margin-block-end: var(--space-6);
}

.home-outlook__principles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.home-outlook__principle {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  padding-block: 1.15rem;
  border-block-end: 0.06rem solid rgb(30 31 35 / 10%);
  transition: border-color 170ms ease;
}

.home-outlook__principle:first-child {
  padding-block-start: 0;
}

.home-outlook__principle:last-child {
  padding-block-end: 0;
  border-block-end: none;
}

.home-outlook__index {
  padding-block-start: 0.1rem;
  color: var(--color-brand-primary);
  font-size: 0.775rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.045em;
  line-height: 1;
  transition: color 170ms ease;
}

.home-outlook__copy h3 {
  margin: 0 0 0.42rem;
  color: #1e1f23;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.24;
  transition: color 170ms ease;
}

.home-outlook__copy p {
  margin: 0;
  max-inline-size: 34rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

@media (hover: hover) {
  .home-outlook__principle:hover {
    border-block-end-color: rgb(30 31 35 / 18%);
  }

  .home-outlook__principle:last-child:hover {
    border-block-end-color: transparent;
  }

  .home-outlook__principle:hover .home-outlook__index,
  .home-outlook__principle:hover .home-outlook__copy h3 {
    color: #b84a3a;
  }
}

@media (min-width: 900px) {
  .home-outlook__principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }

  .home-outlook__principle:nth-child(1),
  .home-outlook__principle:nth-child(2) {
    padding-block-start: 0;
  }

  .home-outlook__principle:nth-child(3),
  .home-outlook__principle:nth-child(4) {
    padding-block-end: 0;
    border-block-end: none;
  }

  .home-outlook__principle:nth-child(3):hover,
  .home-outlook__principle:nth-child(4):hover {
    border-block-end-color: transparent;
  }
}

.home-closing__panel {
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border-radius: 1.35rem;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.home-closing__panel h2,
.home-closing__panel > p,
.home-closing__note,
.home-closing__pending {
  color: rgb(255 255 255 / 90%);
}

.home-closing__pending {
  margin: 1.15rem 0;
  padding: 0.95rem 1rem;
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 6%);
  border: 0.06rem solid rgb(255 255 255 / 10%);
}

.home-closing__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.15rem 0;
  padding: 0;
  list-style: none;
}

.home-closing__stores a {
  color: var(--color-text-inverse);
  font-weight: 700;
}

.home-closing .button--secondary {
  color: var(--color-text-inverse);
  background: transparent;
  border-color: rgb(255 255 255 / 28%);
  box-shadow: none;
}

.home-closing .button--secondary:hover {
  border-color: var(--color-text-inverse);
  color: var(--color-text-inverse);
  background: rgb(255 255 255 / 6%);
  box-shadow: none;
  transform: none;
}

.home-closing__note {
  margin-block-start: 1.3rem;
  font-size: 0.95rem;
  color: rgb(255 255 255 / 58%);
}

/* English About page */

.about-en {
  padding-block-end: 0;
}

.about-hero,
.about-section,
.about-closing {
  max-inline-size: var(--readable);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.about-hero {
  padding-block: clamp(2rem, 5vw, 3.5rem) var(--space-5);
}

.about-hero .eyebrow {
  margin-block-end: 0.85rem;
}

.about-hero h1 {
  margin: 0 0 var(--space-3);
  max-inline-size: 24ch;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.55rem + 1.8vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.about-hero__lede {
  margin: 0;
  max-inline-size: 38rem;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}

.about-hero__brand {
  margin-block-start: 1.25rem;
  color: var(--color-brand-strong);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.about-en > .about-hero + .about-section {
  padding-block-start: var(--space-6);
}

.about-section {
  padding-block: var(--space-7);
}

.about-en > .about-section + .about-section {
  padding-block-start: var(--space-5);
}

.about-en > .about-why + .about-model {
  padding-block-start: var(--space-6);
}

.about-en > .about-serves + .about-services {
  padding-block-start: var(--space-6);
  border-block-start: 0.06rem solid rgb(30 31 35 / 10%);
}

.about-en > .about-mission {
  padding-block-end: var(--space-6);
}

.about-section__intro {
  max-inline-size: 40rem;
  margin-block-end: var(--space-5);
}

.about-section__intro h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.about-section__intro > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.52;
}

.about-section__cue {
  margin-block-start: 1rem !important;
  color: var(--color-brand-strong);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.about-section__layout {
  display: grid;
  gap: var(--space-6);
}

.about-what__contrast,
.about-services__examples {
  display: grid;
  gap: var(--space-5);
}

.about-what__group h3,
.about-services__group h3 {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.about-what__group--not h3 {
  color: rgb(30 31 35 / 62%);
}

.about-what__group--positive h3 {
  color: var(--color-brand-strong);
}

.about-what__group ul,
.about-services__group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.about-what__group li,
.about-services__group li {
  position: relative;
  padding-inline-start: 1rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.about-what__group li::before,
.about-services__group li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55rem;
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 50%;
}

.about-what__group--not li::before {
  background: rgb(30 31 35 / 28%);
}

.about-what__group--positive li::before {
  background: var(--color-brand-primary);
}

.about-services__group li::before {
  background: var(--color-brand-primary);
}

.about-principles {
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-principle {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  padding-block: 1.15rem;
  border-block-end: 0.06rem solid rgb(30 31 35 / 10%);
}

.about-principle:first-child {
  padding-block-start: 0;
}

.about-principle:last-child {
  padding-block-end: 0;
  border-block-end: none;
}

.about-principle__index {
  padding-block-start: 0.1rem;
  color: var(--color-brand-primary);
  font-size: 0.775rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.045em;
  line-height: 1;
}

.about-principle__copy h3 {
  margin: 0 0 0.42rem;
  color: #1e1f23;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.24;
}

.about-principle__copy p {
  margin: 0;
  max-inline-size: 34rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.about-rail {
  --about-rail-index-size: 1.35rem;
  --about-rail-line-width: var(--process-line-width);
  position: relative;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.about-rail__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--about-rail-index-size) minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: start;
  padding-block: 0.7rem;
}

.about-rail__step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline-start: calc(
    var(--about-rail-index-size) / 2 - var(--about-rail-line-width) / 2
  );
  inset-block-start: calc(var(--about-rail-index-size) + 0.35rem);
  inset-block-end: calc(-0.7rem - 0.05rem);
  inline-size: var(--about-rail-line-width);
  background: var(--color-process-line);
}

.about-rail__index {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--about-rail-index-size);
  block-size: var(--about-rail-index-size);
  border-radius: 999px;
  background: var(--color-surface-primary);
  border: 0.07rem solid rgb(227 106 82 / 58%);
  color: var(--color-brand-primary);
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1;
}

.about-rail__label {
  padding-block-start: 0.12rem;
  color: #1e1f23;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.about-model__note {
  margin: 0;
  max-inline-size: 42rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.about-serves__grid {
  display: grid;
  gap: var(--space-5);
}

.about-serves__role {
  padding-block: 1.1rem;
  border-block-start: 0.06rem solid rgb(30 31 35 / 10%);
}

.about-serves__kicker {
  margin: 0 0 0.45rem;
  color: var(--color-brand-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.about-serves__role p:last-child {
  margin: 0;
  max-inline-size: 34rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.about-mission__statements {
  display: grid;
  gap: var(--space-5);
}

.about-mission__item {
  padding-block: 1.1rem;
  border-block-end: 0.06rem solid rgb(30 31 35 / 10%);
}

.about-mission__item:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.about-mission__item h3 {
  margin: 0 0 0.45rem;
  color: var(--color-brand-strong);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.about-mission__item p {
  margin: 0;
  max-inline-size: 40rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.about-mission__closing {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: 0.06rem solid rgb(30 31 35 / 10%);
}

.about-mission__promise-label {
  margin: 0 0 0.55rem;
  color: rgb(30 31 35 / 52%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

.about-mission__brand {
  margin: 0;
  max-inline-size: 36rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: #1e1f23;
}

.about-closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.75rem;
  row-gap: 0.85rem;
  /* Shared pre-footer rhythm: hairline divider, balanced padding before footer */
  margin-block: var(--space-5) 0;
  padding-block: var(--space-5);
  border-block-start: 0.06rem solid rgb(30 31 35 / 10%);
}

.about-closing__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-inline-size: 100%;
  color: var(--color-brand-strong);
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 170ms ease;
}

.about-closing__link--secondary {
  color: #1e1f23;
}

.about-closing__arrow {
  flex: 0 0 auto;
  color: currentColor;
  font-size: 0.88rem;
  line-height: 1;
  transition: color 170ms ease, transform 170ms ease;
}

.about-closing__link--secondary .about-closing__arrow {
  opacity: 0.42;
}

html[dir="rtl"] .about-closing__arrow {
  transform: scaleX(-1);
}

.about-closing__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (hover: hover) {
  .about-closing__link:hover {
    color: #b84a3a;
  }

  .about-closing__link:hover .about-closing__arrow {
    opacity: 1;
    transform: translateX(0.125rem);
  }

  .about-closing__link--secondary:hover {
    color: #b84a3a;
  }

  html[dir="rtl"] .about-closing__link:hover .about-closing__arrow {
    transform: scaleX(-1) translateX(-0.125rem);
  }
}

@media (max-width: 899px) {
  .about-closing {
    margin-block-start: var(--space-4);
    padding-block: 1.25rem 1.5rem;
    column-gap: 1.25rem;
    row-gap: 0.75rem;
  }
}

@media (min-width: 900px) {
  .about-section__layout--split {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .about-section__layout--split .about-section__intro {
    margin-block-end: 0;
  }

  .about-what__contrast,
  .about-services__examples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }

  .about-serves__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3rem);
  }

  .about-serves__role {
    padding-block: 0;
    border-block-start: none;
    padding-inline-end: clamp(0.5rem, 2vw, 1.5rem);
  }

  .about-serves__role + .about-serves__role {
    padding-inline-start: clamp(0.75rem, 2vw, 1.75rem);
    border-inline-start: 0.06rem solid rgb(30 31 35 / 10%);
  }

  .about-rail {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0;
    padding-block: 0.15rem;
  }

  .about-rail::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset-block-start: calc(
      0.15rem + var(--about-rail-index-size) / 2 - var(--about-rail-line-width) / 2
    );
    inset-inline-start: calc(var(--about-rail-index-size) / 2);
    inset-inline-end: calc(var(--about-rail-index-size) / 2);
    block-size: 0;
    border-block-start: var(--about-rail-line-width) solid
      var(--color-process-line);
    background: none;
    pointer-events: none;
  }

  .about-rail__step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-block: 0;
    padding-inline: 0.25rem;
  }

  .about-rail__step:not(:last-child)::after {
    content: none;
  }

  .about-rail__label {
    padding-block-start: 0;
    padding-inline-end: 0.35rem;
    font-size: 0.82rem;
    line-height: 1.28;
  }

  .about-mission__statements {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .about-mission__item {
    padding-block: 0;
    border-block-end: none;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .about-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-4);
  }

  .about-rail::before {
    content: none;
  }

  .about-rail__step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding-block: 0;
  }

  .about-rail__step:not(:last-child)::after {
    content: none;
  }
}

/* English How it works page */

.how-en {
  padding-block-end: 0;
}

.how-hero,
.how-section,
.how-roles,
.how-en > .about-closing {
  max-inline-size: var(--readable);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.how-hero {
  padding-block: clamp(2rem, 5vw, 3.25rem) var(--space-5);
}

.how-hero .eyebrow {
  margin-block-end: 0.85rem;
}

.how-hero h1 {
  margin: 0 0 var(--space-3);
  max-inline-size: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 1.5rem + 1.65vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.how-hero__lede {
  margin: 0;
  max-inline-size: 40rem;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}

.how-hero__cue {
  margin-block-start: 1.15rem;
  color: var(--color-brand-strong);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.how-en > .how-hero + .how-section {
  padding-block-start: var(--space-6);
}

.how-section,
.how-roles {
  padding-block: var(--space-7);
}

.how-en > .how-journey-section {
  padding-block-end: var(--space-6);
}

.how-en > .how-journey-section + .how-roles {
  padding-block-start: var(--space-5);
}

.how-en > .how-roles {
  padding-block-end: var(--space-6);
}

.how-en > .how-roles + .how-managed {
  padding-block-start: var(--space-6);
  border-block-start: 0.06rem solid rgb(30 31 35 / 10%);
}

.how-en > .how-managed {
  padding-block-end: var(--space-5);
}

.how-section__intro {
  max-inline-size: 40rem;
  margin-block-end: var(--space-5);
}

.how-section__intro h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.how-section__intro > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.52;
}

.how-journey {
  --how-journey-marker-size: 1.55rem;
  --how-journey-line-width: var(--process-line-width);
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.how-journey__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--how-journey-marker-size) minmax(0, 1fr);
  column-gap: 0.85rem;
  align-items: start;
  padding-block: 0.85rem;
  min-inline-size: 0;
  list-style: none;
}

.how-journey__step::marker {
  content: none;
}

@media (max-width: 639px) {
  .how-journey__step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    inset-inline-start: calc(
      var(--how-journey-marker-size) / 2 - var(--how-journey-line-width) / 2
    );
    inset-block-start: calc(
      var(--how-journey-marker-size) - var(--process-line-overlap)
    );
    inset-block-end: calc(-0.85rem - var(--process-line-overlap));
    inline-size: var(--how-journey-line-width);
    background: var(--color-process-line);
  }
}

.how-journey__index {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--how-journey-marker-size);
  block-size: var(--how-journey-marker-size);
  border-radius: 999px;
  background: var(--color-surface-primary);
  border: 0.07rem solid rgb(227 106 82 / 58%);
  color: var(--color-brand-primary);
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  line-height: 1;
}

.how-journey__copy h3 {
  margin: 0 0 0.4rem;
  color: #1e1f23;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.24;
}

.how-journey__copy p {
  margin: 0;
  max-inline-size: 34rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.how-phases {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.how-phase {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  padding-block: 1.05rem;
  border-block-end: 0.06rem solid rgb(30 31 35 / 10%);
}

.how-phase:first-child {
  padding-block-start: 0;
}

.how-phase:last-child {
  padding-block-end: 0;
  border-block-end: none;
}

.how-phase__index {
  padding-block-start: 0.1rem;
  color: var(--color-brand-primary);
  font-size: 0.775rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.045em;
  line-height: 1;
}

.how-phase__copy h3 {
  margin: 0 0 0.4rem;
  color: #1e1f23;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.24;
}

.how-phase__copy p {
  margin: 0;
  max-inline-size: 34rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.how-roles {
  display: grid;
  gap: 0;
}

.how-role-section {
  min-inline-size: 0;
}

.how-role-section--provider {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 0.06rem solid rgb(30 31 35 / 10%);
}

.how-managed__principles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.how-managed__principle {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  padding-block: 1.1rem;
  border-block-end: 0.06rem solid rgb(30 31 35 / 10%);
}

.how-managed__principle:first-child {
  padding-block-start: 0;
}

.how-managed__principle:last-child {
  padding-block-end: 0;
  border-block-end: none;
}

.how-managed__index {
  padding-block-start: 0.1rem;
  color: var(--color-brand-primary);
  font-size: 0.775rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.045em;
  line-height: 1;
}

.how-managed__copy h3 {
  margin: 0 0 0.42rem;
  color: #1e1f23;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.24;
}

.how-managed__copy p {
  margin: 0;
  max-inline-size: 36rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

@media (min-width: 640px) and (max-width: 899px) {
  .how-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
    row-gap: var(--space-5);
  }

  .how-journey__step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding-block: 0;
  }

  /* One continuous hairline per pair from the row-start step only */
  .how-journey__step:nth-child(1)::after,
  .how-journey__step:nth-child(3)::after,
  .how-journey__step:nth-child(5)::after,
  .how-journey__step:nth-child(7)::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    inset-block-start: calc(
      var(--how-journey-marker-size) / 2 - var(--how-journey-line-width) / 2
    );
    inset-inline-start: calc(var(--how-journey-marker-size) / 2);
    /* Marker-center to next marker-center only — no tail past the pair end */
    inline-size: calc(100% + var(--space-5));
    block-size: 0;
    border-block-start: var(--how-journey-line-width) solid
      var(--color-process-line);
    background: none;
  }
}

@media (min-width: 900px) {
  .how-journey {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    row-gap: var(--space-6);
    padding-block: 0;
  }

  /*
   * Both row connectors are identical grid items on the list itself.
   * Drawing from the container (not from step 01 vs step 05) keeps
   * thickness/color rendering consistent across rows.
   */
  .how-journey::before,
  .how-journey::after {
    content: "";
    grid-column: 1 / -1;
    z-index: 0;
    pointer-events: none;
    align-self: start;
    justify-self: stretch;
    block-size: 0;
    margin-block-start: calc(
      var(--how-journey-marker-size) / 2 - var(--how-journey-line-width) / 2
    );
    /* Start/end at first and last marker centers — no tail past 04 / 08 */
    margin-inline-start: calc(var(--how-journey-marker-size) / 2);
    margin-inline-end: calc(
      (100% - 3 * var(--space-4)) / 4 - var(--how-journey-marker-size) / 2
    );
    border-block-start: var(--how-journey-line-width) solid
      var(--color-process-line);
    background: none;
  }

  .how-journey::before {
    grid-row: 1;
  }

  .how-journey::after {
    grid-row: 2;
  }

  .how-journey__step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
    padding-block: 0;
  }

  .how-journey__step:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .how-journey__step:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .how-journey__step:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  .how-journey__step:nth-child(4) {
    grid-column: 4;
    grid-row: 1;
  }

  .how-journey__step:nth-child(5) {
    grid-column: 1;
    grid-row: 2;
  }

  .how-journey__step:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
  }

  .how-journey__step:nth-child(7) {
    grid-column: 3;
    grid-row: 2;
  }

  .how-journey__step:nth-child(8) {
    grid-column: 4;
    grid-row: 2;
  }

  .how-journey__copy p {
    max-inline-size: none;
    padding-inline-end: 0.2rem;
  }

  .how-roles {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Slightly wider gutter — whitespace separates columns (no vertical divider) */
    column-gap: clamp(2.25rem, 4.5vw, 3.5rem);
    align-items: start;
  }

  .how-role-section--customer {
    padding-inline-end: 0;
  }

  .how-role-section--provider {
    margin-block-start: 0;
    padding-block-start: 0;
    padding-inline-start: 0;
    border-block-start: none;
    border-inline-start: none;
  }

  .how-role-section .how-section__intro {
    max-inline-size: none;
    margin-block-end: var(--space-4);
  }

  .how-phase__copy p {
    max-inline-size: none;
  }

  .how-managed__principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3rem);
    row-gap: 0;
  }

  .how-managed__principle:nth-child(odd):nth-last-child(2),
  .how-managed__principle:nth-child(even):last-child {
    border-block-end: none;
  }
}

@media (max-width: 899px) {
  .how-hero h1 {
    max-inline-size: 18ch;
  }

  .about-hero h1 {
    max-inline-size: 20ch;
  }
}

/* English Support page */

.support-en {
  padding-block-end: 0;
}

.support-hero,
.support-topics,
.support-section,
.support-en > .support-contact,
.support-en > .about-closing {
  max-inline-size: var(--readable);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.support-hero {
  padding-block: clamp(2rem, 5vw, 3.25rem) var(--space-5);
}

.support-hero .eyebrow {
  margin-block-end: 0.85rem;
}

.support-hero h1 {
  margin: 0 0 var(--space-3);
  max-inline-size: 18ch;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 1.5rem + 1.65vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.support-hero__lede {
  margin: 0;
  max-inline-size: 40rem;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}

.support-hero__cue {
  margin-block-start: 1.15rem;
  color: var(--color-brand-strong);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

.support-topics {
  padding-block: var(--space-5) var(--space-6);
  border-block-end: 0.06rem solid rgb(30 31 35 / 10%);
}

.support-topics h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.support-topics__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.support-topics__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-block: 0.55rem;
  color: #1e1f23;
  font-size: 0.98rem;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: color 170ms ease;
}

.support-topics__arrow {
  color: rgb(30 31 35 / 42%);
  font-size: 0.88rem;
  line-height: 1;
  transition:
    color 170ms ease,
    transform 170ms ease;
}

html[dir="rtl"] .support-topics__arrow {
  transform: scaleX(-1);
}

.support-topics__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (hover: hover) {
  .support-topics__link:hover {
    color: #b84a3a;
  }

  .support-topics__link:hover .support-topics__arrow {
    color: #b84a3a;
    transform: translateX(0.125rem);
  }

  html[dir="rtl"] .support-topics__link:hover .support-topics__arrow {
    transform: scaleX(-1) translateX(-0.125rem);
  }
}

.support-section {
  padding-block: var(--space-7);
  scroll-margin-block-start: calc(
    var(--scroll-padding-block-start) + var(--space-3)
  );
}

.support-en > .support-section + .support-section {
  padding-block-start: var(--space-5);
  border-block-start: 0.06rem solid rgb(30 31 35 / 10%);
}

.support-en > .support-deletion {
  padding-block: var(--space-5) var(--space-4);
}

.support-en > .support-contact {
  padding-block-end: var(--space-5);
}

.support-section__intro {
  max-inline-size: 40rem;
  margin-block-end: var(--space-5);
}

.support-section__intro h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.support-section__intro > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.52;
}

.support-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.support-point {
  padding-block: 1.05rem;
  border-block-end: 0.06rem solid rgb(30 31 35 / 10%);
}

.support-point:first-child {
  padding-block-start: 0;
}

.support-point:last-child {
  padding-block-end: 0;
  border-block-end: none;
}

.support-point h3 {
  margin: 0 0 0.4rem;
  color: #1e1f23;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.24;
}

.support-point p {
  margin: 0;
  max-inline-size: 38rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.support-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.support-step {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  padding-block: 1.1rem;
  border-block-end: 0.06rem solid rgb(30 31 35 / 10%);
}

.support-step:first-child {
  padding-block-start: 0;
}

.support-step:last-child {
  padding-block-end: 0;
  border-block-end: none;
}

.support-step__index {
  padding-block-start: 0.1rem;
  color: var(--color-brand-primary);
  font-size: 0.775rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.045em;
  line-height: 1;
}

.support-step__copy h3 {
  margin: 0 0 0.4rem;
  color: #1e1f23;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.24;
}

.support-step__copy p {
  margin: 0;
  max-inline-size: 36rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.deletion-en > .support-hero + .support-section {
  margin-block-start: clamp(2.25rem, 4.5vw, 3.25rem);
}

.deletion-en > .about-closing {
  /* Slightly tighter transition after cancellation; keep hairline + calm breathing room */
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
}

.deletion-en #what-deletion-means .support-section__intro {
  margin-block-end: 0;
}

.deletion-en #what-deletion-means .support-section__intro > p + p {
  margin-block-start: 0.85rem;
}

.deletion-acknowledge {
  margin-block-start: 0.25rem;
}

.deletion-acknowledge__label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.65rem;
  align-items: start;
  margin: 0;
  color: #1e1f23;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.55;
  cursor: pointer;
}

.deletion-acknowledge__label input[type='checkbox'] {
  /* Align with first text line; keep a usable hit area via padding */
  box-sizing: border-box;
  margin: 0.2rem 0 0;
  padding: 0;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex-shrink: 0;
  accent-color: var(--color-brand-primary);
}

html[dir='rtl'] .deletion-acknowledge__label {
  column-gap: 0.65rem;
}

/* Invalid state is communicated by aria-invalid + the message below — no red ring. */
.deletion-acknowledge__label input[type='checkbox'][aria-invalid='true'] {
  outline: none;
  box-shadow: none;
}

.deletion-acknowledge__label input[type='checkbox']:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.12rem var(--color-focus-amber, #c47a16);
}

.deletion-request .support-contact__hint {
  margin-block-start: 0.45rem;
}

.support-security {
  margin: var(--space-5) 0 0;
  max-inline-size: 40rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
}

.support-deletion__copy {
  max-inline-size: 36rem;
}

.support-deletion__copy h2 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.support-deletion__copy > p {
  margin: 0 0 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.48;
}

.support-deletion__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--color-text-primary);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 170ms ease;
}

.support-deletion__arrow {
  color: currentColor;
  font-size: 0.88rem;
  line-height: 1;
  transition: transform 170ms ease;
}

html[dir="rtl"] .support-deletion__arrow {
  transform: scaleX(-1);
}

.support-deletion__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

@media (hover: hover) {
  .support-deletion__link:hover {
    color: #b84a3a;
  }

  .support-deletion__link:hover .support-deletion__arrow {
    transform: translateX(0.125rem);
  }

  html[dir="rtl"] .support-deletion__link:hover .support-deletion__arrow {
    transform: scaleX(-1) translateX(-0.125rem);
  }
}

.support-contact__layout {
  display: grid;
  gap: var(--space-5);
}

.support-contact__aside {
  min-inline-size: 0;
  max-inline-size: 28rem;
}

.support-contact__intro {
  margin-block-end: var(--space-4);
}

.support-contact__security,
.support-contact__privacy {
  margin: 0 0 var(--space-3);
  max-inline-size: 28rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.support-contact__security {
  color: var(--color-brand-strong);
  font-weight: 600;
}

.support-contact__privacy {
  color: var(--color-text-muted);
  margin-block-end: 0;
}

.support-contact__privacy a {
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.06rem;
  text-underline-offset: 0.14rem;
}

.support-contact__privacy a:hover {
  color: var(--color-brand-strong);
}

.support-contact__privacy a:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.support-contact__form {
  display: grid;
  gap: 0.7rem;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: none;
  box-sizing: border-box;
  /* One calm form surface — do not clip Topic overlay */
  overflow: visible;
  padding: 1.55rem; /* ~25px */
  border: 0.06rem solid var(--color-border-subtle);
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 0.4rem 1.15rem rgb(30 31 35 / 3.5%);
}

/* Site-wide form required convention */
.form-required-note {
  margin: 0 0 0.15rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
}

.form-required-note .required-indicator {
  /* Same Coral mark as labels; no extra label-style lead spacing mid-sentence */
  margin-inline: 0.05em;
}

.required-indicator {
  margin-inline-start: 0.28em;
  color: var(--color-brand-primary);
  font-weight: 650;
  font-size: 0.95em;
  line-height: 1;
}

.deletion-acknowledge__text .required-indicator {
  /* Keep the star with the final line of multi-line acknowledgement copy */
  white-space: nowrap;
}

.support-contact__row {
  display: grid;
  gap: 0.7rem;
  min-inline-size: 0;
}

.support-contact__honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.support-contact__field {
  display: grid;
  gap: 0.3rem;
  min-inline-size: 0;
}

.support-contact__field label,
.support-contact__label {
  color: #1e1f23;
  font-size: 0.9rem;
  font-weight: 650;
}

.support-contact__field input:not([type='checkbox']):not([type='radio']),
.support-contact__field textarea,
.etzam-select__trigger {
  box-sizing: border-box;
  inline-size: 100%;
  margin: 0;
  min-block-size: 2.75rem;
  padding: 0.7rem 0.85rem;
  border: 0.06rem solid rgb(30 31 35 / 16%);
  border-radius: 0.45rem;
  background: #ffffff;
  color: #1e1f23;
  font: inherit;
  line-height: 1.4;
}

/* Native fields + Topic trigger: stable ~2px border so active color change has no layout shift */
.support-contact__field input:not([type='checkbox']):not([type='radio']),
.support-contact__field textarea,
.etzam-select__trigger {
  border-width: var(--focus-ring-width);
  border-color: rgb(30 31 35 / 14%);
}

.support-contact__field input::placeholder,
.support-contact__field textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
  font-style: normal;
}

.support-contact__field textarea {
  /* Controlled vertical resize — not viewport-tied */
  resize: vertical;
  block-size: 10.5rem; /* ~168px */
  min-block-size: 8.75rem; /* 140px */
  max-block-size: 21.25rem; /* 340px */
  overflow-x: clip;
  overflow-y: auto;
  /* Allow native scroll chaining to the page (no scroll trap when empty/at edges). */
  overscroll-behavior: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.support-contact__field textarea::-webkit-scrollbar {
  inline-size: var(--scrollbar-size-internal);
}

.support-contact__field textarea::-webkit-scrollbar-track {
  background: transparent;
}

.support-contact__field textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  border: 0.08rem solid transparent;
  background-clip: content-box;
}

@media (hover: hover) {
  .support-contact__field textarea::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: content-box;
  }
}

.support-contact__field textarea::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
}

.support-contact__message-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-block-start: 0.35rem;
}

.support-contact__hint {
  flex: 1 1 auto;
  margin: 0;
  min-inline-size: 0;
  color: var(--color-text-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.support-contact__count {
  flex: 0 0 auto;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  white-space: nowrap;
  opacity: 0.9;
}

.support-contact__count.is-warn {
  color: #3a3c43;
  opacity: 1;
}

.support-contact__count.is-critical {
  color: var(--color-brand-primary);
  opacity: 1;
}

.support-contact__count.is-invalid {
  color: var(--color-error);
  opacity: 1;
}

@media (max-width: 899px) {
  .support-contact__field textarea {
    block-size: 10rem; /* ~160px */
    min-block-size: 8.75rem; /* 140px */
    max-block-size: 18.75rem; /* 300px */
  }

  .support-contact__message-meta {
    flex-wrap: wrap;
  }
}

/* Form fields: ONE Amber frame via border only — no second outer outline */
.support-contact__field input:not([type='checkbox']):not([type='radio']):focus,
.support-contact__field input:not([type='checkbox']):not([type='radio']):focus-visible,
.support-contact__field textarea:focus,
.support-contact__field textarea:focus-visible {
  border-color: var(--color-focus-ring);
  outline: none;
  box-shadow: none;
}

/* Topic trigger: single Amber border when open or keyboard-focused (match Name/Email/Message) */
.etzam-select__trigger:focus-visible {
  border-color: var(--color-focus-ring);
  outline: none;
  box-shadow: none;
}

.etzam-select__trigger[aria-expanded='true'] {
  border-color: var(--color-focus-ring);
  outline: none;
  box-shadow: none;
}

.support-contact__submit:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.support-contact__submit:disabled:focus-visible {
  outline: none;
}

.support-contact__field input:not([type='checkbox']):not([type='radio'])[aria-invalid='true'],
.support-contact__field textarea[aria-invalid='true'],
.etzam-select__trigger[aria-invalid='true'] {
  border-color: var(--color-error-border);
}

/*
  Invalid + focused field: keep error-red border;
  soft Amber halo (not a second hard ring) for accessible focus.
*/
.support-contact__field
  input:not([type='checkbox']):not([type='radio'])[aria-invalid='true']:focus,
.support-contact__field
  input:not([type='checkbox']):not([type='radio'])[aria-invalid='true']:focus-visible,
.support-contact__field textarea[aria-invalid='true']:focus,
.support-contact__field textarea[aria-invalid='true']:focus-visible {
  border-color: var(--color-error-border);
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) rgb(229 154 50 / 30%);
}

.etzam-select__trigger[aria-invalid='true']:focus-visible,
.etzam-select__trigger[aria-invalid='true'][aria-expanded='true'] {
  border-color: var(--color-error-border);
  outline: none;
  box-shadow: 0 0 0 var(--focus-ring-width) rgb(229 154 50 / 30%);
}

.support-contact__error {
  margin: 0;
  color: var(--color-error);
  font-size: 0.84rem;
  line-height: 1.4;
}

.support-contact__error[hidden] {
  display: none;
}

@keyframes etzam-validation-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.18rem);
  }
  50% {
    transform: translateX(0.18rem);
  }
  75% {
    transform: translateX(-0.1rem);
  }
}

.is-validation-shake {
  animation: etzam-validation-shake 280ms ease-in-out;
}

.etzam-select {
  position: relative;
}

.etzam-select__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: start;
  cursor: pointer;
}

.etzam-select__value {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-weight: 500;
}

.etzam-select__value.is-selected {
  color: #1e1f23;
  font-weight: 600;
}

.etzam-select__chevron {
  flex: 0 0 auto;
  inline-size: 0.36rem;
  block-size: 0.36rem;
  border-inline-end: 0.1rem solid currentColor;
  border-block-end: 0.1rem solid currentColor;
  color: var(--color-text-primary);
  opacity: 0.75;
  transform: rotate(45deg) translateY(-0.08rem);
  transition: transform 160ms ease;
}

.etzam-select.is-open .etzam-select__chevron {
  transform: rotate(225deg) translateY(-0.02rem);
}

.etzam-select__list {
  --etzam-select-option-block: 2rem;
  --etzam-select-visible-rows: 4.75;
  --etzam-select-chrome: 0.62rem; /* list padding 0.5rem + borders 0.12rem */
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 0.28rem);
  inset-block-end: auto;
  z-index: 30;
  box-sizing: border-box;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  inline-size: 100%;
  max-inline-size: 100%;
  /*
    Deliberately compact: ~4.5–5 visible rows; remaining Topics via scroll.
    Include padding+border chrome so border-box does not create false overflow
    beyond the designed compact viewport.
    45vh is a safety floor for short viewports only — not the normal height.
  */
  max-block-size: min(
    calc(
      var(--etzam-select-option-block) * var(--etzam-select-visible-rows) +
        var(--etzam-select-chrome)
    ),
    45vh
  );
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  border: 0.06rem solid var(--color-border-subtle);
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 0.5rem 1.15rem rgb(30 31 35 / 10%);
}

/* Match document scrollbar language; slightly narrower for the popover surface */
.etzam-select__list::-webkit-scrollbar {
  inline-size: var(--scrollbar-size-internal);
}

.etzam-select__list::-webkit-scrollbar-track {
  background: transparent;
}

.etzam-select__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  border: 0.08rem solid transparent;
  background-clip: content-box;
}

@media (hover: hover) {
  .etzam-select__list::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: content-box;
  }
}

.etzam-select__list::-webkit-scrollbar-thumb:active {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
}

.etzam-select__list.is-above {
  inset-block-start: auto;
  inset-block-end: calc(100% + 0.28rem);
}

.etzam-select__list[hidden] {
  display: none;
}

.etzam-select__option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  margin: 0;
  min-block-size: var(--etzam-select-option-block);
  padding: 0.35rem 0.7rem;
  border-radius: 0.35rem;
  color: #1e1f23;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}

.etzam-select__option-label {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* Decorative selected marker — aria-selected remains the programmatic cue */
.etzam-select__option-check {
  flex: 0 0 auto;
  inline-size: 0.52rem;
  block-size: 0.3rem;
  margin-block-start: -0.12rem;
  border-inline-start: 0.11rem solid transparent;
  border-block-end: 0.11rem solid transparent;
  transform: rotate(-45deg);
  opacity: 0;
}

.etzam-select__option.is-active {
  background: var(--color-surface-subtle);
}

@media (hover: hover) and (pointer: fine) {
  .etzam-select__option:hover {
    background: var(--color-surface-subtle);
  }
}

.etzam-select__option.is-selected {
  background: rgb(232 90 79 / 3.5%);
  color: #1e1f23;
  font-weight: 650;
}

.etzam-select__option.is-selected .etzam-select__option-check {
  border-color: var(--color-brand-primary);
  opacity: 1;
}

/* Selected + temporary active: neutral gray wins; Coral check remains */
.etzam-select__option.is-selected.is-active {
  background: var(--color-surface-subtle);
}

@media (hover: hover) and (pointer: fine) {
  .etzam-select__option.is-selected:hover {
    background: var(--color-surface-subtle);
  }
}

.etzam-select__option:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-inset-offset);
}

@media (max-width: 899px) {
  .etzam-select__list {
    --etzam-select-option-block: 2.45rem;
    --etzam-select-visible-rows: 4.25;
    max-block-size: min(
      calc(
        var(--etzam-select-option-block) * var(--etzam-select-visible-rows) +
          var(--etzam-select-chrome)
      ),
      50vh
    );
  }

  .etzam-select__option {
    padding-block: 0.55rem;
    font-size: 0.95rem;
  }
}

/*
  Shared Security verification rhythm (Contact + Account Deletion).
  Targets: prior block → ~28–32px → label → ~10–14px → widget → ~24–32px → submit.
*/
.support-contact__turnstile {
  display: grid;
  gap: 0.7rem; /* ~11px label → widget */
  margin-block-start: var(--space-4); /* + form gap ≈ 28px from prior field */
}

.support-contact__turnstile .cf-turnstile,
.support-contact__turnstile iframe {
  max-inline-size: 100%;
}

.support-contact__unavailable {
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 0.06rem dashed rgb(30 31 35 / 18%);
  border-radius: 0.45rem;
  background: rgb(30 31 35 / 2.5%);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.support-contact__status {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Collapse reserved empty status space that visually isolated the submit CTA. */
.support-contact__status:not([data-state]) {
  display: none;
  min-block-size: 0;
}

.support-contact__status[data-state='success'],
.support-contact__status[data-state='error'] {
  display: block;
  min-block-size: 1.25rem;
}

.support-contact__status[data-state='success'] {
  color: #1e1f23;
  font-weight: 600;
}

.support-contact__status[data-state='error'] {
  color: var(--color-error);
  font-weight: 600;
}

.support-contact__actions {
  display: grid;
  gap: 0.65rem;
  margin-block-start: var(--space-4);
}

.support-contact__form[data-form-state='success'] .form-required-note,
.support-contact__form[data-form-state='success'] .support-contact__row,
.support-contact__form[data-form-state='success'] .support-contact__field,
.support-contact__form[data-form-state='success'] .support-contact__turnstile,
.support-contact__form[data-form-state='success'] .support-contact__actions {
  display: none;
}

.form-success[hidden] {
  display: none;
}

.form-success__panel {
  box-sizing: border-box;
  margin: 0;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 0.06rem solid rgb(46 125 84 / 28%);
  border-radius: 0.65rem;
  background: rgb(46 125 84 / 5.5%);
  color: var(--color-text-primary);
  outline: none;
}

.form-success__panel:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.form-success__heading {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  color: #1e1f23;
  text-align: start;
}

.form-success__icon {
  flex: 0 0 auto;
  display: inline-flex;
  margin-block-start: 0.08rem;
  color: #2e7d54;
}

.form-success__body {
  margin: 0.55rem 0 0;
  max-inline-size: 36rem;
  color: #3a3c43;
  font-size: 0.95rem;
  font-weight: 450;
  line-height: 1.55;
  text-align: start;
}

.form-success__reset {
  margin-block-start: 1rem;
}

.form-success__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.15rem;
  margin: 1rem 0 0;
  text-align: start;
}

.form-success__links a {
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.support-contact__submit {
  justify-self: start;
  min-block-size: 2.75rem;
  /* Form gap (~0.7rem) + this ≈ 24–28px from Turnstile to submit. */
  margin-block-start: var(--space-4);
}

.support-contact__actions .support-contact__submit {
  margin-block-start: 0;
}

.support-contact__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (min-width: 900px) {
  .support-topics__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .support-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 4vw, 3rem);
  }

  .support-point {
    padding-block: 1.15rem;
  }

  .support-point:nth-child(odd):nth-last-child(2),
  .support-point:nth-child(even):last-child {
    border-block-end: none;
  }

  .support-contact__layout {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    column-gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
  }

  .support-contact__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
  }
}

@media (max-width: 899px) {
  .support-hero h1 {
    max-inline-size: 14ch;
  }

  .support-contact__form {
    padding: 1.3rem; /* ~21px */
  }
}

@media (min-width: 920px) {
  .home-hero {
    grid-template-columns: minmax(0, 1.14fr) minmax(16rem, 0.86fr);
    gap: clamp(1.65rem, 3vw, 2.65rem);
    align-items: start;
  }

  .home-locale__hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(19rem, 0.88fr);
    gap: var(--space-7);
  }

  .home-hero__visual {
    justify-self: start;
    max-inline-size: 19.5rem;
    padding-block-start: 0.55rem;
    padding-inline-start: 0;
  }

  .home-paths__grid,
  .home-locale__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Neutral root + infrastructure */

.language-root {
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6) clamp(1rem, 3vw, 2rem);
  background: var(--color-surface-primary);
}

.language-root-fallback {
  width: min(24rem, 100%);
  text-align: center;
}

.language-root-fallback__status {
  margin: 0;
  font-weight: 600;
  color: var(--color-text-primary);
}

.language-root-fallback__noscript {
  margin: 0.75rem 0 0;
}

.language-root-fallback__noscript a {
  font-weight: 650;
  text-decoration: none;
}

.language-root-fallback__noscript a:hover {
  color: var(--color-brand-strong);
}

.language-selector {
  width: min(36rem, 100%);
  padding: clamp(1.6rem, 4vw, 2.5rem);
  border-radius: 1.35rem;
  background: var(--color-surface-elevated);
  border: 0.06rem solid var(--color-border-subtle);
  box-shadow: var(--shadow-soft);
}

.language-selector .wordmark {
  margin: 0 0 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.language-selector h1 {
  margin: 0 0 0.75rem;
  font-size: var(--step-3);
}

.multilingual-intro {
  color: var(--color-text-muted);
}

.language-selector ul {
  display: grid;
  gap: 0.55rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.language-selector a {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 0.06rem solid var(--color-border-subtle);
  text-decoration: none;
  font-weight: 650;
}

.language-selector a:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-strong);
  background: rgb(217 87 67 / 5%);
}

.callback-page,
.page-shell.callback-page {
  max-inline-size: 40rem;
}

@media (max-width: 899px) {
  .home-hero__copy h1 {
    max-inline-size: 16ch;
    font-size: clamp(2rem, 8vw, 2.65rem);
  }

  .home-locale__hero-copy h1 {
    max-inline-size: 15ch;
    font-size: clamp(2rem, 8vw, 2.65rem);
  }

  .home-locale__hero-panel {
    min-block-size: 17rem;
  }

  .home-hero__visual {
    margin-block-start: 0.65rem;
    max-inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .is-validation-shake {
    animation: none !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .home-hero__visual,
  .home-locale__hero-panel,
  .language-switcher,
  .site-header__mobile {
    display: none !important;
  }

  body,
  .site-body {
    background: white;
    color: black;
  }

  a {
    text-decoration: underline;
  }
}