/* ============================================================================
   Mahsool — marketing page on design system v2.0 "one ink".
   Ledger green, white and tints of the same green. No second hue, no shadow,
   no pill. Every colour below resolves to a token.
   ========================================================================== */

:root{
  --bg:            var(--paper);
  --fg:            var(--ink);
  --fg-75:         var(--ink-75);   /* AA floor on paper; nothing lighter carries text */
  --hair:          var(--ink-12);
  --line:          var(--ink-25);
  --tint:          var(--ink-06);

  --ground:        var(--ink);      /* solid ink bands */
  --on-ground:     var(--paper);
  --card:          var(--paper);    /* form card and sheet; ink-800 in dark */

  --gutter:        clamp(var(--s5), 5vw, var(--s7));
  --measure:       1160px;
  --dock-h:        76px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:        var(--ink-900);
    --ground:    var(--ink-800);
    --on-ground: var(--ink);        /* white in dark */
    --card:      var(--ink-800);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-text); font-size:17px; line-height:var(--lh-latin);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom));
}
img,svg{ max-width:100%; }
img{ display:block; height:auto; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-family:var(--f-display); font-weight:700; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
fieldset{ margin:0; padding:0; border:0; min-width:0; }
legend{ padding:0; }
.vh{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap{ width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--gutter); }
.band{ padding-block:clamp(64px, 9vw, 120px); }
.band--ink{ background:var(--ground); color:var(--on-ground); }
.band--tint{ background:var(--tint); --fg-75:var(--ink); } /* 75 falls to 4.35:1 on the tint */

/* ── Type roles (DESIGN.md), scaled up for a marketing viewport ─────────── */
.eyebrow{
  font-family:var(--f-display); font-weight:600; font-size:12px; line-height:1.3;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-75); margin:0 0 var(--s4);
}
.band--ink .eyebrow, .hero .eyebrow{ color:var(--on-ground); }
/* Sized so "Egypt's harvest." holds one line from 375px up (measured: 7.23 × font-size). */
.display{ font-size:clamp(40px, 5.6vw, 72px); line-height:1.02; letter-spacing:-.035em; }
.h-band{ font-size:clamp(32px, 5vw, 56px); line-height:1.04; letter-spacing:-.03em; }
.h-item{ font-family:var(--f-display); font-weight:700; font-size:clamp(24px,2.6vw,30px); line-height:1.12; letter-spacing:-.02em; }
.lede{ font-size:clamp(18px,1.9vw,21px); line-height:1.55; color:var(--fg-75); max-width:40ch; }
.band--ink .lede, .hero .lede{ color:var(--on-ground); }
.body{ font-size:17px; line-height:1.65; color:var(--fg-75); max-width:44ch; }
.band--ink .body{ color:var(--on-ground); }

