/* ===========================================================================
   Lectivo — site styles

   The palette, the wordmark and the Arabic faces are unchanged. What changed
   is the geometry: every edge is now rounded, every surface is a white card
   floating on the beige, and the 1px hairlines that carried the old layout are
   gone — depth comes from soft shadows tinted with the maroon, never grey.

   Two rules from the original brief are deliberately relaxed here, and only
   here: corner radius is no longer zero, and single-hue radial washes are
   allowed as background atmosphere. Everything else holds — seven colours, no
   eighth hue, no glassmorphism, no text shadow, gold never a word on a light
   ground.
   =========================================================================== */

:root {
  /* ---- soft geometry ---- */
  --r-xs:   10px;
  --r-sm:   16px;
  --r-md:   24px;
  --r-lg:   32px;
  --r-xl:   44px;
  --r-2xl:  60px;
  --r-pill: 999px;

  /* ---- elevation: tinted with the brand, so shadows stay warm ---- */
  --sh-1: 0 2px 6px -2px rgba(71,17,29,.07), 0 8px 20px -12px rgba(71,17,29,.13);
  --sh-2: 0 4px 12px -4px rgba(71,17,29,.08), 0 18px 40px -18px rgba(71,17,29,.18);
  --sh-3: 0 8px 20px -6px rgba(71,17,29,.09), 0 36px 72px -30px rgba(71,17,29,.24);
  --sh-brand: 0 6px 16px -6px rgba(110,27,44,.42), 0 18px 34px -18px rgba(110,27,44,.34);
  --ring:  inset 0 0 0 1px rgba(71,17,29,.07);
  --ring-2: inset 0 0 0 1.5px rgba(110,27,44,.16);

  --card:  var(--white);
  --ease-soft: cubic-bezier(.22,.9,.3,1);
}

/* ---------------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------------- */
body {
  background: var(--ground);
  overflow-x: clip;
}

.wrap {
  inline-size: min(1160px, 100% - var(--sp-6));
  margin-inline: auto;
}

/* Soft atmosphere. One hue, very low alpha, sitting behind everything — this
   is what stops the page reading as a grid of boxes. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(10px);
}
body::before {
  inline-size: 78vmax; block-size: 78vmax;
  inset-block-start: -34vmax; inset-inline-end: -26vmax;
  background: radial-gradient(circle at 50% 50%, rgba(110,27,44,.09), rgba(110,27,44,0) 62%);
}
body::after {
  inline-size: 64vmax; block-size: 64vmax;
  inset-block-end: -30vmax; inset-inline-start: -24vmax;
  background: radial-gradient(circle at 50% 50%, rgba(176,141,79,.12), rgba(176,141,79,0) 62%);
}

/* ---------------------------------------------------------------------------
   Progress + sticky head
   --------------------------------------------------------------------------- */
.progress { background: transparent; }
.progress__bar { background: var(--accent); border-end-end-radius: var(--r-pill); }

.sticky-head {
  background: transparent;
  border: 0;
  pointer-events: none;
}
.sticky-head .wrap {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-block: var(--sp-2);
}
.sticky-head__label {
  background: var(--card);
  color: var(--brand);
  padding: 7px 18px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1), var(--ring);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.sticky-head__rule { display: none; }

/* ---------------------------------------------------------------------------
   Header — a floating pill rather than a bar with a rule under it
   --------------------------------------------------------------------------- */
.site-header {
  border: 0;
  background: transparent;
  padding-block: var(--sp-4);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  background: var(--card);
  border-radius: var(--r-pill);
  padding: 12px 14px 12px var(--sp-5);
  box-shadow: var(--sh-1), var(--ring);
}
[dir="ltr"] .site-header__inner { padding: 12px var(--sp-5) 12px 14px; }

