/* ============================================================
   VOXEL — landing page
   ------------------------------------------------------------
   One idea drives every choice here: things are made layer by
   layer, bottom-up. The boot counts layers. The headline wipes
   upward. Nothing fades in from nowhere.

   Loads after main.css and only adds; the nav, footer, spec
   table, theme and type system all come from there.
   ============================================================ */

.lp { --lp-edge: clamp(1.25rem, 3.5vw, 3.5rem); }

/* ============================================================
   BOOT
   A real count of the 190 layers the mark is sliced into, not a
   decorative spinner. Removes itself and is inert to input.
   ============================================================ */
.boot {
  position: fixed; inset: 0; z-index: 999;
  background: var(--bg);
  display: grid; align-content: end; gap: 1.1rem;
  padding: var(--lp-edge);
  transition: opacity .5s var(--ease), visibility .5s;
}
.boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot__grid {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
}
.boot__id { color: var(--text); }
.boot__count b { color: var(--text); font-variant-numeric: tabular-nums; }
.boot__bar { height: 2px; background: var(--line-dark); overflow: hidden; }
.boot__bar i {
  display: block; height: 100%; width: 0%;
  background: var(--blue);
  transform-origin: left;
}

/* ============================================================
   HERO
   Full bleed, type as the image. No boxed stage, no centred
   column — the words run edge to edge.
   ============================================================ */
.hero2 {
  position: relative;
  min-height: 100svh;
  padding: clamp(6rem, 12vh, 8rem) var(--lp-edge) var(--lp-edge);
  /* Flex column with auto margins on the type, not a 3-row grid: with
     `auto 1fr auto` the free space landed on the auto foot row instead
     of the fr, stretching the button to twice its height. Auto margins
     centre the headline and leave every other box at its own size. */
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
}
.hero2__meta {
  position: absolute; inset-block-start: clamp(5rem, 10vh, 6.5rem);
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim);
  margin: 0;
}
.hero2__meta--tl { inset-inline-start: var(--lp-edge); }
.hero2__meta--tr { inset-inline-end: var(--lp-edge); }

.hero2__type {
  margin: auto 0;   /* centres in whatever height is left over */
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  /* Fills the measure: the headline is the layout, not a label on it. */
  font-size: clamp(54px, 19vw, 17rem);
  /* The mask box needs the full glyph height or overflow:hidden shears
     the caps and the outlined line's stroke. Optical tightening is done
     with a negative margin instead, giving an effective 0.82 leading. */
  line-height: 1.1;
}
.hero2__type .ln { display: block; overflow: hidden; }
.hero2__type .ln + .ln { margin-block-start: -0.28em; }
/* The mask clips at its padding box, so descenders that paint below the
   line box vanish — measured, the y and g of "Anything" sat flush against
   the edge with 0.2px to spare. A little padding gives them room, and an
   equal negative margin takes it back out of the layout so the leading is
   untouched. Arabic needs more (see below); its marks hang further. */
