/* =============================================================================
   style.css — layout, spacing and components for the SAIS home page (v2).

   Load order: tokens.css (fonts, colour tokens, .t-* type classes) -> this file
   -> effects.css (hover, transitions, appear states).

   Breakpoints (same as the Framer original):
     Desktop  >= 1200px            base rules below (+ a few >= 2400px tweaks)
     Tablet   810px – 1199.98px    @media (min-width: 810px) and (max-width: 1199.98px)
     Phone    < 810px              @media (max-width: 809.98px)
   Each section keeps its own tablet/phone overrides right after its desktop
   rules, so a section can be read top to bottom in one place.

   Measured values for every box are recorded in docs/layout.md.

   v2 (improved version) differences from the one-to-one copy in site/:
     - Tablet is fluid: sections use the desktop widths (no fixed 780px column)
       and their columns adapt (ladder grid, vertical timeline, wrapping cards).
     - Phone: one vertical rhythm (--rhythm-y section padding, --rhythm-gap
       between a heading block and its content), hero paragraph shown, wider
       centred text, stacked Book A Call cards, no empty strips.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   0. Local values used by the layout
   ----------------------------------------------------------------------------- */
:root {
  /* card hairlines (Framer border tokens + owner's custom CSS) */
  --line-hair:    #dedede;   /* dashed card outline, section top rule, nav border */
  --line-strong:  #bdbdbd;   /* dashed outline of feature cards and offer cards */
  --line-sand:    #d9d5cd;   /* dashed outline of white "pads" (Solution prose, ladder, proof) */
  --line-warm:    #e7e5df;   /* solid 1px outline of white cards (Two Ways In, tiers) */
  --line-timeline:#cbc7c4;   /* partner timeline connector + milestone outline */
  --surface-card: #f7f7f7;   /* grey card face */
  --surface-chip: #ededed;   /* grey chip ("MOST START HERE") */
  --band-sand:    #f4f2ec;   /* Two Ways In, How We Work, Book A Call */
  --band-mint:    #f0f7f1;   /* Features, Our Assumptions, active ladder stage */
  --page-bg:      #fbf8f8;   /* Framer page token (phone menu panel, caption fade end) */
  --icon-grey:    #787878;   /* accordion "+" icon */

  /* v2 phone rhythm: section padding top/bottom + heading-to-content gap */
  --rhythm-y:     56px;
  --rhythm-gap:   32px;
  /* v2 phone gutter: 12px page gutter + 16px inside sections = text 28px from
     the screen edge everywhere (same as the nav logo and the hero copy) */
  --gutter-in:    16px;

  /* "+" crosshair used for the eyebrow corner marks and the accordion icon */
  --plus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50.29 8.08v83.84M8.37 50h83.84' stroke='%23000' stroke-width='15.72' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}


/* -----------------------------------------------------------------------------
   1. Base
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sdia-paper, #fafaf9);
  color: var(--sdia-ink, #141512);
  overflow-x: clip;               /* nothing may cause horizontal scroll */
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
/* Framer text boxes wrap long words instead of overflowing (narrow cards on
   tablet/phone depend on this). */
h1, h2, h3, h4, h5, h6, p, li, .point > span, .symptom__text {
  overflow-wrap: break-word;
  word-break: break-word;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }

/* v2: keep short compounds together ("30-minute", "AI-native") */
.nowrap { white-space: nowrap; }

/* v2: below desktop, headings balance and body text avoids one-word last lines */
@media (max-width: 1199.98px) {
  h1, h2 { text-wrap: balance; }
  p, li, .point > span, .acc-q__text, .info-card__title { text-wrap: pretty; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Page column: every section is centred and capped by its own max-width. */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
@media (max-width: 809.98px) {
  .page { padding: 0 12px; }
}

/* ASCII mounts are filled by ascii.js; they never take pointer focus here. */
.ascii { position: relative; }


/* -----------------------------------------------------------------------------
   2. Shared components
   ----------------------------------------------------------------------------- */

/* 2a. Thin rule along the top edge of a section (Framer ::after border-top).
       Drawn as an inset shadow so it does not change the section height. */
.features, .integrations, .tiers, .partner, .faq, .book {
  box-shadow: inset 0 1px 0 var(--line-hair);
}

/* 2b. Tags / chips ---------------------------------------------------------- */
.tag {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 8px;
  white-space: nowrap;
  color: var(--sdia-ink, #141512);
}
.tag > span { color: inherit; }
.tag--black   { background: #000; color: #fff; }                                   /* "Features", "SAIS" */
.tag--outline { border: 1px solid var(--sdia-ink, #141512); border-radius: 3px; }  /* "Enable · Govern", timeline "Stage 1" */
.tag--soft    { border: 1px solid var(--line-sand); border-radius: 3px; color: var(--sdia-ink-muted, #6f7268); } /* card "Stage 1" */
.tag--grey    { background: var(--surface-chip); }                                 /* "MOST START HERE" */

/* "+" corner marks around eyebrow tags (8 x 8, 8px outside each corner) */
.mark {
  position: absolute;
  z-index: 1;
  width: 8px;
  height: 8px;
  background: #000;
  -webkit-mask: var(--plus-icon) center / 100% 100% no-repeat;
          mask: var(--plus-icon) center / 100% 100% no-repeat;
}
.mark--tl { top: -8px;    left: -8px; }
.mark--bl { bottom: -8px; left: -8px; }
.mark--tr { top: -8px;    right: -8px; }
.mark--br { bottom: -8px; right: -8px; }

/* 2c. Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 18px;
  white-space: nowrap;
  cursor: pointer;
}
.btn--green { background: var(--c-green-deep, #14532d); }
.btn--green .t-button { color: #fff; }

/* 2d. Dashed overlay outline (Framer draws card borders as an ::after layer
       inside the padding box, on top of any real border). */
.info-card::after,
.feature::after,
.offer-card::after,
.point::after,
.timeline__card::after,
.acc-item::after,
.book__cal::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed var(--line-hair);
  border-radius: inherit;
  pointer-events: none;
}

/* 2e. Section heading block (eyebrow tag + heading + optional sub line) ----- */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.section-head__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  text-align: center;
}
.section-head__text > * { width: 100%; }
.section-head__sub {
  max-width: 400px;
  color: var(--sdia-ink-muted, #6f7268);
}
/* v2: Two Ways In and the Ladder have no side padding of their own, so their
   heading blocks get the page gutter below desktop (never touch the edge) */
@media (max-width: 1199.98px) {
  .two-ways > .section-head, .ladder > .section-head { padding-inline: 28px; }
}
@media (max-width: 809.98px) {
  .two-ways > .section-head, .ladder > .section-head { padding-inline: var(--gutter-in); }
}

/* 2f. Info card: title + indented description (Two Ways In, ladder, proof) */
.info-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 18px;
  overflow: clip;
  background: var(--surface-card);
}
.info-card__title {
  width: 100%;
  text-align: left;   /* v2: no 2-line clamp (it cut "…chaotically" at 320px) */
}
.info-card__body {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.info-card__indent { flex: none; width: 12px; height: 12px; }
.info-card__body > p {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
  color: var(--sdia-ink-muted, #6f7268);
}
/* white face + warm hairline (Two Ways In) */
.info-card--white {
  background: #fff;
  border: 1px solid var(--line-warm);
  border-radius: 2px;
}

/* 2g. Offer card: details column + bullet points column (How We Work, Book A Call) */
.offer-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;                 /* v2: details + points stack when the card is narrow */
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  padding: 28px;
  overflow: clip;
}
.offer-card::after { border-color: var(--line-strong); }
.offer-card__details {
  flex: 1 1 260px;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.offer-card__head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  overflow: clip;
}
.offer-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.offer-card__text > * { width: 100%; text-align: left; }
.offer-card__text > p { color: var(--sdia-ink-muted, #6f7268); }
.offer-card__action {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
}
.offer-card__points {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: clip;
}
.point {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 18px;
  overflow: clip;
  background: var(--surface-card);
}
.point > span { width: 100%; text-align: left; }

/* Tier variant: white card with a warm hairline (How We Work) */
.offer-card--tier {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line-warm);
  border-radius: 2px;
}

/* 2h. Accordion (Our Assumptions + FAQ). main.js toggles .is-open on .acc-item */
.acc { display: flex; flex-direction: column; width: 100%; }
.acc-item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: clip;
  background: var(--surface-card);
  cursor: pointer;
}
.acc-q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  padding: 28px;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.acc-q__text { flex: 0 1 auto; min-width: 0; text-align: start; }
.acc-icon {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: 16px;
}
.acc-icon::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--icon-grey);
  -webkit-mask: var(--plus-icon) center / 100% 100% no-repeat;
          mask: var(--plus-icon) center / 100% 100% no-repeat;
}
.acc-a {
  display: grid;
  grid-template-rows: 0fr;          /* closed */
}
.acc-item.is-open .acc-a { grid-template-rows: 1fr; }
.acc-item.is-open .acc-q { padding-bottom: 12px; }
.acc-a-inner { min-height: 0; overflow: hidden; }
.acc-a-inner > p {
  padding: 0 28px 28px;
  text-align: left;
  color: var(--sdia-ink-muted, #6f7268);
}


/* -----------------------------------------------------------------------------
   3. NAV (fixed bar + phone menu)
   ----------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  height: 70px;
  background: var(--sdia-band, #12130f);
}
.nav__bar {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 28px;
  overflow: clip;
  background: var(--sdia-band, #12130f);
}

/* language switcher, pinned to the left edge */
.nav__lang {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 28px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__lang-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.nav__lang-face {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 18px;
  line-height: 21px;
  pointer-events: none;
}
.nav__globe { flex: none; margin-inline-end: 10px; }

/* link groups either side of the centred logo */
.nav__links {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  gap: 20px;
}
.nav__links--left  { justify-content: flex-end; }
.nav__links--right { justify-content: flex-start; }
.nav__spacer { flex: none; width: 100px; height: 100%; }

.nav__logo {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
}
.nav__logo img { width: 22px; height: 22px; }

/* bracket links: "[About]" — the brackets are absolutely placed text */
.nav-link {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 18px;
  white-space: nowrap;
  color: var(--sdia-paper, #fafaf9);
}
.nav-link__label { color: inherit; text-align: center; }
.nav-link__bracket {
  position: absolute;
  z-index: 1;
  top: 49%;
  transform: translateY(-50%);
  color: inherit;
  pointer-events: none;
}
.nav-link__bracket--open  { left: 4px; }
.nav-link__bracket--close { right: 4px; }

/* "Get in Touch" pill */
.nav-link--cta {
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--sdia-paper, #fafaf9);
  color: var(--sdia-band, #12130f);
}

/* dark state (default, over the hero): the black logo + globe are inverted */
.nav__logo img, .nav__globe { filter: invert(1); }

/* light state (main.js adds .nav--light after the dark band) */
.nav--light,
.nav--light .nav__bar { background: rgba(250, 250, 249, 0.97); }
.nav--light .nav__bar { box-shadow: inset 1px 0 0 var(--line-hair), inset -1px 0 0 var(--line-hair), inset 0 -1px 0 var(--line-hair); }
.nav--light .nav-link { color: var(--sdia-ink, #141512); }
.nav--light .nav-link--cta { background: #111; color: #fff; }
.nav--light .nav__logo img,
.nav--light .nav__globe { filter: none; }

/* phone menu button (hidden above phone) */
.nav__menu-btn {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: rgba(250, 250, 249, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  color: var(--sdia-paper, #fafaf9);
  cursor: pointer;
}
.nav--light .nav__menu-btn { background: rgba(0, 0, 0, 0.05); color: #000; }
.nav__menu-icon--close { display: none; }
.nav--menu-open .nav__menu-icon--open  { display: none; }
.nav--menu-open .nav__menu-icon--close { display: block; }

/* phone menu panel */
.phone-menu { display: none; }


@media (max-width: 809.98px) {
  .nav__bar { justify-content: space-between; }   /* v2: full width, logo aligned with the page gutter */
  .nav__lang, .nav__links, .nav__spacer { display: none; }
  .nav__logo { position: relative; top: auto; left: auto; transform: none; }
  .nav__menu-btn { display: flex; }

  /* open menu: logo shows un-inverted (as on the reference) */
  .nav--menu-open .nav__logo img { filter: none; }

  .nav--menu-open .phone-menu {
    position: fixed;
    inset: 0;
    z-index: -1;                     /* under the bar, above the page */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 100px 28px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--page-bg);
    box-shadow: inset 1px 0 0 var(--line-hair), inset -1px 0 0 var(--line-hair);
  }
  .phone-menu__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }
  .phone-menu__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }
  .phone-menu__label { color: var(--icon-grey); }
  .phone-menu__links { display: flex; flex-direction: column; width: 100%; }
  .phone-menu__link {
    display: block;
    width: 100%;
    font-family: var(--font-serif-bold, "thmanyah serif display Bold", serif);  /* TODO designer: no type class for 34px serif bold menu links */
    font-weight: 700;
    font-size: 34px;
    line-height: 1.6em;
    letter-spacing: 0.01em;
    color: var(--sdia-ink, #141512);
  }
  .phone-menu__divider { width: 100%; height: 1px; border-top: 1px dashed var(--line-hair); }
  .phone-menu__lang { position: relative; }
  .phone-menu__lang-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .phone-menu__lang-face {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 18px;
    background: var(--page-bg);
    line-height: 21px;
    pointer-events: none;
  }
}


/* -----------------------------------------------------------------------------
   4. HERO
   ----------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 78vh;
  padding: 140px 100px 110px;
  background: var(--sdia-band, #12130f);
}
/* soft green glow behind the copy */
.hero::before {
  content: "";
  position: absolute;
  top: 12%;
  inset-inline-start: 8%;
  width: 44vw;
  height: 44vw;
  max-width: 640px;
  max-height: 640px;
  background: radial-gradient(circle, rgba(22, 163, 74, 0.14), rgba(22, 163, 74, 0.05) 45%, transparent 70%);
  pointer-events: none;
}

/* bar-chart layer along the bottom edge */
.hero__fx {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  aspect-ratio: 2.6;
  pointer-events: none;
}
.hero__bars   { flex: none; width: 100%; height: 100%; }
.hero__accent { position: absolute; z-index: 1; inset: 0; }

/* "we are here." callout pinned over the green bar. The reference sizes it
   with CSS zoom = clamp(1.25, viewport/1000, 2.4) (phone: clamp(.85, vw/410, 1.1))
   and lifts it by round(30 x zoom) zoomed px. Fallback values = 1440 / 1000 / 390. */
.hero__callout {
  position: absolute;
  left: 71.15%;
  top: calc(67.4% - 43px);
  translate: -50% 0;
  zoom: 1.44;
  padding: 3px 10px;
  background: var(--sdia-band, #12130f);   /* v2: bars never show through the label */
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 2px;
  white-space: nowrap;
}
.hero__callout .t-label { color: var(--sdia-green-bright, #22c55e); }
@supports (zoom: calc(100vw / 1000px)) {
  .hero__callout {
    --z: clamp(1.25, 100vw / 1000px, 2.4);
    zoom: var(--z);
    top: calc(67.4% - round(30 * var(--z)) * 1px);
  }
}

.hero__header {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  overflow: clip;
}
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  overflow: clip;
}
.hero__title {
  width: 100%;
  max-width: 640px;
  text-align: start;
  text-wrap: balance;
  color: var(--sdia-paper, #fafaf9);
}
.hero__title-accent { color: var(--c-green, #16a34a); }
.hero__sub {
  width: 100%;
  max-width: 440px;
  text-align: start;
  color: var(--sdia-paper, #fafaf9);
}
.hero__actions { display: flex; align-items: center; gap: 10px; width: 100%; }
.hero .btn--green .t-button { color: var(--sdia-paper, #fafaf9); }

@media (min-width: 2400px) {
  .hero { padding: 140px 280px 110px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .hero { padding: 140px 60px 100px; }
  @supports not (zoom: calc(100vw / 1000px)) {
    .hero__callout { zoom: 1.25; top: calc(67.4% - 38px); }
  }
}
@media (max-width: 809.98px) {
  .hero {
    flex-direction: column;
    width: calc(100% + 24px);
    max-width: none;
    margin-inline: -12px;          /* bleed past the 12px page gutter */
    min-height: 78vh;
    min-height: 78svh;
    padding: 80px 28px 0;          /* v2: copy 28px from the edge, like the nav logo */
  }
  /* v2: the chart sits in the flow under the copy (right-aligned, max 560px so
     the glyphs stay fine). Its empty top 30% tucks under the CTA and is fully
     transparent, so text never sits on bars. */
  .hero__fx {
    --fx-w: min(100vw, 560px);
    position: relative;
    bottom: auto;
    left: auto;
    order: 2;
    align-self: flex-end;
    flex: none;
    width: var(--fx-w);
    margin: calc(var(--fx-w) * -0.415) -28px 0 0;
    aspect-ratio: 0.7222;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.55) 40%, #000 52%);
            mask-image: linear-gradient(to bottom, transparent 0%, transparent 30%, rgba(0, 0, 0, 0.55) 40%, #000 52%);
  }
  .hero__header { order: 1; }
  /* label moved left so it no longer covers the bar to the right of the green one */
  .hero__callout { left: 62%; top: calc(70.2% - 29px); zoom: 0.951; }
  @supports (zoom: calc(100vw / 1000px)) {
    .hero__callout {
      --z: clamp(0.85, 100vw / 410px, 1.1);
      zoom: var(--z);
      top: calc(70.2% - round(30 * var(--z)) * 1px);
    }
  }
  .hero__header { flex: none; width: 100%; gap: 16px; }
  .hero__text { gap: 12px; padding: 11px 0 0; }
  /* v2: the intro paragraph is shown on phones too (comfortable measure) */
  .hero__sub { max-width: 34em; }
}


/* -----------------------------------------------------------------------------
   5. CUSTOMERS (logo ticker)
   ----------------------------------------------------------------------------- */
.customers {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  min-height: 22vh;
  padding: 30px 0;
  background: var(--sdia-band, #12130f);
}
.customers__label {
  width: 100%;
  max-width: 270px;
  text-align: center;
  color: var(--sdia-on-dark, #e7e5df);
}
.ticker {
  position: relative;
  flex: none;
  width: 90%;
  height: 48px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 9.933%, #000 90.48%, transparent 100%);
          mask-image: linear-gradient(270deg, transparent 0%, #000 9.933%, #000 90.48%, transparent 100%);
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 50px;
  width: max-content;
  height: 100%;
}
.ticker-item { flex: none; display: flex; align-items: center; }
.ticker-item img { object-fit: contain; }

@media (max-width: 809.98px) {
  .customers {
    gap: 17px;
    width: calc(100% + 24px);
    max-width: none;
    margin-inline: -12px;
    min-height: 22vh;
    min-height: 22svh;
    padding: 0 12px;
  }
}


/* -----------------------------------------------------------------------------
   6. THE SOLUTION
   ----------------------------------------------------------------------------- */
.solution {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1600px;
  padding: 100px 0;
  overflow: clip;
  background: var(--sdia-paper, #fafaf9);
}
.solution__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 0 28px;
}
.solution__title { width: 100%; max-width: 900px; text-align: center; }
.solution__sub {
  width: 100%;
  max-width: 46%;
  text-align: center;
  text-wrap: balance;
  color: var(--sdia-ink-muted, #6f7268);
}

/* illustration: ASCII palm (left) reaching towards a photo hand (right) */
.solution__art {
  position: relative;
  flex: none;
  width: 100%;
  height: 482px;
  overflow: clip;
}
.solution__left {
  position: absolute;
  z-index: 2;
  top: 51px;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 53%;
  padding-bottom: 100px;
  overflow: clip;
}
.solution__palm { position: relative; width: 100%; }
.solution__palm .ascii { width: 100%; }
.solution__palm-phone { display: none; width: 100%; }

/* "The AI" pin: square head, 50px stem, label */
.ai-tag {
  position: absolute;
  z-index: 1;
  top: 66%;
  left: 45%;
  /* centred on its anchor point like Framer's translate(-50%,-50%); the
     scroll-linked offset is written to the separate `translate` property */
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ai-tag__dot {
  position: absolute;
  z-index: 1;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #000;
  transform: translateX(-50%);
}
.ai-tag__line { width: 1px; height: 50px; overflow: visible; }
.ai-tag__label { white-space: nowrap; text-align: center; color: var(--sdia-ink-muted, #6f7268); }

.solution__right {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46%;
  height: 482px;
  padding-top: 170px;
  overflow: clip;
}
.solution__hand {
  flex: 1 1 0;
  min-width: 0;
  filter: grayscale(1);
  user-select: none;
}
.solution__hand img { width: 100%; height: auto; }

/* problems: ✕ list + boxed prose */
.solution__problems {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: 1150px;
  padding: 44px 28px 0;
}
.symptoms {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}
.symptom {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 4px;
}
.symptom + .symptom { border-top: 1px solid rgba(20, 20, 20, 0.14); }
.symptom__x { flex: none; white-space: pre; color: var(--c-green-deep, #14532d); }
.symptom__text { flex: 1 1 0; min-width: 0; text-align: center; }
.solution__prose {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 28px;
  background: #fff;
  border: 1px dashed var(--line-sand);
  border-radius: 2px;
}
.solution__prose > p {
  width: 100%;
  max-width: 560px;
  text-align: left;
  text-wrap: balance;
  color: var(--sdia-ink-muted, #6f7268);
}
.solution__prose > .solution__closing { color: var(--c-green-deep, #14532d); }

@media (max-width: 1199.98px) {
  .solution__title { text-wrap: balance; }   /* v2: no orphaned accent word */
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  /* v2: the illustration scales with the viewport (482px at 1440) */
  .solution__art, .solution__right { height: 33.5vw; }
  .solution__right { padding-top: 11.8vw; }
  .solution__sub { max-width: 60%; }
}
@media (max-width: 809.98px) {
  .solution { padding: var(--rhythm-y) 0; }
  .solution__intro { padding-inline: var(--gutter-in); }
  .solution__sub { max-width: 90%; }
  /* v2: the illustration scales with the width (values = 390px layout). The
     palm is 64% wide with a 2.32:1 grid, so it ends at ~27.6vw inside its box;
     "The AI" pin hangs just below it (never on the glyphs) and the art box is
     tall enough for the pin's label. */
  .solution__art, .solution__right { height: max(61.5vw, calc(49.4vw + 96px)); }
  .solution__art { overflow: visible; }   /* the pin's slide-in may pass the box edge (photo clips itself) */
  .solution__left { top: 21.8vw; width: 64%; padding-bottom: 12.8vw; overflow: visible; }
  .solution__palm { display: none; }
  .solution__palm-phone { display: block; }
  .ai-tag { top: calc(27.6vw + 10px); left: 30%; transform: translateX(-50%); }
  .solution__right { padding-top: 25.6vw; }
  .solution__problems { flex-direction: column; gap: var(--rhythm-gap); padding: var(--rhythm-gap) var(--gutter-in) 0; }
  .symptoms, .solution__prose { flex: none; width: 100%; }
}


/* -----------------------------------------------------------------------------
   7. TWO WAYS IN
   ----------------------------------------------------------------------------- */
.two-ways {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 50px;
  width: 100%;
  max-width: 1600px;
  padding: 100px 0;
  background: var(--band-sand);
}
.two-ways__cards {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  max-width: 1100px;
  padding: 0 28px;
}
.two-ways__cards > .info-card { flex: 1 1 0; min-width: 0; }

@media (max-width: 809.98px) {
  .two-ways { gap: var(--rhythm-gap); padding: var(--rhythm-y) 0; }
  .two-ways__cards { flex-direction: column; gap: 14px; padding-inline: var(--gutter-in); }
  .two-ways__cards > .info-card { flex: none; width: 100%; }
}


/* -----------------------------------------------------------------------------
   8. ADOPTION LADDER
   ----------------------------------------------------------------------------- */
.ladder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 1600px;
  padding: 100px 0;
  background: var(--sdia-paper, #fafaf9);
}
.ladder__stages {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  max-width: 1280px;
  padding: 0 28px;
}
/* every stage is a white "pad" with a dashed outline and a 38px top band */
.ladder__stage {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  min-height: 240px;
  padding-top: 38px;
  background: #fff;
  border: 1px dashed var(--line-sand);
  border-radius: 2px;
}
/* stage 1: green tint + green outline, "You are here" tag on top */
.ladder__stage--active {
  align-items: center;
  padding-top: 10px;
  background: var(--band-mint);
  border: 0;
  outline: 2px solid var(--c-green, #16a34a);
  outline-offset: -2px;
}
.ladder__stage--active::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(32, 64, 227, 0.45);
  border-radius: inherit;
  pointer-events: none;
}

@media (max-width: 1199.98px) {
  /* v2: five 170px columns are too narrow below 1200 -> a wrapping grid
     (3 + 2 at ~1000, 2 + 2 + 1 at ~810, one column on phones). The 38px empty
     band on top of each pad only made sense in a single row: dropped. */
  .ladder__stages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    align-items: stretch;
  }
  .ladder__stage { min-height: 0; padding-top: 0; }
  .ladder__stage--active { padding-top: 10px; }
  .ladder__stage > .info-card { flex: 1 1 auto; }
}
@media (max-width: 809.98px) {
  .ladder { gap: var(--rhythm-gap); padding: var(--rhythm-y) 0; }
  .ladder__stages { grid-template-columns: 1fr; gap: 14px; padding-inline: var(--gutter-in); }
}


/* -----------------------------------------------------------------------------
   9. FEATURES (10 cards, 2 per row)
   ----------------------------------------------------------------------------- */
.features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1600px;
  padding: 50px 28px;
  background: var(--band-mint);
}
.features__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 900px;
}
.features__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 400px;
}
.feature {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: clip;
}
.feature::after { border-color: var(--line-strong); }

/* ASCII icon: four placements, copied from the Framer containers */
.feature__icon { position: absolute; z-index: 1; }
.feature__icon--a { width: 300px; height: 300px; top: calc(43.25% - 150px); left: calc(50.1124% - 150px); }
.feature__icon--b { width: 300px; height: 300px; top: 23px;                 left: calc(50.1124% - 150px); }
.feature__icon--c { width: 252px; height: 252px; top: calc(45.5% - 126px);  left: calc(47.8652% - 126px); }
.feature__icon--d { width: 322px; height: 322px; top: 11px;                 left: calc(50.1124% - 161px); }

/* caption panel fading up from the bottom edge */
.feature__caption {
  position: absolute;
  z-index: 2;
  left: 1px;
  right: 1px;
  bottom: 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 28px;
  overflow: clip;
  background: linear-gradient(180deg, #fff0 0%, #ffffff30 11%, #fefefe61 23%, #fefefe73 29%, #fefefe9e 45%, #fefefeb8 58%, #fdfdfde3 78%, var(--page-bg) 100%);
}
.feature__caption > * { width: 100%; text-align: start; }
.feature__caption > p { color: var(--sdia-ink-muted, #6f7268); text-wrap: balance; }

@media (max-width: 809.98px) {
  .features { gap: var(--rhythm-gap); padding: var(--rhythm-y) var(--gutter-in); }
  .features__row { flex-direction: column; height: auto; }
  /* v2: icon on top, caption below it in the flow — the text never sits on the
     icon, and the icon scales with the card (max 220px) */
  .feature {
    flex: none;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
  }
  .feature__icon {
    position: relative;
    inset: auto;
    flex: none;
    width: min(220px, 68%);
    height: auto;
    aspect-ratio: 1;
  }
  .feature__caption {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    padding: 12px 24px 24px;
    background: none;
  }
}


/* -----------------------------------------------------------------------------
   10. THE INTEGRATION ECOSYSTEM (hub diagram)
   Each spoke is a 2px bar rotated around its centre; its end dot is counter-
   rotated so the label stays horizontal. --a = spoke angle.
   ----------------------------------------------------------------------------- */
.integrations {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 50px 0;
  overflow: clip;
  background: var(--sdia-paper, #fafaf9);
}
.integrations__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 0 28px;
  text-align: center;
}
.integrations__text > h2 { width: 100%; }
.integrations__sub { width: 100%; max-width: 270px; color: var(--sdia-ink-muted, #6f7268); }

.hub { position: relative; flex: none; display: flex; width: 100%; }
.hub--large { height: 350px; align-items: center; justify-content: flex-start; }
.hub--top, .hub--bottom { display: none; }

.hub__main-line {
  position: relative;
  flex: none;
  width: 40%;
  height: 3px;
  background: var(--c-diagram, #333);
}
.hub__brand { position: absolute; top: 33%; left: 50%; transform: translate(-50%, -50%); }
.hub__node {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sdia-band, #12130f);
}
.hub__spoke {
  position: absolute;
  z-index: 1;
  height: 2px;
  background: var(--sdia-band, #12130f);
  transform: rotate(var(--a));
}
.hub__dot {
  position: absolute;
  top: 50%;
  left: 97%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--sdia-band, #12130f);
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
}
.hub__label {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  white-space: nowrap;
  color: var(--sdia-ink, #141512);   /* v2 (designer): readable; the reference paints them paper-on-paper */
}
.hub__label--chip { padding: 2px 8px; background: #000; color: var(--sdia-paper, #fafaf9); }
.hub__mark { position: absolute; top: -7px; left: -7px; width: 14px; height: 14px; }

/* desktop / tablet spokes */
.hub--large .hub__spoke--4 { --a: 28deg;  top: 64px; left: 14px; width: 150px; }
.hub--large .hub__spoke--3 { --a: 8deg;   top: 31px; left: 23px; width: 150px; }
.hub--large .hub__spoke--2 { --a: -15deg; top: -3px; left: 18px; width: 150px; }
.hub--large .hub__spoke--1 { --a: -47deg; top: -42px; left: -7px; right: -111px; }

@media (max-width: 809.98px) {
  .integrations { gap: 20px; height: auto; padding: 0; }
  .integrations__text { padding-inline: var(--gutter-in); }
  .hub--large { display: none; }
  .hub--top, .hub--bottom { display: flex; flex-direction: column; align-items: center; }
  .hub--top    { height: 270px; justify-content: flex-start; }
  .hub--bottom { height: 292px; justify-content: flex-end; }
  .hub--top .hub__main-line,
  .hub--bottom .hub__main-line { width: 3px; height: 20px; }

  .hub--top .hub__spoke--2    { --a: 78deg;   top: 102px; left: -44px; width: 160px; }
  .hub--top .hub__spoke--1    { --a: 103deg;  top: 47px;  left: -21px; right: -7px; }
  .hub--bottom .hub__spoke--4 { --a: -100deg; bottom: 116px; left: -115px; width: 220px; }
  .hub--bottom .hub__spoke--3 { --a: -66deg;  top: -19px; left: 3px; width: 60px; }
  .hub--top .hub__spoke--2 .hub__label    { top: 242%;  left: -92px; }
  .hub--top .hub__spoke--1 .hub__label    { top: 300%;  left: -101px; }
  .hub--bottom .hub__spoke--4 .hub__dot   { left: 98%; }
  .hub--bottom .hub__spoke--4 .hub__label { top: -150%; left: -85px; }
  .hub--bottom .hub__spoke--3 .hub__label { top: -200%; left: -150px; }
}
@media (max-width: 399.98px) {
  /* v2: the two phone label chips would run past the edge on narrow phones */
  .hub__label--chip { font-size: 15px; }
}


/* -----------------------------------------------------------------------------
   11. SERVICE TIERS ("How We Work") — timeline of three stage cards
   ----------------------------------------------------------------------------- */
.tiers {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1600px;
  padding: 50px 28px;
  scroll-margin-top: 60px;
  background: var(--band-sand);
}
.tiers__title { width: 100%; text-align: center; }
.tiers__steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 900px;
}
.tiers__step {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.tiers__step--2, .tiers__step--3 { padding-top: 125px; }
.tiers__step > .offer-card { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; }
.tiers__chip { position: relative; z-index: 3; }

/* connector lines (gradient from black at the chip to grey at the card) */
.tiers__hline {
  position: relative;
  z-index: 0;
  flex: none;
  width: 100px;
  height: 2px;
  pointer-events: none;
}
.tiers__hline--to-right { background: linear-gradient(270deg, var(--line-strong) 0%, #000 100%); }
.tiers__hline--to-left  { background: linear-gradient(90deg,  var(--line-strong) 0%, #000 100%); }
.tiers__vline {
  position: absolute;
  z-index: 0;
  top: -1px;
  pointer-events: none;
  background: linear-gradient(180deg, var(--line-strong) 0%, #000 100%);
}
.tiers__vline--right { right: 21px; width: 3px; height: 63%; }
.tiers__vline--left  { left: 22px;  width: 4px; height: 62%; }

@media (max-width: 1199.98px) {
  /* v2: connector lines shrink with the viewport so the cards keep their room */
  .tiers__hline { width: clamp(48px, 7vw, 100px); }
}
@media (max-width: 809.98px) {
  .tiers { gap: var(--rhythm-gap); padding: var(--rhythm-y) var(--gutter-in); }
  .tiers__step { flex-direction: column; }
  .tiers__step--2, .tiers__step--3 { padding-top: 20px; }
  .tiers__chip, .tiers__hline, .tiers__vline { display: none; }
  .tiers__step > .offer-card { flex: none; width: 100%; }
  /* v2: phone cards keep the desktop face and ink (the reference's muted
     "Secondary" face put grey text on the green button); they stack via wrap */
  .offer-card--tier { padding: 20px; }
}


/* -----------------------------------------------------------------------------
   12. TESTIMONIALS — partner timeline + "Field results" proof cards
   ----------------------------------------------------------------------------- */
.partner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1600px;
  padding: 50px 28px;
  background: var(--sdia-paper, #fafaf9);
}
.partner__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
.partner__title { width: 100%; text-align: center; }

.timeline {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
}
.timeline::before {                 /* connector line through the dots */
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line-timeline);
}
.timeline__item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.timeline__dot {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: var(--c-green, #16a34a);
}
.timeline__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 190px;
  padding: 20px 16px;
}
.timeline__card::after { border-color: var(--line-timeline); }
.timeline__card > p {
  width: 100%;
  max-width: 380px;
  text-align: center;
  color: var(--sdia-ink-muted, #6f7268);
}
.partner__results {
  width: 100%;
  max-width: 380px;
  text-align: center;
  color: var(--sdia-ink-muted, #6f7268);
}

.proof-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1100px;
  padding: 40px 28px 0;
}
.proof {
  width: 100%;
  min-height: 150px;
  background: #fff;
  border: 1px dashed var(--line-sand);
  border-radius: 2px;
}

@media (max-width: 1199.98px) {
  /* v2: five narrow columns become a vertical timeline (dot + line on the left) */
  .timeline { flex-direction: column; gap: 16px; max-width: 780px; margin-inline: auto; }
  .timeline::before { display: none; }
  .timeline__item { flex: none; width: 100%; flex-direction: row; align-items: flex-start; gap: 16px; }
  .timeline__item:not(:last-child)::after {      /* line from this dot to the next one */
    content: "";
    position: absolute;
    top: 34px;
    bottom: -50px;
    left: 5px;
    width: 2px;
    background: var(--line-timeline);
  }
  .timeline__dot { z-index: 1; margin-top: 28px; }
  .timeline__card { min-height: 0; align-items: flex-start; }
  .timeline__card > p { max-width: none; text-align: left; }
}
@media (max-width: 809.98px) {
  .partner { gap: var(--rhythm-gap); padding: var(--rhythm-y) var(--gutter-in); }
  .proof-list { padding: 8px 0 0; }
}


/* -----------------------------------------------------------------------------
   13. OUR ASSUMPTIONS — mint band, accordion
   ----------------------------------------------------------------------------- */
.assumptions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  width: 100%;
  padding: 90px 280px;
  background: var(--band-mint);
}
.assumptions__eyebrow {
  width: 100%;
  max-width: 380px;
  text-align: start;
  color: var(--sdia-ink-muted, #6f7268);
}
.acc--assumptions { gap: 28px; }

@media (min-width: 810px) and (max-width: 1199.98px) {
  .assumptions { padding: 80px 60px; }
}
@media (max-width: 809.98px) {
  .assumptions { gap: 24px; padding: var(--rhythm-y) var(--gutter-in); }
  .acc--assumptions { gap: 14px; }
}


/* -----------------------------------------------------------------------------
   14. FREQUENTLY ASKED QUESTIONS
   ----------------------------------------------------------------------------- */
.faq {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  max-width: 1600px;
  padding: 50px 28px;
  background: var(--sdia-paper, #fafaf9);
}
.faq__intro {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.faq__intro > * { width: 100%; text-align: start; }
.faq__intro > p { color: var(--sdia-ink-muted, #6f7268); }
.acc--faq { flex: 1 1 0; min-width: 0; gap: 10px; overflow: clip; }

@media (max-width: 809.98px) {
  .faq { flex-direction: column; gap: var(--rhythm-gap); padding: var(--rhythm-y) var(--gutter-in); }
  .faq__intro, .acc--faq { flex: none; width: 100%; }
}


/* -----------------------------------------------------------------------------
   15. BOOK A CALL — two offer cards + Cal.com embed
   ----------------------------------------------------------------------------- */
.book {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 1600px;
  padding: 50px 28px;
  background: var(--band-sand);
}
.book__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
}
.book__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.book__intro > h2 { width: 100%; text-align: start; }
.book__sub { width: 100%; max-width: 380px; text-align: start; color: var(--sdia-ink-muted, #6f7268); }
.book__cards {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
}
.book__cards > .offer-card { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; }
.offer-card .tag--grey { color: var(--sdia-ink, #141512); }

.book__cal {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 575px;
  overflow: clip;
}
.cal-mount { flex: 1 1 0; min-width: 0; height: 100%; }

@media (max-width: 809.98px) {
  .book { gap: var(--rhythm-gap); padding: var(--rhythm-y) var(--gutter-in); }
  .book__content { gap: var(--rhythm-gap); }
  /* v2: one card per row, details above points (no 115px columns) */
  .book__cards { flex-direction: column; gap: 14px; }
  .book__cards > .offer-card { flex: none; width: 100%; padding: 20px; }
}
@media (max-width: 359.98px) {
  /* v2: give the Cal.com month view the full width on very narrow phones */
  .book__cal { width: calc(100% + 2 * var(--gutter-in)); margin-inline: calc(-1 * var(--gutter-in)); }
}


/* -----------------------------------------------------------------------------
   16. SOURCES (footnotes)
   ----------------------------------------------------------------------------- */
.sources {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 3px;
  width: 100%;
  max-width: 1600px;
  padding: 30px 28px 40px;
  background: var(--sdia-paper, #fafaf9);
}
@media (max-width: 809.98px) {
  .sources { padding: 30px var(--gutter-in) 40px; }
}
.sources > p {
  width: 100%;
  max-width: 900px;
  text-align: left;
  color: var(--sdia-ink-muted, #6f7268);
}


/* -----------------------------------------------------------------------------
   17. FOOTER
   The ASCII art (hidden under the content panel, as on the reference) gives
   the footer its height on desktop/tablet: 100% wide, ratio 1440 : 933.
   ----------------------------------------------------------------------------- */
.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  overflow: clip;
  background: var(--sdia-band, #12130f);
  color: var(--sdia-on-dark, #e7e5df);
}
.footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: var(--sdia-band, #12130f);
}
.footer__art {
  width: 100%;
  aspect-ratio: 1440 / 933;
  pointer-events: none;
  user-select: none;
}
.footer__content {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  overflow: clip;
  background: var(--sdia-band, #12130f);
}
.footer__company {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 75%;
  padding: 0 0 44px 28px;
  overflow: clip;
}
.footer__about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.footer__brand { display: inline-flex; align-items: center; gap: 6px; }
.footer__brand > span { color: inherit; white-space: pre; }
.footer__brand > img { width: 24px; height: 24px; }
.footer__tagline { width: 100%; max-width: 270px; text-align: start; color: inherit; }
.footer__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}
.footer__legal--phone { display: none; }
.footer__copy { width: 100%; text-align: start; color: inherit; }
.footer__spacer { flex: none; width: 25%; height: 1px; }
.footer__links {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 50px;
  height: 75%;
  overflow: clip;
}
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: min-content;
  min-width: 150px;
}
.footer__col-title { white-space: nowrap; color: inherit; }

/* footer bracket links "[Home]" */
.footer-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  white-space: nowrap;
  color: var(--sdia-on-dark, #e7e5df);
}
.footer-link > span { color: inherit; }
.footer-link__bracket {
  position: absolute;
  z-index: 1;
  top: 52%;
  transform: translateY(-50%);
  pointer-events: none;
}
.footer-link__bracket--open  { left: 0; }
.footer-link__bracket--close { right: 0; }
/* v2: the original painted "[Contact]" dark on dark (invisible); it now uses
   the same colour as the other footer links (inherited from .footer-link) */

@media (min-width: 810px) and (max-width: 1199.98px) {
  .footer__links { height: auto; padding-bottom: 44px; }
}
@media (max-width: 809.98px) {
  .footer { justify-content: flex-start; padding: 0 12px; }
  .footer__inner { max-width: none; }
  .footer__art { display: none; }
  .footer__content {
    position: relative;
    inset: auto;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
  }
  .footer__company {
    flex: none;
    width: 100%;
    height: auto;
    justify-content: center;
    padding: 50px var(--gutter-in) 0;
  }
  .footer__company .footer__legal { display: none; }
  .footer__spacer { display: none; }
  .footer__links { flex: none; width: 100%; height: auto; padding: 0 var(--gutter-in); }
  .footer__col { width: 100%; }
  .footer__col-title { white-space: normal; width: 100%; }
  .footer__legal--phone { display: flex; }
  .footer__copy--phone { max-width: 270px; color: var(--sdia-on-dark, #e7e5df); }
}


/* -----------------------------------------------------------------------------
   18. Bottom-of-viewport fade (reference "Blur Gradient" overlay)
   ----------------------------------------------------------------------------- */
.page-fade {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(250, 250, 249, 0), rgba(250, 250, 249, 0.9));
  opacity: 0;
}
.nav--light ~ .page-fade { opacity: 1; }
.nav--menu-open ~ .page-fade { opacity: 0; }   /* v2: never wash out the open phone menu */


/* =============================================================================
   v3 — SIMPLE PAGE
   Seven bands instead of fourteen: Hero · Problem · What we build · How we
   work · Field results · Questions · Book a call (+ footer). No logo strip,
   no footnotes, no bottom-of-viewport fade.
   ========================================================================== */

/* no fixed fade over the bottom of the screen (text never washes out) */
.page-fade { display: none; }

/* Problem: the four ✕ lines sit centred under the illustration */
.solution__problems { justify-content: center; }
.symptoms { flex: none; width: 100%; max-width: 620px; }

/* What we build: 6 cards in one grid — 3 across on desktop, 2 below that */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 1100px;
}
.feature { height: 400px; }
@media (max-width: 999.98px) {
  .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809.98px) {
  .features__grid { gap: 8px; }
  .feature { height: auto; padding-top: 14px; }
  .feature__icon { width: min(150px, 84%); }
  .feature__caption { padding: 6px 12px 16px; gap: 3px; }
  .feature__caption > .t-title { font-size: 17px; line-height: 1.2; }
  .feature__caption > .t-body { font-size: 14px; line-height: 1.4; }
}

/* How we work: cards no longer carry their own button */
.offer-card--tier .offer-card__details { justify-content: flex-start; }

/* Field results: a dark band of four numbers (count up on scroll) */
.results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1600px;
  padding: 90px 28px;
  background: var(--sdia-band, #12130f);
  color: var(--sdia-paper, #fafaf9);
}
.results__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.results__head > h2 { color: var(--sdia-paper, #fafaf9); }
.results__sub { color: var(--sdia-on-dark-dim, #b9b7b0); }
.results__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
  max-width: 1100px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(231, 229, 223, 0.22);
}
.stat__num {
  font-family: "thmanyah serif display Regular", serif;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--sdia-paper, #fafaf9);
}
.stat:first-child .stat__num { color: var(--sdia-green-bright, #22c55e); }
.stat__label { color: var(--sdia-on-dark, #e7e5df); text-wrap: balance; }
@media (max-width: 999.98px) {
  .results__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 809.98px) {
  .results { gap: var(--rhythm-gap); padding: var(--rhythm-y) var(--gutter-in); }
  .results__stats { gap: 28px 16px; }
  .stat__num { font-size: 46px; }
}

/* Offer-card points: a plain ruled list with a small green square marker
   instead of grey boxed rows (lighter, shorter on phone) */
.offer-card__points { gap: 0; justify-content: flex-start; }
.point {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  background: none;
  border-top: 1px solid var(--line-warm);
}
.point:last-child { border-bottom: 1px solid var(--line-warm); }
.point::after { content: none; }
.point::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 10px;
  background: var(--c-green, #16a34a);
}
.point > span { flex: 1 1 0; min-width: 0; }
@media (max-width: 809.98px) {
  .point > .t-title-tight { font-size: 16px; }
  .point::before { margin-top: 9px; }
}

/* Field results: the numbers are not boxed cards (override .proof) */
.stat.proof {
  min-height: 0;
  background: none;
  border: 0;
  border-top: 1px solid rgba(231, 229, 223, 0.22);
  border-radius: 0;
}

/* Footer: sized by its content (no ~900px empty dark block at the end of the
   page). The hidden ASCII art that used to set its height is gone. */
.footer__brand > img { filter: invert(1); }      /* the black mark was invisible on dark */
.footer__links { overflow: visible; }
@media (min-width: 810px) {
  .footer__content {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 1600px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 64px 28px 40px;
  }
  .footer__company { flex: 1 1 0; height: auto; gap: 56px; justify-content: flex-start; padding: 0; }
  .footer__spacer { display: none; }
  .footer__links { flex: none; height: auto; padding: 0; flex-direction: row; align-items: flex-start; gap: 72px; }
}
@media (max-width: 809.98px) {
  .footer { padding-bottom: 28px; }
  .footer__company { padding-top: 44px; }
  .footer__links { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 28px 24px; }
  .footer__col { flex: 1 1 140px; width: auto; }
  .footer__legal--phone { width: 100%; }
}

/* Phone: every band runs edge to edge (no 12px page gutter that the dark hero
   had to bleed past) — text keeps its 28px inset through --gutter-in */
@media (max-width: 809.98px) {
  :root { --gutter-in: 28px; }
  .page { padding: 0; }
  .hero { width: 100%; margin-inline: 0; }
  .footer { padding-inline: 0; }
  .book__sub { max-width: 30em; }
}
.book__sub { max-width: 460px; }


/* =============================================================================
   v3.1 — owner round 2
   ========================================================================== */

/* The Solution: the palm's colour change (grey -> blue on scroll/hover) eases */
.solution__art .ascii > * { transition: color 0.6s ease; }

/* Phone: "The AI" pin rests right under the palm instead of ~40px below it */
@media (max-width: 809.98px) {
  .ai-tag { top: calc(27.6vw - 26px); }
}

/* "Most start here": the recommended card — white, solid green outline,
   green hairline tag, its own button to the calendar */
.offer-card--featured { background: #fff; }
.offer-card--featured::after { border: 1.5px solid var(--c-green-deep, #14532d); }
.tag--featured {
  border: 1px solid var(--c-green-deep, #14532d);
  border-radius: 3px;
  color: var(--c-green-deep, #14532d);
}
.tag--featured .t-label { color: inherit; }
.offer-card__cta {
  flex: 1 1 100%;
  min-height: 44px;
  padding-inline: 18px;
  border-radius: 22px;
}
.offer-card__cta:hover { background: var(--c-green-deeper, #0f3d22); }
#calendar { scroll-margin-top: 90px; }

/* Reading progress: a 2px green line across the very top (all sizes) */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  height: 2px;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--c-green, #16a34a);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Phone: section tabs under the nav + a booking button that stays on screen */
.sections-bar, .sticky-cta { display: none; }
@media (max-width: 809.98px) {
  .sections-bar {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    z-index: 9;
    display: flex;
    gap: 22px;
    height: 44px;
    padding: 0 var(--gutter-in);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: var(--sdia-paper, #fafaf9);
    box-shadow: inset 0 -1px 0 var(--line-hair, #dedede);
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.25s ease;
  }
  .sections-bar::-webkit-scrollbar { display: none; }
  .nav--light ~ .sections-bar { opacity: 1; transform: none; pointer-events: auto; }
  .nav--menu-open ~ .sections-bar { opacity: 0; pointer-events: none; }
  .sections-bar a {
    flex: none;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    font-family: var(--font-sans-medium);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    color: var(--sdia-ink-muted, #5d6057);
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .sections-bar a.is-active { color: var(--sdia-ink, #141512); border-bottom-color: var(--c-green, #16a34a); }
  .sections-bar a:last-child { padding-inline-end: var(--gutter-in); }

  .sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    display: block;
    padding: 10px var(--gutter-in) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 250, 249, 0.96);
    box-shadow: inset 0 1px 0 var(--line-hair, #dedede);
    transform: translateY(110%);
    transition: transform 0.35s ease;
  }
  .sticky-cta.is-shown { transform: none; }
  .sticky-cta .btn { display: flex; width: 100%; min-height: 48px; border-radius: 24px; }
  .nav--menu-open ~ .sticky-cta { transform: translateY(110%); }

  /* anchors land below nav + tabs; the footer clears the sticky button */
  main section[id] { scroll-margin-top: 112px; }
  #calendar { scroll-margin-top: 124px; }
  .footer { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .sections-bar, .sticky-cta, .solution__art .ascii > * { transition: none; }
}
@media (min-width: 810px) {
  .offer-card__cta { flex: 0 0 auto; margin-inline-end: auto; }   /* desktop: a normal-width button, left-aligned */
}


/* =============================================================================
   v3.2 — owner round 5 (2026-11-12): 5-logo strip back, free Google booking
   ============================================================================= */
/* Logo strip: compact dark band under the hero (no 22vh minimum). */
.customers { min-height: 0; gap: 22px; padding: 30px 0 38px; }
@media (min-width: 810px) {
  /* 5 logos fit: one still, centred row (main.js §7 skips the drift here) */
  .customers { gap: 26px; padding: 36px 0 52px; }
  .ticker {
    width: auto; height: auto; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .ticker-track {
    transform: none !important;
    flex-wrap: wrap; justify-content: center;
    gap: 24px 72px; width: auto;
  }
  .ticker-item[aria-hidden="true"] { display: none; }
}
@media (max-width: 809.98px) {
  /* v3 bands are full-bleed on phones (no -12px gutter trick) */
  .customers { width: 100%; margin-inline: 0; min-height: 0; padding: 26px 0 32px; }
  .ticker { width: 100%; }
}

/* Booking: placeholder until the owner's link is in data-booking-url */
.book__cal:has(.cal-placeholder) { height: auto; min-height: 280px; }
.cal-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 280px; padding: 40px 28px; text-align: center;
}
.cal-placeholder .t-label { color: var(--c-green-deep, #14532d); }
.cal-placeholder .t-body { max-width: 380px; color: var(--sdia-ink-muted, #5d5f58); }
/* Google Calendar booking page (its own iframe; Google draws the inside) */
.book__cal:has(.cal-frame) { height: 680px; }
.cal-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
@media (max-width: 809.98px) {
  .book__cal:has(.cal-frame) { height: 760px; }
}

/* v3.3 (owner, 2026-11-12): phone booking button floats on its own — no
   paper strip or hairline behind it. The empty band around it lets taps
   through to the page; a soft shadow keeps it readable over any section. */
@media (max-width: 809.98px) {
  .sticky-cta {
    background: none;
    box-shadow: none;
    pointer-events: none;
    padding: 0 var(--gutter-in) calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(140%);
  }
  .sticky-cta.is-shown { transform: none; }
  .nav--menu-open ~ .sticky-cta { transform: translateY(140%); }
  .sticky-cta .btn {
    pointer-events: auto;
    box-shadow: 0 8px 24px rgba(20, 21, 18, 0.22), 0 2px 6px rgba(20, 21, 18, 0.12);
  }
}

/* v3.4 (2026-11-12): "How we work" intro — the ROI-leader line + source */
.tiers__intro { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 640px; text-align: center; }
.tiers__sub { margin: 0; color: var(--sdia-ink-muted, #5d5f58); }
.tiers__source { margin: 0; color: var(--sdia-ink-muted, #5d5f58); opacity: .85; }
.tiers__source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tiers__guide { display: inline-block; margin-left: 6px; color: var(--c-green-deep, #14532d) !important; font-family: var(--font-sans-medium); }
.faq .acc-a a { color: var(--c-green-deep, #14532d); text-underline-offset: 3px; }

/* v3.5 (2026-11-13): footnote "1" on the How-we-work stat; the source lives in the footer */
sup.fn { line-height: 0; margin-left: 1px; }
sup.fn a { font-size: 0.62em; font-family: var(--font-sans-bold); color: var(--c-green-deep, #14532d); text-decoration: none; vertical-align: super; }
.tiers__guide { margin-left: 0; }
.footer__note { max-width: 300px; margin: 6px 0 0; color: var(--sdia-on-dark-dim, #b9b7b0); opacity: .8; line-height: 1.5; }
.footer__note sup { font-size: .8em; }
.footer__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__note:target { opacity: 1; color: var(--sdia-on-dark, #e7e5df); }

/* v3.6 (2026-11-13): the Custom AI Project card can be chosen too — an outline
   button (the workshop keeps the filled green one, so it stays the default) */
.btn--outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sdia-ink, #141512); }
.btn--outline .t-button { color: var(--sdia-ink, #141512); }
.btn--outline:hover { background: var(--sdia-ink, #141512); }
.btn--outline:hover .t-button { color: #fff; }
.offer-card__cta.btn--outline:hover { background: var(--sdia-ink, #141512); }


/* =============================================================================
   v3.7 (2026-11-14) — phone hero: the chart and the "we are here." label sit
   ~70px higher, so the green bar clears Safari's floating bottom toolbar.
   The chart's empty, masked top still tucks under the copy (bars are short on
   the left, where the button is).
   ========================================================================== */
@media (max-width: 809.98px) {
  .hero { padding-top: 72px; }
  .hero__fx { margin-top: calc(var(--fx-w) * -0.57); }
}


/* =============================================================================
   v3.9 (2026-11-14) — language menu: the nav shows only a globe; click (or
   hover with a mouse) slides "EN  AR" out beside it, inside the bar (the bar
   clips anything below 70px, so no dropdown). Current language = hairline
   underline, no fill. main.js §15 toggles .is-open + aria-expanded.
   ========================================================================== */
.lang-menu { gap: 4px; }
.lang-menu__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--sdia-paper, #fafaf9);
  opacity: 0.8;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.35s ease;
}
.lang-menu__btn:hover,
.lang-menu__btn[aria-expanded="true"] { opacity: 1; background: rgba(250, 250, 249, 0.08); }
.lang-menu__btn:focus-visible { outline: 2px solid var(--sdia-green-bright, #22c55e); outline-offset: 2px; }
.lang-menu__opts {
  display: flex;
  align-items: center;
  gap: 2px;
  visibility: hidden;
  opacity: 0;
  translate: -6px 0;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0s linear 0.2s;
}
.lang-menu.is-open .lang-menu__opts { visibility: visible; opacity: 1; translate: 0 0; transition: opacity 0.2s ease, translate 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .lang-menu:hover .lang-menu__opts { visibility: visible; opacity: 1; translate: 0 0; transition: opacity 0.2s ease, translate 0.2s ease; }
}
.lang-menu__opt {
  padding: 4px 7px;
  font-family: var(--font-sans-medium);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.06em;
  color: rgba(250, 250, 249, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}
.lang-menu__opt:hover,
.lang-menu__opt[aria-current="true"] { color: var(--sdia-paper, #fafaf9); }
.lang-menu__opt[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lang-menu__opt:focus-visible { outline: 2px solid var(--sdia-green-bright, #22c55e); outline-offset: 1px; }
/* light nav (after the dark band) */
.nav--light .lang-menu__btn { color: var(--sdia-ink, #141512); }
.nav--light .lang-menu__btn:hover,
.nav--light .lang-menu__btn[aria-expanded="true"] { background: rgba(0, 0, 0, 0.05); }
.nav--light .lang-menu__opt { color: rgba(20, 21, 18, 0.5); }
.nav--light .lang-menu__opt:hover,
.nav--light .lang-menu__opt[aria-current="true"] { color: var(--sdia-ink, #141512); }
@media (prefers-reduced-motion: reduce) {
  .lang-menu__opts, .lang-menu.is-open .lang-menu__opts { transition: none; translate: none; }
}

/* phone menu: one quiet "globe  EN  AR" row under the links */
.phone-menu__langs { display: none; }
@media (max-width: 809.98px) {
  .phone-menu__langs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 18px;
    color: var(--sdia-ink, #141512);
  }
  .phone-menu__globe { margin-inline-end: 6px; opacity: 0.7; }
  .phone-menu__langs .lang-menu__opt { font-size: 15px; padding: 6px 8px; color: rgba(20, 21, 18, 0.5); }
  .phone-menu__langs .lang-menu__opt[aria-current="true"],
  .phone-menu__langs .lang-menu__opt:hover { color: var(--sdia-ink, #141512); }
}

/* v3.9b — phones: the globe also sits in the top bar, just inside the menu
   button; its "EN  AR" options open toward the middle of the bar
   (row-reverse, so it mirrors on the Arabic page too). Hidden while the
   phone menu is open (the menu has its own EN  AR row). */
@media (max-width: 809.98px) {
  .nav__lang.lang-menu {
    display: flex;
    flex-direction: row-reverse;
    left: auto;
    right: 64px;
  }
  .lang-menu__opts { translate: 6px 0; }
  .nav--menu-open .nav__lang.lang-menu { display: none; }
}