/* The lockup is a Latin construction: it never reorders with the page. */
.lockup {
  direction: ltr;
  display: flex; align-items: flex-end; gap: 9px;
}
.lockup__name { display: block; line-height: 0; color: var(--brand); padding-block: 8px; }
.lockup__name svg { inline-size: 104px; block-size: auto; display: block; --logo-accent: var(--accent); }
.lockup__by { display: flex; align-items: center; gap: 5px; padding-block-end: 2px; }
.lockup__byword { font-size: 10px; color: var(--ink-quiet); letter-spacing: .04em; }
.lockup__figo { display: block; line-height: 0; color: var(--ink-quiet); padding: 12px 6px; margin: -12px -6px; }
.lockup__figo svg { inline-size: 46px; block-size: auto; display: block; --logo-accent: var(--accent); }

.lang-toggle {
  border: 0;
  background: var(--ground);
  color: var(--brand);
  border-radius: var(--r-pill);
  padding: 9px 20px;
  font-size: var(--fs-xs);
  font-weight: 700;
  box-shadow: var(--ring);
  transition: background var(--dur-ui) var(--ease-soft), transform var(--dur-ui) var(--ease-soft);
}
.lang-toggle:hover { background: var(--brand); color: var(--on-brand); }
.lang-toggle:active { transform: scale(.96); }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  background: var(--brand);
  color: var(--on-brand);
  border: 0;
  border-radius: var(--r-pill);
  padding: 16px 34px;
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1.2;
  box-shadow: var(--sh-brand);
  transition: transform var(--dur-ui) var(--ease-soft),
              box-shadow var(--dur-ui) var(--ease-soft),
              background var(--dur-ui) var(--ease-soft);
}
.btn:hover { background: var(--maroon-dk); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[aria-disabled="true"] {
  background: var(--beige-dp);
  color: var(--ink-quiet);
  box-shadow: var(--ring);
  cursor: default;
  transform: none;
}
.btn--ghost {
  background: transparent;
  color: var(--brand);
  box-shadow: inset 0 0 0 1.5px rgba(110,27,44,.34);
}
.btn--ghost:hover { background: var(--brand); color: var(--on-brand); box-shadow: var(--sh-brand); }

/* ---------------------------------------------------------------------------
   Section rhythm
   --------------------------------------------------------------------------- */
.section { padding-block: clamp(var(--sp-8), 11vw, 132px); }
/* The shared layer rules a hairline between sections. Depth now comes from the
   cards themselves, so the line would only add an edge back. */
.section + .section { border-block-start: 0; }

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  color: var(--brand);
  text-align: center;
  margin-block-end: var(--sp-4);
  text-wrap: balance;
}
.section__intro {
  text-align: center;
  color: var(--ink-quiet);
  font-size: var(--fs-md);
  max-inline-size: 46ch;
  margin-inline: auto;
  margin-block-end: var(--sp-7);
}
.section__title + .kinds,
.section__title + .whos,
.section__title + .others,
.section__title + .how__grid { margin-block-start: var(--sp-7); }

/* A small gold tick under every section title — the identity's measure mark,
   kept as a mark and never as a word. */
.section__title::after {
  content: "";
  display: block;
  inline-size: 44px; block-size: 3px;
  background: var(--accent);
  border-radius: var(--r-pill);
  margin: var(--sp-4) auto 0;
}
.other__title::after { display: none; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(var(--sp-7), 8vw, var(--sp-9)) clamp(var(--sp-7), 9vw, 116px);
  position: relative;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: center;
}
/* In Arabic the eye starts at the inline start, so the headline takes that
   side and the picture follows — the same reading order the page had before. */
.hero__text   { order: 1; }
.hero__figure { order: 2; position: relative; margin: 0; isolation: isolate; }
/* A soft offset blob behind the picture gives the corner depth without a
   border. Decorative only. */