.hero2__type .ln { padding-block-end: 0.06em; }
.hero2__type .ln:not(:last-child) { margin-block-end: -0.06em; }
.hero2__type .ln i {
  display: block; font-style: normal;
  white-space: nowrap;
  /* Wipes up from the baseline — the machine's own direction. */
  transform: translateY(102%);
}
.lp.is-ready .hero2__type .ln i {
  transform: translateY(0);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.lp.is-ready .hero2__type .ln:nth-child(2) i { transition-delay: .08s; }
/* The last line is outlined: Anton has no second weight to contrast with. */
.hero2__type .ln:last-child i {
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
}
@supports not (-webkit-text-stroke: 1px black) {
  .hero2__type .ln:last-child i { color: var(--text); }
}

/* The slogan is not translated, so on the Arabic site the hero is a Latin
   lockup sitting inside an RTL document. It has to take back everything
   the Arabic type rules in main.css hand out — the Arabic face, sentence
   casing, Arabic leading — plus the global tracking reset, which exists
   to protect joined script and has nothing to fix in Anton.

   It stays on the LEFT in Arabic too. Mirroring it to the RTL side was
   the obvious-looking move and it reads wrong: the words run
   left-to-right, so right-aligning them ragged-lefts a Latin lockup and
   the eye lands on the end of the line first. `dir="ltr"` on the element
   makes `start` resolve to left again, so this needs no text-align. */
html[dir='rtl'] .hero2__type {
  direction: ltr;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.005em;
}
/* Beats `html[dir='rtl'] body *` on specificity, not source order. */
html[dir='rtl'] .hero2__type * { letter-spacing: inherit; }

/* Two short lines instead of three long ones, so there is far more
   vertical room to spend. Sized against BOTH axes: width alone would
   overflow a short window, height alone would leave a 1280 screen
   half-empty. */
.hero2__type--two { font-size: clamp(56px, min(26vw, 31vh), 26rem); }

/* Big monitors.

   19vw is capped at 17rem so the headline cannot outgrow a laptop's
   height, but that cap also stops it growing on a 27" display: at 2560
   the words filled 38% of the screen and the rest read as dead space.
   Where there is genuine vertical room to spend, let it keep scaling —
   gated on height as well as width so an ultra-wide but short monitor
   (2560x1080) keeps the smaller size and still fits in one screen. */
@media (min-width: 1700px) and (min-height: 1000px) {
  /* min() against BOTH axes. Sizing on width alone pushed the hero to
     1117px on a 1920x1080 screen — taller than the viewport it is
     supposed to fill exactly. 25vh is the height budget the three lines
     plus the foot row can afford. */
  .hero2__type { font-size: clamp(272px, min(15vw, 25vh), 24rem); }
  .hero2__type--two { font-size: clamp(272px, min(22vw, 33vh), 30rem); }
}

/* Grid, not wrapped flex: a wrapped flex container stretches its lines
   to fill the grid row it sits in, which opened ~200px of dead space
   between the lede and the button. Grid columns collapse predictably. */
.hero2__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.5rem, 5vw, 4rem);
  border-block-start: 1px solid var(--line-dark);
  padding-block-start: 1.4rem;
}
.hero2__lede {
  max-width: 44ch; color: var(--dim);
  font-size: clamp(0.95rem, 1.1vw, 1.08rem); line-height: 1.5;
}

.cta {
  display: inline-flex; align-items: center; gap: 0.9rem;
  padding: 1.05rem 1.7rem;
  background: var(--blue); color: #fff;
  font-family: var(--font-mono); font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s linear;
  will-change: transform;
}
.cta:hover { background: var(--blue-bright); }
.cta svg { width: 20px; height: 20px; flex: none; }
html[dir='rtl'] .cta svg { transform: scaleX(-1); }


@media (max-width: 860px) {
  .hero2__foot { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cta { justify-content: center; }
}
@media (max-width: 720px) {
  .hero2__meta--tr { display: none; }
}

/* ============================================================
   END CTA
   The largest type on the page, because it is the only thing
   the page actually wants you to do.
   ============================================================ */
.end {
  border-block-start: 1px solid var(--line-dark);
  padding: clamp(4rem, 10vw, 8rem) var(--lp-edge) var(--lp-edge);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
}
.end__link {
  display: grid;
  /* Shrink to the words. As a grid item this stretched the full width of
     the section, so the hover box carried on past the last letter to the
     page edge and the fill fired over empty space — which reads as a
     glitch, not a button. The box now ends where the type ends. */
  justify-self: start;
  max-width: 100%;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(48px, 16vw, 14rem); line-height: 0.84;
  letter-spacing: 0.005em;
}
.end__word { display: block; }

/* The block prints itself.

   Idle it is an outline — an unfilled part. On hover, blue rises from the
   bottom of the whole two-line block, so "A PRINT" fills before "START",
   the order a printer would actually lay it down.

   steps() is the load-bearing part. A smooth ramp reads as a gradient
   wipe, which is the generic effect this site keeps refusing; in discrete
   jumps it reads as layers landing. The repeating gradient puts a lighter
   line every 7px so the filled area carries visible layer lines rather
   than being flat colour.

   The fill is one background on the link, not one per word, which is what
   makes it climb across both lines as a single object. */
.end__link {
  --layer: 7px;
  color: transparent;
  -webkit-text-stroke: clamp(2px, 0.28vw, 5px) var(--text);
  background-image: repeating-linear-gradient(
    to top,
    var(--blue) 0 calc(var(--layer) - 1px),
    rgb(var(--accent-bright-rgb)) calc(var(--layer) - 1px) var(--layer)
  );
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0%;
  -webkit-background-clip: text;
          background-clip: text;
  transition: background-size .75s steps(16);
}
.end__link:hover,
.end__link:focus-visible { background-size: 100% 100%; }
.end__link:focus-visible { outline-offset: 6px; }

/* Without background-clip:text, transparent text is invisible text. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .end__link { color: var(--text); -webkit-text-stroke: 0; background-image: none; }
}

/* No hover on a phone, so the outline would never resolve and the block
   would just look unfinished. Show it filled instead. */
@media (hover: none) {
  .end__link { color: var(--text); -webkit-text-stroke: 0; background-image: none; }
}
.end__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem; flex-wrap: wrap;
  border-block-start: 1px solid var(--line-dark); padding-block-start: 1.3rem;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--dim);
}
.end__wa { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   CONTACT
   Same rules as the landing: full-bleed head, hairline rows,
   mono for anything that is data.
   ============================================================ */
.ct-head {
  padding: clamp(7rem, 14vh, 10rem) var(--lp-edge) clamp(2rem, 5vw, 3.5rem);
  display: grid; gap: 1.2rem;
}
.ct-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(48px, 15vw, 12rem);
  line-height: 1.02;
}
.ct-title span { display: block; }
.ct-title__out {
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
}
@supports not (-webkit-text-stroke: 1px black) {
  .ct-title__out { color: var(--dim); }
}
.ct-lede { max-width: 50ch; color: var(--dim); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; }

