/* =============================================================================
   for-investors.css — For Investors page blocks
   ============================================================================= */

/* --- Hero (Insider-style illustrated display)
   Desktop 2705:13176 / tablet 2705:13246 / mobile 2705:13209
   ============================================================================= */

.investors-hero {
  background: var(--color-grey-200);
  padding-block: 7.5rem;
  padding-inline: var(--d-4);
}

@media (min-width: 64rem) {
  .investors-hero {
    padding-inline: var(--d-10);
  }
}

.investors-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--d-12);
  text-align: center;
}

.investors-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--d-8);
  width: 100%;
}

.investors-hero__eyebrow {
  margin: 0;
  color: var(--color-grey-500);
}

.investors-hero__title {
  margin: 0;
  width: 100%;
}

/* Override global desktop/mobile toggle — three breakpoints on this page */
.investors-hero__title .display--illustrated-desktop,
.investors-hero__title .display--illustrated-tablet {
  display: none;
}

/* Illustration sits in a 129×56 “invite” slot (Figma) and overflows it.
   Desktop/tablet: 160×72, top-aligned (hangs 16px below the line).
   Mobile: 142×64, centered in the slot. */
.investors-hero__title .display__art-wrap {
  position: relative;
  flex: 0 0 8.0625rem;
  width: 8.0625rem;
  height: 3.5rem;
  overflow: visible;
}

.investors-hero__title .display__art {
  position: absolute;
  left: 50%;
  width: 9.9925rem;
  height: 4.5rem;
  max-width: none;
}

/* Mobile line-breaks below the 768px tablet artboard — the tablet lockup
   ("press in [art] one view.") does not fit at ~640–767. Keep Display Small
   (48px) in that band; drop to 40px only on true mobile. */
@media (max-width: 47.99rem) {
  .investors-hero__title .display--illustrated-mobile {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    overflow: visible;
  }

  .investors-hero__title .display--illustrated-mobile .display__line {
    flex: 0 0 100%;
    text-align: center;
  }

  .investors-hero__title .display--illustrated-mobile .display__line--with-art {
    --display-art-gap: var(--d-2);
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .investors-hero__title .display--illustrated-mobile .display__art {
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8.8825rem;
    height: 4rem;
  }
}

@media (max-width: 39.99rem) {
  .investors-hero__title {
    font-size: 2.5rem;
    line-height: 3rem;
    letter-spacing: -0.025em;
  }

  /* Invite is 56px on a 48px line, shifted up 4px (Figma y=-4). */
  .investors-hero__title .display--illustrated-mobile .display__line--with-art {
    height: 3rem;
  }

  .investors-hero__title .display--illustrated-mobile .display__art-wrap {
    margin-block: -0.25rem;
  }
}

/* Tablet — Figma 2705:13246 (768)
   Your whole portfolio's / press in [art] one view. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .investors-hero__title .display--illustrated-mobile {
    display: none;
  }

  .investors-hero__title .display--illustrated-tablet {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    align-items: flex-start;
    overflow: visible;
  }

  .investors-hero__title .display--illustrated-tablet .display__line {
    flex: 0 0 100%;
    text-align: center;
  }

  .investors-hero__title .display--illustrated-tablet .display__line--with-art {
    --display-art-gap: var(--d-6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .investors-hero__title .display--illustrated-tablet .display__art {
    top: 0;
    transform: translateX(-50%);
  }
}

/* Desktop — Figma 2705:13176
   Your whole portfolio's press / in [art] one view. */
@media (min-width: 64rem) {
  .investors-hero__title .display--illustrated-mobile,
  .investors-hero__title .display--illustrated-tablet {
    display: none;
  }

  .investors-hero__title .display--illustrated-desktop {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    align-items: flex-start;
    overflow: visible;
  }

  .investors-hero__title .display--illustrated-desktop .display__line {
    flex-shrink: 0;
  }

  .investors-hero__title .display--illustrated-desktop .display__line:not(.display__line--with-art) {
    flex: 0 0 100%;
    text-align: center;
  }

  .investors-hero__title .display--illustrated-desktop .display__line--with-art {
    --display-art-gap: var(--d-6);
    align-items: center;
    justify-content: center;
    overflow: visible;
  }

  .investors-hero__title .display--illustrated-desktop .display__art {
    top: 0;
    transform: translateX(-50%);
  }
}

.investors-hero__lede {
  margin: 0;
  width: 100%;
  text-align: center;
}

@media (min-width: 40rem) {
  .investors-hero__lede {
    max-width: 28.125rem; /* 450px — Figma 2705:13176 / 2705:13246 */
  }
}

.investors-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--d-2);
}