.hero__figure::before {
  content: "";
  position: absolute;
  inset-block: 6%; inset-inline: -5% 9%;
  background: rgba(110,27,44,.10);
  border-radius: var(--r-2xl);
  z-index: -1;
  transform: rotate(-3deg);
}
.hero__img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-3);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--brand);
  margin-block-end: var(--sp-5);
  text-wrap: balance;
}
.hero__sub {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-quiet);
  max-inline-size: 42ch;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}

/* ---------------------------------------------------------------------------
   Connection graph
   --------------------------------------------------------------------------- */
.graph-section { padding-block: 0 clamp(var(--sp-7), 8vw, var(--sp-9)); }

.graph-figure {
  margin: 0;
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2), var(--ring);
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  max-inline-size: 620px;
  margin-inline: auto;
}
/* The label bar is a fixed left/right reading of the drawing, so it is locked
   to ltr and does not flip with the page. */
.graph-labels {
  direction: ltr;
  display: flex; justify-content: space-between;
  max-inline-size: 340px; margin-inline: auto;
  margin-block-end: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-quiet);
}
.graph-labels span {
  background: var(--ground);
  border-radius: var(--r-pill);
  padding: 5px 14px;
}
.graph { inline-size: 100%; block-size: auto; display: block; }
.g-link { fill: none; stroke: var(--rule-strong); stroke-width: 2.2; stroke-linecap: round; }
.g-node circle { fill: var(--ground); }
.g-student circle { fill: none; stroke: var(--brand); stroke-width: 2; }
.g-tutor circle { fill: var(--brand); }
.g-student .g-glyph { fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.g-tutor .g-glyph { fill: var(--on-brand); stroke: none; }

/* ---------------------------------------------------------------------------
   How it works — the drawing pins, the steps scroll past it
   --------------------------------------------------------------------------- */
.how__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  align-items: start;
}
.how__viz { position: sticky; inset-block-start: clamp(88px, 16vh, 150px); }
.how__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2), var(--ring);
  overflow: hidden;
}
.scene {
  position: absolute;
  inset: 12%;
  inline-size: 76%; block-size: 76%;
  opacity: 0;
  transform: scale(.97);
  transition: opacity var(--dur-swap) var(--ease-soft), transform var(--dur-swap) var(--ease-soft);
}
.scene.is-active { opacity: 1; transform: none; }
.s-line { fill: none; stroke: var(--rule-strong); stroke-width: 2.4; }
.s-fill { fill: var(--ground); stroke: var(--brand); stroke-width: 2.4; }
.s-ground { fill: var(--ground); }
.s-glyph { fill: var(--brand); }
.s-link { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; }
.s-mark { fill: var(--accent); rx: 4; }
.s-mark-dot { fill: var(--accent); }

.how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.how-step {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1), var(--ring);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  transition: transform var(--dur-ui) var(--ease-soft), box-shadow var(--dur-ui) var(--ease-soft);
}
.how-step:hover { transform: translateY(-3px); box-shadow: var(--sh-2), var(--ring); }
.how-step__n {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--r-pill);
  background: var(--ground);
  color: var(--brand);
  padding: 7px 16px;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-block-end: var(--sp-3);
  transition: background var(--dur-ui) var(--ease-soft), color var(--dur-ui) var(--ease-soft);
}
/* The step in view lifts and fills, so the pinned drawing and the text agree. */
.how-step.is-active { box-shadow: var(--sh-2), var(--ring-2); }
.how-step.is-active .how-step__n { background: var(--brand); color: var(--on-brand); }
.how-step__t {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  color: var(--brand);
  margin-block-end: var(--sp-2);
}
.how-step__b { color: var(--ink-quiet); line-height: var(--lh-body); }

/* ---------------------------------------------------------------------------
   Session kinds
   --------------------------------------------------------------------------- */