/* ── Buttons: primary, secondary, ghost. Radius 6, never a pill. ────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:52px; padding:0 26px; border-radius:var(--r-s); border:1.5px solid transparent;
  font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:.03em; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color var(--t-state) var(--e), color var(--t-state) var(--e), border-color var(--t-state) var(--e);
}
.btn--primary{ background:var(--ink); color:var(--card); border-color:var(--ink); }
.btn--primary:hover{ background:var(--ink-75); border-color:var(--ink-75); }
.btn--secondary{ background:transparent; color:var(--fg); border-color:var(--fg); }
.btn--secondary:hover{ background:var(--fg); color:var(--bg); }
.btn--rev{ background:var(--on-ground); color:var(--ground); border-color:var(--on-ground); }
.btn--rev:hover{ background:transparent; color:var(--on-ground); }
.btn--rev-line{ background:transparent; color:var(--on-ground); border-color:var(--on-ground); }
.btn--rev-line:hover{ background:var(--on-ground); color:var(--ground); }
.btn--full{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:default; }
.btn svg{ width:18px; height:18px; flex-shrink:0; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--ground); color:var(--on-ground); }
.hero__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero__veil{ position:absolute; inset:0; background:var(--ground); opacity:.8; z-index:-1; }
.hero__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding-block:var(--s6) 0; }
.hero__logo{ height:clamp(40px, 5vw, 56px); width:auto; }
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(var(--s6), 5vw, 72px);
  align-items:center; padding-block:clamp(var(--s7), 7vw, 88px) clamp(var(--s7), 8vw, 104px);
}
@media (max-width:960px){ .hero__grid{ grid-template-columns:1fr; } }
.hero h1{ margin-bottom:var(--s5); }
.hero .lede{ margin-bottom:var(--s6); }
.ticks{ display:grid; gap:var(--s3); }
.ticks li{ display:flex; gap:var(--s3); align-items:flex-start; font-size:17px; line-height:1.5; color:var(--on-ground); }
.ticks svg{ width:22px; height:22px; flex-shrink:0; margin-top:1px; }
@media (max-width:640px){ .hero__top .btn{ display:none; } }

/* ── Waitlist card (the one form; cloned into the sheet by the script) ──── */
.wl{
  background:var(--card); color:var(--ink); border-radius:var(--r-l);
  padding:clamp(var(--s5), 3vw, var(--s6));
  --fg:var(--ink); --fg-75:var(--ink-75);
}
.band--ink .wl, .hero .wl{ outline:1px solid var(--ink-25); }
.wl__title{ font-family:var(--f-display); font-weight:700; font-size:26px; line-height:1.1; letter-spacing:-.02em; }
.wl__sub{ font-size:15px; color:var(--ink-75); margin-top:var(--s1); }
.wl__head{ margin-bottom:var(--s5); padding-bottom:var(--s4); border-bottom:2px solid var(--ink); }
.wl__q{ margin-bottom:var(--s5); }
.wl__legend{
  display:flex; gap:var(--s2); align-items:baseline; margin-bottom:var(--s3);
  font-family:var(--f-display); font-weight:600; font-size:16px; line-height:1.3; letter-spacing:-.005em; color:var(--ink);
}
.wl__n{ font-size:11px; letter-spacing:.16em; color:var(--ink-75); }

.choices{ display:grid; gap:var(--s2); }
.choice{ position:relative; display:block; cursor:pointer; }
.choice input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.choice__box{
  display:grid; grid-template-columns:auto 1fr; gap:var(--s3); align-items:start;
  padding:14px var(--s4); border:1px solid var(--ink-25); border-radius:var(--r-m);
  transition:border-color var(--t-state) var(--e), box-shadow var(--t-state) var(--e);
}
.choice__dot{
  width:20px; height:20px; margin-top:2px; border-radius:50%; border:1.6px solid var(--ink-75);
  display:grid; place-items:center; transition:border-color var(--t-state) var(--e);
}
.choice__dot::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--ink); transform:scale(0); transition:transform var(--t-state) var(--e); }
.choice__top{ display:flex; flex-wrap:wrap; gap:0 var(--s2); align-items:baseline; }
.choice__top strong{ font-family:var(--f-display); font-weight:600; font-size:16px; }
.choice__top span{ font-size:15px; color:var(--ink-75); }
.choice__note{ display:block; font-size:14.5px; line-height:1.45; color:var(--ink-75); margin-top:2px; }
.choice:hover .choice__box{ border-color:var(--ink-75); }
/* Selected: the border steps to 2px ink (inset, so nothing moves). Weight, not hue. */
.choice input:checked + .choice__box{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.choice input:checked + .choice__box .choice__dot{ border-color:var(--ink); }
.choice input:checked + .choice__box .choice__dot::after{ transform:scale(1); }
.choice input:focus-visible + .choice__box{ outline:2px solid var(--ink); outline-offset:2px; }

.seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.seg__opt{ position:relative; cursor:pointer; }
.seg__opt input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.seg__opt span{
  display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:6px var(--s2);
  border:1px solid var(--ink-25); border-radius:var(--r-s);
  font-family:var(--f-display); font-weight:600; font-size:14.5px; line-height:1.15; color:var(--ink);
  transition:background-color var(--t-state) var(--e), color var(--t-state) var(--e), border-color var(--t-state) var(--e);
}
.seg__opt:hover span{ border-color:var(--ink-75); }
.seg__opt input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--card); }
.seg__opt input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:2px; }