/* --- The shift (quote panel + problem/shift cards) --- */

.investors-shift {
  background: var(--color-grey-200);
  padding: var(--d-3);
}

.investors-shift__panel {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 6.25rem var(--d-4);
  background-image: url("/images/case-studies/aws-case-study-hero-gradient.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 40rem) {
  .investors-shift__panel {
    padding: 7.5rem var(--d-8);
  }
}

.investors-shift__cards {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.1));
}

@media (min-width: 40rem) {
  .investors-shift__cards {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    max-width: 62.5rem;
    margin-inline: auto;
  }
}

.investors-shift__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  padding: var(--d-6);
  border-radius: var(--radius-lg);
}

.investors-shift__card--problem {
  gap: var(--d-12);
  background: var(--color-grey-200);
}

.investors-shift__card--shift {
  gap: var(--d-8);
  background: var(--surface-card-yellow);
}

@media (min-width: 40rem) {
  .investors-shift__card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 26.625rem;
    justify-content: space-between;
    gap: 0;
  }
}

.investors-shift__head {
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
  align-items: flex-start;
}

.investors-shift__label {
  margin: 0;
  color: var(--color-grey-500);
}

.investors-shift__title {
  margin: 0;
  font-family: var(--font-h3-mono-family);
  font-size: var(--font-h3-mono-size);
  font-weight: var(--font-h3-mono-weight);
  line-height: var(--font-h3-mono-line);
  letter-spacing: var(--font-h3-mono-tracking);
  color: var(--text);
}

@media (min-width: 40rem) {
  .investors-shift__title {
    font-family: var(--font-h2-mono-family);
    font-size: var(--font-h2-mono-size);
    font-weight: var(--font-h2-mono-weight);
    line-height: var(--font-h2-mono-line);
    letter-spacing: var(--font-h2-mono-tracking);
  }
}

.investors-shift__detail {
  margin: 0;
}

.investors-shift__art {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: auto;
}

.investors-shift__art-wrap {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: var(--d-10);
}

/* --- Features (homepage home-features structure + scaling) --- */

.investors-features {
  padding-block: 7.5rem var(--d-20); /* 120 / 80 — Figma 2524:13608 */
  padding-inline: var(--d-3);
  background: var(--surface);
}

.investors-features .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-12);
}

@media (min-width: 40rem) {
  .investors-features .block-header {
    gap: var(--d-10);
  }
}

.investors-features__list {
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.investors-features__row {
  display: flex;
  gap: var(--d-6);
  align-items: flex-start;
  min-width: 0;
}

.investors-features__row--copy-right {
  flex-direction: row;
}

.investors-features__description {
  display: flex;
  flex: 0 0 18.75rem;
  flex-direction: column;
  gap: var(--d-2);
  padding-block: var(--d-8);
  min-width: 0;
}

.investors-features__label,
.investors-features__body {
  margin: 0;
}

.investors-features__media {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 35.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-grey-300);
  overflow: hidden;
}

/* Row 1 — Figma 2560:9617 — features-bg-02 + whole-portfolio overlay */
.investors-features__media--portfolio {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-4);
  background-color: var(--color-grey-300);
}

.investors-features__media--portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/images/features/features-bg-02.png") center / cover no-repeat;
  pointer-events: none;
}

.investors-features__portfolio-img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: min(100%, 38.3125rem); /* ~613px — Figma overlay */
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Row 2 — Figma 2560:9622 — peach grain + shared-dashboard overlay */
.investors-features__media--dashboard {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-4);
  background-color: var(--color-grey-300);
}

.investors-features__media--dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/images/features/features-bg-03.png") center / cover no-repeat;
  pointer-events: none;
}

.investors-features__dashboard-img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: min(100%, 38.75rem); /* ~620px — Figma overlay */
  height: auto;
  max-height: 100%;
  object-fit: contain;
}

/* Row 3 — homepage connector (features-bg-05 + Claude/GPT typewriter) */
.investors-features__media--connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--d-6);
  background-color: var(--color-grey-300);
}

.investors-features__media--connector::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("/images/features/features-bg-05.png") center / cover no-repeat;
  pointer-events: none;
}