.kinds {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}
.kind {
  position: relative;
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2), var(--ring);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  display: grid;
  justify-items: center;
  text-align: center;
  transition: transform var(--dur-ui) var(--ease-soft), box-shadow var(--dur-ui) var(--ease-soft);
}
.kind:hover { transform: translateY(-4px); box-shadow: var(--sh-3), var(--ring); }
.kind__img {
  inline-size: 152px; block-size: 152px;
  object-fit: contain;
  border-radius: var(--r-lg);
  background: var(--ground);
  padding: var(--sp-3);
  margin-block-end: var(--sp-4);
}
.kind__n {
  position: absolute;
  inset-block-start: var(--sp-5); inset-inline-end: var(--sp-5);
  inline-size: 40px; block-size: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.kind__t {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  color: var(--brand);
  margin-block-end: var(--sp-3);
  text-wrap: balance;
}
.kind__b { color: var(--ink-quiet); line-height: var(--lh-body); margin-block-end: var(--sp-5); }
.kind__price {
  margin-block-start: auto;
  background: var(--ground);
  border-radius: var(--r-pill);
  padding: 12px 26px;
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  box-shadow: var(--ring);
}
.kind__amount {
  font-family: var(--font-en);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}
.kind__unit { font-size: var(--fs-sm); color: var(--ink-quiet); }
.kind__quoted { font-size: var(--fs-base); color: var(--brand); font-weight: 700; }

/* ---------------------------------------------------------------------------
   Request — the page's one job
   --------------------------------------------------------------------------- */
.request {
  background: var(--card);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-3), var(--ring);
  padding: clamp(var(--sp-5), 4.5vw, var(--sp-8));
  max-inline-size: 760px;
  margin-inline: auto;
}
.request__meter {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-block-end: var(--sp-7);
}
.request__track {
  flex: 1;
  block-size: 8px;
  background: var(--ground);
  border-radius: var(--r-pill);
  overflow: hidden;
}
/* The script publishes progress as --done (0…1). The bar grows from the
   inline start, so the origin flips with the page — a direction lock, not a
   [dir] override of the whole rule. */
.request__fill {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: var(--brand);
  border-radius: var(--r-pill);
  transform: scaleX(var(--done, 0));
  transform-origin: right center;
  transition: transform var(--dur-swap) var(--ease-soft);
}
[dir="ltr"] .request__fill { transform-origin: left center; }

/* An answered question quietly marks itself, so four steps read as progress. */
.q.is-done .q__n { background: var(--brand); color: var(--on-brand); }
.request__count { font-size: var(--fs-xs); color: var(--ink-quiet); white-space: nowrap; }

.qs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.q { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.q__n {
  inline-size: 34px; block-size: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--ground);
  color: var(--brand);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.q__label {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--brand);
  margin-block-end: var(--sp-3);
}
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill {
  border: 0;
  background: var(--ground);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-size: var(--fs-sm);
  line-height: 1.2;
  box-shadow: var(--ring);
  transition: background var(--dur-ui) var(--ease-soft),
              color var(--dur-ui) var(--ease-soft),
              transform var(--dur-ui) var(--ease-soft),
              box-shadow var(--dur-ui) var(--ease-soft);
}
.pill:hover { transform: translateY(-2px); box-shadow: var(--sh-1), var(--ring-2); }
.pill[aria-pressed="true"] {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--sh-brand);
}
.q__extra { margin-block-start: var(--sp-3); }
.input {
  inline-size: 100%;
  max-inline-size: 360px;
  border: 0;
  background: var(--ground);
  color: var(--ink);
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font: inherit;
  font-size: var(--fs-sm);
  box-shadow: var(--ring);
}
.input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.request__send {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid rgba(71,17,29,.08);
  display: grid; justify-items: center; gap: var(--sp-3);
  text-align: center;
}
.request__send .btn { inline-size: min(100%, 360px); }
.request__hint { font-size: var(--fs-xs); color: var(--ink-quiet); }

/* ---------------------------------------------------------------------------
   Who teaches you
   --------------------------------------------------------------------------- */
