/* ==========================================================================
   Behind Revenue — shared stylesheet
   Colors are temporary until the official Brand Guide arrives:
   change the tokens in :root and the whole site follows.
   ========================================================================== */

:root {
  /* Color: dark teal ground, one cyan signal */
  --depth: #04252a;        /* page background */
  --depth-deep: #021b1f;   /* footer, deepest areas */
  --current: #07333a;      /* surfaces: form, panels */
  --reef: #0b4148;         /* raised / hover surfaces */
  --line: #1c5a61;         /* borders and rules */
  --line-soft: #11454c;    /* quiet dividers */
  --line-strong: #468a90;  /* borders of inputs and choices (3:1 contrast) */
  --foam: #e2f3f1;         /* primary text */
  --mist: #9cc5c2;         /* secondary text */
  --cyan: #43e1ee;         /* signal: CTA, focus, selected, key marks */
  --cyan-soft: rgba(67, 225, 238, 0.1);
  --alert: #ffab9e;        /* validation messages */

  /* Type */
  --font: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --fs-xs: 0.875rem;   /* 14 */
  --fs-sm: 1rem;       /* 16 */
  --fs-md: 1.125rem;   /* 18 body */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --fs-eq: clamp(2.75rem, 1.2rem + 5.4vw, 5.25rem);

  /* Space (8pt base) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-section: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Shape */
  --r-sm: 10px;   /* buttons, inputs */
  --r-md: 14px;   /* options */
  --r-lg: 22px;   /* panels */

  --gutter: 16px;
  --max: 1160px;
  --header-h: 68px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 76px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--depth);
  color: var(--foam);
  font-family: var(--font);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 500; line-height: 1.4; text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
bdi { unicode-bidi: isolate; }

::selection { background: var(--cyan); color: var(--depth); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--cyan);
  color: var(--depth);
  border-radius: var(--r-sm);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.latin { font-feature-settings: "kern"; letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  border: 1px solid var(--cyan);
  border-radius: var(--r-sm);
  background: var(--cyan);
  color: var(--depth);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.btn:hover { background: var(--foam); border-color: var(--foam); }
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 42px; padding: 8px 16px; font-size: var(--fs-xs); }
.btn--lg { min-height: 58px; padding: 14px 32px; font-size: var(--fs-md); }
.btn--ghost {
  background: transparent;
  color: var(--foam);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--reef); border-color: var(--mist); color: var(--foam); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.text-link {
  color: var(--foam);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-color: var(--cyan); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(4, 37, 42, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line-soft); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: var(--header-h);
}

/* Temporary text wordmark until the final logo file arrives */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  direction: ltr;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--foam);
}
.wordmark span:last-child { color: var(--mist); font-weight: 400; }
@media (min-width: 560px) {
  .wordmark { flex-direction: row; gap: 0.32em; font-size: 1.0625rem; }
}

.header-cta__short { display: none; }
@media (max-width: 359px) {
  .header-cta__full { display: none; }
  .header-cta__short { display: inline; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--s-section); }
.section + .section { border-top: 1px solid var(--line-soft); }

.section__title {
  font-size: var(--fs-2xl);
  font-weight: 500;
  max-width: 22ch;
}
.section__lead {
  margin-top: var(--s-3);
  max-width: 60ch;
  color: var(--mist);
  font-size: var(--fs-lg);
  line-height: 1.75;
}

/* Two-column section layout: heading at the start, content at the end */
.split {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 960px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-6);
    align-items: start;
  }
  .split__head { position: sticky; top: calc(var(--header-h) + 40px); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(4rem, 2rem + 8vw, 8.5rem) clamp(4.5rem, 2.5rem + 8vw, 9rem);
  text-align: center;
  isolation: isolate;
}
.hero::before {
  /* one quiet light source behind the equation */
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 70%;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% 30%, rgba(67, 225, 238, 0.07), transparent 70%);
  pointer-events: none;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; }

.equation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
  direction: ltr;
  font-size: var(--fs-eq);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.equation__term--leads { color: var(--mist); }
.equation__term--revenue { color: var(--foam); font-weight: 400; }
.equation__op {
  width: 0.78em;
  height: 0.78em;
  margin-block: 0.06em;
  overflow: visible;
}
.equation__op line { stroke-linecap: round; }
.equation__op .bar { stroke: var(--foam); stroke-width: 7; }
.equation__op .slash {
  stroke: var(--cyan);
  stroke-width: 7;
  stroke-dasharray: 90;
  stroke-dashoffset: 0;
}
@media (min-width: 900px) {
  .equation { flex-direction: row; gap: 0.32em; align-items: center; }
  .equation__op { margin-block: 0; }
}

