/*
 * Homepage-only styles. Loaded AFTER what-we-do/css/style.css, which supplies the
 * tokens (--brand-*, --text-*, --surface*), the header, the buttons and the footer
 * base, so the homepage shares one design system with the sub-pages instead of
 * carrying its own Tailwind bundle.
 */

.font-serif {
  font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* Header: the homepage button label is longer than the sub-pages' "Launch app", so
   keep every button on one line, drop the ghost Install button on narrow screens and
   surface "Install the app" inside the mobile menu instead. */
.btn {
  white-space: nowrap;
}

.nav-mobile-only {
  display: none;
}

/* ---------- Brand curtain ---------- */

html {
  /* What shows behind the curtain during rubber-band overscroll at the very top. */
  background: #4a0000;
}

.stage {
  position: relative;
}

.curtain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at center, #ff3b30 0%, #c90000 45%, #4a0000 100%);
}

.curtain-banner {
  width: min(88vw, 900px);
  height: auto;
  mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 60%, transparent 100%);
}

.curtain-tagline {
  margin: 4px 0 0;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.curtain-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: curtain-nudge 1.8s ease-in-out infinite;
}

.curtain-hint:hover,
.curtain-hint:focus-visible {
  border-color: #fff;
  background: rgba(0, 0, 0, 0.3);
}

@keyframes curtain-nudge {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* The page stays pinned for exactly one viewport of scroll — the curtain's height — then
   scrolls normally. isolation keeps the sticky header's z-index inside the page, below
   the curtain. */
.page {
  position: sticky;
  top: 0;
  z-index: 0;
  isolation: isolate;
  background: var(--surface);
}

.stage-tail {
  height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  .curtain-hint { animation: none; }
}

/* ---------- Hero ---------- */

.hero-home {
  padding: 72px 0 0;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero-copy {
  padding-bottom: 72px;
}

.hero-home h1 {
  font-size: clamp(2.5rem, 4.8vw, 3.9rem);
  line-height: 1.04;
  margin: 0 0 20px;
}

.hero-home .hero-lede {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.12rem;
  max-width: 540px;
}

.hero-note {
  margin: 18px 0 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.hero-note a {
  color: #fff;
}

.proof-row {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.proof-row li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.88);
}

.proof-row li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-gold);
  flex: 0 0 auto;
}

.hero-visual {
  display: flex;
  align-items: center;
  align-self: end;
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  margin-bottom: -150px;
}

.hero-mascot-wrap {
  position: relative;
  flex: 0 0 42%;
  width: 42%;
}

.hero-mascot {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.25));
}

.hero-visual .phone {
  flex: 0 0 58%;
  width: 58%;
  margin: 0;
}

/* ---------- Mascot rig (js/mascot.js) ----------
   The flat .hero-mascot image stays in the flow as the fallback and reserves the square. Once
   every layer has decoded, mascot.js adds .is-live to the wrapper: the image turns invisible
   (visibility, not display, so nothing shifts) and the rig renders over it. Each part is a box
   positioned in percentages of the square so the rig scales with the hero; the forearm is nested
   inside the upper arm so a shoulder rotation carries the hand. Percentages and pivots are
   GENERATED by scripts/build-mascot-layers.py from the master illustration — regenerate them,
   never hand-tune. left/top are deliberately physical, not logical: the artwork must not mirror
   on the Arabic page, only its place in the row does (the flex row handles that). */
.hero-mascot-wrap.is-live .hero-mascot {
  visibility: hidden;
}

/* Longhands rather than the inset shorthand throughout: an engine without `inset` (Safari < 14.1,
   Chrome < 87) would otherwise size every box against 0 x 0 and show nothing once live. */
.mascot-rig {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.25));
}

.mascot-rig[hidden] {
  display: none;
}

.m-torso-group,
.m-head-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.m-part {
  position: absolute;
}

/* Every layer image fills its box — including the head's, which sits one level down inside
   .m-head-inner (the idle counter-tilt wrapper), so this must not be a direct-child selector. */
