/* Custom styles for Delphina website */

/* Increase section spacing (Webflow default large = 6rem; bumped to 9rem) */
.padding-section:where(.w-variant-fd022727-6f19-0248-fca1-fa0183917bc1) {
  height: 11rem;
}

.row-align-start {
  align-items: flex-start !important;
}

.testimonial-small_img-wrapper {
  margin-bottom: 0.5rem;
}

.testimonial-small_img {
  filter: brightness(1.8);
}

/* ==========================================================================
   Podcast Episode Hero (missing from exported Webflow CSS)
   ========================================================================== */

.blog-hero_top {
  margin-bottom: var(--_sizing---space--small);
  grid-column-gap: var(--_sizing---space--tiny);
  grid-row-gap: var(--_sizing---space--tiny);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.blog-hero_read-time {
  grid-column-gap: var(--_sizing---space--tiny);
  grid-row-gap: var(--_sizing---space--tiny);
  display: inline-flex;
}

.blog-hero_bottom {
  margin-top: var(--_sizing---space--large);
  grid-column-gap: var(--_sizing---space--large);
  grid-row-gap: var(--_sizing---space--large);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.blog-hero_author {
  grid-column-gap: var(--_sizing---space--xsmall);
  grid-row-gap: var(--_sizing---space--xsmall);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.blog-hero_author-img {
  width: var(--_sizing---icon--huge);
  height: var(--_sizing---icon--huge);
  border-radius: var(--_sizing---border-radius--tiny);
}

/* Constrain default images so they don't overwhelm their section */
.img-default_img {
  max-height: 400px;
}

/* Even out nav spacing: take chevron out of layout flow and widen gap
   so text-to-text distance is consistent; chevron sits inside the gap.
   Also match logo→menu gap to item-to-item gap. */
.nav_link-list {
  grid-column-gap: 2.5rem;
}

.nav_left-wrapper {
  grid-column-gap: 2.5rem;
}

.nav_dd-toggle-icon {
  position: absolute;
  left: calc(100% + 0.15em);
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  height: 1em;
}


/* Shrink the 3 card icons in "Platform Fundamentals" section */
.card-icon_icon {
  min-height: 4em;
}

/* ==========================================================================
   Hero Top Padding
   ========================================================================== */

/* Add extra spacing at the top of hero sections (above content, not below) */
.hero > .padding-hero:first-child {
  height: 8rem;
}

/* ==========================================================================
   Homepage Logo Strip - size and alignment
   ========================================================================== */

.logos-1_list {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  gap: var(--_sizing---space--large, 1.5rem);
  flex-wrap: wrap;
}

.logos-1_list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  flex: 1 1 0;
  min-width: 100px;
}

.logos-1_list-item_img {
  height: 2.25rem;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  object-position: center;
  display: block;
  mix-blend-mode: normal;
  filter: grayscale(1) brightness(0);
  opacity: 0.35;
}

.u-theme-dark .logos-1_list-item_img {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.5;
}

/* Subtle nudge for OpenDoor visual alignment */
.logos-1_list-item--opendoor .logos-1_list-item_img {
  transform: translateY(0.15rem);
}

@media (max-width: 991px) {
  .logos-1_list-item_img {
    height: 2rem;
    max-width: 100px;
  }
}

@media (max-width: 479px) {
  .logos-1_list-item {
    min-width: 80px;
  }

  .logos-1_list-item_img {
    height: 1.75rem;
    max-width: 85px;
  }
}

/* ==========================================================================
   Manifesto Section Styles
   ========================================================================== */

/* Container for manifesto content */
.manifesto-content {
  max-width: 720px;
  margin: 0 auto;
}

/* Hero statement - opening bold line */
.manifesto-hero-statement {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

/* Individual stanzas with proper spacing */
.manifesto-stanza {
  font-size: 18px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.manifesto-stanza:last-child {
  margin-bottom: 0;
}

/* Pull quote / second thesis statement */
.manifesto-pullquote {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  border-left: 4px solid var(--_color-palette---fea59f, #fea59f);
  padding-left: 24px;
  margin: 32px 0;
}

/* Closing statement */
.manifesto-closing {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  margin-top: 32px;
  letter-spacing: -0.01em;
}

/* Section headline treatment */
.manifesto-headline {
  font-size: 40px;
  line-height: 1.2;
  margin-bottom: 40px;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
  .manifesto-hero-statement {
    font-size: 24px;
    margin-bottom: 32px;
  }

  .manifesto-content {
    padding: 0 16px;
  }

  .manifesto-stanza {
    font-size: 17px;
    margin-bottom: 32px;
  }

  .manifesto-pullquote {
    font-size: 20px;
    margin: 32px 0;
    padding-left: 20px;
  }

  .manifesto-closing {
    font-size: 18px;
    margin-top: 40px;
  }

  .manifesto-headline {
    font-size: 32px;
    margin-bottom: 32px;
  }
}

@media (max-width: 480px) {
  .manifesto-hero-statement {
    font-size: 22px;
  }

  .manifesto-pullquote {
    font-size: 18px;
  }
}

/* ==========================================================================
   Security page: shrink hero customer-data image
   ========================================================================== */

.magenta-box {
  max-width: 400px;
}

/* ==========================================================================
   Knowledge Tabs Section Styles (Building Business Context)
   ========================================================================== */

.knowledge-tabs-section {
  background-color: var(--_themes---background--primary);
}

.knowledge-tabs_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* Tab navigation */
.knowledge-tabs_nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--_color-palette---250743-a20, rgba(37, 7, 67, 0.2));
}

.knowledge-tab-btn {
  background: none;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--_color-palette---250743-a60, rgba(37, 7, 67, 0.6));
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
  font-family: inherit;
}

.knowledge-tab-btn:hover {
  color: var(--_color-palette---250743, #250743);
}

.knowledge-tab-btn.active {
  color: var(--_color-palette---250743, #250743);
}

.knowledge-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--_color-palette---250743, #250743);
}

/* Tab panels */
.knowledge-tabs_panels {
  min-height: 100px;
}

.knowledge-tab-panel {
  display: none;
}

.knowledge-tab-panel.active {
  display: block;
}

.knowledge-tab-panel p {
  margin: 0;
  line-height: 1.6;
}

/* Video container */
.knowledge-tabs_video {
  margin-top: -220px; /* pull visual up to align top with heading */
}

.knowledge-video-container {
  height: 800px;
  width: 800px;
  max-width: none;
  border-radius: var(--_sizing---border-radius--medium, 16px);
  overflow: hidden;
  background-color: transparent;
}

.knowledge-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: darken;
}

/* Tablet: scale video container to fit column */
@media (max-width: 991px) {
  .knowledge-tabs_video {
    margin-top: -90px;
  }

  .knowledge-video-container {
    height: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}

/* Mobile: stack layout */
@media (max-width: 767px) {
  .knowledge-tabs_video {
    margin-top: 0;
  }

  .knowledge-tabs_nav {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .knowledge-tab-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .knowledge-tab-btn {
    padding: 0.5rem 0.75rem;
  }
}

/* Remove borders from videos */
video {
  border: none;
  outline: none;
}

.img-aspect video {
  border: none;
  outline: none;
}

/* Rounded corners for Critic Agent video; ensure video fills and displays */
.critic-agent-video-wrap {
  border-radius: 12px;
  overflow: hidden;
}
.critic-agent-video-wrap video,
.critic-agent-video-wrap .critic-agent-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

/* Rounded corners for how-it-works images (e.g. chat to chart) */
.img-aspect--rounded {
  border-radius: 12px;
  overflow: hidden;
}

/* Show full image without cropping (e.g. Context Agent) */
.img-aspect--contain img {
  object-fit: contain;
  object-position: center;
}

/* Chat-to-chart image: no taller than adjacent text block, full content visible, rounded */
.chat-to-chart-img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
  overflow: hidden;
  background: #FDFDFD;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.chat-to-chart-img img,
.chat-to-chart-img .chat-to-chart-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: top;
}

/* Lottie inside aspect-ratio box (e.g. Proactive Agents tab) */
.lottie-anim-wrap .lottie-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Scrollable image (e.g. Deep Research tall screenshot)
   ========================================================================== */

.scrollable-image-wrapper {
  margin-top: 0;
  margin-bottom: 0;
}

.scrollable-image {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 9;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: var(--_color-palette---250743, #f5f4f4);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.scrollable-image__inner {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.scrollable-image__caption {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--_color-palette---250743, #6b6570);
}

/* Auto-scroll image: white border, hide scrollbar */
.scrollable-image-autoscroll {
  border-color: #fff;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollable-image-autoscroll::-webkit-scrollbar {
  display: none;
}

/* Scrollable PDF: shorter height, no toolbar (was 49vh/392px; now 20% shorter) */
.scrollable-pdf {
  width: 100%;
  height: min(39.2vh, 314px);
  min-height: 179px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: var(--_color-palette---250743, #f5f4f4);
}
.scrollable-pdf__iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 179px;
  border: none;
  border-radius: 11px;
  vertical-align: top;
}

/* Auto-scrolling PDF (e.g. WBR Deep Research): same proportions as scrollable-image */
.scrollable-pdf-autoscroll {
  width: 100%;
  max-height: min(70vh, 560px);
  min-height: 320px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: var(--_color-palette---250743, #f5f4f4);
}
.scrollable-pdf-autoscroll__inner {
  width: 100%;
  will-change: transform;
}
.scrollable-pdf-autoscroll__inner canvas {
  display: block;
  width: 100% !important;
  height: auto !important;
  vertical-align: top;
}

/* ==========================================================================
   Interactive Hero (homepage: left-side accordion tabs + right-side video)
   ========================================================================== */

.interactive-hero__inner {
  width: 100%;
}

.interactive-hero__heading {
  font-weight: 600;
  color: var(--_color-palette---250743, #1a1919);
  margin: 0 0 4.5rem;
  text-align: center;
}

.interactive-hero__heading.u-text-pretty {
  font-weight: inherit;
}

/* Tab menu: force left-align text regardless of inherited centering */
.interactive-hero .tab_menu,
.interactive-hero .tab-link-content,
.interactive-hero .tab-link-content_title,
.interactive-hero .tab-link-content_expand {
  text-align: left;
  align-items: flex-start;
}

/* Tab row: left menu + right video — tighter gap than default space-between */
.interactive-hero__tab-row {
  justify-content: flex-start;
  column-gap: 0;
  align-items: flex-start;
}

/* Left tab menu: remove link underlines, mute inactive tabs */
.interactive-hero .tab_link {
  text-decoration: none;
  opacity: 0.45;
  transition: opacity 0.25s ease;
}

.interactive-hero .tab_link:hover,
.interactive-hero .tab_link.w--current {
  opacity: 1;
}

/* Active tab: solid border line */
.interactive-hero .tab_link.w--current .tab-link-content_border {
  opacity: 1;
}

/* Strip inner column padding between tab menu and video */
.interactive-hero .interactive-hero__tab-menu {
  padding-left: 0.75rem;
  padding-right: 0 !important;
}

.interactive-hero .interactive-hero__tab-content.tab_content {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Video panel alignment */
.interactive-hero__tab-content {
  align-self: flex-start;
}

.interactive-hero__panel {
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: linear-gradient(to bottom, rgba(250, 250, 250, 0.9), #fff);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.interactive-hero__media-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.interactive-hero__media-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  transform: translateX(12px) scale(0.98);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  pointer-events: none;
}

.interactive-hero__media-layer--current {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  z-index: 1;
}

.interactive-hero__media-layer--leave {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.interactive-hero__media-layer--leave-active {
  opacity: 0;
  transform: translateX(-12px) scale(0.98);
}

.interactive-hero__media-layer--enter {
  opacity: 0;
  transform: translateX(12px) scale(0.98);
  z-index: 2;
}

.interactive-hero__media-layer--enter-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  z-index: 2;
}

.interactive-hero__img,
.interactive-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 0.75rem;
}


/* ==========================================================================
   Team photos: sepia filter for new color photos to match existing style
   ========================================================================== */

.team-photo-sepia {
  filter: grayscale(1) sepia(0.15) brightness(1.05);
}

/* ==========================================================================
   Integration Logos (Product page "Works where your data lives")
   ========================================================================== */

.logos-2_list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.logos-2_img {
  max-height: 2.5rem;
}

.logos-2_caption {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--_themes---typography--heading, #250743);
  opacity: 0.7;
  white-space: nowrap;
}

/* Product page: hide section CTAs until ready to use (remove class or this rule to show) */
.product-section-cta-hidden {
  display: none !important;
}

/* Product page "Built for data experts": hide only the "Explore X solutions" links (remove class from buttons to show) */
.product-teams-explore-link-hidden {
  display: none !important;
}

/* Product page tabs: top-align tab menu with video */
.tab_menu {
  justify-content: flex-start;
}

.tab_menu > .w-tab-link:first-child .tab-link-content_title {
  margin-top: 0;
}

/* ==========================================================================
   Blog & High Signal body content typography (Substack-inspired sizing)
   Substack renders body copy at 19px / 1.6 line-height / 20px paragraph gap.
   We keep our Aeonik font face and just match the size + spacing.
   ========================================================================== */

.u-rich-text-article p {
  font-size: 19px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.u-rich-text-article li {
  font-size: 19px;
  line-height: 1.6;
}

.u-rich-text-article blockquote p {
  font-size: 19px;
  line-height: 1.6;
}

/* Images and videos in body content must not overflow the text column */
.u-rich-text-article img,
.u-rich-text-article iframe,
.u-rich-text-article video {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Nav weight bump (desktop only): medium weight for link items
   ========================================================================== */
@media screen and (min-width: 992px) {
  .navbar_link,
  .nav_dd-toggle {
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
  }
}

/* ==========================================================================
   Podcast / blog card meta row (category • Ep N / read time)
   blog-card_small-info is missing from the Webflow CSS export
   ========================================================================== */
.blog-card_small-info {
  display: flex;
  align-items: center;
  gap: var(--_sizing---space--tiny);
}

.blog-card_small-info > div {
  display: inline;
}

/* ==========================================================================
   Team + Investors: 2-column grid on portrait mobile (iPhone 14 etc.)
   Webflow CSS collapses both to 1fr at max-width 479px; override here.
   ========================================================================== */
@media screen and (max-width: 479px) {
  .team-list, .investors-list {
    overflow: hidden;

    margin-left: 0;
    margin-right: 0;
  }

  .team-list_list {
    grid-template-columns: 1fr 1fr;
  }

  .investors-list_list {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 479px) {
  .team-card, .investors-card {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ==========================================================================
   Portrait mobile: bump paragraph medium font size (Webflow drops to 0.75rem/12px)
   ========================================================================== */
@media screen and (max-width: 479px) {
  body {
    --_paragraphs---medium--font-size: 1rem;
  }
}

/* ==========================================================================
   Portrait mobile: add vertical gap between stacked text + visual columns
   ========================================================================== */
@media screen and (max-width: 479px) {
  .row.w-variant-f575606b-4b7d-e31d-3cae-756b57cda063 {
    row-gap: 2rem;
  }
}

/* ==========================================================================
   Define missing row-vertical-gap-med class (not in Webflow CSS export)
   and increase it on portrait mobile for the feature card grids.
   ========================================================================== */
.row.row-vertical-gap-med {
  row-gap: var(--_sizing---column-gap--medium, 1.5rem);
}

@media screen and (max-width: 479px) {
  .row.row-vertical-gap-med {
    row-gap: 3.5rem;
  }
}

/* ==========================================================================
   Portrait mobile: left-align Corporate Security section (right-aligned on desktop)
   ========================================================================== */
@media screen and (max-width: 479px) {
  .slot.w-variant-b79235ba-b09a-34b9-87a8-57c449ef50d7 {
    text-align: left;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Portrait mobile: constrain Costanoa + Radical Ventures logos to half width
   ========================================================================== */
@media screen and (max-width: 479px) {
  .row.w-variant-4b723d12-69f7-7b5f-fa19-a58ee43a57ee .img-default {
    max-width: 75%;
    margin: 0 auto;
  }
}

/* ==========================================================================
   Portrait mobile: pull hamburger menu button away from right edge
   ========================================================================== */
@media screen and (max-width: 767px) {
  .navbar_menu-btn {
    margin-right: 0.5rem;
  }
}

/* ==========================================================================
   Portrait mobile: single-column form layout on book-a-demo page
   ========================================================================== */
@media screen and (max-width: 479px) {
  .contact-form_form .col {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   Our Story: more space between Costanoa + Radical logos on desktop
   ========================================================================== */
.row.w-variant-4b723d12-69f7-7b5f-fa19-a58ee43a57ee {
  column-gap: 6rem;
}

/* ==========================================================================
   Homepage: standardize inter-section vertical spacing to ~250px.
   Each padding-section produces 125px (7.8125rem), so two adjacent
   sections = 250px total gap regardless of variant (medium or large).
   ========================================================================== */
body {
  --_sizing---padding-section--large: 7.8125rem;
  --_sizing---padding-section--medium: 7.8125rem;
}

/* ==========================================================================
   Homepage: pull the hero "Go from question to conviction" section up 100px
   ========================================================================== */
#interactive-hero-section {
  margin-top: -100px;
}

/* ==========================================================================
   Interactive Hero: mobile inline videos (tab siblings, mobile only)
   ========================================================================== */

/* Always hidden — JS adds is-active on the current tab's wrap */
.interactive-hero__mobile-video-wrap {
  display: none;
}

/* On portrait (<=767px): hide right-side panel; active wrap shows the video */
@media screen and (max-width: 767px) {
  .interactive-hero__tab-content {
    display: none !important;
  }

  .interactive-hero__mobile-video-wrap.is-active {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .interactive-hero__mobile-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0.75rem;
    background: #1a1230;
  }
}