/* The one orchestrated moment: "=" becomes "≠" */
@media (prefers-reduced-motion: no-preference) {
  .js .equation__op .slash {
    stroke-dashoffset: 90;
    animation: strike 760ms var(--ease) 650ms forwards;
  }
}
@keyframes strike { to { stroke-dashoffset: 0; } }

.hero__title {
  margin-top: var(--s-5);
  max-width: 34ch;
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}
.hero__title span { display: inline-block; } /* keep each clause together when it fits */
.hero__lead {
  margin-top: var(--s-3);
  max-width: 54ch;
  color: var(--mist);
  font-size: var(--fs-md);
  line-height: 1.85;
}
.hero__cta {
  margin-top: var(--s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cta-note {
  color: var(--mist);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

/* ---------- Problems: the client's own words ---------- */
.voices { display: grid; }
.voices li {
  position: relative;
  padding-block: var(--s-3);
  padding-inline-start: 1.4em;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.6;
}
.voices li:last-child { border-bottom: 1px solid var(--line-soft); }
.voices li::before,
.voices li::after { color: var(--cyan); font-weight: 400; }
.voices li::before {
  /* logical opening/closing guillemets: the browser mirrors them in RTL like any Arabic text */
  content: "«";
  position: absolute;
  inset-inline-start: 0;
  top: var(--s-3);
}
.voices li::after { content: "»"; margin-inline-start: 0.12em; }
.problems__turn {
  margin-top: var(--s-5);
  max-width: 52ch;
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: var(--foam);
}
.problems__turn span { color: var(--mist); }

/* ---------- Insight: the backward chain ---------- */
.insight__head { max-width: 760px; }
.chain {
  --node: 18px;
  margin-top: var(--s-6);
  display: grid;
  gap: 0;
  counter-reset: none;
}
.chain__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) 1fr;
  column-gap: var(--s-3);
  padding-bottom: var(--s-4);
}
.chain__item:last-child { padding-bottom: 0; }
.chain__item::before {
  /* connector line */
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--node) / 2 - 1px);
  top: calc(var(--node) + 6px);
  bottom: 4px;
  width: 2px;
  background: var(--line);
}
.chain__item:last-child::before { display: none; }
.chain__dot {
  width: var(--node);
  height: var(--node);
  margin-top: 0.55em;
  border-radius: 50%;
  border: 2px solid var(--mist);
  background: var(--depth);
}
.chain__term {
  display: block;
  direction: ltr;
  text-align: right; /* English term, aligned with the Arabic reading edge */
  unicode-bidi: isolate;
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.chain__cap { display: block; margin-top: 4px; color: var(--mist); font-size: var(--fs-sm); line-height: 1.6; }
.chain__item--origin .chain__dot { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 0 6px var(--cyan-soft); }
.chain__item--origin .chain__term { color: var(--cyan); }
.chain__item--origin .chain__cap { color: var(--foam); }

@media (min-width: 900px) {
  .chain {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .chain__item {
    grid-template-columns: 1fr;
    row-gap: var(--s-3);
    padding-bottom: 0;
  }
  .chain__item::before {
    /* horizontal connector toward the next (backward) step */
    top: calc(0.55em + var(--node) / 2 - 1px);
    bottom: auto;
    inset-inline-start: calc(var(--node) + 10px);
    inset-inline-end: calc(var(--s-3) * -1 + 10px);
    width: auto;
    height: 2px;
  }
  .chain__item:last-child::before { display: none; }
}
.chain-note {
  margin-top: var(--s-5);
  max-width: 60ch;
  color: var(--mist);
  font-size: var(--fs-md);
}

/* ---------- Why: principles + method ---------- */
.principles { display: grid; gap: var(--s-4); }
.principles dt { font-size: var(--fs-lg); font-weight: 500; line-height: 1.5; }
.principles dd { margin-top: var(--s-1); color: var(--mist); max-width: 54ch; }
.principles div { padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }

.method { margin-top: var(--s-6); }
.method__caption { color: var(--mist); font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.method__steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.method__steps li {
  counter-increment: step;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--current);
}
.method__steps li::before {
  content: counter(step);
  color: var(--cyan);
  font-size: var(--fs-xs);
  font-weight: 500;
  min-width: 1ch;
}
.method__steps span { direction: ltr; unicode-bidi: isolate; font-weight: 400; }
@media (min-width: 640px) { .method__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Offering ---------- */
.services { display: grid; }
.services li {
  display: grid;
  gap: 6px;
  padding-block: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.services li:last-child { border-bottom: 1px solid var(--line-soft); }
.services h3 { font-size: var(--fs-lg); font-weight: 500; }
.services p { color: var(--mist); max-width: 56ch; }

.scope-note {
  margin-top: var(--s-4);
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: var(--current);
  border: 1px solid var(--line-soft);
  color: var(--mist);
  font-size: var(--fs-sm);
  line-height: 1.8;
}
.scope-note strong { color: var(--foam); font-weight: 500; }

.bridge {
  margin-top: var(--s-5);
  max-width: 58ch;
  font-size: var(--fs-lg);
  line-height: 1.75;
}

/* ---------- Fit ---------- */
.fit {
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 860px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit__col {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
}
.fit__col--yes { background: var(--current); border-color: var(--line); }
.fit__col h3 { font-size: var(--fs-lg); font-weight: 500; margin-bottom: var(--s-3); }
.fit__list { display: grid; gap: 14px; }
.fit__list li {
  position: relative;
  padding-inline-start: 30px;
  line-height: 1.7;
}
.fit__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 16px;
  height: 16px;
}
.fit__col--yes .fit__list li::before {
  background: no-repeat center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%2343e1ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.fit__col--no { color: var(--mist); }
.fit__col--no h3 { color: var(--foam); }
.fit__col--no .fit__list li::before {
  background: no-repeat center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%239cc5c2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.fit__list strong { color: var(--foam); font-weight: 500; }

/* ---------- Final CTA ---------- */
.closing { text-align: center; }
.closing__inner { display: flex; flex-direction: column; align-items: center; }
.closing .section__title { max-width: 20ch; }
.closing .section__lead { margin-inline: auto; }
.closing__cta { margin-top: var(--s-5); display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--depth-deep);
  border-top: 1px solid var(--line-soft);
  padding-block: var(--s-5);
  color: var(--mist);
  font-size: var(--fs-xs);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

/* ==========================================================================
   Application page
   ========================================================================== */
.apply { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--s-section); }
.apply__wrap { max-width: calc(680px + var(--gutter) * 2); }
.apply__intro { margin-bottom: var(--s-4); }
.apply__intro h1 { font-size: var(--fs-2xl); font-weight: 500; }
.apply__intro p { margin-top: var(--s-2); color: var(--mist); max-width: 52ch; }

.flow {
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
  border-radius: var(--r-lg);
  background: var(--current);
  border: 1px solid var(--line);
}
.flow__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  color: var(--mist);
  font-size: var(--fs-xs);
}
.progress {
  margin-top: 10px;
  height: 4px;
  border-radius: 4px;
  background: var(--line-soft);
  overflow: hidden;
}
.progress__fill {
  /* in RTL a block with a set width sits at the right edge, so it fills right-to-left */
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: var(--cyan);
  transition: width 360ms var(--ease);
}

.step { margin-top: var(--s-4); }
.step__q {
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.5;
}
.step__q:focus { outline: none; }
.step__hint { margin-top: 6px; color: var(--mist); font-size: var(--fs-sm); }

.options { margin-top: var(--s-3); display: grid; gap: 10px; }
.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--depth);
  text-align: start;
  line-height: 1.55;
  cursor: pointer;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.option:hover { border-color: var(--mist); }
.option__text { display: grid; gap: 2px; }
.option__label { font-weight: 400; }
.option__help { color: var(--mist); font-size: var(--fs-xs); }
.option__mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition: border-color 140ms var(--ease), background-color 140ms var(--ease);
}
.options--multi .option__mark { border-radius: 6px; }
.option[aria-pressed="true"] {
  border-color: var(--cyan);
  background: var(--cyan-soft);
}
.option[aria-pressed="true"] .option__mark {
  border-color: var(--cyan);
  background: var(--cyan);
}
.option[aria-pressed="true"] .option__mark::after {
  /* a check mark is not mirrored in RTL, so physical sides on purpose */
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--depth);
  border-bottom: 2px solid var(--depth);
  transform: translateY(-1px) rotate(-45deg);
}
.option[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.option[aria-disabled="true"]:hover { border-color: var(--line-strong); }

.fields { margin-top: var(--s-3); }
.field { display: grid; gap: 8px; margin-top: var(--s-3); }
.field:first-child { margin-top: 0; }
.field label { font-size: var(--fs-sm); font-weight: 400; }
.field label small { color: var(--mist); font-size: var(--fs-xs); }
.input {
  width: 100%;
  min-height: 54px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--depth);
  color: var(--foam);
  font-size: 1rem; /* 16px keeps iOS from zooming */
  font-weight: 400;
  transition: border-color 140ms var(--ease);
}
.input::placeholder { color: #6f9896; opacity: 1; }
.input:hover { border-color: var(--mist); }
.input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); }
.input[dir="ltr"] { text-align: right; } /* LTR content, aligned with the Arabic labels */
.input[aria-invalid="true"] { border-color: var(--alert); }
.field__error { color: var(--alert); font-size: var(--fs-xs); min-height: 0; }
.field__error:empty { display: none; }
.other-field { margin-top: var(--s-2); }