/* Connector illustration — Figma 2416:20839 (design stage 642 × 420) */
.home-features__connector {
  --connector-em: 3.523cqi; /* 22.615 / 642 — resolves on descendants */
  position: relative;
  z-index: 1;
  width: min(100%, 35rem);
  aspect-ratio: 642 / 420;
  flex-shrink: 0;
  container-type: inline-size;
  container-name: connector;
}

.home-features__connector-chat {
  position: absolute;
  left: 0;
  top: 0;
  width: 74.95%;
  height: 74.77%;
  display: flex;
  flex-direction: column;
  padding: 5.4% 7% 5.4% 6.5%;
  background: var(--color-grey-200);
  border-radius: 0.816em;
  box-shadow: 0 0.051em 3.827em rgba(0, 0, 0, 0.12);
  overflow: hidden;
  font-size: var(--connector-em);
}

.home-features__connector-logos {
  display: flex;
  align-items: center;
  gap: 0.575em;
  flex-shrink: 0;
}

.home-features__connector-logo {
  display: block;
  width: 1.193em;
  height: 1.193em;
  object-fit: cover;
}

.home-features__connector-prompt {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding-top: 8%;
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-grey-800);
}

.home-features__connector-prompt [data-connector-typewriter] {
  white-space: pre-wrap;
}

.home-features__connector-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.875em;
  height: 1.875em;
  margin-top: auto;
  flex-shrink: 0;
  background: var(--color-grey-300);
  border-radius: 0.5em;
}

.home-features__connector-plus img {
  display: block;
  width: 1em;
  height: 1em;
}

.home-features__connector-panel {
  --panel-pad-x: 7.081%; /* 22.62 / 319.43 */
  position: absolute;
  left: 50.23%;
  top: 44.74%;
  width: 49.77%;
  height: 55.26%;
  background: var(--color-grey-200);
  border-radius: 5.78%; /* 18.461 / 319.43 */
  box-shadow: 0 0.288rem 3.337rem rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 2;
  container-type: inline-size;
  container-name: connector-panel;
}

.home-features__connector-panel-header {
  position: absolute;
  left: var(--panel-pad-x);
  right: var(--panel-pad-x);
  top: 9.146%; /* 21.2 / 231.8 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  height: 12.51%; /* 29 / 231.8 */
  font-size: 7.081cqi; /* 22.615 / 319.43 */
}

.home-features__connector-panel-brand {
  display: flex;
  align-items: center;
  gap: 0.5em; /* 11.307 / 22.615 */
  min-width: 0;
}

.home-features__connector-panel-mark {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.home-features__connector-panel-name {
  font-family: var(--font-sans);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-grey-800);
  white-space: nowrap;
}

.home-features__connector-toggle {
  position: relative;
  width: 2.25em; /* 50.883 / 22.615 */
  height: 1.125em; /* 25.442 / 22.615 */
  flex-shrink: 0;
  background: #007aff;
  border-radius: 999px;
}

.home-features__connector-toggle::after {
  content: "";
  position: absolute;
  top: 0.1em;
  right: 0.1em;
  width: 0.925em;
  height: 0.925em;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.home-features__connector-panel-divider {
  position: absolute;
  left: var(--panel-pad-x);
  right: var(--panel-pad-x);
  top: 29.267%; /* 67.84 / 231.8 */
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1.5px solid rgba(182, 177, 169, 0.45);
}

.home-features__connector-panel-list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-features__connector-panel-row {
  position: absolute;
  left: var(--panel-pad-x);
  right: var(--panel-pad-x);
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 12.51%; /* 29 / 231.8 */
  font-family: var(--font-sans);
  font-size: 7.081cqi; /* 22.615 / 319.43 */
  font-weight: 400;
  line-height: 1.25;
  color: #b6b1a9;
  white-space: nowrap;
}

.home-features__connector-panel-row:nth-child(1) {
  top: 38.413%; /* 89.04 / 231.8 */
}

.home-features__connector-panel-row:nth-child(2) {
  top: 58.536%; /* 135.69 / 231.8 */
}

.home-features__connector-panel-row:nth-child(3) {
  top: 78.658%; /* 182.33 / 231.8 */
}

.home-features__connector-panel-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  object-fit: contain;
}

.home-features__connector-panel-caret {
  width: 0.5em !important;
  height: 0.29em !important;
  margin-left: auto;
  transform: rotate(90deg);
  flex-shrink: 0;
  object-fit: contain;
}