/* ---------- channel rows ---------- */
.chan { border-block-start: 1px solid var(--line-dark); }
.chan__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) var(--lp-edge);
  border-block-end: 1px solid var(--line-dark);
  transition: background .18s linear, color .18s linear;
  will-change: transform;
}
.chan__row:hover { background: var(--text); color: var(--bg); }
.chan__no {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--dim);
}
.chan__row:hover .chan__no,
.chan__row:hover .chan__sub,
.chan__row:hover .chan__val { color: inherit; opacity: .72; }
.chan__body { display: grid; gap: 0.25rem; }
.chan__name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.6rem, 4.5vw, 3rem); line-height: 1;
}
.chan__sub { color: var(--dim); font-size: 0.92rem; }
.chan__val {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--dim);
  white-space: nowrap;
}
.chan__arw { width: 26px; height: 26px; flex: none; transition: transform .18s var(--ease); }
.chan__row:hover .chan__arw { transform: translateX(6px); }
html[dir='rtl'] .chan__arw { transform: scaleX(-1); }
html[dir='rtl'] .chan__row:hover .chan__arw { transform: scaleX(-1) translateX(6px); }

@media (max-width: 760px) {
  .chan__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .chan__val { display: none; }   /* the name already says where it goes */
}

/* ---------- details + form ---------- */
.ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(3rem, 7vw, 5.5rem) var(--lp-edge) clamp(4rem, 8vw, 7rem);
}
@media (max-width: 900px) { .ct-grid { grid-template-columns: minmax(0, 1fr); } }

.ct-side { display: grid; gap: 2rem; align-content: start; }
.ct-spec { margin: 0; display: grid; gap: 0; }
.ct-spec div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--line-dark);
}
.ct-spec dt {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}
.ct-spec dd { margin: 0; font-size: 0.92rem; text-align: end; }

.ct-bulk { border-block-start: 1px solid var(--text); padding-block-start: 1.3rem; display: grid; gap: 0.6rem; }
.ct-bulk h2 {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.2;
}
.ct-bulk p { color: var(--dim); font-size: 0.92rem; }

.ct-form__h {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; margin-block-end: 0.6rem;
}
.ct-form__sub { color: var(--dim); font-size: 0.95rem; margin-block-end: 1.8rem; max-width: 46ch; }
.ct-form form { display: grid; gap: 1.2rem; }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .ct-form__row { grid-template-columns: 1fr; } }
.ct-form .cta { justify-self: start; }
@media (max-width: 560px) { .ct-form .cta { justify-self: stretch; justify-content: center; } }
.ct-form__err {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: #fff; background: var(--danger);
  padding: 0.7rem 0.9rem;
}