.flow__nav {
  margin-top: var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.flow__nav .btn--primary-slot { margin-inline-start: auto; }
.flow__privacy { margin-top: var(--s-3); color: var(--mist); font-size: var(--fs-xs); line-height: 1.7; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--mist);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.back-btn:hover { color: var(--foam); }
.back-btn svg { width: 16px; height: 16px; }
[dir="rtl"] .back-btn svg { transform: scaleX(-1); }

/* Result screens */
.result { text-align: start; }
.result__mark {
  width: 48px;
  height: 48px;
  margin-bottom: var(--s-3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
}
.result__mark svg { width: 22px; height: 22px; }
.result__mark--ok { border-color: var(--cyan); background: var(--cyan-soft); }
.result h2 { font-size: var(--fs-xl); font-weight: 500; line-height: 1.5; }
.result p { margin-top: var(--s-2); color: var(--mist); max-width: 54ch; }
.result p strong, .result p bdi { color: var(--foam); font-weight: 400; }
.result__actions { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: 12px; }
.cal-inline {
  margin-top: var(--s-4);
  min-height: 560px;
  width: 100%;
  overflow: auto;
  border-radius: var(--r-md);
}
.cal-fallback { margin-top: var(--s-3); font-size: var(--fs-sm); }

.noscript-note {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--mist);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================================
   Sales page refresh — growth marketing positioning (2026-10)
   ======================================================================== */
:root { --s-section: clamp(4.5rem, 6.2vw, 7rem); }
.hero--business { padding-block: clamp(4.4rem,8vw,7.2rem) clamp(5rem,8vw,7rem); }
.hero--business .equation { font-size: clamp(2rem, 5vw, 4.85rem); }
.hero--business .hero__title { max-width: 27ch; font-size: clamp(2rem,3.5vw,3.35rem); line-height: 1.52; margin-top: clamp(2.25rem,4vw,3.4rem); }
.hero--business .hero__lead { max-width: 55ch; font-size: clamp(1rem,1.15vw,1.16rem); line-height: 1.95; margin-top: 1.4rem; }
.hero__statement { max-width: 57ch; line-height: 1.95; margin-top: 1rem; font-size: clamp(1rem,1.1vw,1.1rem); font-weight: 400; }
.hero--business .hero__cta { margin-top: 2rem; }
.hero--business .hero__cta .btn { min-width: 255px; }
.accent { color: var(--cyan); }
.section--shade { background: #052b30; }
.section-center { max-width: 960px; }
.section-kicker { color: var(--cyan); font-size: .75rem; font-weight: 500; letter-spacing: .12em; line-height: 1.5; margin-bottom: 1rem; text-align: center; direction: ltr; }
.section-center > .section__title { max-width: 28ch; margin-inline: auto; text-align: center; font-size: clamp(1.75rem,2.8vw,2.65rem); line-height: 1.57; }
.section-center > .section__lead { max-width: 59ch; margin: 1rem auto 0; font-size: clamp(.98rem,1.18vw,1.12rem); line-height: 1.95; text-align: center; }
.numbered-list { max-width: 810px; margin: 3.25rem auto 0; border-top: 1px solid var(--line); }
.numbered-item { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 1.4rem; padding: 1.65rem .2rem; border-bottom: 1px solid var(--line); }
.numbered-item__num { color: var(--cyan); font-weight: 400; font-size: 1rem; letter-spacing: .02em; direction: ltr; text-align: right; padding-top: .25rem; }
.numbered-item h3 { font-size: clamp(1.04rem,1.4vw,1.26rem); line-height: 1.65; }
.numbered-item p { font-size: clamp(.95rem,1.08vw,1.06rem); line-height: 1.9; margin-top: .4rem; color: var(--mist); max-width: 60ch; }
.section-conclusion { max-width: 810px; padding: 2rem 1rem 0; margin: 2rem auto 0; text-align: center; line-height: 1.85; }
.section-conclusion p { color: var(--foam); font-size: 1.05rem; }
.section-conclusion strong { display: block; color: var(--cyan); font-weight: 500; margin-top: .45rem; font-size: clamp(1.08rem,1.5vw,1.4rem); }
.offer-panel { margin-top: 3.5rem; border: 1px solid var(--line); background: #07353a; border-radius: var(--r-lg); overflow: hidden; }
.offer-panel__top { padding: clamp(1.6rem,3vw,2.9rem); border-bottom: 1px solid var(--line); }
.offer-panel__tag { direction: ltr; display: inline-block; font-size: .7rem; letter-spacing: .14em; padding: 7px 10px; background: rgba(67,225,238,.1); color: var(--cyan); border: 1px solid #307980; border-radius: 6px; }
.offer-panel__top h3 { font-size: clamp(1.5rem,2.25vw,2.2rem); direction: ltr; text-align: right; margin-top: 1rem; letter-spacing: -.025em; }
.offer-panel__top p { color: var(--mist); margin-top: .6rem; }
.offer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.offer-grid > div { padding: clamp(1.3rem,2.2vw,2.4rem); min-height: 144px; }
.offer-grid > div:nth-child(odd) { border-left: 1px solid var(--line-soft); }
.offer-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
.offer-index { color: var(--cyan); font-size: .8rem; direction: ltr; display: block; text-align: right; }
.offer-grid h4 { font-size: 1.15rem; font-weight: 500; line-height: 1.5; direction: ltr; text-align: right; margin: .55rem 0 .35rem; }
.offer-grid p { color: var(--mist); font-size: .94rem; line-height: 1.8; }
.offer-scope { background: #052a30; padding: 1.1rem 2rem; font-size: .86rem; color: var(--mist); border-top: 1px solid var(--line-soft); }
.case-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-top: 3.2rem; }
.case-card { border: 1px solid var(--line); background: var(--current); border-radius: var(--r-lg); padding: clamp(1.3rem,2.4vw,2.4rem); display: flex; flex-direction: column; gap: .6rem; }
.case-card__eyebrow { color: var(--cyan); font-size: .75rem; letter-spacing: .06em; direction: ltr; text-align: right; margin-bottom: 1rem; }
.case-card__eyebrow span { opacity: .8; }
.case-card h3 { font-size: clamp(1.2rem,1.55vw,1.48rem); margin-bottom: .65rem; }
.case-card > p { color: var(--mist); font-size: .91rem; line-height: 1.88; }
.case-card__label { color: var(--foam)!important; font-weight: 500; padding-top: .8rem; }
.case-stats { display:grid; grid-template-columns:repeat(2,1fr); gap: 8px; margin-top: 1.2rem; }
.case-stats span { border:1px solid #205b63; border-radius:9px; padding: .7rem; background:#052b31; text-align:center; }
.case-stats strong { display:block; color:var(--cyan); font-size:clamp(1.2rem,2vw,1.75rem); line-height:1.4; font-weight:500; }
.case-stats small { display:block; direction:ltr; color:var(--mist); font-size:.72rem; }
.case-card__foot { font-size:.75rem!important; color:#a1babc!important; margin-top:auto; padding-top:1rem; }
.case-takeaway { background:#052b31; border:1px solid #205b63; border-radius:10px; color:var(--cyan); padding:1.1rem; line-height:1.8; font-weight:400; margin-top:1rem; }
#fit .fit { max-width: 920px; margin-inline:auto; }
#fit .fit__col { padding:clamp(1.4rem,2.5vw,2.6rem); }
.fit__end { text-align:center; color:var(--foam); margin-top:2.5rem; font-size:1.08rem; }
.section--application { background:radial-gradient(ellipse at 50% 5%,rgba(67,225,238,.06),transparent 42%),var(--depth); }
.application-shell { max-width: 795px; }
.application-shell .apply__intro { text-align:center; margin-bottom:2.4rem; }
.application-shell .apply__intro .section__title { margin-inline:auto; text-align:center; max-width:25ch; font-size: clamp(1.8rem,3vw,2.7rem); }
.application-shell .apply__intro .section__lead { text-align:center; max-width:55ch; margin:1rem auto 0; font-size:1.04rem; }
.application-shell .flow { box-shadow:0 20px 65px rgba(0,0,0,.16); }
.application-shell .flow__meta span:last-child { direction:ltr; font-size:.71rem; letter-spacing:.04em; }
.application-smallprint { text-align:center; color:var(--mist); font-size:.8rem; margin-top:1.25rem; max-width:60ch; margin-inline:auto; }
@media (max-width:680px) {
 .hero--business { padding-top:4rem; padding-bottom:5rem; }
 .hero--business .equation { font-size: clamp(2.2rem,10.5vw,3.5rem); }
 .hero--business .hero__title { font-size:clamp(1.7rem,6.65vw,2.35rem); max-width:20ch; margin-top:2.1rem; }
 .hero--business .hero__lead, .hero__statement { max-width:38ch; font-size:.99rem; }
 .section-center > .section__title { font-size:clamp(1.65rem,7.1vw,2.1rem); }
 .section-center > .section__lead { font-size:1rem; }
 .numbered-list { margin-top:2.2rem; }
 .numbered-item { grid-template-columns: 31px minmax(0,1fr); gap: .8rem; padding-block:1.35rem; }
 .numbered-item h3 { font-size:1.06rem; }
 .numbered-item p { font-size:.94rem; }
 .offer-grid { grid-template-columns:1fr; }
 .offer-grid > div { min-height:0; border-bottom:1px solid var(--line-soft)!important; border-left:0!important; padding:1.3rem; }
 .offer-panel__top { padding:1.4rem; }
 .offer-scope { padding:1rem 1.4rem; }
 .case-grid { grid-template-columns:1fr; }
 .fit__end { font-size:1rem; }
 .application-shell .flow__meta span:last-child { display:none; }
}
/* Ensure the core ≠ brand statement is never briefly misread as an = sign. */
.js .equation__op .slash { animation: none !important; stroke-dashoffset: 0 !important; }

/* ==========================================================================
   PREMIUM SECTION CHROMATICS — 2026 Behind Revenue
   The section hues form an intentional editorial rhythm. Each tone is paired
   with legible text, muted copy, restrained numbered items, and matching panels.
   ========================================================================== */

/* Shared premium editorial system */
.hero--business {
  background: linear-gradient(142deg,#061c24 0%,#082b2f 68%,#0c3032 100%);
  overflow: hidden;
}
.hero--business::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(65% 62% at 50% 12%,rgba(81,226,224,.09),transparent 72%);
}
.section {
  position:relative;
  isolation:isolate;
  border-top:0!important;
  background:var(--section-bg,var(--depth));
  color:var(--section-text,var(--foam));
  --section-text:#e2f3f1;
  --section-muted:#a6c5c3;
  --section-rule:rgba(175,234,231,.18);
  --section-accent:#43e1ee;
  --section-panel:rgba(255,255,255,.035);
  --section-panel-edge:rgba(164,226,220,.2);
}
.section::before {
  content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--section-rule),transparent);
  pointer-events:none;
}
.section--paper {
  --section-bg:#e9f1ec;--section-text:#153537;--section-muted:#45666a;
  --section-rule:rgba(28,80,83,.20);--section-accent:#007d81;
  --section-panel:rgba(255,255,255,.54);--section-panel-edge:rgba(12,94,98,.15);
}
.section--forest {
  --section-bg:#0d3639;--section-text:#edf9f4;--section-muted:#aed0ca;
  --section-rule:rgba(135,218,209,.22);--section-accent:#64e7df;
  --section-panel:rgba(7,30,33,.30);--section-panel-edge:rgba(129,225,217,.24);
}
.section--glacier {
  --section-bg:#d8ece8;--section-text:#12373c;--section-muted:#43686b;
  --section-rule:rgba(24,84,88,.22);--section-accent:#067a7e;
  --section-panel:rgba(255,255,255,.45);--section-panel-edge:rgba(32,114,115,.20);
}
.section--pine {
  --section-bg:#153c3a;--section-text:#f0faf4;--section-muted:#b6d4cb;
  --section-rule:rgba(157,218,207,.20);--section-accent:#7deade;
  --section-panel:rgba(5,29,28,.29);--section-panel-edge:rgba(162,224,212,.19);
}
.section--linen {
  --section-bg:#f1ede4;--section-text:#253b3c;--section-muted:#5c7172;
  --section-rule:rgba(34,77,80,.21);--section-accent:#067f81;
  --section-panel:#f9f9f4;--section-panel-edge:rgba(45,94,95,.19);
}
.section--midnight {
  --section-bg:#092933;--section-text:#f1fbf8;--section-muted:#b6ccd0;
  --section-rule:rgba(127,206,212,.25);--section-accent:#6de6e4;
  --section-panel:#103840;--section-panel-edge:rgba(128,216,215,.24);
}
.section--sage {
  --section-bg:#e1ede4;--section-text:#1c403e;--section-muted:#50706c;
  --section-rule:rgba(39,91,82,.22);--section-accent:#007e78;
  --section-panel:#f8f9f3;--section-panel-edge:rgba(37,106,96,.18);
}
.section--application {
  --section-bg:#061f28;--section-text:#edfafa;--section-muted:#accbcc;
  --section-rule:rgba(156,233,232,.20);--section-accent:#43e1ee;
  --section-panel:#0a353e;--section-panel-edge:rgba(140,225,225,.3);
  background:radial-gradient(ellipse at 50% 0%,rgba(67,225,238,.075),transparent 39%),var(--section-bg);
}
.section .section-kicker { color:var(--section-accent);letter-spacing:.16em;font-size:.76rem; }
.section .section__title { color:var(--section-text); font-weight:500; }
.section .section__title .accent { color:var(--section-accent); }
.section .section__lead { color:var(--section-muted); }
.section .numbered-list {
  border-top:1px solid var(--section-rule);max-width:825px;
}
.section .numbered-item {border-bottom:1px solid var(--section-rule);grid-template-columns:64px minmax(0,1fr);gap:1.35rem;padding:1.75rem .15rem;}
.section .numbered-item__num {
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--section-accent);background:var(--section-panel);
  border:1px solid var(--section-panel-edge);
  height:44px;width:52px;border-radius:12px;
  font:500 .83rem/1 var(--font);font-variant-numeric:tabular-nums;
  letter-spacing:.025em;padding:0;margin-top:.08rem;
  box-shadow:0 6px 14px rgba(0,0,0,.022);
}
.section .numbered-item h3 { color:var(--section-text); }
.section .numbered-item p {color:var(--section-muted);}
.section .section-conclusion {
  border-radius:18px;
  border:1px solid var(--section-panel-edge);
  background:var(--section-panel);
  padding:1.8rem 2.2rem;margin-top:2.7rem;
}
.section .section-conclusion p {color:var(--section-text);}
.section .section-conclusion strong {color:var(--section-accent);}
/* Distinctive restrained editorial detail — consistent section after section */
.section-center > .section-kicker::before {
  content:"";display:block;height:2px;width:34px;margin:0 auto 1.2rem;
  background:var(--section-accent);border-radius:2px;
}
/* Offering gets a gallery-like light panel, no dark surfaces on linen */
.section--linen .offer-panel {
  background:var(--section-panel);
  border:1px solid var(--section-panel-edge);
  box-shadow:0 22px 55px rgba(27,67,59,.075);
}
.section--linen .offer-panel__top {border-bottom-color:var(--section-rule);}
.section--linen .offer-panel__tag {
  color:#07757b;background:#e0f3ed;border:1px solid rgba(7,117,123,.3);
}
.section--linen .offer-panel__top h3 {color:var(--section-text);}
.section--linen .offer-panel__top p,.section--linen .offer-grid p {color:var(--section-muted);}
.section--linen .offer-grid > div {border-color:var(--section-rule)!important;}
.section--linen .offer-grid h4 {color:var(--section-text);}
.section--linen .offer-index {color:var(--section-accent);font-variant-numeric:tabular-nums;}
.section--linen .offer-scope {
  background:#e4ebe5;color:#496966;border-top-color:var(--section-rule);
}
/* Case study: numerals belong to one connected sales funnel, not random KPIs */
.section--midnight .case-grid {gap:22px;}
.section--midnight .case-card {
  background:var(--section-panel);border-color:var(--section-panel-edge);
  box-shadow:0 18px 42px rgba(0,0,0,.1);
}
.section--midnight .case-card__eyebrow {color:var(--section-accent);}
.section--midnight .case-card h3 {color:var(--section-text);}
.section--midnight .case-card > p {color:var(--section-muted);}
.section--midnight .case-card__label {color:var(--section-text)!important;}
.section--midnight .case-card__foot {color:#afc7cb!important;}
.case-funnel-label {
  margin-top:1.4rem;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.35rem 1rem;color:#d5f6f3;font-size:.86rem;font-weight:400;
}
.case-funnel-label span {color:#a6c5c7;font-size:.75rem;font-weight:300;}
.case-funnel {
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));direction:ltr;
  margin:1rem 0 .4rem;gap:0;
}
.case-funnel li {
  position:relative;min-width:0;text-align:center;padding:.9rem .18rem;
  border-top:1px solid rgba(134,215,213,.33);border-bottom:1px solid rgba(134,215,213,.33);
  background:rgba(3,23,31,.42);
}
.case-funnel li:first-child {border-radius:10px 0 0 10px;border-left:1px solid rgba(134,215,213,.33);}
.case-funnel li:last-child {border-radius:0 10px 10px 0;border-right:1px solid rgba(134,215,213,.33);}
.case-funnel li+li::before {
  content:"›";position:absolute;left:-8px;top:calc(50% - 12px);z-index:2;
  font:500 22px/1 Arial,sans-serif;color:#72e5df;
  background:#10343c;border-radius:50%;width:16px;height:23px;
}
.case-funnel strong {
  display:block;color:#e7fffb;font:500 clamp(1.06rem,1.6vw,1.55rem)/1.4 var(--font);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;
}
.case-funnel small {display:block;color:#a1c9cb;font-size:clamp(.51rem,.75vw,.7rem);line-height:1.5;word-break:normal;}
.section--midnight .case-takeaway {
  background:#092d36;border-color:#23656b;color:#a0f5e8;
}
/* Qualification panels on light sage need genuine dark text */
.section--sage .fit__col {background:#f7faf5;border-color:rgba(30,103,94,.19);box-shadow:0 16px 32px rgba(23,70,57,.05);}
.section--sage .fit__col--yes {background:#f3faf4;border-color:rgba(16,128,106,.3);}
.section--sage .fit__col h3 {color:#153f3f;}
.section--sage .fit__col {color:#355c59;}
.section--sage .fit__list strong {color:#15463e;}
.section--sage .fit__end {color:#1b4542;}
.section--sage .fit__col--no .fit__list li::before {
  background:no-repeat center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23547673' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Application as a final distinct CTA destination */
.section--application .flow {background:#0b3841;border:1px solid rgba(108,205,205,.32);}
.section--application .flow .option {background:#062b33;}
.section--application .flow .input {background:#062b33;}
.section--application .section__lead {color:#b5d3d2;}
/* Responsive numerals and editorial spacing */
@media(max-width:680px){
  .section .numbered-item {grid-template-columns:42px minmax(0,1fr);gap:.8rem;padding-block:1.35rem;}
  .section .numbered-item__num {height:35px;width:38px;border-radius:9px;font-size:.76rem;}
  .section .section-conclusion {padding:1.25rem 1rem;}
  .case-funnel strong {font-size:1.04rem;}
  .case-funnel small {font-size:.57rem;}
}

/* BR FINAL GRADIENTS — cohesive premium section rhythm */
/* Each panel gets a restrained tonal gradient, not a different unrelated hue. */
.section--paper {background:linear-gradient(145deg,#edf4ee 0%,#e9f1ec 55%,#dfebe7 100%);}
.section--forest {background:linear-gradient(148deg,#0d3639 0%,#103f41 55%,#0a3037 100%);}
.section--glacier {background:linear-gradient(148deg,#e4f2ed 0%,#d8ece8 58%,#cde5e1 100%);}
.section--pine {background:linear-gradient(150deg,#194542 0%,#153c3a 55%,#103a3c 100%);}
.section--linen {background:linear-gradient(145deg,#f6f1e9 0%,#f1ede4 57%,#e9e5db 100%);}
.section--midnight {background:linear-gradient(146deg,#0c3039 0%,#092933 58%,#08232c 100%);}
.section--sage {background:linear-gradient(148deg,#eaf3e9 0%,#e1ede4 58%,#d8e8de 100%);}
.section--application {background:radial-gradient(ellipse at 50% 0%,rgba(67,225,238,.08),transparent 43%),linear-gradient(160deg,#092b34 0%,#061f28 70%,#061b25 100%);}