.mascot-rig img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;      /* a drag must not tear one part off as a ghost image */
  -webkit-user-drag: none;
  user-select: none;
}

/* Generated geometry — scripts/build-mascot-layers.py (frame 768px). */
.m-legs { left: 29.6875%; top: 55.8594%; width: 43.8802%; height: 42.8385%; }
.m-torso { left: 16.1458%; top: 38.0208%; width: 48.6979%; height: 42.5781%; }
.m-head { left: 16.5365%; top: 1.9531%; width: 59.6354%; height: 39.974%; }
.m-head,
.m-head-inner { transform-origin: 57.183% 95.857%; }
.m-eyelids { left: 29.2576%; top: 45.9283%; width: 55.6769%; height: 36.1564%; }
.m-arm-upper { left: 57.6823%; top: 39.4531%; width: 15.2344%; height: 14.8438%; transform-origin: 33.325% 37.744%; }
.m-arm-fore { left: 73.5043%; top: -92.9825%; width: 142.735%; height: 193.8596%; transform-origin: 2.289% 80.459%; }

/* Motion. Once the rig is live the body breathes on a slow 6 s loop — the torso group rises by
   1% of the square and the head counters it by 1° — and blinks are a short opacity fade on the
   closed-eye layer. The wave (2.4 s: the head tilts up to 3° toward the raised hand, the elbow
   lifts 5°, the hand makes two sweeps, then everything is back at rest) plays once as a welcome
   and again each time .is-greeting is re-added by a click; WAVE_MS in mascot.js must match. It
   animates the head and arm while the breath animates the torso group and the inner head
   wrapper, so the two run together with nothing to hand off. The rig is created with
   .is-playing AND .is-frozen, so every animation exists but sits on its first frame (the rest
   pose); .is-frozen (off screen, under the curtain, hidden tab) pauses everything in place.
   Rotation signs: positive is clockwise, so the wave swings the hand between a little inward
   and further outward and never passes behind the head. */
.mascot-rig.is-playing .m-torso-group {
  animation: m-bob 6s ease-in-out infinite;
}

.mascot-rig.is-playing .m-head-inner {
  animation: m-head-idle 6s ease-in-out infinite;
}

.mascot-rig.is-greeting .m-head {
  animation: m-greet-head 2.4s ease-in-out 1 both;
}

.mascot-rig.is-greeting .m-arm-upper {
  animation: m-greet-upper 2.4s ease-in-out 1 both;
}

.mascot-rig.is-greeting .m-arm-fore {
  animation: m-greet-wave 2.4s ease-in-out 1 both;
}

.mascot-rig.is-frozen .m-torso-group,
.mascot-rig.is-frozen .m-head,
.mascot-rig.is-frozen .m-head-inner,
.mascot-rig.is-frozen .m-arm-upper,
.mascot-rig.is-frozen .m-arm-fore {
  animation-play-state: paused;
}

.m-eyelids {
  opacity: 0;
  transition: opacity 130ms ease-in;
}

.mascot-rig.is-blink .m-eyelids {
  opacity: 1;
  transition-duration: 110ms;
}

@keyframes m-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1%); }
}

@keyframes m-head-idle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-1deg); }
}