/* ============================================================
   PAGE HEAD — shared
   Every inner page opens the way the landing does: full bleed,
   monumental, second clause outlined. One component so the
   pages cannot drift apart again.
   ============================================================ */
.phead {
  padding: clamp(7rem, 13vh, 9.5rem) var(--lp-edge) clamp(2rem, 5vw, 3.5rem);
  display: grid; gap: 1.2rem;
}
.phead__title {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(48px, 14vw, 11rem);
  line-height: 1.02;
}
.phead__title span { display: block; }
.phead__title .out {
  color: transparent;
  -webkit-text-stroke: 2px var(--text);
}
@supports not (-webkit-text-stroke: 1px black) {
  .phead__title .out { color: var(--dim); }
}
.phead__lede { max-width: 50ch; color: var(--dim); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; }

/* A tool page needs its controls above the fold, so its head is the
   same component dialled down rather than a different one. */
.phead--sm { padding-block: clamp(6rem, 11vh, 7.5rem) clamp(1.2rem, 3vw, 2rem); }
.phead--sm .phead__title { font-size: clamp(35px, 6vw, 4.5rem); }

/* ============================================================
   FAQ
   Objection handling, set as an index rather than a widget.
   ============================================================ */
.faq2 {
  padding: clamp(3rem, 7vw, 5.5rem) var(--lp-edge) clamp(4rem, 8vw, 7rem);
  border-block-start: 1px solid var(--line-dark);
}
.faq2__h {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1;
  margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
}
.faq2__list { border-block-start: 1px solid var(--text); }
.faq2__q {
  width: 100%; text-align: start;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
  border-block-end: 1px solid var(--line-dark);
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.02rem, 1.7vw, 1.35rem); letter-spacing: -0.015em;
  transition: color .16s linear;
}
.faq2__q:hover { color: var(--accent-on-bg); }
.faq2__no { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400; color: var(--dim); }
.faq2__sign {
  font-family: var(--font-mono); font-weight: 400; font-size: 1.1rem; color: var(--dim);
  transition: transform .24s var(--ease);
}
.faq2__q[aria-expanded='true'] .faq2__sign { transform: rotate(45deg); }
.faq2__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
  border-block-end: 1px solid var(--line-dark);
}
.faq2__a[data-open='true'] { grid-template-rows: 1fr; }
.faq2__a > div { overflow: hidden; }
.faq2__a p {
  color: var(--dim); max-width: 62ch;
  padding-block: 0 clamp(1.1rem, 2.5vw, 1.6rem);
  /* line up with the question text, past the index column */
  padding-inline-start: calc(clamp(1rem, 3vw, 2.5rem) + 2.2rem);
}
@media (max-width: 620px) {
  .faq2__a p { padding-inline-start: 0; }
}

/* ============================================================
   Inner pages adopting the landing system
   ============================================================ */
.lp .studio { padding-block-start: 0; }
.lp .studio > .wrap,
.lp main > .section > .wrap { width: 100%; max-width: none; padding-inline: var(--lp-edge); }

/* The header and footer were still locked to the 1240px .wrap while every
   section on these pages runs edge to edge. Near 1280 the two nearly
   coincide so it reads as aligned; at 2560 the logo started 604px inside
   the headline it sits above, and the footer did the same. Anything that
   frames a full-bleed page has to share its edge.

   Scoped to .bleed because studio.html keeps the centred column, and its
   header is correctly aligned to that. */
.lp.bleed .nav__in,
.lp.bleed .footer > .wrap {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--lp-edge);
}


/* ============================================================
   ABOUT
   Same vocabulary as the rest of the site: hairline rules,
   mono labels, one idea per cell. No cards, no shadows.
   ============================================================ */
.ab-sec {
  border-block-start: 1px solid var(--line-dark);
  padding: clamp(3rem, 7vw, 5.5rem) var(--lp-edge);
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
}
.ab-sec__head { display: grid; gap: 0.9rem; max-width: 40ch; }

.ab-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3.5rem);
}
@media (max-width: 760px) { .ab-two { grid-template-columns: minmax(0, 1fr); } }
.ab-two > p { color: var(--dim); font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.65; }

