/* ============================================================
   Homepage — October 2026 redesign. Oz's copy deck with StackAdapt's
   structure and feel (dark ground, one light band, rounded cards,
   pill buttons, centred heads on a 708px measure, 1240px container)
   carried in Genly's own identity, so it reads as a peer rather than
   a copy: Archivo headlines, Genly gold actions, navy-tinted darks,
   teal-to-ocean gradients, the logo's three colours as a marker.

   Loaded by index.html only, after site.css and theme.css. The
   shared look (fonts, tokens, header, footer, buttons, motion) is in
   theme.css; this file holds the homepage's own sections.
   ============================================================ */
body.home {
  /* The homepage is dark from top to bottom; tokens live in theme.css. */
  background: var(--sa-black);
  color: var(--sa-ink);
}
/* Grid children may shrink below their content's width. */
.sa-split > *, .sa-ai > *, .sa-econ > *, .sa-quotes > * { min-width: 0; }

/* ---------- type ---------- */
.sa-h2 {
  font-size: clamp(2rem, 3.3vw, 2.75rem);   /* 44px at desktop */
  line-height: 1.14; font-weight: 500;
  letter-spacing: -0.028em;
}
.sa-eyebrow {
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--sa-sky);
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px;
}
.sa-head .sa-eyebrow { justify-content: center; }
.sa-head { max-width: 708px; margin: 0 auto; text-align: center; }
.sa-head p:not(.sa-eyebrow) { margin-top: 20px; color: var(--sa-muted); font-size: 18px; line-height: 1.45; }
.sa-statement {
  max-width: 820px; margin: clamp(64px, 8vw, 104px) auto 0; text-align: center;
  font-family: var(--sa-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -0.015em;
}
.sa-foot { max-width: 760px; margin: clamp(56px, 7vw, 88px) auto 0; text-align: center; color: var(--sa-muted); }

/* Every section on the homepage is dark, so the ghost button is light. */
.home .btn--ghost { color: var(--sa-ink); border-color: var(--sa-ink); }
.home .btn--ghost:hover { background: var(--sa-ink); color: #05080F; border-color: var(--sa-ink); }

/* ---------- 1. hero ---------- */
.home .hero { background: linear-gradient(100deg, #05080F 0%, #05080F 45%, #061A38 78%, #082B5C 100%); }
/* Oz, 2026-10-09: no face may show before the animation forms it, so the
   placeholder art never paints as a background; the canvas is the hero. */
.home .hero__media { background-image: none; }
.home .hero__scrim {
  background:
    radial-gradient(85% 75% at 0% 35%, rgba(5,8,15,0.95) 0%, rgba(5,8,15,0.86) 36%, rgba(5,8,15,0.45) 58%, rgba(5,8,15,0) 86%);
}
.home .hero__eyebrow { font-family: var(--sa-body); font-size: 16px; font-weight: 600; color: var(--sa-sky); margin-bottom: 20px; }
.home .hero h1 {
  font-size: clamp(2.5rem, 4.4vw, 3.75rem);   /* StackAdapt sets 48; the deck makes this the page's one big line */
  line-height: 1.1; font-weight: 500; letter-spacing: -0.025em;
  max-width: 13ch; margin-bottom: 24px; color: var(--sa-ink);
}
.home .hero .lede { font-size: 31.625px; line-height: 1.5; color: var(--sa-ink); max-width: 39.6rem; }
.hero__desktop-break { display: none; }
.hero__tagline { font-size: 25px; font-weight: 700; color: var(--sa-ink); margin-top: 12px; }
@media (min-width: 761px) {
  .home .hero .wrap { padding-top: clamp(4rem, 11vh, 7rem); }
  .home .hero .lede { font-size: 25.3px; line-height: 1.42; max-width: 52rem; }
  .hero__desktop-break { display: block; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .home .hero .lede { font-size: 20.493px; }
  .home .hero__tagline { font-size: 22.5px; max-width: none; white-space: nowrap; }
  .home .hero__scrim {
    background: radial-gradient(85% 75% at 0% 35%, rgba(5,8,15,0.92) 0%, rgba(5,8,15,0.76) 34%, rgba(5,8,15,0.24) 58%, rgba(5,8,15,0) 84%);
  }
}
@media (min-width: 1024px) {
  .home .hero .lede { max-width: min(50vw, 39.6rem); white-space: normal; }
  .hero__tagline { margin-top: 1.42em; }
}

@media (max-width: 760px) {
  .home .hero__scrim {
    background: linear-gradient(180deg, rgba(5,8,15,0.94) 0%, rgba(5,8,15,0.86) 44%, rgba(5,8,15,0.35) 68%, rgba(5,8,15,0) 100%);
  }
  .home .hero h1 { font-size: 2.5rem; margin-top: 5px; }
  .home .hero .lede { font-size: 19.665px; }
  .hero__tagline { font-size: 18px; }
  .home .hero .btn-row { transform: translateY(20px); }
  .home .hero .btn-row .btn { font-size: 16px; padding: 12px 14px; }
}

/* ---------- 2. social proof ---------- */
.sa-proof { background: var(--sa-black); padding: 56px 0 24px; }
.sa-proof__claim {
  text-align: center;
  font-family: var(--sa-body) !important; font-size: 27.6px; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 36px;
}
.sa-proof .logos img { filter: brightness(0) invert(1); opacity: 0.9; height: 28px; }

/* ---------- sections ---------- */
.sa-section { padding-block: clamp(64px, 7.5vw, 104px); }
.sa-section--flush { padding-top: 0; }

/* ---------- 3. why ---------- */
.sa-split { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 960px) { .sa-split { grid-template-columns: 1fr 1fr; } }
.sa-split__copy .sa-h2 { margin-bottom: 28px; }
@media (max-width: 760px) { .sa-split__copy .sa-h2 { text-align: center; } }
.sa-split__copy p:not(.sa-eyebrow) { color: var(--sa-muted); max-width: 34rem; }
.sa-split__copy p + p { margin-top: 16px; }
.sa-card { background: var(--sa-card); border-radius: 12px; padding: clamp(28px, 4vw, 48px); }
.sa-why__cap { font-weight: 600; color: var(--sa-ink); }
.sa-why .field { max-width: none; margin-top: 24px; gap: 7px; }
.sa-why .field span { background: rgba(26,155,225,0.20); }
.sa-why .field span.is-active { background: var(--gold); box-shadow: 0 0 12px rgba(242,174,46,0.6); }
.sa-why .field__key { color: var(--sa-muted); font-size: 15px; }
/* The "- 5%" / "- 95%" labels (Oz, 2026-10-14) wrap on phones: keep the stacked pair close. */
.sa-why .field__key { row-gap: 8px; }
.sa-why .field__key i::before { background: rgba(26,155,225,0.20); }
.sa-why .field__key i.gold::before { background: var(--gold); }
.sa-why__src { margin-top: 20px; font-size: 13px; line-height: 1.5; color: var(--sa-muted); }
.sa-why__callout {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--sa-line);
  font-family: var(--sa-display); font-size: 22px; font-weight: 500; line-height: 1.3; color: var(--sa-ink);
}

/* ---------- 4. Genly AI ---------- */
.sa-ai {
  display: grid; gap: clamp(40px, 5vw, 72px);
  margin-top: clamp(56px, 6vw, 80px); align-items: center;
}
@media (min-width: 960px) { .sa-ai { grid-template-columns: 0.85fr 1.15fr; } }
.sa-ai__side > p { color: var(--sa-muted); font-size: 17px; }
@media (min-width: 960px) { .sa-ai__side > p { font-size: 20px; } }
.sa-ai__side > p + p { margin-top: 14px; }
.sa-acc { margin-top: 32px; display: grid; gap: 12px; }
.sa-acc details { background: var(--sa-card); border-radius: 10px; }
.sa-acc summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
}
.sa-acc summary::-webkit-details-marker { display: none; }
.sa-acc summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--sa-muted); border-bottom: 2px solid var(--sa-muted);
  transform: translateY(-3px) rotate(45deg); transition: transform 0.2s var(--ease);
}
.sa-acc details[open] summary::after { transform: translateY(2px) rotate(-135deg); border-color: var(--sa-ink); }
.sa-acc h3 { font-family: var(--sa-body) !important; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--sa-muted); }
.sa-acc details[open] h3 { color: #FFFFFF; }
.sa-acc details p { padding: 0 20px 20px; margin-top: -4px; color: var(--sa-muted); font-size: 17px; }

/* The product screen sits on the blue gradient, as StackAdapt's do. */
.sa-stage {
  position: relative; overflow: hidden;
  background: radial-gradient(130% 120% at 0% 0%, #16A897 0%, #1685C1 42%, #0B3B74 100%);
  border-radius: 12px;
  padding: clamp(20px, 4vw, 48px);
}
/* Genly's demand wave, drawn as faint lines across the stage. */
.sa-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1'%3E%3Cpath d='M0 330 C160 340 230 120 600 90'/%3E%3Cpath d='M0 350 C170 352 250 150 600 130' opacity='.7'/%3E%3Cpath d='M0 370 C180 365 270 185 600 175' opacity='.45'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.sa-stage > * { position: relative; }
.sa-app {
  background: #FFFFFF; color: #10141A;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 20, 70, 0.6);
  font-size: 15px;
}
.sa-app__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid #E6E8EB;
  font-weight: 600;
}
.sa-app__bar img { height: 19px; width: auto; }
.sa-app__bar span { padding-left: 10px; border-left: 1px solid #E6E8EB; }
.sa-app__bar em { margin-left: auto; font-style: normal; font-weight: 400; font-size: 13px; color: #5D636B; }
.sa-app__body { padding: 22px; display: grid; gap: 14px; background: #F7F8FA; }
.sa-msg { margin: 0; max-width: 88%; line-height: 1.5; }
.sa-msg--you {
  justify-self: end; background: #0B3B74; color: #FFFFFF;
  padding: 10px 16px; border-radius: 16px 16px 4px 16px;
}
.sa-msg--ai {
  justify-self: start; background: #FFFFFF; border: 1px solid #E6E8EB;
  padding: 16px; border-radius: 16px 16px 16px 4px;
}
.sa-msg--ai p + p { margin-top: 10px; }
.sa-msg__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-msg__actions span {
  font-size: 13px; font-weight: 600; color: #0E6A61;
  border: 1px solid #A6E3DA; background: #EAF8F5; border-radius: 64px; padding: 5px 12px;
}
.sa-app__input {
  margin: 4px 0 0; background: #FFFFFF;
  border: 1px solid #DADDE1; border-radius: 64px; padding: 11px 18px;
  color: #6B7179;
}
@media (max-width: 560px) { .sa-app__bar em { display: none; } }

/* ---------- 5. capabilities ---------- */
.sa-grid {
  list-style: none; padding: 0;
  margin: clamp(56px, 6vw, 88px) 0 0;
  display: grid; gap: 56px 48px;
}
@media (min-width: 700px) { .sa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sa-grid { grid-template-columns: repeat(3, 1fr); } }
.sa-icon {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 10px;
  background: var(--sa-card);
  margin-bottom: 24px;
}
.sa-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--sa-sky); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sa-grid h3 { font-family: var(--sa-body) !important; font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
.sa-grid p { margin-top: 12px; color: var(--sa-muted); line-height: 1.5; }
.sa-grid__feature {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
  /* Text sits on the left; every stop under it keeps white at 7:1 or better. */
  background: linear-gradient(110deg, #0A4F5C 0%, #0B4C7E 50%, #0B3B74 100%);
  border-radius: 12px; padding: clamp(28px, 4vw, 44px);
}
.sa-grid__feature > div { max-width: 640px; }
.sa-grid__feature .sa-icon { background: rgba(255,255,255,0.16); }
.sa-grid__feature .sa-icon svg { stroke: #FFFFFF; }
.sa-grid__feature p { color: #FFFFFF; }

/* ---------- the light band ---------- */
.sa-light { background: var(--sa-light); color: var(--sa-text); }
.sa-light .sa-eyebrow { color: var(--sa-link); }
.sa-light .sa-head p:not(.sa-eyebrow) { color: var(--sa-text2); }
.sa-light :focus-visible { outline-color: var(--sa-link); }
.sa-wcard { background: #FFFFFF; border-radius: 12px; padding: 32px; }
.sa-wcard h3 { font-family: var(--sa-body) !important; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.sa-wcard p { color: var(--sa-text2); }
.sa-statement--dark { color: var(--sa-text); }

/* ---------- 6. economics ---------- */
.sa-econ { display: grid; gap: 24px; margin-top: clamp(48px, 6vw, 72px); align-items: stretch; }
@media (min-width: 960px) { .sa-econ { grid-template-columns: 1fr 1fr; } }
.sa-econ .sa-wcard > p + p { margin-top: 16px; }
.sa-econ .sa-wcard:first-child > p { font-size: 19px; }
.sa-module { margin: 0; }
.sa-module__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sa-module__head span { font-size: 14px; color: var(--sa-text2); }
.sa-module table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 20px; font-size: 17px; }
.sa-module th, .sa-module td { width: 33.333%; text-align: left; padding: 14px 0; border-bottom: 1px solid #E6E8EB; }
.sa-module th { font-size: 14px; font-weight: 600; color: var(--sa-text2); }
.sa-module th:not(:first-child), .sa-module td:not(:first-child) { text-align: center; }
.sa-module td:first-child { font-weight: 600; }
.sa-module tfoot td {
  border-bottom: 0; padding-top: 18px;
  font-family: var(--sa-display); font-size: 22px; font-weight: 500;
}
.sa-module tfoot td:last-child { color: var(--sa-link); }
.sa-module figcaption { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--sa-text2); }
@media (max-width: 520px) {
  .sa-wcard { padding: 24px 20px; }
  .sa-module table { font-size: 15px; }
}

/* ---------- 7. Demand Pilot ---------- */
.sa-pilot { list-style: none; padding: 0; margin: clamp(48px, 6vw, 72px) 0 0; display: grid; gap: 24px; }
@media (min-width: 900px) { .sa-pilot { grid-template-columns: 1fr 1.25fr 1fr; } }
.sa-pilot li { position: relative; }
.sa-pilot__n { display: block; font-family: var(--sa-display); font-size: 15px; font-weight: 600; color: var(--sa-link); margin-bottom: 20px; }
.sa-pilot li p { margin-top: 12px; }
.sa-pilot__lead { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ---------- customer proof ---------- */
.sa-quotes { display: grid; gap: 24px; }
@media (min-width: 900px) { .sa-quotes { grid-template-columns: 1fr 1fr; } }
.sa-quote { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.sa-quote img { height: 24px; width: auto; align-self: flex-start; filter: brightness(0); opacity: 0.8; }
.sa-quote__mark { font-family: var(--sa-display); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; color: #1D2733 !important; }
.sa-quote blockquote {
  margin: 0; font-family: var(--sa-display); font-weight: 400;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.4; letter-spacing: -0.01em; color: var(--sa-text);
}
.sa-quote figcaption { margin-top: auto; font-size: 15px; color: var(--sa-text2); }
.sa-quote figcaption b { display: block; color: var(--sa-text); font-weight: 600; }

/* ---------- 8. journey ---------- */
.sa-journey {
  list-style: none; padding: 0; margin: clamp(56px, 6vw, 80px) 0 0;
  display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .sa-journey { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .sa-journey { grid-template-columns: repeat(6, 1fr); } }
.sa-journey li {
  position: relative;
  background: var(--sa-card); border-radius: 10px;
  padding: 24px 20px 28px;
  font-family: var(--sa-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
}
.sa-journey li span { display: block; font-family: var(--sa-body); font-size: 14px; font-weight: 600; color: var(--sa-muted); margin-bottom: 40px; }
/* A chevron between cards on the one-row layout. */
@media (min-width: 1080px) {
  .sa-journey li + li::before {
    content: ""; position: absolute; left: -10px; top: 50%;
    width: 8px; height: 8px; margin-top: -4px;
    border-top: 2px solid #33445A; border-right: 2px solid #33445A;
    transform: rotate(45deg);
  }
}
.sa-journey__win.is-lit, html:not(.motion-on) .sa-journey__win { background: linear-gradient(160deg, #0B6F66 0%, #0B3B74 100%) !important; color: #FFFFFF; box-shadow: 0 0 40px -8px rgba(22,168,151,0.55); }
.sa-journey__win span { color: rgba(255,255,255,0.85) !important; }

/* ---------- 9. demo card ---------- */
.sa-close { padding-top: 0; }
@media (min-width: 960px) { .sa-close .formcard { grid-template-columns: 1fr 1fr; } }
/* The card itself is the shared .formcard in theme.css; only the
   homepage's input styling (its close is not a .section--navy) stays. */
.sa-close .form__field input {
  background: rgba(190, 230, 240, 0.18); color: #FFFFFF;
  border: 1px solid rgba(190, 230, 240, 0.3); border-radius: 6px; padding: 14px 14px;
}
.sa-close .form__field input::placeholder { color: rgba(226, 232, 240, 0.72); }
.sa-close .form__field input:hover { border-color: rgba(190, 230, 240, 0.48); }
.sa-close .form__field input:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }

/* ---------- Genly's split head: heading left, standfirst right ---------- */
@media (min-width: 960px) {
  .sa-head--split {
    max-width: none; text-align: left;
    display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0 clamp(40px, 6vw, 96px); align-items: end;
  }
  .sa-head--split .sa-eyebrow { grid-column: 1 / -1; justify-content: flex-start; }
  .sa-head--split p:not(.sa-eyebrow) { margin-top: 0; }
}

/* ---------- journey: progress that follows the scroll ---------- */
.sa-journey { position: relative; padding-bottom: 18px; }
.sa-journey::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #F2AE2E, #1CAF69 50%, #1685C1);
  transform-origin: left center; transform: scaleX(var(--journey, 1));
}
.sa-journey li { transition: background-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.sa-journey li span { transition: color 0.4s var(--ease); }
.motion-on .sa-journey li:not(.is-lit) { color: var(--sa-muted); }
.motion-on .sa-journey li.is-lit { box-shadow: inset 0 3px 0 var(--sa-sky); }
.motion-on .sa-journey li.is-lit span { color: var(--sa-sky); }
.motion-on .sa-journey__win.is-lit span { color: rgba(255,255,255,0.85) !important; }

.sa-proof__claim .roll { color: var(--gold); }

@media print {
  body.home { background: #fff; color: #000; }
}

/* ---------- the middle band goes dark (Oz, 2026-10-08) ----------
   The owner chose dark bands with white kept only for long reading. The
   band stays a distinct step in the rhythm: a lifted near-black ground
   with raised cards, instead of the light grey it was. */
.sa-light { background: #0A111C; color: var(--sa-ink); --wipe-bg: #0A111C; }
.sa-light .sa-eyebrow { color: var(--sa-sky); }
.sa-light .sa-head p:not(.sa-eyebrow) { color: var(--sa-muted); }
.theme .sa-light :focus-visible { outline-color: var(--gold); }
.sa-light .sa-wcard { background: #121D30; border: 1px solid var(--sa-line); }
.sa-light .sa-wcard p { color: var(--sa-muted); }
.sa-light .sa-statement--dark { color: var(--sa-ink); }
.sa-light .sa-module__head span, .sa-light .sa-module th, .sa-light .sa-module figcaption { color: var(--sa-muted); }
.sa-light .sa-module th, .sa-light .sa-module td { border-bottom-color: var(--sa-line); }
.sa-light .sa-module tfoot td:last-child { color: var(--sa-sky); }
.sa-light .sa-pilot__n { color: var(--sa-sky); }
.sa-light .sa-quote {
  position: relative;
  gap: 18px;
  overflow: hidden;
  background: linear-gradient(150deg, #0A4F5C, #0B3B74);
  border-color: rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 28px 50px -30px rgba(0,0,0,0.9);
}
.sa-light .sa-quote::before {
  content: "\201C";
  display: block;
  height: 0.72em;
  margin: -8px 0 2px;
  color: var(--sa-sky);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(72px, 9vw, 104px);
  line-height: 0.82;
  font-weight: 700;
}
.sa-light .sa-quote img { filter: brightness(0) invert(1); opacity: 0.95; }
.sa-light .sa-quote__mark { color: rgba(245,248,252,0.76) !important; }
.sa-light .sa-quote blockquote, .sa-light .sa-quote figcaption b { color: #FFFFFF; }
.sa-light .sa-quote figcaption { color: #C9D4E2; }

/* ============================================================
   Homepage motion (motion lab C, D; built by home-motion.js).
   None of these classes exist with JS off or under reduced motion,
   where the static grid, chat screen and dot field stay as they are.
   ============================================================ */

/* ---------- C. Genly AI, playing ---------- */
.sa-app.is-armed .sa-msg--you { opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.4s var(--ease); }
.sa-app.is-typing .sa-msg--you { opacity: 1; transform: none; }
.sa-app.is-armed .sa-ch { visibility: hidden; }
.sa-app .sa-ch.on { visibility: visible; }
.sa-ch.is-caret { position: relative; }
.sa-ch.is-caret::after {
  content: ""; position: absolute; right: -3px; top: 0.12em; bottom: 0.12em; width: 2px;
  background: #FFFFFF; animation: sa-caret 0.9s steps(1) infinite;
}
@keyframes sa-caret { 50% { opacity: 0; } }
.sa-msg--ai { position: relative; }
.sa-app.is-armed .sa-msg--ai { visibility: hidden; }
.sa-app.is-answering .sa-msg--ai { visibility: visible; }
.sa-app.is-armed .sa-wd { opacity: 0; transition: opacity 0.3s; }
.sa-app .sa-wd.on { opacity: 1; }
.sa-app.is-armed .sa-msg__actions span { opacity: 0; transform: translateY(6px) scale(0.92); transition: opacity 0.35s, transform 0.45s cubic-bezier(.34, 1.56, .64, 1); }
.sa-app .sa-msg__actions span.on { opacity: 1; transform: none; }
/* Three dots in a small bubble where the answer will appear. */
.sa-think {
  visibility: visible; position: absolute; left: -1px; top: -1px;
  display: inline-flex; gap: 5px; align-items: center;
  background: #FFFFFF; border: 1px solid #E6E8EB; border-radius: 16px 16px 16px 4px; padding: 16px 18px;
}
.sa-think i { width: 7px; height: 7px; border-radius: 50%; background: #1685C1; animation: sa-dot 1s infinite; }
.sa-think i:nth-child(2) { animation-delay: 0.15s; }
.sa-think i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sa-dot { 0%, 80%, 100% { opacity: 0.25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* ---------- D. demand field ---------- */
.sa-why .field--tiles { display: block; }
.sa-why .field--tiles > span { display: none; }
.field--tiles canvas { display: block; width: 100%; }
/* The key's markers match the tiles. */
.sa-why .field--tiles + .field__key i::before { width: 8px; height: 11px; border-radius: 2px; }

/* ============================================================
   Oz, 2026-10-10: hero, trust strip, eyebrow size, Genly AI
   spacing and the capability grid.
   ============================================================ */

/* ---------- hero + "Trusted by:" fill the first screen ----------
   The strip has a fixed height so the hero can be exactly the rest of
   the screen below the sticky header (80px + its 1px rule): the logos
   then sit on the bottom edge of the first viewport at any size where
   the hero copy fits. */
.home { --head-h: 81px; --proof-h: 128px; }
.home .sa-proof {
  box-sizing: border-box; height: var(--proof-h);
  padding: 22px 0 0;
}
.home .sa-proof__claim { line-height: 30px; margin-bottom: 30px; }
@media (min-width: 1025px) {
  .home .sa-proof .logos,
  .home .sa-proof .logos__track { line-height: 1.65; }
}
@media (max-width: 1024px) {
  .home .sa-proof .logos,
  .home .sa-proof .logos__track { line-height: 0.81; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .home .sa-proof .logos,
  .home .sa-proof .logos__track { line-height: 0.81; }
}
.home .hero .wrap {
  min-height: calc(100vh - var(--head-h) - var(--proof-h));
  min-height: calc(100svh - var(--head-h) - var(--proof-h));
}
@media (min-width: 761px) {
  /* The bottom inset gives way so the copy still fits on short laptops. */
  .home .hero .wrap { padding-bottom: clamp(1.5rem, 4vh, 3rem); }
}

/* ---------- section eyebrows: 15px to 30px, marker doubled ---------- */
.home .sa-eyebrow { font-size: 30px; line-height: 1.2; gap: 20px; margin-bottom: 20px; }
.home .sa-eyebrow::before { width: 44px; height: 12px; border-radius: 6px; }

/* ---------- Genly AI: 30% less room under the closing statement ---------- */
#genly-ai.sa-section { padding-bottom: calc(clamp(64px, 7.5vw, 104px) * 0.7); }

/* ---------- capabilities: seven cards in one grid ----------
   Replaces the pinned, scroll-driven deck. The cards keep the deck's
   look (dark card, teal-to-navy on every other one); the layout is
   one column on phones, two and three in between, and four over three
   centred on wide screens. The grid is built from two-column spans so
   a short last row can sit in the middle. */
.sa-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: clamp(48px, 5vw, 72px); }
.sa-grid > li {
  display: flex; flex-direction: column; align-items: flex-start;
  border-radius: 16px; padding: clamp(24px, 3vw, 32px);
  background: #121D30; border: 1px solid var(--sa-line);
  box-shadow: 0 28px 50px -30px rgba(0,0,0,0.9);
}
.sa-grid > li:nth-child(odd) { background: linear-gradient(150deg, #0A4F5C, #0B3B74); border-color: rgba(255,255,255,0.08); }
.sa-grid .sa-icon { width: 56px; height: 56px; margin-bottom: 20px; background: rgba(255,255,255,0.10); }
.sa-grid .sa-icon svg { stroke: var(--sa-sky); }
.sa-grid p { color: #C9D4E2; }
.sa-grid .sa-grid__feature { grid-column: auto; justify-content: flex-start; flex-wrap: nowrap; gap: 24px; padding: clamp(24px, 3vw, 32px); }
.sa-grid .sa-grid__feature p { color: #FFFFFF; }
.sa-grid .sa-grid__feature .btn { margin-top: auto; }
@media (min-width: 700px) {
  .sa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sa-grid > li { grid-column: span 2; }
  .sa-grid > li:nth-child(7) { grid-column: 2 / span 2; }
}
@media (min-width: 1000px) {
  .sa-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sa-grid > li:nth-child(7) { grid-column: 3 / span 2; }
}
@media (min-width: 1200px) {
  .sa-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sa-grid > li:nth-child(5) { grid-column: 2 / span 2; }
  .sa-grid > li:nth-child(7) { grid-column: span 2; }
}

/* ============================================================
   Oz, 2026-10-14: phone hero is the wave alone, rising beside the
   paragraph (hero.js), and the new longer copy still fits with
   "Trusted by:" on short phones.
   ============================================================ */
@media (max-width: 760px) {
  /* The wave now climbs the right-hand side next to the copy, so the
     scrim darkens behind the words and leaves the right edge clear.
     hero.js separately dims any star that lands on a line of text. */
  .home .hero__scrim {
    background: linear-gradient(90deg, rgba(5,8,15,0.55) 0%, rgba(5,8,15,0.40) 60%, rgba(5,8,15,0) 92%);
  }
  #genly-ai .sa-head {
    text-align: center;
  }
  #genly-ai .sa-head .sa-eyebrow {
    justify-content: center;
  }
}
/* Short phones (iPhone SE/8, 375x667): the hero copy plus the strip are
   ~70px taller than the screen. Tighten the hero's vertical rhythm and the
   strip a little so the logos still land in the first screen. */
@media (max-width: 760px) and (max-height: 700px) {
  .home { --proof-h: 112px; }
  .home .hero h1 { margin-bottom: 16px; }
  .home .hero .btn-row { margin-top: 24px; }
  .home .hero .wrap { padding-bottom: 28px; }
  .home .sa-proof { padding-top: 14px; }
  .home .sa-proof__claim { margin-bottom: 22px; }
}