.field{ display:block; margin-bottom:var(--s3); }
.field__label{ display:flex; justify-content:space-between; font-size:14px; font-weight:500; color:var(--ink); margin-bottom:6px; }
.field__label i{ font-style:normal; color:var(--ink-75); }
.field input{
  width:100%; min-height:50px; padding:0 var(--s4); border:1px solid var(--ink-25); border-radius:var(--r-s);
  background:var(--card); color:var(--ink); font-family:var(--f-text); font-weight:500; font-size:17px;
  transition:border-color var(--t-state) var(--e);
}
.field input::placeholder{ color:var(--ink-75); font-weight:400; }
.field input:hover{ border-color:var(--ink-75); }
.field input:focus{ outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* An error is a 3px rule plus the sentence that fixes it. There is no red. */
.wl__error{ margin:0 0 var(--s4); padding-inline-start:var(--s3); border-inline-start:3px solid var(--ink); font-size:15px; line-height:1.5; color:var(--ink); }
.wl__fine{ margin-top:var(--s3); font-size:13px; line-height:1.55; color:var(--ink-75); }
.wl__done{ text-align:start; padding-block:var(--s4); }
.wl__done svg{ width:44px; height:44px; color:var(--ink); margin-bottom:var(--s4); }
.wl__done h3{ font-size:28px; line-height:1.1; letter-spacing:-.02em; margin-bottom:var(--s3); }
.wl__done p{ font-size:16px; line-height:1.6; color:var(--ink-75); }
.is-joined .wl__form{ display:none; }
.is-joined .wl__done{ display:block !important; }

/* ── Benefit strip ──────────────────────────────────────────────────────── */
.perks{ display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--fg); }
@media (max-width:960px){ .perks{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .perks{ grid-template-columns:1fr; } }
.perk{ padding:var(--s5) var(--s5) var(--s5) 0; }
.perk + .perk{ padding-inline-start:var(--s5); border-inline-start:1px solid var(--hair); }
@media (max-width:960px){ .perk:nth-child(3){ border-inline-start:none; padding-inline-start:0; } .perk{ border-bottom:1px solid var(--hair); } }
@media (max-width:560px){ .perk{ border-inline-start:none !important; padding-inline-start:0 !important; } }
.perk svg{ width:28px; height:28px; color:var(--fg); margin-bottom:var(--s4); }
.perk h3{ font-family:var(--f-display); font-weight:700; font-size:20px; line-height:1.2; letter-spacing:-.01em; margin-bottom:var(--s2); }
.perk p{ font-size:15.5px; line-height:1.55; color:var(--fg-75); }

/* ── How it works: real app screens ─────────────────────────────────────── */
.steps{ display:grid; gap:clamp(64px, 9vw, 120px); margin-top:clamp(var(--s7),6vw,80px); }
.step{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s6),6vw,96px); align-items:center; }
.step:nth-child(even) .step__shot{ order:2; }
@media (max-width:860px){
  .step{ grid-template-columns:1fr; gap:var(--s6); }
  .step:nth-child(even) .step__shot{ order:0; }
}
.step__shot{ display:flex; justify-content:center; }
.step__n{
  display:inline-block; font-family:var(--f-display); font-weight:700; font-size:clamp(64px,8vw,112px);
  line-height:.9; letter-spacing:-.02em; margin-bottom:var(--s4);
  /* Outlined in full ink rather than filled in a light tint: nothing below 75 carries text. */
  color:transparent; -webkit-text-stroke:1.5px var(--fg);
}
.step h3{ margin-bottom:var(--s4); }
.step .body{ margin-bottom:var(--s5); }
.step__list{ display:grid; gap:var(--s2); }
.step__list li{ display:flex; gap:var(--s3); font-size:16px; line-height:1.5; color:var(--fg); }
.step__list svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; color:var(--fg); }

