/* VerbaPulse Enterprise — standalone visual world.
   Inherits nothing from the main site or the EU AI Act microsite except the logo.
   Display face is swappable through --e-font-display. */

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

:root {
  /* type */
  --e-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --e-font-text: 'Inter', system-ui, -apple-system, sans-serif;

  /* surface */
  --e-paper:      #f1f0ec;
  --e-paper-warm: #f0efeb;
  --e-black:      #0a0a0b;
  --e-white:      #ffffff;

  /* ink */
  --e-ink:        #0d0c0a;
  --e-ink-body:   #33322f;
  --e-ink-soft:   #a6a39e;
  --e-ink-label:  #6d6b66;
  --e-on-dark:        #ffffff;
  --e-on-dark-body:   #d6d5d2;
  --e-on-dark-label:  #9c9a96;

  /* line */
  --e-line:       #d9d7d2;
  --e-line-soft:  #e3e1dc;
  --e-line-dark:  rgba(255,255,255,.22);

  /* metric */
  --e-gutter: clamp(20px, 5.7vw, 96px);
  --e-max:    100%;   /* sections run edge to edge, as the mockup does */
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--e-font-text);
  background: var(--e-paper);
  color: var(--e-ink-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.e-shell { max-width: var(--e-max); margin: 0 auto; }

/* ── shared atoms ─────────────────────────────────────────── */

.e-label {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--e-ink-label);
}
.e-label--light { color: var(--e-on-dark-label); }

.e-rule { display: block; width: 34px; height: 1px; background: currentColor; opacity: .55; }

.e-serif {
  font-family: var(--e-font-display);
  font-weight: 500;
  color: var(--e-ink);
  letter-spacing: -.005em;
}