.whos {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
}
.who-card {
  background: var(--card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1), var(--ring);
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  text-align: center;
  display: grid;
  justify-items: center;
  transition: transform var(--dur-ui) var(--ease-soft), box-shadow var(--dur-ui) var(--ease-soft);
}
.who-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2), var(--ring); }
.who-card__img {
  inline-size: 140px; block-size: 140px;
  object-fit: contain;
  padding: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--ground);
  margin-block-end: var(--sp-4);
}
.who-card__t {
  font-size: var(--fs-md);
  color: var(--brand);
  margin-block-end: var(--sp-2);
}
.who-card__b { color: var(--ink-quiet); line-height: var(--lh-body); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------------
   Figo Flashcards — a different surface, so it reads as an offer
   --------------------------------------------------------------------------- */
.ff { padding-block: clamp(var(--sp-7), 7vw, var(--sp-9)); }
.ff__panel {
  position: relative;
  background: var(--maroon-dk);
  border-radius: var(--r-2xl);
  padding: clamp(var(--sp-6), 5vw, var(--sp-8));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: center;
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.ff__panel::before {
  content: "";
  position: absolute;
  inline-size: 46%; aspect-ratio: 1;
  inset-block-start: -18%; inset-inline-start: -12%;
  background: radial-gradient(circle at 50% 50%, rgba(176,141,79,.20), rgba(176,141,79,0) 65%);
  border-radius: 50%;
  pointer-events: none;
}
/* The Figo Flashcards mark keeps its own green: it is another product's
   identity, and the one place an eighth hue is allowed on this platform. */
.ff__logo {
  inline-size: 104px; block-size: 104px;
  border-radius: 24px;
  display: block;
}
.ff__body { position: relative; }
.ff__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--fs-xs);
  color: var(--accent);
  margin-block-end: var(--sp-3);
}
.ff__eyebrow::before {
  content: "";
  inline-size: 7px; block-size: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: none;
}
.ff__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  color: var(--on-brand);
  margin-block-end: var(--sp-3);
  text-wrap: balance;
}
.ff__text { color: rgba(239,231,218,.82); line-height: var(--lh-body); margin-block-end: var(--sp-3); }
.ff__line { color: var(--accent); font-weight: 700; margin-block-end: var(--sp-5); }
.btn--ff { background: var(--accent); color: var(--maroon-dk); box-shadow: none; }
.btn--ff:hover { background: var(--on-brand); color: var(--maroon-dk); }

/* ---------------------------------------------------------------------------
   Join the team
   --------------------------------------------------------------------------- */
.join__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(var(--sp-6), 5vw, var(--sp-8));
  align-items: center;
}
.join__body   { order: 1; }
.join__figure { order: 2; position: relative; margin: 0; isolation: isolate; }
.join__figure::before {
  content: "";
  position: absolute;
  inset-block: 8%; inset-inline: 7% -6%;
  background: rgba(176,141,79,.16);
  border-radius: var(--r-2xl);
  z-index: -1;
  transform: rotate(3deg);
}
.join__img {
  inline-size: 100%; block-size: auto; display: block;
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-2);
}
.join .section__title { text-align: start; }
.join .section__title::after { margin-inline: 0; }
.join__text { color: var(--ink-quiet); line-height: var(--lh-body); font-size: var(--fs-base); }
.join__cta { margin-block-start: var(--sp-6); }

/* ---------------------------------------------------------------------------
   Other services
   --------------------------------------------------------------------------- */
.other__title {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); flex-wrap: wrap;
}
.other__mark { display: block; line-height: 0; color: var(--brand); padding: 8px 4px; }
.other__mark svg { inline-size: 92px; block-size: auto; display: block; --logo-accent: var(--accent); }