/* Device frame. The corner radius belongs to the phone, not to the UI scale. */
.phone{
  position:relative; width:min(310px, 80vw); aspect-ratio:780/1688;
  padding:10px; border-radius:50px; background:var(--ink-900); outline:1px solid var(--line);
}
.phone img{ width:100%; height:100%; object-fit:cover; border-radius:40px; }
.shots-note{ margin-top:clamp(var(--s6),5vw,var(--s7)); font-size:13px; color:var(--fg-75); text-align:center; }

/* ── Seasons ────────────────────────────────────────────────────────────── */
.seasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); margin-top:clamp(var(--s6),5vw,var(--s7)); }
@media (max-width:900px){ .seasons{ grid-template-columns:1fr; } }
.season{
  display:flex; flex-direction:column; padding:clamp(var(--s5),3vw,var(--s6));
  border:1px solid var(--ink-75); border-radius:var(--r-l); color:var(--on-ground);
}
.season--mid{ border:2px solid var(--on-ground); }
.season__tag{ font-family:var(--f-display); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:var(--s5); }
.season__len{ font-family:var(--f-display); font-weight:700; font-size:clamp(36px,4vw,48px); line-height:1; letter-spacing:-.03em; margin-bottom:var(--s2); }
.season__unit{ font-size:16px; margin-bottom:var(--s5); }
.season__meter-label{ font-size:14px; margin-bottom:var(--s5); }
.season__body{ font-size:16px; line-height:1.6; }
.risk-line{
  margin-top:clamp(var(--s6),5vw,var(--s7)); padding-inline-start:var(--s4); border-inline-start:3px solid var(--on-ground);
  font-size:16px; line-height:1.6; max-width:70ch; color:var(--on-ground);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{ margin-top:clamp(var(--s6),5vw,var(--s7)); border-top:2px solid var(--fg); max-width:820px; }
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:var(--s4);
  padding:var(--s5) 0; font-family:var(--f-display); font-weight:600; font-size:clamp(18px,2vw,21px); letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:24px; height:24px; flex-shrink:0; transition:transform var(--t-state) var(--e); }
.faq details[open] summary svg{ transform:rotate(45deg); }
.faq details p{ padding-bottom:var(--s5); font-size:17px; line-height:1.65; color:var(--fg-75); max-width:64ch; }

/* ── Closing CTA ────────────────────────────────────────────────────────── */
.close{ position:relative; isolation:isolate; overflow:hidden; }
.close__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(var(--s6),5vw,var(--s8)); align-items:center; }
@media (max-width:860px){ .close__grid{ grid-template-columns:1fr; } .close .step__shot{ display:none; } }
.close h2{ margin-bottom:var(--s5); max-width:14ch; }
.close .lede{ margin-bottom:var(--s6); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer{ padding-block:var(--s7) var(--s6); border-top:1px solid var(--hair); }
.footer__top{ display:flex; justify-content:space-between; align-items:center; gap:var(--s5); flex-wrap:wrap; margin-bottom:var(--s6); }
.footer__logo{ height:40px; width:auto; }
.footer__logo--rev{ display:none; }
@media (prefers-color-scheme:dark){ .footer__logo{ display:none; } .footer__logo--rev{ display:block; } }
.footer__links{ display:flex; gap:var(--s5); flex-wrap:wrap; }
.footer__links a{ font-size:15px; color:var(--fg-75); text-decoration:none; }
.footer__links a:hover{ color:var(--fg); text-decoration:underline; text-underline-offset:4px; }
.footer__legal{ border-top:1px solid var(--hair); padding-top:var(--s5); display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }
.footer__legal p{ font-size:13px; line-height:1.6; color:var(--fg-75); max-width:80ch; }

/* ── Floating waitlist dock ─────────────────────────────────────────────── */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  background:var(--ground); color:var(--on-ground); border-top:1px solid var(--ink-75);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(0); transition:transform var(--t-screen) var(--e);
}
.dock.is-away{ transform:translateY(110%); }
.dock__inner{ display:flex; align-items:center; gap:var(--s4); min-height:var(--dock-h); }
.dock__mark{ width:40px; height:40px; flex-shrink:0; }
.dock__text{ flex:1; min-width:0; line-height:1.25; }
.dock__text strong{ display:block; font-family:var(--f-display); font-weight:700; font-size:17px; letter-spacing:-.01em; }
.dock__text span{ display:block; font-size:14px; }
@media (max-width:520px){ .dock__text span{ display:none; } .dock__mark{ width:34px; height:34px; } .dock .btn{ padding:0 18px; } }