@keyframes m-greet-head {
  0% { transform: rotate(0deg); }
  22% { transform: rotate(3deg); }
  72% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

@keyframes m-greet-upper {
  0% { transform: rotate(0deg); }
  22% { transform: rotate(-5deg); }
  72% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes m-greet-wave {
  0% { transform: rotate(0deg); }
  16% { transform: rotate(-4deg); }
  36% { transform: rotate(12deg); }
  56% { transform: rotate(-4deg); }
  76% { transform: rotate(12deg); }
  100% { transform: rotate(0deg); }
}

/* The click target: a transparent native button over the whole square, so a click, a tap,
   Enter or Space all replay the wave. It is invisible except for the gold focus ring a keyboard
   user needs, and it only exists while the rig is live. */
.mascot-hit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mascot-hit[hidden] {
  display: none;
}

.mascot-hit:focus {
  outline: none;
}

.mascot-hit:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* Reduced motion (and print): the flat image, full stop. mascot.js also checks the preference
   and reacts to it changing; this rule is the belt to its braces, so the static mascot wins even
   if the script has already swapped the rig in. */
@media print, (prefers-reduced-motion: reduce) {
  .mascot-rig,
  .mascot-hit {
    display: none !important;
  }

  .hero-mascot-wrap.is-live .hero-mascot {
    visibility: visible;
  }
}

.phone {
  width: 300px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 46px;
  background: #0b0b0d;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.phone img {
  width: 100%;
  height: auto; /* style.css sets max-width only, so the height attribute would otherwise win */
  border-radius: 36px;
}

/* ---------- Section scaffolding ---------- */

.kicker {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--brand-red);
  margin: 0 0 12px;
}

.section-head {
  max-width: 680px;
  margin: 0 0 44px;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 14px;
}

.section-head p {
  color: var(--text-muted);
  font-size: 1.08rem;
  margin: 0;
}

/* ---------- How it works ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.step {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.step-index {
  font-weight: 700;
  color: var(--brand-red);
  font-size: 0.85rem;
}

.step h3 {
  margin: 8px 0 6px;
  font-size: 1.1rem;
}

.step p {
  color: var(--text-muted);
  font-size: 0.93rem;
  margin: 0 0 20px;
}

.step .shot {
  margin-top: auto;
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: top;
  border: 6px solid #0b0b0d;
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
}

/* ---------- The engine at work ---------- */

.run {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.run-points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.run-points li {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}

.run-points strong {
  display: block;
  margin-bottom: 4px;
}

.run-points span {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.run-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(22, 32, 46, 0.1);
  padding: 22px 24px;
  font-size: 0.95rem;
}

.run-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
}

.run-card-head .kicker {
  margin: 0;
}

.run-card-head small {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.run-row {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}

.run-k {
  flex: 0 0 92px;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 700;
  padding-top: 3px;
}

.run-v {
  flex: 1;
  min-width: 0;
}

.run-v p {
  margin: 0;
}

.run-quote {
  font-style: italic;
  color: var(--text-dark);
}

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-inline-start: 6px;
}

.badge-top { background: #fdeaec; color: var(--brand-red); }
.badge-high { background: #e6f7ee; color: #0f7a43; }
.badge-med { background: #fff4d6; color: #8a6100; }
.badge-soft { background: var(--surface-alt); color: var(--text-muted); margin-inline-start: 0; }

.cause {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.part {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.part-name {
  font-weight: 600;
}

.part-meta {
  display: block;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.part-price {
  font-weight: 600;
  white-space: nowrap;
}

.tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.tiers span {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tiers span.pick {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}

.run-total {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 1.05rem;
  border-top: 2px solid var(--text-dark);
  padding-top: 12px;
  margin-top: 8px;
}

.run-cta {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--brand-red);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.run-foot {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Built for ---------- */

.who {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.who-card {
  position: relative;
  border-radius: 16px;
  padding: 26px 24px 24px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  background: var(--brand-maroon);
  transition: transform 0.15s ease;
}

.who-card:hover {
  transform: translateY(-2px);
}

.who-owners {
  background:
    radial-gradient(circle at 80% 10%, rgba(200, 32, 46, 0.55), transparent 55%),
    var(--brand-maroon);
}

.who-workshops {
  background:
    radial-gradient(circle at 20% 100%, rgba(212, 165, 32, 0.28), transparent 55%),
    var(--text-dark);
}

.who-fleets {
  background: var(--surface-alt);
  color: var(--text-dark);
  border: 1px solid var(--border);
}

.who-index {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.7;
}

.who-card h3 {
  font-size: 1.9rem;
  margin: auto 0 8px;
}

.who-card p {
  margin: 0;
  opacity: 0.86;
  font-size: 0.95rem;
}

.who-link {
  margin-top: 18px;
  font-weight: 600;
  font-size: 0.9rem;
}

.pill-roadmap {
  position: absolute;
  top: 22px;
  inset-inline-end: 22px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ---------- What you can rely on ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.fact {
  border-top: 2px solid var(--brand-red);
  padding-top: 16px;
}

.fact h3 {
  font-size: 1rem;
  margin: 0 0 6px;
}

.fact p {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0;
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 760px;
}

.faq details {
  border-top: 1px solid var(--border);
}

.faq details:last-child {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--brand-red);
  font-size: 1.4rem;
  line-height: 1;
  flex: 0 0 auto;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p {
  margin: 0 0 20px;
  color: var(--text-muted);
}

.faq details a {
  color: var(--brand-red);
}

/* ---------- Bands ---------- */

.band {
  color: #fff;
  padding: 72px 0;
}

.band-workshop {
  background: var(--text-dark);
}

.band-final {
  background:
    radial-gradient(circle at 15% 20%, rgba(200, 32, 46, 0.3), transparent 45%),
    var(--brand-maroon-800);
  text-align: center;
}

.band-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.band h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 12px;
}

.band p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

.band .kicker {
  color: var(--brand-gold);
}

.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

.band-final .band-actions {
  justify-content: center;
  margin-top: 28px;
}

.btn-white {
  background: #fff;
  color: var(--brand-maroon);
}

.btn-white:hover {
  background: #f1f1f3;
}

.band .btn-ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.band .btn-ghost:hover {
  border-color: #fff;
}

/* ---------- Footer (extends .site-footer) ---------- */

.site-footer .footer-inner {
  text-align: start;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer-brand .brand-logo {
  height: 44px;
  width: auto;
  margin-bottom: 12px;
}

.footer-brand p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  max-width: 300px;
}

.site-footer .footer-social {
  justify-content: flex-start;
  margin: 0;
}

.footer-col h4 {
  color: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 6px 0 12px;
}

.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 6px 0;
  font-size: 0.95rem;
}

.footer-col a:hover {
  color: #fff;
}

.footer-col .muted {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.8rem;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 36px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-copy { padding-bottom: 8px; }
  .hero-visual { margin-bottom: -100px; }
  .phone { width: 270px; }
  .run { grid-template-columns: 1fr; gap: 32px; }
  .who { grid-template-columns: 1fr; }
  .who-card { min-height: 0; }
  .who-card h3 { margin-top: 18px; }
  .band-grid { grid-template-columns: 1fr; }
  .band-actions { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .site-nav a.nav-mobile-only { display: flex; }
}

@media (max-width: 560px) {
  .header-actions .btn-ghost { display: none; }
  .hero-home { padding-top: 56px; }
  .steps { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .run-row { flex-direction: column; gap: 6px; }
  .run-k { flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .who-card { transition: none; }
}

/* ---------- Arabic (/ar/index.html loads ar/css/rtl.css before this file) ----------
   Instrument Serif has no Arabic glyphs, Arabic is cursive so tracking pulls joined letters
   apart, and it needs more leading than Latin at display sizes. rtl.css covers style.css's
   rules; these cover this file's. Match the original selectors' specificity. */
[dir="rtl"] .font-serif {
  font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: normal;
}

[dir="rtl"] .hero-home h1 { line-height: 1.35; }
[dir="rtl"] .section-head h2,
[dir="rtl"] .band h2 { line-height: 1.35; }
[dir="rtl"] .who-card h3 { line-height: 1.4; }

[dir="rtl"] .kicker,
[dir="rtl"] .curtain-tagline,
[dir="rtl"] .run-k,
[dir="rtl"] .badge,
[dir="rtl"] .pill-roadmap,
[dir="rtl"] .footer-col h4,
[dir="rtl"] .step-index,
[dir="rtl"] .who-index {
  letter-spacing: normal;
  text-transform: none;
}

[dir="rtl"] .hero-lede,
[dir="rtl"] .section-head p,
[dir="rtl"] .step p,
[dir="rtl"] .run-points span,
[dir="rtl"] .fact p,
[dir="rtl"] .faq details p,
[dir="rtl"] .who-card p {
  line-height: 1.85;
}