@media (max-width: 39.99rem) {
  .investors-features {
    padding-inline: var(--d-3);
  }

  .investors-features__list {
    gap: var(--d-12);
  }

  .investors-features__row,
  .investors-features__row--copy-right {
    flex-direction: column;
    align-items: stretch;
    gap: var(--d-4);
  }

  .investors-features__row--copy-right .investors-features__description {
    order: 1;
  }

  .investors-features__row--copy-right .investors-features__media {
    order: 2;
  }

  .investors-features__description {
    flex: none;
    width: 100%;
    padding-block: 0;
  }

  .investors-features__media {
    flex: none;
    width: 100%;
    height: 25rem;
  }

  .investors-features__media--connector {
    height: 22.9375rem;
  }
}

@media (min-width: 56.25rem) {
  .investors-features .block-header {
    gap: 0;
  }
}


/* Shift illustrations — Figma 2560:9539 (aaaa 156×80, magic 272×100) */
.investors-shift__art--aaaa {
  width: 7.3rem;
  height: auto;
}

@media (min-width: 40rem) {
  .investors-shift__art--aaaa {
    width: 9.9375rem;
  }
}

.investors-shift__art--magic {
  width: 10.1875rem;
  height: auto;
}

@media (min-width: 40rem) {
  .investors-shift__art--magic {
    width: 16.983rem;
  }
}

/* --- Quote CTA (Figma 2524:14057 / 2557:9392) --- */

.investors-quote {
  background: var(--color-grey-200);
  padding: var(--d-3);
}

.investors-quote__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--d-12);
  width: 100%;
  overflow: hidden;
  padding-block: var(--d-20);
  padding-inline: var(--d-8);
  background: var(--color-grey-300);
  border-radius: var(--radius-lg);
  text-align: center;
}

@media (min-width: 40rem) {
  .investors-quote__panel {
    padding-block: 7.5rem;
  }
}

.investors-quote__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--d-6);
  width: 100%;
}

.investors-quote__eyebrow {
  margin: 0;
  max-width: 28.125rem;
  color: var(--color-grey-500);
}

.investors-quote__lede {
  margin: 0;
  max-width: 50rem;
  font-size: var(--font-h3-mono-size);
  font-weight: var(--font-h3-mono-weight);
  line-height: var(--font-h3-mono-line);
  letter-spacing: var(--font-h3-mono-tracking);
}

@media (min-width: 40rem) {
  .investors-quote__lede {
    font-size: var(--font-h2-mono-size);
    font-weight: var(--font-h2-mono-weight);
    line-height: var(--font-h2-mono-line);
    letter-spacing: var(--font-h2-mono-tracking);
  }
}

.investors-quote__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--d-2);
  flex-shrink: 0;
}

/* --- FAQ block (shared site-faq accordion) --- */

.investors-faq {
  background: var(--color-grey-200);
  padding-block: 3.9375rem 7.875rem;
  padding-inline: var(--d-4);
}

.investors-faq__inner {
  gap: var(--d-20);
}

@media (min-width: 40rem) {
  .investors-faq {
    padding-block: 6.25rem var(--d-20);
  }

  .investors-faq__inner {
    gap: var(--d-16);
  }
}

@media (min-width: 56.25rem) {
  .investors-faq {
    padding-inline: var(--d-10);
  }
}

/* --- Trusted logos (same as homepage home-trusted) --- */

.home-trusted {
  padding-block-start: var(--space-home-trusted-top);
  padding-block-end: var(--space-home-trusted-bottom);
  padding-inline: var(--d-4);
  background: var(--surface);
}

.home-trusted .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
}

.home-trusted__logos--desktop {
  display: none;
}

.home-trusted__logos--mobile {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
}

.home-trusted__row {
  display: flex;
  align-items: stretch;
  gap: var(--d-2);
  min-height: 3.75rem;
}

.home-trusted__cell {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.home-trusted__logo {
  display: block;
  width: var(--d-16);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  filter: brightness(0);
}

.home-trusted__logo[src*="salesforce"],
.home-trusted__logo[src*="elastic"] {
  filter: none;
}

.home-trusted__logo--sm {
  width: var(--d-10);
}

@media (min-width: 56.25rem) {
  .home-trusted {
    padding-inline: var(--d-10);
  }

  .home-trusted__logos--desktop {
    display: block;
  }

  .home-trusted__logos--mobile {
    display: none;
  }

  .home-trusted__row {
    min-height: 7.9375rem;
  }

  .home-trusted__logo {
    width: 6rem;
  }

  .home-trusted__logo--sm {
    width: 4rem;
  }
}