/* ── Sheet (native <dialog>) ────────────────────────────────────────────── */
.sheet{
  width:min(560px, 100vw); max-width:100vw; max-height:min(92vh, 100dvh); margin:auto; padding:0;
  border:none; border-radius:var(--r-l); background:var(--card); color:var(--ink); overflow:auto;
}
.sheet::backdrop{ background:var(--ink-900); opacity:.72; }
.sheet__bar{
  position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center;
  padding:var(--s4) var(--s5); background:var(--card); border-bottom:1px solid var(--ink-12);
}
.sheet__bar img{ height:30px; width:auto; }
.sheet__logo--rev{ display:none; }
@media (prefers-color-scheme:dark){ .sheet__logo{ display:none; } .sheet__logo--rev{ display:block; } }
.sheet__close{
  width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--ink-25); border-radius:var(--r-s);
  background:var(--card); color:var(--ink); cursor:pointer;
}
.sheet__close:hover{ border-color:var(--ink); }
.sheet__close svg{ width:20px; height:20px; }
.sheet .wl{ border-radius:0; outline:none; }
@media (max-width:600px){
  .sheet{ margin:auto 0 0; width:100vw; border-radius:var(--r-l) var(--r-l) 0 0; max-height:94dvh; }
}

:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }
.hero :focus-visible, .band--ink :focus-visible, .dock :focus-visible{ outline-color:var(--on-ground); }
.wl :focus-visible{ outline-color:var(--ink); }
.skip{ position:absolute; inset-inline-start:var(--s4); top:-120px; z-index:60; background:var(--fg); color:var(--bg); padding:var(--s3) var(--s4); border-radius:var(--r-s); text-decoration:none; }
.skip:focus{ top:var(--s2); }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:1ms !important; }
}