.ab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.6rem);
}
/* Explicit counts, not auto-fit: auto-fit sized these by available width
   and gave the five process steps six tracks (one always empty) and the
   four-item sections three (stranding the fourth on its own row). The
   count is part of the content here, so it is stated. */
.ab-grid--steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .ab-grid--steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ab-grid--two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ab-grid--steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ab-item {
  display: grid; gap: 0.55rem; align-content: start;
  border-block-start: 1px solid var(--line-dark);
  padding-block-start: 1.1rem;
}
.ab-item__no {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}
.ab-item__h {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.18rem); letter-spacing: -0.015em; line-height: 1.25;
}
.ab-item__p { color: var(--dim); font-size: 0.95rem; line-height: 1.6; }
.ab-grid--steps .ab-item__h { font-size: clamp(1.15rem, 1.9vw, 1.5rem); }

/* Mission and vision are one statement each and the only thing on their
   page carrying the argument, so they set at reading size rather than at
   the caption size the value cards use. Larger measure, more leading —
   two paragraphs meant to be read, not two more cards to scan. */
.ab-item--big .ab-item__p {
  font-size: clamp(1.05rem, 1.55vw, 1.35rem);
  line-height: 1.55;
  color: var(--text);
}
.ab-item--big { gap: 0.9rem; padding-block-start: 1.4rem; }

/* ============================================================
   ARABIC: NO OUTLINED TEXT
   ------------------------------------------------------------
   -webkit-text-stroke strokes every glyph on its own. On Latin
   that is a clean outline; on a joined script the letters
   overlap, so each join shows as a doubled seam along the
   baseline, and enclosed marks turn into hollow rings — the two
   dots of the ت read as a stray Latin "oc" floating above the
   word.

   The outline only exists because Anton ships a single weight
   and there is nothing to contrast against. Arabic has no such
   problem: the headline simply sets at one weight, which is how
   Arabic display type is normally set. Dropping to 400 for the
   last line was tried and read as a mistake rather than as
   emphasis — the jump is too large at this size, and a thin line
   under two heavy ones looks like a failed font load.
   ============================================================ */
html[dir='rtl'] .ct-title__out,
html[dir='rtl'] .phead__title .out {
  color: var(--text);
  -webkit-text-stroke: 0;
}

/* Anton's 0.84 leading is set against a Latin cap height. Arabic paints
   about 91px of ink at this size into a 69px line box, so the two words
   overlapped by ~8px. It needs its own. */
/* :not([lang='en']) throughout — About's end lockup is the brand line and
   is pinned Latin, so it keeps the Anton leading, the stroke and the fill.
   Only a translated CTA (the home page's) takes the Arabic treatment. */
html[dir='rtl'] .end__link:not([lang='en']) { line-height: 1.2; }
/* Beats `html[dir='rtl'] body *`, which would strip Anton's tracking. The
   link itself needs the value restated, not just the spans: that reset
   hits the link too, so `inherit` on the children inherits `normal`. */
html[dir='rtl'] .end__link[lang='en'],
html[dir='rtl'] .end__link[lang='en'] * { letter-spacing: 0.005em; }

/* The end CTA fills with blue layers from an outlined idle state. Arabic
   can take neither half of that. The outline is out because a joined
   script doubles its stroke at every join and the dots under ت come out
   as hollow rings. The layered fill is out because it needs transparent
   text, and without a stroke the only way to keep the word legible while
   blue covers it is to band the fill with white — which at this size
   shreds the letterforms: Arabic strokes are thin and horizontal, so
   horizontal seams read as a broken render rather than as layers.

   So Arabic makes the simpler statement instead: solid, and blue on
   hover. Same signal, nothing fighting the script. */
html[dir='rtl'] .end__link:not([lang='en']) {
  color: var(--text);
  -webkit-text-stroke: 0;
  background-image: none;
  transition: color .3s var(--ease);
}
html[dir='rtl'] .end__link:not([lang='en']):hover,
html[dir='rtl'] .end__link:not([lang='en']):focus-visible { color: var(--blue-bright); }

/* ============================================================
   BIG MONITORS
   Must stay at the end of this file: a media query carries no
   extra specificity, so placed earlier this loses to the very
   .end__link rule it exists to override.
   ============================================================ */
@media (min-width: 1700px) {
  .end__link { font-size: clamp(224px, 13vw, 20rem); }
}