.others {
  list-style: none; margin: var(--sp-7) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.other-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: center;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1), var(--ring);
  padding: var(--sp-5);
  block-size: 100%;
  transition: transform var(--dur-ui) var(--ease-soft), box-shadow var(--dur-ui) var(--ease-soft);
}
a.other-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2), var(--ring); }
.other-card__icon {
  inline-size: 60px; block-size: 60px;
  display: grid; place-items: center;
  background: var(--ground);
  border-radius: var(--r-md);
}
.other-card__icon svg { inline-size: 34px; block-size: 34px; display: block; }
.i-line { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.i-mark { fill: var(--accent); stroke: none; }
.i-mark-s { fill: var(--accent); stroke: none; }
.other-card__body { display: grid; gap: 3px; }
.other-card__t { font-size: var(--fs-base); font-weight: 700; color: var(--brand); }
.other-card__b { font-size: var(--fs-sm); color: var(--ink-quiet); }
.other-card__d { font-size: var(--fs-xs); color: var(--ink-quiet); opacity: .8; font-family: var(--font-en); }
.other-card--soon { opacity: .72; }
.other-card__soon {
  justify-self: start;
  font-size: var(--fs-xs);
  color: var(--brand);
  background: var(--ground);
  border-radius: var(--r-pill);
  padding: 4px 14px;
  margin-block-start: 4px;
}

/* ---------------------------------------------------------------------------
   Footer + WhatsApp bar
   --------------------------------------------------------------------------- */
.site-footer {
  border: 0;
  padding-block: var(--sp-7) calc(var(--sp-9) + 40px);
  text-align: center;
  color: var(--ink-quiet);
  font-size: var(--fs-sm);
}
.site-footer p { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.footer__mark { display: block; line-height: 0; color: var(--ink-quiet); padding: 11px 6px; margin: -11px -6px; }
.footer__mark svg { inline-size: 62px; block-size: auto; display: block; --logo-accent: var(--accent); }

.wa-bar {
  position: fixed;
  inset-block-end: var(--sp-4);
  inset-inline: 0;
  display: flex; justify-content: center;
  z-index: 40;
  pointer-events: none;
  background: none;
  border: 0;
}
.wa-bar__link {
  pointer-events: auto;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r-pill);
  padding: 15px 40px;
  font-weight: 700;
  font-size: var(--fs-sm);
  box-shadow: var(--sh-brand);
  transition: transform var(--dur-ui) var(--ease-soft), background var(--dur-ui) var(--ease-soft);
}
.wa-bar__link:hover { background: var(--maroon-dk); transform: translateY(-2px); }

/* ---------------------------------------------------------------------------
   Reveal — a softer rise than the shared default
   --------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px) scale(.995); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-soft),
              transform var(--dur-reveal) var(--ease-soft);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---------------------------------------------------------------------------
   Narrow
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__grid,
  .how__grid,
  .join__grid { grid-template-columns: 1fr; }
  .hero__figure { order: 2; max-inline-size: 460px; margin-inline: auto; }
  .join__figure { order: 2; max-inline-size: 420px; margin-inline: auto; }
  .how__viz { position: static; max-inline-size: 460px; margin-inline: auto var(--sp-6); margin-inline: auto; }
  .join .section__title,
  .join .section__title::after { text-align: center; margin-inline: auto; }
  .ff__panel { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .ff__body { text-align: center; }
}
@media (max-width: 560px) {
  .wrap { inline-size: min(1160px, 100% - var(--sp-4)); }
  .site-header__inner { padding: 10px 10px 10px var(--sp-4); }
  .kind__n { inset-block-start: var(--sp-4); inset-inline-end: var(--sp-4); }
  .q { grid-template-columns: 1fr; gap: var(--sp-3); }
  .q__n { display: none; }
  .btn { inline-size: 100%; }
  .request__send .btn { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  * { transition: none !important; animation: none !important; }
  .btn:hover, .pill:hover, .kind:hover, .who-card:hover,
  .how-step:hover, a.other-card:hover, .wa-bar__link:hover { transform: none; }
}