/* ── Tabs: Invest / Partner with us ─────────────────────────────────────── */
.hero__top{ flex-wrap:wrap; row-gap:var(--s3); }
.tabs{ display:flex; gap:var(--s5); margin-inline:auto var(--s5); }
.tabs a{
  position:relative; padding-block:var(--s2); text-decoration:none;
  font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:.03em; color:var(--on-ground);
}
.tabs a::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--on-ground);
  transform:scaleX(0); transition:transform var(--t-state) var(--e);
}
.tabs a:hover::after, .tabs a[aria-current="page"]::after{ transform:scaleX(1); }
@media (max-width:640px){
  .tabs{ order:3; width:100%; margin:0; gap:var(--s5); border-top:1px solid var(--ink-75); padding-top:var(--s2); }
}
.field textarea{
  width:100%; min-height:104px; padding:var(--s3) var(--s4); border:1px solid var(--ink-25); border-radius:var(--r-s);
  background:var(--card); color:var(--ink); font-family:var(--f-text); font-weight:500; font-size:17px; line-height:1.5; resize:vertical;
  transition:border-color var(--t-state) var(--e);
}
.field textarea::placeholder{ color:var(--ink-75); font-weight:400; }
.field textarea:hover{ border-color:var(--ink-75); }
.field textarea:focus{ outline:none; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.pwork{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); margin-top:clamp(var(--s6),5vw,var(--s7)); }
@media (max-width:880px){ .pwork{ grid-template-columns:1fr; gap:var(--s5); } }
.pwork li{ border-top:2px solid var(--on-ground); padding-top:var(--s4); }
.pwork .step__n{ font-size:clamp(48px,5vw,64px); -webkit-text-stroke-color:var(--on-ground); }
.pwork h3{ font-family:var(--f-display); font-weight:700; font-size:22px; line-height:1.2; margin-bottom:var(--s2); }
.pwork p{ font-size:16px; line-height:1.6; color:var(--on-ground); }
.perks--3{ grid-template-columns:repeat(3,1fr); }
.perks--3 .perk:nth-child(3){ border-inline-start:1px solid var(--hair); padding-inline-start:var(--s5); }
@media (max-width:960px){ .perks--3{ grid-template-columns:1fr; } .perks--3 .perk{ border-inline-start:none !important; padding-inline-start:0 !important; } }

/* ── Arabic ─────────────────────────────────────────────────────────────────
   Arabic is not Latin in another font: it needs the looser leading the design
   system specifies, and none of the negative tracking the Latin display sizes
   carry. Both faces already ship Arabic subsets under the same family name. */
[lang="ar"]{ line-height:var(--lh-arabic); }
[lang="ar"] .display,
[lang="ar"] .h-band,
[lang="ar"] .h-item,
[lang="ar"] .wl__title,
[lang="ar"] .season__len,
[lang="ar"] .pwork h3,
[lang="ar"] .perk h3,
[lang="ar"] .faq summary,
[lang="ar"] .dock__text strong,
[lang="ar"] .wl__done h3{ letter-spacing:normal; }
[lang="ar"] .display{ line-height:1.25; }
[lang="ar"] .h-band{ line-height:1.3; }
[lang="ar"] .h-item{ line-height:1.35; }
[lang="ar"] .eyebrow,
[lang="ar"] .wl__n,
[lang="ar"] .btn,
[lang="ar"] .tabs a,
[lang="ar"] .season__tag{ letter-spacing:normal; }
[lang="ar"] .lede,
[lang="ar"] .body,
[lang="ar"] .ticks li,
[lang="ar"] .perk p,
[lang="ar"] .step__list li,
[lang="ar"] .season__body,
[lang="ar"] .risk-line,
[lang="ar"] .faq details p,
[lang="ar"] .pwork p,
[lang="ar"] .choice__note,
[lang="ar"] .wl__sub{ line-height:var(--lh-arabic); }
/* Western digits, as the system requires, even in Arabic text. */
[lang="ar"] .step__n, [lang="ar"] .wl__n, [lang="ar"] .season__len{ direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] .faq details[open] summary svg{ transform:rotate(-45deg); }

.lang{
  font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:.03em;
  color:var(--on-ground); text-decoration:none; padding:var(--s2) var(--s3);
  border:1px solid var(--ink-75); border-radius:var(--r-s); white-space:nowrap;
  transition:border-color var(--t-state) var(--e), background-color var(--t-state) var(--e), color var(--t-state) var(--e);
}
.lang:hover{ background:var(--on-ground); color:var(--ground); border-color:var(--on-ground); }
.hero__top .lang{ margin-inline-end:var(--s3); }
.footer__links .lang{ color:var(--fg-75); border-color:var(--line); }
.footer__links .lang:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
/* Numerals keep LTR order but stay on the reading edge of an RTL card. */
[dir="rtl"] .season__len[dir="ltr"]{ text-align:right; }