.e-pill {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--e-font-text);
  font-size: 15px; font-weight: 500; letter-spacing: -.005em;
  padding: 17px 34px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--e-black); color: var(--e-white);
  transition: background .18s ease, transform .18s ease;
  cursor: pointer;
}
.e-pill:hover { background: #22221f; }
.e-pill:hover .e-arrow { transform: translateX(4px); }
.e-pill--light { background: var(--e-white); color: var(--e-ink); }
.e-pill--light:hover { background: #ebeae6; }
.e-arrow { transition: transform .18s ease; font-size: 15px; line-height: 1; }

/* ── nav (overlays the hero) ──────────────────────────────── */

.e-nav {
  /* A normal header, not a bar floating over the hero: the hero is split paper and
     photograph, and a menu laid over that split is unreadable on one half whichever
     colour it takes. The site menu sits beside the logo here as it does everywhere. */
  position: relative; z-index: 10;
  background: var(--e-paper); border-bottom: 1px solid var(--e-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 18px var(--e-gutter);
  max-width: var(--e-max); margin: 0 auto;
}
.e-nav__left  { display: flex; align-items: center; gap: 22px; color: var(--e-ink); flex: none; }
.e-nav__right { display: flex; align-items: center; gap: 22px; color: var(--e-ink); }
.e-nav__logo  { height: 26px; width: auto; flex: none; }
.e-nav__div   { width: 1px; height: 22px; background: currentColor; opacity: .28; }
.e-nav__word  { font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.e-nav__link  { font-size: 14px; font-weight: 400; opacity: .92; white-space: nowrap; }
.e-nav__link:hover { opacity: 1; }
.e-nav .e-pill { padding: 13px 26px; font-size: 14px; gap: 11px; }

/* ── the site menu, in this world's type, beside the logo ── */
.e-menu {
  display: flex; align-items: center; gap: 24px;
  color: var(--e-ink); margin-inline-start: 34px;
}
.e-menu > a, .e-menu__top {
  font-size: 13px; font-weight: 500; letter-spacing: .02em; color: inherit; text-decoration: none;
  opacity: .72; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.e-menu > a:hover, .e-menu__dd:hover .e-menu__top { opacity: 1; }
.e-menu > a[aria-current] { opacity: 1; font-weight: 600; }
.e-menu__spacer { margin-inline-start: auto; }
.e-menu__dd { position: relative; display: inline-flex; }
.e-menu__caret { font-size: 9px; opacity: .8; }
.e-menu__panel {
  position: absolute; top: 100%; inset-inline-start: -18px; min-width: 216px; padding: 10px 0;
  background: var(--e-paper); border: 1px solid var(--e-line);
  box-shadow: 0 18px 44px rgba(13,12,10,.16); z-index: 20;
  display: none; flex-direction: column;
}
.e-menu__dd:hover .e-menu__panel, .e-menu__dd:focus-within .e-menu__panel { display: flex; }
.e-menu__panel a {
  padding: 8px 18px; font-size: 14px; color: var(--e-ink-body); text-decoration: none; opacity: 1;
}
.e-menu__panel a:hover { background: var(--e-paper-warm); color: var(--e-ink); }

/* ── language picker ─────────────────────────────────────── */

.e-lang { position: relative; display: inline-flex; }
.e-lang__btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--e-font-text);
  font-size: 12.5px; font-weight: 500; letter-spacing: .12em;
  color: inherit; background: none; border: 0; padding: 4px 2px;
  cursor: pointer;
}
.e-lang__btn svg { width: 9px; height: 9px; transition: transform .18s ease; }
.e-lang__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.e-lang__menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  z-index: 20; min-width: 168px;
  display: flex; flex-direction: column;
  background: var(--e-paper);
  border: 1px solid var(--e-line);
  box-shadow: 0 14px 44px rgba(10,10,10,.18);
  padding: 6px 0;
}
/* an author `display` beats the UA rule for [hidden], so restate it */
.e-lang__menu[hidden] { display: none; }
.e-lang__menu a {
  font-size: 14px; line-height: 1.2; color: var(--e-ink);
  padding: 11px 20px; white-space: nowrap;
}
.e-lang__menu a:hover { background: #e7e5e1; }
.e-lang__menu a.is-current { font-weight: 500; }
.e-lang__menu a.is-current::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 14px; height: 1px; background: var(--e-ink); margin-right: 10px;
}
.e-lang__menu a:not(.is-current) { padding-left: 44px; }

/* ── hero ─────────────────────────────────────────────────── */

.e-hero { position: relative; background: var(--e-paper); overflow: hidden; }
.e-hero__grid {
  max-width: var(--e-max); margin: 0 auto;
  display: grid; grid-template-columns: 47.8% 52.2%;
  min-height: clamp(690px, 47.9vw, 900px);
}
.e-hero__copy {
  padding-block: 160px 0;
  padding-inline: var(--e-gutter) 3.6vw;
  display: flex; flex-direction: column; justify-content: center;
}
.e-hero__eyebrow { margin-bottom: 26px; }
.e-hero h1 {
  font-family: var(--e-font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.24vw, 64px);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--e-ink);
  margin-bottom: 30px;
}
.e-hero h1 .e-dim { color: var(--e-ink-soft); }
.e-hero__sub {
  font-size: 16px; line-height: 1.75; color: var(--e-ink-body);
  max-width: 34em; margin-bottom: 40px;
}
.e-hero__actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.e-hero__note {
  display: flex; align-items: center; gap: 30px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .17em;
  text-transform: uppercase; color: var(--e-ink-label); line-height: 1.75;
}
.e-hero__note::before { content: ""; width: 1px; height: 38px; background: var(--e-line); }
.e-hero__art { position: relative; }
.e-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* ── deployment tiers ─────────────────────────────────────── */

.e-tiers {
  max-width: var(--e-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.e-tier {
  position: relative; isolation: isolate;
  min-height: clamp(581px, 40.3vw, 860px);
  /* left padding tracks the page gutter so card 01 lines up with the hero copy */
  padding-block: 42px 38px;
  padding-inline: var(--e-gutter) 40px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.e-tier__bg { position: absolute; inset: 0; z-index: -2; }
.e-tier__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* The card tone and the two fade stops are variables so a language whose copy
   runs an extra line can push the fade further down without restating the
   gradients. */
.e-tier__scrim {
  position: absolute; inset: 0; z-index: -1;
  --tone: 241,240,236; --top-a: .96; --top-b: .87; --stop: 36%; --end: 58%; --foot-b: .62;
  background:
    linear-gradient(180deg, rgba(var(--tone),var(--top-a)) 0%,
                            rgba(var(--tone),var(--top-b)) var(--stop),
                            rgba(var(--tone),0) var(--end)),
    linear-gradient(0deg,   rgba(var(--tone),.94) 0%,
                            rgba(var(--tone),var(--foot-b)) 13%,
                            rgba(var(--tone),0) 25%);
}
.e-tier--mid  .e-tier__scrim { --tone: 219,221,222; --top-a: .95; --top-b: .86; --stop: 40%; --end: 62%; }
.e-tier--dark .e-tier__scrim { --tone: 8,9,10;      --top-a: .92; --top-b: .80; --stop: 40%; --end: 62%; --foot-b: .66; }

/* German compounds add a line to the longest card body */
html[lang="de"] .e-tier__scrim { --stop: 48%; --end: 74%; }
.e-tier__num {
  font-size: 12px; font-weight: 500; letter-spacing: .16em;
  color: var(--e-ink-label); margin-bottom: 9px;
}
.e-tier__numrule { width: 26px; height: 1px; background: var(--e-line); margin-bottom: 26px; }
.e-tier h2 {
  font-family: var(--e-font-display); font-weight: 500;
  font-size: clamp(30px, 3.05vw, 46px); line-height: 1.1;
  letter-spacing: -.01em; color: var(--e-ink); margin-bottom: 10px;
}
.e-tier__lede {
  font-family: var(--e-font-display); font-weight: 500;
  font-size: 23px; line-height: 1.35; color: var(--e-ink); margin-bottom: 18px;
}
.e-tier__body { font-size: 16.5px; line-height: 1.6; color: var(--e-ink-body); max-width: 21em; }
.e-tier__foot {
  margin-top: auto; display: flex; align-items: flex-start; gap: 16px;
  font-size: 13.5px; line-height: 1.5; color: var(--e-ink-body);
}
.e-tier__foot::before { content: ""; flex: none; width: 24px; height: 1px; background: currentColor; opacity: .5; margin-top: 10px; }

.e-tier--dark .e-tier__num,
.e-tier--dark .e-tier__body,
.e-tier--dark .e-tier__foot { color: var(--e-on-dark-body); }
.e-tier--dark h2, .e-tier--dark .e-tier__lede { color: var(--e-on-dark); }
.e-tier--dark .e-tier__numrule { background: var(--e-line-dark); }

.e-cloudline {
  max-width: var(--e-max); margin: 0 auto;
  display: flex; align-items: center; gap: 30px;
  padding: 39px var(--e-gutter);
  font-size: 14.5px; color: var(--e-ink-body);
}
.e-cloudline::before, .e-cloudline::after { content: ""; flex: 1; height: 1px; background: var(--e-line); }
.e-cloudline a { font-weight: 500; color: var(--e-ink); }
.e-cloudline a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── architecture and proof ───────────────────────────────── */

.e-proof {
  max-width: var(--e-max); margin: 0 auto;
  padding: 18px var(--e-gutter) 16px;
  display: grid; grid-template-columns: 38% 62%; gap: 0;
}
.e-proof__head { padding-inline-end: 60px; }
.e-proof__head .e-label { display: block; margin-bottom: 22px; }
.e-proof h2 {
  font-family: var(--e-font-display); font-weight: 500;
  font-size: clamp(30px, 2.9vw, 41px); line-height: 1.12;
  letter-spacing: -.012em; color: var(--e-ink); margin-bottom: 20px;
}
.e-proof__note { font-size: 15px; line-height: 1.62; max-width: 22em; }
.e-proof__table { border-inline-start: 1px solid var(--e-line); padding-inline-start: 46px; }
.e-spec { width: 100%; border-collapse: collapse; }
.e-spec th, .e-spec td {
  text-align: left; font-weight: 400; font-size: 15px;
  padding: 10px 0; border-bottom: 1px solid var(--e-line-soft);
  vertical-align: top;
}
.e-spec tr:last-child th, .e-spec tr:last-child td { border-bottom: 0; }
.e-spec th { width: 190px; color: var(--e-ink); font-weight: 500; padding-inline-end: 24px; }
.e-spec td { color: var(--e-ink-body); border-inline-start: 1px solid var(--e-line-soft); padding-inline-start: 30px; }

/* ── designed for ─────────────────────────────────────────── */

.e-sectors { max-width: var(--e-max); margin: 0 auto; padding: 0 var(--e-gutter) 26px; }
.e-sectors > .e-label { display: block; border-top: 1px solid var(--e-line); padding-top: 18px; margin-bottom: 22px; }
.e-sectors__row { display: grid; grid-template-columns: repeat(5, 1fr); }
.e-sector {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 8px 14px;
  font-size: 14.5px; color: var(--e-ink-body); text-align: center;
}
.e-sector + .e-sector { border-inline-start: 1px solid var(--e-line-soft); }
.e-sector svg { width: 34px; height: 34px; stroke: var(--e-ink); fill: none; stroke-width: 1.5; }

/* ── closing band ─────────────────────────────────────────── */

.e-band { position: relative; isolation: isolate; background: var(--e-black); overflow: hidden; }
.e-band__bg { position: absolute; inset: 0; z-index: -1; }
.e-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.e-band__grid {
  position: relative; max-width: var(--e-max); margin: 0 auto;
  min-height: 204px;
  padding: 44px var(--e-gutter);
  display: grid; grid-template-columns: 52% 48%;
  align-items: center; gap: 40px;
}
.e-band__claim { color: var(--e-on-dark); }
.e-band__claim .e-rule { margin-bottom: 20px; }
.e-band__claim p {
  font-size: 13px; font-weight: 500; letter-spacing: .21em;
  text-transform: uppercase; line-height: 2.05;
}
.e-band__act { display: flex; align-items: center; gap: 36px; }
.e-band__act::before { content: ""; flex: none; width: 1px; height: 54px; background: var(--e-line-dark); }
.e-band__act p { color: var(--e-on-dark); font-size: 16px; line-height: 1.55; max-width: 16em; }

/* ── footer ───────────────────────────────────────────────── */

.e-foot {
  max-width: var(--e-max); margin: 0 auto;
  padding: 42px var(--e-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.e-foot__left { display: flex; align-items: center; gap: 24px; }
.e-foot__logo { height: 23px; width: auto; }
.e-foot__left .e-rule { color: var(--e-line); opacity: 1; }
.e-foot__copy { font-size: 13.5px; color: var(--e-ink-body); }
.e-foot__links { display: flex; align-items: center; gap: 22px; font-size: 13.5px; flex-wrap: wrap; }
.e-foot__links span { width: 1px; height: 13px; background: var(--e-line); }
.e-foot__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── responsive ───────────────────────────────────────────── */

@media (max-width: 1100px) {
  .e-proof { grid-template-columns: 1fr; }
  .e-proof__head { padding-inline-end: 0; margin-bottom: 34px; }
  .e-proof__table { border-inline-start: 0; padding-inline-start: 0; }
  .e-spec th { width: 150px; }
  .e-spec td { padding-inline-start: 24px; }
}

@media (max-width: 980px) {
  .e-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  /* Lead with the headline, not the photograph: a 300px image above the fold
     pushed every word off the first screen. */
  .e-hero__copy { padding-block: 40px 40px; order: 1; }
  .e-hero__art { order: 2; height: 230px; }
  .e-tiers { grid-template-columns: 1fr; }
  .e-tier { min-height: 520px; }
  .e-band__grid { grid-template-columns: 1fr; }
  .e-band__act { flex-direction: column; align-items: flex-start; gap: 22px; }
  .e-band__act::before { display: none; }
}

@media (max-width: 1240px) {
  /* the menu would crowd the lockup; the logo and the main-site link carry the way back */
  .e-menu { display: none; }
}

@media (max-width: 720px) {
  .e-sectors__row { grid-template-columns: repeat(2, 1fr); gap: 1px; }
  .e-sector { border-inline-start: 0 !important; padding: 20px 10px; }
  .e-foot { flex-direction: column; align-items: flex-start; }
  /* German legal labels are long enough to push this row past a phone screen */
  .e-foot__links { gap: 14px; font-size: 13px; }
  .e-hero__note { font-size: 10.5px; }
  .e-cloudline::before, .e-cloudline::after { display: none; }
  .e-cloudline { justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  .e-nav__right { gap: 14px; }
  .e-nav .e-pill { padding: 11px 18px; font-size: 13px; }
  .e-hero__actions { gap: 20px; }
  .e-hero__note { display: none; }
}

/* ── cookie consent, restyled for this world ──────────────────
   consent.js injects its own <style> with #vp-cc rules. These use a
   higher-specificity prefix so they win regardless of injection order. */

html body #vp-cc {
  font-family: var(--e-font-text);
  background: var(--e-paper);
  border: 1px solid var(--e-line);
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(10,10,10,.14);
  color: var(--e-ink);
  padding: 20px 24px;
  max-width: 820px;
}
html body #vp-cc p { font-size: 13.5px; line-height: 1.6; color: var(--e-ink-body); }
html body #vp-cc a { color: var(--e-ink); text-decoration: underline; text-underline-offset: 3px; }
html body #vp-cc .vp-cc-btns { gap: 10px; }
html body #vp-cc button {
  font-family: var(--e-font-text);
  font-size: 13.5px; font-weight: 500; letter-spacing: -.005em;
  padding: 11px 24px;
  border-radius: 999px;
  border: 1px solid var(--e-line);
  background: transparent; color: var(--e-ink);
  transition: background .18s ease, border-color .18s ease;
}
html body #vp-cc button:hover { opacity: 1; background: #e7e5e1; }
html body #vp-cc button.vp-cc-accept {
  background: var(--e-black); border-color: var(--e-black); color: var(--e-white);
}
html body #vp-cc button.vp-cc-accept:hover { background: #22221f; }

/* ═══ waitlist and thank-you ══════════════════════════════════ */

/* wider copy column: these heroes carry no art-side content */
.e-hero--wl .e-hero__grid { grid-template-columns: 64% 36%; min-height: clamp(709px, 49.2vw, 1020px); }
.e-hero--wl .e-hero__copy { padding-block: 131px 0; justify-content: flex-start; }
.e-hero--wl .e-hero__art img { object-position: 74% 50%; }
.e-hero--wl .e-hero__sub { margin-bottom: 0; }
.e-hero--wl h1 { font-size: clamp(31px, 4.8vw, 70px); }

/* ── form card, pulled up over the hero ───────────────────── */

.e-card {
  position: relative; z-index: 3;
  max-width: var(--e-max); margin: clamp(-230px, -11.46vw, -165px) auto 0;
  padding: 0 var(--e-gutter);
}
.e-card__inner {
  background: #f7f6f3;
  border: 1px solid var(--e-line-soft);
  box-shadow: 0 18px 60px rgba(10,10,10,.07);
  padding: 40px 36px 34px;
}
.e-card__inner > .e-label { display: block; margin-bottom: 26px; }

.e-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 30px; }
.e-field { display: flex; flex-direction: column; }
.e-field label {
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--e-ink-label); margin-bottom: 10px;
}
.e-field input, .e-field select {
  font-family: var(--e-font-text); font-size: 15px; color: var(--e-ink);
  background: var(--e-white);
  border: 1px solid #dcdad5; border-radius: 2px;
  padding: 0 16px; height: 48px; width: 100%;
  appearance: none; -webkit-appearance: none;
  transition: border-color .15s ease;
}
.e-field input::placeholder { color: #a9a6a0; }
.e-field input:focus, .e-field select:focus { outline: none; border-color: var(--e-ink); }
.e-field select {
  color: #6f6c66;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%236f6c66' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 10px 6px;
  padding-inline-end: 40px; cursor: pointer;
}
.e-field select.is-chosen { color: var(--e-ink); }

.e-deploy { margin-top: 30px; border: 0; padding: 0; min-width: 0; }
.e-deploy > span {
  display: block;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--e-ink-label); margin-bottom: 12px;
}
.e-deploy__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.e-opt {
  display: flex; align-items: flex-start; gap: 16px;
  background: #f1f0ed; border: 1px solid #e2e0db; border-radius: 2px;
  padding: 20px 22px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.e-opt:hover { border-color: #c9c6c0; }
.e-opt input { position: absolute; opacity: 0; pointer-events: none; }
.e-opt__dot {
  flex: none; width: 19px; height: 19px; margin-top: 4px;
  border: 1px solid #c2bfb9; border-radius: 50%; background: var(--e-white);
  position: relative; transition: border-color .15s ease;
}
.e-opt input:checked + .e-opt__dot { border-color: var(--e-ink); border-width: 1.5px; }
.e-opt input:checked + .e-opt__dot::after {
  content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--e-ink);
}
.e-opt input:focus-visible + .e-opt__dot { box-shadow: 0 0 0 3px rgba(10,10,10,.14); }
.e-opt:has(input:checked) { border-color: var(--e-ink); background: #edecE8; }
.e-opt__t { font-family: var(--e-font-display); font-weight: 500; font-size: 22px; line-height: 1.2; color: var(--e-ink); display: block; margin-bottom: 5px; }
.e-opt__d { font-size: 14.5px; line-height: 1.5; color: var(--e-ink-body); }

.e-submit {
  width: 100%; justify-content: center;
  margin-top: 30px; padding: 22px 34px; border-radius: 999px; font-size: 16px;
}
.e-submit[disabled] { opacity: .55; cursor: default; }
.e-legal {
  margin-top: 18px; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--e-ink-label);
}
/* Pushed past the inline START edge: that side is never scrollable, in LTR
   or RTL. A physical `left` here made the Arabic page 9999px wide. */
.e-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.e-formerr {
  margin-top: 16px; text-align: center; font-size: 14px; color: #a12b2b; display: none;
}
.e-formerr.is-on { display: block; }

/* ── what to expect / what happens next ───────────────────── */

.e-steps {
  max-width: var(--e-max); margin: 0 auto;
  padding: 72px var(--e-gutter) 0;
  display: grid; grid-template-columns: 46% 54%; gap: 0;
}
.e-steps__head .e-label { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.e-steps__head .e-label::before { content: ""; width: 34px; height: 1px; background: var(--e-line); }
.e-steps h2 {
  font-family: var(--e-font-display); font-weight: 500;
  font-size: clamp(30px, 3.05vw, 44px); line-height: 1.12;
  letter-spacing: -.012em; color: var(--e-ink); margin-bottom: 22px;
}
.e-steps__note { font-size: 16px; line-height: 1.68; max-width: 27em; }
.e-steps__list { border-inline-start: 1px solid var(--e-line); padding-inline-start: 52px; display: flex; flex-direction: column; gap: 30px; }
.e-step { display: grid; grid-template-columns: 34px 1fr; gap: 26px; align-items: start; }
.e-step svg { width: 30px; height: 30px; stroke: var(--e-ink); fill: none; stroke-width: 1.4; margin-top: 2px; }
.e-step__t { font-size: 11.5px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--e-ink); margin-bottom: 7px; }
.e-step__d { font-size: 15px; line-height: 1.6; color: var(--e-ink-body); }

.e-sectors--top { padding-top: 60px; }

/* ── thank-you card ───────────────────────────────────────── */

.e-done { text-align: center; padding: 58px 36px 50px; }
.e-done__tick {
  width: 74px; height: 74px; border-radius: 50%; background: var(--e-black);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 30px;
}
.e-done__tick svg { width: 30px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; }
.e-done h2 {
  font-family: var(--e-font-display); font-weight: 500;
  font-size: clamp(26px, 2.5vw, 36px); line-height: 1.2;
  letter-spacing: -.01em; color: var(--e-ink); margin-bottom: 16px;
}
.e-done__lede { font-size: 16.5px; line-height: 1.6; color: var(--e-ink-body); max-width: 40em; margin: 0 auto; }
.e-done__div { width: min(520px, 62%); height: 1px; background: var(--e-line); margin: 34px auto; }
.e-done__reflabel { display: block; margin-bottom: 12px; font-size: 11.5px; }
.e-done__ref {
  font-size: 19px; font-weight: 500; letter-spacing: .22em; color: var(--e-ink);
}
.e-done__note { margin-top: 26px; font-size: 16px; color: var(--e-ink-body); }

@media (max-width: 1100px) {
  .e-steps { grid-template-columns: 1fr; }
  .e-steps__list { border-inline-start: 0; padding-inline-start: 0; margin-top: 36px; }
}

@media (max-width: 980px) {
  .e-hero--wl .e-hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .e-hero--wl .e-hero__copy { padding-top: 26px; padding-bottom: 34px; }
  .e-card { margin-top: 0; }
  .e-fields { grid-template-columns: 1fr 1fr; }
  .e-deploy__row { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 640px) {
  .e-fields { grid-template-columns: 1fr; }
  .e-card__inner { padding: 28px 22px 26px; }
  .e-done { padding: 40px 20px 36px; }
  .e-done__ref { font-size: 16px; letter-spacing: .18em; }
}

@media (max-width: 760px) {
  /* the hero carries its own call to action; the nav one only crowds the row */
  .e-nav .e-pill { display: none; }
  .e-nav { gap: 14px; }
  .e-hero--wl .e-hero__copy { padding-block-start: 26px; }
}

@media (max-width: 620px) {
  /* logo + one exit is all the row can hold without the label wrapping */
  .e-nav__div, .e-nav__word { display: none; }
  .e-nav__logo { height: 22px; }
  .e-nav__link { font-size: 13.5px; }
}

/* French and German run longer than English: at the shared size the hero
   headline broke into five lines and orphaned the leading word. One notch
   down puts each sentence back on its own line. */
html[lang="fr"] .e-hero h1,
html[lang="de"] .e-hero h1 { font-size: clamp(28px, 3.72vw, 56px); }

/* "Demander un accès anticipé" is a wider button than the English label, which
   pushed the pilot note onto its own line. Tightening the gaps keeps the
   button and the note on one row. */
html[lang="fr"] .e-hero__copy { padding-inline-end: 2vw; }
html[lang="fr"] .e-hero__actions { gap: 22px; }
html[lang="fr"] .e-hero__note { gap: 22px; font-size: 10.5px; }


/* ═══ Arabic / right to left ═════════════════════════════════
   The layout mirrors on its own: the grids, paddings and borders above use
   logical properties, so the hero copy moves to the right, the image to the
   left, and the tiers read 01 to 03 from right to left. What cannot mirror
   automatically is set here.

   Arabic has no capitals, and letter-spacing breaks the connected script, so
   every tracked-uppercase label loses both and is distinguished by size,
   colour and the display face instead. Elements carrying lang="en" (the
   product name, the tier names) keep their Latin treatment. */

html[lang="ar"] {
  --e-font-display: 'Amiri', 'Noto Naskh Arabic', Georgia, serif;
  --e-font-text: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
}
/* Arabic sits optically smaller at the same size and needs room for its marks */
html[lang="ar"] body { font-size: 17px; line-height: 1.85; }

[dir="rtl"] .e-arrow { transform: scaleX(-1); }
[dir="rtl"] .e-pill:hover .e-arrow { transform: scaleX(-1) translateX(4px); }

[dir="rtl"] .e-field select {
  background-position: left 16px center;
  padding-inline-end: 16px; padding-inline-start: 40px;
}

/* no capitals, no tracking */
[dir="rtl"] .e-label:not([lang]),
[dir="rtl"] .e-hero__note,
[dir="rtl"] .e-step__t,
[dir="rtl"] .e-field label,
[dir="rtl"] .e-deploy > span,
[dir="rtl"] .e-band__claim p {
  letter-spacing: 0;
  text-transform: none;
}
[dir="rtl"] .e-label:not([lang]) { font-size: 14px; }
[dir="rtl"] .e-hero__note { font-size: 13.5px; line-height: 1.7; }
[dir="rtl"] .e-step__t { font-size: 14px; font-weight: 600; }
[dir="rtl"] .e-field label,
[dir="rtl"] .e-deploy > span { font-size: 13px; }

/* the closing claim is a graphic element in Latin; in Arabic the display
   face carries that weight instead of the tracking */
[dir="rtl"] .e-band__claim p {
  font-family: var(--e-font-display);
  font-size: 27px; font-weight: 400; line-height: 1.55;
}

/* identifiers and codes stay left to right inside the Arabic page */
[dir="rtl"] .e-done__ref { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .e-tier__num { direction: ltr; unicode-bidi: isolate; }

[dir="rtl"] .e-hero h1 { line-height: 1.35; }
[dir="rtl"] .e-tier h2,
[dir="rtl"] .e-tier__lede { line-height: 1.4; }

/* ═══ mobile repairs ═════════════════════════════════════════
   On a phone the tier text and the cube image were sharing one box, so the
   body copy landed on the render and washed out. Below 980px they stop
   competing: the copy sits on the card colour, the image follows as a band. */

@media (max-width: 980px) {
  .e-tier { min-height: 0; padding-block-end: 0; }
  .e-tier--light { background: #edece8; }
  .e-tier--mid   { background: #dbdddd; }
  .e-tier--dark  { background: #0b0b0c; }
  .e-tier__scrim { display: none; }
  .e-tier__bg {
    position: relative; inset: auto; z-index: 0;
    order: 5; flex: none; height: 250px;
    margin-block: 26px 0;
    margin-inline: calc(-1 * var(--e-gutter)) -40px;
  }
  .e-tier__bg img { object-position: 50% 48%; }
  .e-tier__body { max-width: none; }
  .e-tier__foot { order: 6; margin-top: 0; padding-block: 20px 34px; }

  /* the closing claim is white type over the bright wedge of the photograph */
  .e-band__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,9,10,.66) 0%, rgba(8,9,10,.42) 45%, rgba(8,9,10,.66) 100%);
  }

  .e-sectors__row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  /* a two-column spec table leaves the value 140px to live in */
  .e-spec, .e-spec tbody, .e-spec tr, .e-spec th, .e-spec td { display: block; width: auto; }
  .e-spec tr { padding-block: 15px; border-bottom: 1px solid var(--e-line-soft); }
  .e-spec tr:last-child { border-bottom: 0; }
  .e-spec th, .e-spec td {
    border: 0; padding: 0; padding-inline: 0;
  }
  .e-spec th { width: auto; margin-bottom: 5px; }
}

@media (max-width: 720px) {
  .e-cloudline { flex-direction: column; gap: 6px; text-align: center; }
  .e-sector:last-child { grid-column: 1 / -1; }
}