/* ════════════════════════════════════════════════════════════════
   §-1 Dark-grey section wash (mirrors the investor / about pages'
   .section-bg-dark treatment). Used on the homepage's
   .section_home_about (Execution Ownership tabs) and
   .section_home_portfolio-companies ("How we help our Portfolio
   Companies?") so the two sit on the same warm-grey backdrop as
   Sri's Journey / tribe / weekly sections elsewhere in the site.
   Lives here (not in shifu-ventures-staging.webflow.css) so the
   rule is loaded on every page that loads homepage-v2.css without
   polluting the global sheet with page-specific styles.
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   §0 HERO - first viewport only carries heading + subhead + CTA,
   centered vertically in the viewport. The two-card swiper (Shifu
   Ventures vs Traditional Accelerators) used to fill the right /
   bottom of the hero - hidden for now so the opening reads as a
   clean statement before the user scrolls.
   ════════════════════════════════════════════════════════════════ */
/* Hero - UNIVERSAL rules (apply at every breakpoint).
   The previous version nested all of these inside `min-width: 992px`,
   which left mobile + tablet showing the older Webflow swiper layout
   (right-side cards) and inheriting the default-light body bg. The
   user reported "mobile looks like the older one"; moving the core
   styles out of the media query fixes that without touching the
   desktop-only grid-pattern + min-height enhancements (kept below). */
.section-home-hero {
  /* Explicit dark grey - matches body / navbar / investor hero. */
  background-color: #0c0c0c;
  position: relative;
  overflow: hidden;
}
.section-home-hero .home_hero-header_component {
  display: flex;
  justify-content: center;
  width: 100%;
}
.section-home-hero .home-hero-header {
  width: 100%;
  text-align: center;
  align-items: center;
}
.section-home-hero .home-hero-heading-wrap {
  align-items: center;
  text-align: center;
}
.section-home-hero .heading-style-h1.flex {
  justify-content: center;
  text-align: center;
}
.section-home-hero .max-width-medium {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-home-hero .button-group {
  justify-content: center;
}
/* Right-side Webflow swiper (the old "Shifu Ventures vs Traditional
   Accelerators" two-card comparison) hidden globally - the markup
   stays in the DOM so Swiper / Webflow IX don't throw. */
.section-home-hero .home-heroswiper-wrap {
  display: none;
}

@media screen and (min-width: 992px) {
  .section-home-hero {
    min-height: calc(100vh - var(--nav-h, 82px));
    display: flex;
    align-items: center;
  }
  /* Grid pattern background - adapted from shadcn-style BGPattern.
     Painted with two CSS linear-gradients (no SVG, no JS, no extra
     network requests - so it loads instantly with the page CSS) and
     masked with a radial gradient so the centre (where the headline
     + sub-copy + CTA sit) stays empty and the pattern fades up at
     the edges. Lines kept very subtle so the grid sits in the
     background and never competes with the type. Desktop-only - on
     narrower viewports the pattern reads as visual noise. */
  .section-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 0%, transparent 25%, #000 80%);
            mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 0%, transparent 25%, #000 80%);
    pointer-events: none;
    z-index: 0;
  }
  /* Hero content stays above the grid backdrop. */
  .section-home-hero > .padding-global {
    position: relative;
    z-index: 1;
    width: 100%;
  }
  .section-home-hero .padding-section-large {
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
  }
}


@media screen and (min-width: 992px) {
  .section-bg-dark {
    background: #161616;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  }
  /* Consistent breathable 7rem top + bottom padding across the inner
     padding wrapper variants the homepage uses (large + medium) so
     every dark section reads with the same vertical rhythm. */
  .section-bg-dark .padding-section-large,
  .section-bg-dark .padding-section-medium {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  /* Focused card stays transparent - the orange L-bracket corners
     are the only highlight signal. Earlier I added a #1e1e1e fill
     here for contrast, but it produced a visible "card inside a
     card" artefact: the focused area showed as a dark slab around
     the white image, reading as two stacked surfaces. The brackets
     alone carry the focus state cleanly. */

  /* Strip the white "inner card" baked into the diagram images and
     replace it with a dark-grey surface (matches the section's wash
     family instead of going pure black, which read as harsh).
     - invert + hue-rotate flips white → black and rotates the
       resulting blue back to orange so the diagram's coloured
       shapes survive.
     - mix-blend-mode: lighten composited over the wrap's #1a1a1a
       background means the now-black pixels take MAX(0, 26) = 26
       per channel → dark grey, while the orange pixels take
       MAX(orange, 26) ≈ orange (unchanged). Net effect: white card
       becomes a dark-grey card, orange shapes stay orange. */
  /* Diagrams ship with a native white background + mid-grey accents +
     brand-orange accents, designed to read on white. Per user direction,
     let the wrap stay white and skip the invert/blend-mode treatment
     entirely - the orange + grey accents pop on the white card surface
     and the cards visually break the otherwise all-dark section into
     two clean "design surfaces" the way the source mockups intend. */
  .home-about-tabs-content-image-wrap {
    background-color: #ffffff;
  }
  /* Reduce the per-card heading by 4px and tighten the line height
     so the title sits more compactly above the diagram. Applies to
     both the focused (Shifu) and unfocused (Them) cards across all
     four tabs. */
  .home-about-tabs-content-iitem-top .heading-style-h3 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
  /* Tighter gap between the heading and the diagram inside each
     card - the default 28px read as a noticeable dead zone. */
  .home-about-tabs-item-content {
    gap: 0.75rem;
  }
}

/* Image-on-top, heading-on-bottom for the home_about_tabs cards at
   EVERY breakpoint (was previously desktop-only - user asked for the
   same swap on mobile). DOM order stays heading→image so screen
   readers still announce the heading first; `column-reverse` only
   flips visual order. */
.home-about-tabs-item-content {
  flex-direction: column-reverse;
}


/* ════════════════════════════════════════════════════════════════
   §0a HOME ABOUT - static "Shifu vs Traditional Accelerators"
   comparison headers that sit ABOVE the per-tab cards. They don't
   change with the active tab; they're the section-level anchor
   describing what each column means.
   ════════════════════════════════════════════════════════════════ */
.home-about-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
  /* Right margin matches .tabs-content's 70px right margin so the
     headers line up directly above the two cards below. The
     .home_about_tabs parent is a 2-col grid (content | tabs-menu);
     placing the headers at column 1, row 1 puts them ABOVE the
     tabs-content (which we shift down to row 2 below). */
  grid-column: 1 / 2;
  grid-row: 1;
  /* Trimmed bottom margin so the subhead sits closer to the cards
     below - earlier 1.5rem read as a noticeable dead zone. */
  margin: 0 70px 0.5rem 0;
}
/* Webflow's .tabs-content was explicitly anchored to row 1 of the
   .home_about_tabs grid - bump it to row 2 so our new headers (row
   1) sit above it. */
.home_about_tabs > .tabs-content.w-tab-content {
  grid-row: 2 !important;
}
/* Right-column tabs menu placement.
   Previously the menu spanned both rows (`grid-row: 1 / 3`), so its
   top edge sat next to the section header on the left. Per user
   direction the menu should instead align with the TOP OF THE CARDS
   (the .tabs-content row), not with the heading above them. Pinning
   the menu to row 2 only drops it down to match the cards' top
   edge. Row 1 is unaffected (just the headers, sized to content). */
.home_about_tabs > .home_about_tabs-menu {
  grid-row: 2 !important;
  align-self: start;
}

/* ── Home-about tabs: more obvious selected vs unselected (desktop)
   The Webflow default for `.home_about_tab-link.w--current` just
   bumps the bottom border colour from white-25 → white-80 and
   text from dim to bright. At a glance it reads as "everything
   underlined", so the active state doesn't pop. Add a clear
   left-side orange accent bar + brand-orange divider + subtle
   background tint on the active tab so selection is immediate. */
@media (min-width: 992px) {
  .home_about_tabs-menu .home_about_tab-link {
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }
  .home_about_tabs-menu .home_about_tab-link:hover {
    color: rgba(255, 255, 255, 0.7);
  }
  .home_about_tabs-menu .home_about_tab-link.w--current {
    color: #ffffff;
    font-weight: 600;
    background: rgba(245, 110, 56, 0.05);
    /* Bottom border swapped to brand orange + a touch thicker so
       the underline reads as a marker, not the same line as the
       inactive divider. */
    border-bottom-color: var(--_primitives---colors--brand-orange, #f56e38);
    border-bottom-width: 2px;
  }
}

/* ── Home-about tabs: mobile - no horizontal scroll, no swipe gesture.
   The Webflow base puts these tabs in a 100vw grid with `overflow: auto`
   + `white-space: nowrap` on each label, which forced a horizontal
   scroll the user had to swipe (and made the first tap on a tab
   register as a scroll-start instead of a tap = 2-3 taps needed to
   actually switch tabs). Override here:
     • `overflow: hidden` kills the scroll affordance
     • `white-space: normal` lets long labels wrap to 2 lines so all
       four tabs fit at once on a narrow screen
     • `touch-action: manipulation` removes the 300ms iOS tap delay
       and tells the browser this is a tap target, not a swipe zone
*/
@media (max-width: 991px) {
  .home_about_tabs-menu {
    overflow: hidden !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .home_about_tabs-menu .home_about_tab-link {
    white-space: normal !important;
    text-align: center;
    padding: 0.75rem 0.375rem !important;
    font-size: 0.8125rem;
    line-height: 1.2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  /* Inner div children of the tab link (the .tabs-links label +
     the .nav-link-underline svg embed + .focused-bg) were absorbing
     taps on the text and not bubbling to the parent <a>, so the
     user had to tap the padding band around the text for the tab
     to switch. Disabling pointer-events on children makes the whole
     visible row a single tap target. */
  .home_about_tabs-menu .home_about_tab-link > * {
    pointer-events: none;
  }
}
.home-about-header {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0.5rem 0.7rem;
}
.home-about-header-heading {
  margin: 0;
  font-family: var(--_typography---font-styles--heading);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.home-about-header.is-shifu .home-about-header-heading {
  color: #ffffff;
}
.home-about-header.is-them .home-about-header-heading {
  color: rgba(255, 255, 255, 0.5);
}
.home-about-header-heading em {
  /* Same colour + style as the rest of the heading. The brand orange
     arc is drawn underneath by the fd-svg-underline-text script (see
     index.html `<em fd-svg-underline-text>`), matching the swoosh used
     elsewhere on the site instead of a flat CSS underline. */
  font-style: normal;
  color: inherit;
  font-weight: 500;
}
.home-about-header.is-them .home-about-header-heading em {
  /* The "not traditional accelerators" em inherits the dimmed parent
     colour so it doesn't pop above the rest of the heading - only the
     subtle white arc beneath it carries the emphasis. */
  color: inherit;
}
.home-about-header-sub {
  margin: 0;
  font-family: 'Figtree', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 28rem;
}
.home-about-header.is-shifu .home-about-header-sub {
  color: rgba(255, 255, 255, 0.7);
}
.home-about-header.is-them .home-about-header-sub {
  color: rgba(255, 255, 255, 0.4);
}

/* Subtle frame around the right (Them) tab card so both sides read
   as proper cards. The left/focused card keeps its L-bracket
   "focused" treatment; the right card now gets a faint hairline
   border + transparent fill, so the comparison reads as two
   matching frames with very different prominence (focused vs
   quiet) instead of one frame next to floating text. */
@media (min-width: 992px) {
  .home-about-tabs-item:not(.is-focused) .home-about-tabs-item-content {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
  }
}

/* Tablet / mobile: each tab pane becomes a 2-slide horizontal
   swipe carousel. Slide 1 = "Shifu way" header + arc + sub +
   Shifu card. Slide 2 = "Traditional" header + sub + Them card.
   Only ONE pair is visible at a time; the user swipes left/right
   to flip between them. The shared header row at the top of the
   section is hidden (its clones live inside each slide instead).

   This solves the prior "both headers showing stacked" issue -
   each (header, card) pair scrolls together as one unit, and the
   orange arc on "Shifu way" comes along automatically since the
   clones are made AFTER the arc-init script has run. */
@media (max-width: 991px) {
  /* The section-level shared header row is hidden - clones live
     inside each slide. */
  .home-about-headers {
    display: none;
  }
  /* Mobile carousel: a STACKED cross-fade, not a horizontal slide.
     Both slides occupy the same grid cell (1×1); the active one is
     opacity 1, the inactive is opacity 0 + visibility hidden. The
     autoplay JS toggles `.is-active` every 2 seconds to swap which
     is visible. No horizontal scroll, no swipe - the slide simply
     disappears and the other appears in its place. */
  .home-about-tabs-content-grid.is-mobile-carousel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    width: 100%;
    position: relative;
    overflow: visible;
  }
  .home-about-mobile-slide {
    /* All slides occupy the same grid cell - they stack on top of
       each other. Opacity + visibility control which is shown. */
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem;
    min-width: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    /* Visibility transition is delayed-on / immediate-off so the
       outgoing slide stays in the layout flow long enough to fade
       out cleanly, then disappears from tab focus afterwards. */
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  }
  .home-about-mobile-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.45s ease, visibility 0s linear 0s;
    z-index: 1;
  }
  /* Mobile-clone header styling. Tight gap between heading and
     sub (was 0.625rem -> 0.25rem) per user direction. */
  .home-about-header.is-mobile-clone {
    padding: 0;
    margin: 0;
  }
  .home-about-header.is-mobile-clone .home-about-header-heading {
    font-size: clamp(1.5rem, 5.5vw, 1.75rem);
    margin-bottom: 0.25rem;
  }
  .home-about-header.is-mobile-clone .home-about-header-sub {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    max-width: 100%;
  }
  /* L-bracket decoration stays scoped to the card body now that
     the header lives in the slide wrapper, not inside the card. */
  .home-about-tabs-item .focused-bg {
    top: 0;
  }
}



/* =====================================================================
   homepage-v2.css
   ---------------------------------------------------------------------
   Homepage v2 - three new/rebuilt sections on index.html:

     §A  .sv-mission2          - "On a mission to co-build 100 Companies"
                                  rebuilt as a three-tier proof stack:
                                  Live Portfolio (2) · Co-Founders (3)
                                  · Closing 2026 (2). The original 100-tile
                                  grid + small fractional cards are archived.

     §B  .sv-pl-bento           - "How we helped Photon Legal" bento grid,
                                  replaces the nested-tabs portfolio system
                                  and absorbs the standalone PL testimonial
                                  video band that used to sit below.

     §C  .sv-invgw              - New "Investor Gateway" slim band, sits
                                  between the PL bento and the FAQ section.
                                  Funnels investor-mode traffic to
                                  investors.html with a logo/portrait teaser
                                  and the round-close FOMO line.

   Scope: ONLY targets index.html. All selectors are namespaced under
   `sv-` to avoid colliding with the Webflow-generated stylesheet.
   ===================================================================== */


/* =====================================================================
   §A  Mission v2 - three-tier proof stack
   ===================================================================== */

.sv-mission2 {
  display: flex;
  flex-direction: column;
  /* No flex gap - per-tier margins below let us size the gap
     between the header and the Portfolio row independently from
     the gap between the Portfolio and Foundational rows. */
  gap: 0;
}
.sv-mission2-tier.is-portfolio {
  /* Bigger breathing room between the section's subhead and the
     first row of cards. */
  margin-top: 4.5rem;
}

/* ── Header row: headline left, "5 in motion" counter right ─────────── */
.sv-mission2-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2.5rem;
}

/* Centered variant - single column, page-aligned. Used when the header
   carries an eyebrow ("Our Vision") above the headline and reads as a
   section anchor rather than a left-justified intro. */
.sv-mission2-head.is-centered {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.sv-mission2-head.is-centered .sv-mission2-head-left {
  max-width: 44rem;
  margin: 0 auto;
}

.sv-mission2-head-left { max-width: 38rem; }

.sv-mission2-head .heading-style-h2 { margin: 0 0 1.75rem; }

/* Eyebrow above the mission headline - matches the .sv-pl-eyebrow rhythm
   (same letter-spacing, weight, color) for cross-section consistency. */
.sv-mission2-head-eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.875rem;
}

.sv-mission2-head-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 1rem;
  line-height: 1.5;
}

/* Counter block - typographic 5/100, no decorative grid. */
.sv-mission2-counter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
  text-align: right;
}
.sv-mission2-counter-big {
  font-family: var(--_typography---font-styles--heading);
  font-size: clamp(3.25rem, 7vw, 5rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
  gap: 0.125rem;
}
.sv-mission2-counter-big span {
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: 0;
}
.sv-mission2-counter-sub {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}
.sv-mission2-counter-sub strong {
  color: var(--_primitives---colors--brand-orange);
  font-weight: 600;
}

/* ── Tier (a row of cards with its own labelled header) ─────────────── */
.sv-mission2-tier {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
}

.sv-mission2-tier-label {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.8125rem;        /* bumped +2px per feedback */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  min-height: 1.25rem;
}
.sv-mission2-tier-num {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.sv-mission2-tier-name {
  /* Quiet section label - lighter weight, dimmer colour, so the
     cards below carry the visual weight, not the label. */
  color: rgba(255, 255, 255, 0.42);
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-transform: none;
  flex: 0 0 auto;
}
/* Tier-label row inherits its uppercase tracking from the global rule,
   but the .tier-name above resets to title-case for heading feel. The
   .tier-rule next to it stays untouched. */
.sv-mission2-tier-label {
  text-transform: none;
}
.sv-mission2-tier-rule {
  flex: 1 1 auto;
  min-width: 1rem;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.20), rgba(255,255,255,0));
}
/* Subhead under each tier label - explains what "Fractional Portfolio
   Company" / "Portfolio Company" means in two to three lines. Sits
   between the labelled header and the cards row, sized down so it
   reads as supporting copy, not as a competing headline. The parent
   .sv-mission2-tier has gap: 1.375rem so spacing above and below this
   paragraph stays consistent without extra margin. */
.sv-mission2-tier-sub {
  margin: 0;
  /* Matched to the tier label (02 · Foundational Portfolio Companies)
     so the section header + supporting copy read as one quiet caption
     block, with the cards below carrying the visual weight. */
  color: rgba(255, 255, 255, 0.42);
  font-family: 'Figtree', sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  max-width: 68ch;
}

/* Footnote variant - sits BELOW the cards row (was a wall of text
   above), italic + smaller so it reads as a fine-print clarifier
   instead of competing with the card grid above. */
.sv-mission2-tier-sub.is-footnote {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.50);
  font-style: italic;
  max-width: 74ch;
  margin-top: 0.5rem;
}

/* Mission2 section vertical rhythm - bumped to ~7rem top + bottom so
   the section breathes like the dark-grey wash sections (Sri's
   Journey, tribe, weekly, about's team / journey). */
@media screen and (min-width: 992px) {
  .sv-mission2-section .padding-section-large {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  /* Visual gap between the two tiers - tightened so the Portfolio
     row and the Foundational row read as one continuous section
     rather than two well-separated blocks. */
  .sv-mission2-tier.is-foundational {
    margin-top: 0.75rem;
  }
}

/* The three closed Foundational cards carry a founder credential block
   (divider + avatar + name + role). The two "Closing 2026" cards stay
   role + status only, so scope the hide to those. */
.sv-mission2-frac-card.is-soon .sv-mission2-frac-divider,
.sv-mission2-frac-card.is-soon .sv-mission2-frac-person,
.sv-mission2-frac-card.is-soon .sv-mission2-frac-li {
  display: none !important;
}

/* Big faded card-number at the bottom-right of each numbered card
   (Photon Legal=1, Curious Men Films=2, CMO=3 ... CHRO=7). Counts
   the section toward the "100 companies" goal stated in the
   headline. Heavy weight + low opacity so the number reads as a
   confident running tally without competing with the card's
   primary content. Inset 1rem from each edge so the digit sits
   inside the card and isn't clipped by overflow:hidden. */
.sv-mission2-card-num {
  position: absolute;
  /* Negative bottom so the digit bleeds past the card's bottom edge
     and gets cropped by overflow:hidden - creates a deliberate
     "card cuts into the digit" visual at the bottom-right. */
  right: 0;
  bottom: -0.875rem;
  font-family: var(--_typography---font-styles--heading);
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.03);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* The Foundational frac-cards are shorter than the Portfolio cards,
   so scale the number down a touch so it doesn't overflow vertically. */
.sv-mission2-frac-card .sv-mission2-card-num {
  font-size: 4rem;
  right: 0;
  bottom: -0.625rem;
}
/* Cards create their own stacking context (isolation: isolate) so
   the .sv-mission2-card-num at z-index 0 sits BEHIND every other
   child without us having to set position: relative on each child
   manually - critical because the existing .sv-mission2-pc-arrow
   relies on position: absolute and shouldn't be overridden. */
.sv-mission2-pc-card,
.sv-mission2-frac-card {
  isolation: isolate;
}

/* Tighter inter-card gap on the Foundational row - "bring the five
   boxes closer" feedback. */
.sv-mission2-frac-row {
  gap: 0.5rem;
}

/* ── Row 1 - Fractional Co-Founders (5 cards in one row).
      The fractional role (CMO / CPO / CFO / CRO / CHRO) is the HERO
      of each card: big display type. The person + status sit as
      secondary credentials underneath. Strong visual contrast
      between closed (solid + green accent) and closing (dashed +
      orange accent) so an investor reads the row's split in one
      glance. */
.sv-mission2-frac-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* Tighter gap so the five boxes read as a compact set, not five
     billboards spaced apart. */
  gap: 0.5rem;
}
/* The mobile-only +93 tile that's appended inside .sv-mission2-frac-row
   is hidden on desktop - the original +93 inside .sv-mission2-pc-row
   above is the one that's shown there. Mobile override flips this. */
.sv-mission2-pc-card.is-plus.is-mobile-only {
  display: none;
}

.sv-mission2-frac-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.125rem 1.125rem 1.25rem;
  /* Restored to hold the founder credential block (divider + avatar +
     name + role) on the closed cards. */
  min-height: 11.5rem;
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  overflow: hidden;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}
/* Frac cards stay static on hover - they're not interactive (no
   click target, no LinkedIn jump), so they shouldn't carry a hover
   affordance. */
.sv-mission2-frac-card:hover {
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* Closed variant - thin green outline on all four sides + subtle
   green ambient fill + green CLOSED pill. The faint green wash
   reinforces the "won / shipped" signal across all three closed
   cards as a quick visual grouping. */
.sv-mission2-frac-card.is-closed {
  background: rgba(46, 204, 113, 0.045);
  box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.45);
}
.sv-mission2-frac-card.is-closed:hover {
  background: rgba(46, 204, 113, 0.045);
  box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.45);
}

/* Closing variant - gray dashed stroke, no surface fill. Reads as
   "future / provisional" via the dashed line alone, no orange. */
.sv-mission2-frac-card.is-soon {
  background: rgba(255, 255, 255, 0.006);
  box-shadow: none;
  border: 1px dashed rgba(255, 255, 255, 0.22);
}
.sv-mission2-frac-card.is-soon:hover {
  background: rgba(255, 255, 255, 0.006);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

/* Role block - eyebrow + role title. Vertically centred in the upper
   portion of the card (between the top edge and the divider) by giving
   it both auto top + auto bottom margins. The divider below also has
   margin-top: auto, so the available vertical space distributes evenly
   above and below the role block, putting the title roughly mid-way
   through the upper half - visually balanced now that the tagline is
   gone and there's empty real estate to use. */
.sv-mission2-frac-role {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  /* Sits naturally below the status bar instead of auto-centering -
     auto margins padded the card with empty space top + bottom now
     that the person block underneath is gone. */
  margin: 0.875rem 0 0;
}
.sv-mission2-frac-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  white-space: nowrap;
}
.sv-mission2-frac-card.is-soon .sv-mission2-frac-eyebrow {
  color: rgba(255, 255, 255, 0.32);
}
.sv-mission2-frac-title {
  font-family: var(--_typography---font-styles--heading);
  font-size: clamp(1.75rem, 2.4vw, 2.375rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.sv-mission2-frac-card.is-soon .sv-mission2-frac-title {
  color: rgba(255, 255, 255, 0.62);
}
/* One-liner under the role title - explains the value the role brings
   in six words. Subtle, secondary to the role title above, doesn't
   compete with the credibility block below. */
.sv-mission2-frac-tagline {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0;
}
.sv-mission2-frac-card.is-soon .sv-mission2-frac-tagline {
  color: rgba(255, 255, 255, 0.4);
}

/* Divider between role and credentials. `margin-top: auto` pushes the
   divider + person block down to the bottom of the card so the eyebrow
   above stays pinned at the top while the credentials anchor to the
   bottom. */
.sv-mission2-frac-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: auto 0 0.875rem;
}
.sv-mission2-frac-card.is-soon .sv-mission2-frac-divider {
  background: rgba(255, 255, 255, 0.06);
}

/* Person credential - a two-circle facepile (the founder's photo + a
   dashed "?" seat for the second co-founder we're still hiring) followed
   by the named founder + role. The photo links to the founder's profile. */
.sv-mission2-frac-person {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}
.sv-mission2-frac-avatars {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.sv-mission2-frac-avatar {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #2c2c2c 0%, #1c1c1c 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
a.sv-mission2-frac-avatar { cursor: pointer; }
a.sv-mission2-frac-avatar:hover,
a.sv-mission2-frac-avatar:focus-visible {
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.65);
}
/* The "?" seat - dashed ring, no fill, so it reads as an open slot for
   the second co-founder we're still looking for. */
.sv-mission2-frac-avatar.is-open {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0;
  overflow: visible;
}
.sv-mission2-frac-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
}
/* Hover tooltip - each circle sits in a relative wrap so its tooltip can
   float just above it (revealing who the founder is, or that the seat is
   open) without being clipped by the card's overflow. */
.sv-mission2-frac-avatar-wrap {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}
.sv-mission2-frac-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 5px 9px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  pointer-events: none;
}
.sv-mission2-frac-avatar-wrap:hover .sv-mission2-frac-tip,
.sv-mission2-frac-avatar-wrap:focus-within .sv-mission2-frac-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Keep the avatar tooltip inside the card. The card uses overflow:hidden to
   crop the oversized corner number, which also clips a tooltip anchored to a
   right-side avatar (the "Looking for Co-Founders" cut-off). Anchor the tip to
   the avatars row and centre it so it always fits within the card width.
   (CoS 3, Prateek-flagged clip bug.) */
.sv-mission2-frac-card .sv-mission2-frac-avatars { position: relative; }
.sv-mission2-frac-card .sv-mission2-frac-avatar-wrap { position: static; }
.sv-mission2-frac-card .sv-mission2-frac-tip {
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: 100%;
}
/* The "Closing 2026" (is-soon) cards hide the divider whose margin-top:auto
   anchors the closed cards' avatars to the bottom. Now that CRO/CHRO carry
   co-founder seats too, restore that divider so they use the exact same
   push mechanism and all five avatar rows line up. (CoS 3, per Prateek.) */
.sv-mission2-frac-card.is-soon .sv-mission2-frac-divider { display: block !important; }
.sv-mission2-frac-tip-name {
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  line-height: 1.25;
}
.sv-mission2-frac-tip-role {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  line-height: 1.3;
}
.sv-mission2-frac-card.is-soon .sv-mission2-frac-avatar {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.5625rem;
}
.sv-mission2-frac-person-meta {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}
.sv-mission2-frac-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.sv-mission2-frac-card.is-soon .sv-mission2-frac-name {
  color: rgba(255, 255, 255, 0.55);
}
.sv-mission2-frac-name-sub {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}
/* Credibility tag on the closed cards (Ex-Founder, 2x Founder, etc.)
   - kept neutral grey (same as the base rule) so the credential reads
   as a quiet caption rather than a brand accent. */
.sv-mission2-frac-card.is-closed .sv-mission2-frac-name-sub {
  color: rgba(255, 255, 255, 0.45);
}
.sv-mission2-frac-card.is-soon .sv-mission2-frac-name-sub {
  color: rgba(255, 255, 255, 0.42);
}

/* LinkedIn icon - fades in on card hover, sits at bottom-right of the
   card. Used on the 3 closed founder cards (real human credentials).
   Matches the investors.html .inv-bento-li pattern for visual continuity. */
.sv-mission2-frac-li {
  position: absolute;
  bottom: 0.875rem;
  right: 0.875rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.22s ease, visibility 0.22s, transform 0.22s ease,
              background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  z-index: 3;
  backdrop-filter: blur(2px);
}
.sv-mission2-frac-card:hover .sv-mission2-frac-li,
.sv-mission2-frac-li:focus-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sv-mission2-frac-li:hover {
  background: rgba(46, 204, 113, 0.18);
  border-color: rgba(46, 204, 113, 0.65);
  color: rgb(86, 211, 145);
}
.sv-mission2-frac-li svg { display: block; }

/* Status bar - full-width band at the TOP of each fractional card.
   Bleeds horizontally + upward through the card's padding via negative
   margins so it visually sits at the card's outer edge (closing flush
   with the card's box-shadow border). Bottom border separates the
   status band from the role section below. Different tint per variant:
     - .is-closed → green band (matches the green outline)
     - .is-soon   → orange band (matches the dashed outline)
   The status pill sits centred inside the band. */
.sv-mission2-frac-status-bar {
  margin: -1.25rem -1.125rem 0;
  /* Symmetric vertical padding - keep enough top padding to compensate
     for the negative-margin bleed (which would otherwise push the
     centred pill toward the strip's top edge) so the uppercase text
     reads as visually centred inside the visible band. */
  padding: 1rem 1.125rem 0.5625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sv-mission2-frac-card.is-closed .sv-mission2-frac-status-bar {
  background: rgba(46, 204, 113, 0.10);
  border-bottom: 1px solid rgba(46, 204, 113, 0.30);
}
.sv-mission2-frac-card.is-soon .sv-mission2-frac-status-bar {
  background: rgba(245, 110, 56, 0.07);
  /* Grey dashed underline - quieter than the orange band above, so the
     status text + dot carry the colour and the divider just delineates. */
  border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
}

/* Status pill - now lives alone in the bar (no eyebrow next to it),
   so it can grow slightly bolder + better-spaced for impact. */
.sv-mission2-status,
.sv-mission2-soon-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.1875rem 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  border: 0;
}
.sv-mission2-status { color: rgb(86, 211, 145); }
.sv-mission2-status::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: rgb(86, 211, 145);
  animation: svDotPulse 1.4s ease-in-out infinite;
}
@keyframes svDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(86, 211, 145, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(86, 211, 145, 0); }
}

.sv-mission2-soon-status { color: var(--_primitives---colors--brand-orange); }
.sv-mission2-soon-status::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--_primitives---colors--brand-orange);
  animation: svSoonPulse 1.8s ease-in-out infinite;
}
@keyframes svSoonPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-mission2-status::before,
  .sv-mission2-soon-status::before { animation: none; }
}


/* ── Row 2 - Portfolio Companies (3 cards in one row).
      Two live portfolio cards (Photon Legal, Curious Men Films) +
      one "+93 others" stat block that closes the math from the
      headline (2 live + 93 to come = 95 PortCos · plus 5 fractionals
      = 100). Cards share the row height for a clean rhythm. */
.sv-mission2-pc-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.sv-mission2-pc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.75rem 1.625rem 1.5rem;
  min-height: 11rem;
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}
.sv-mission2-pc-card:hover {
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* External-link arrow - inline SVG dropped into the card markup. Sits
   top-right; clean 1.5px stroke (much nicer than the unicode ↗ glyph).
   Fades to brand-orange + nudges up-right on hover. */
.sv-mission2-pc-arrow {
  position: absolute;
  top: 1rem;
  right: 1.125rem;
  width: 1rem;
  height: 1rem;
  color: rgba(255, 255, 255, 0.38);
  transition: color 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.sv-mission2-pc-arrow svg { width: 100%; height: 100%; display: block; }
.sv-mission2-pc-card:hover .sv-mission2-pc-arrow {
  color: var(--_primitives---colors--brand-orange);
  transform: translate(2px, -2px);
}

.sv-mission2-pc-card-logo {
  height: 2.25rem;
  width: auto;
  max-width: 11rem;
  object-fit: contain;
  object-position: left center;
  display: block;
}
/* Company identity block - sits below the logo, above the transition
   stat. Name reads as the proper noun; tagline gives "who they are"
   in one line so the card carries meaning without the user clicking. */
.sv-mission2-pc-card-id {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: -0.25rem;
}
.sv-mission2-pc-card-name {
  font-family: var(--_typography---font-styles--heading);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #fff;
}
.sv-mission2-pc-card-tagline {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}
.sv-mission2-pc-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: auto;
}
.sv-mission2-pc-card-stat {
  font-family: var(--_typography---font-styles--heading);
  font-size: clamp(1.25rem, 1.75vw, 1.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
}
.sv-mission2-pc-card-stat em {
  font-style: normal;
  color: var(--_primitives---colors--brand-orange);
}
/* "Before → after" emphasis. The from-state (₹6.7Cr / Traditional) is
   dimmed to anchor the baseline; the to-state (₹22Cr / AI-native) is
   brand-orange to highlight the transformation. Reads as the change
   itself in a single glance. */
.sv-mission2-pc-card-stat-from {
  color: rgba(255, 255, 255, 0.42);
}
.sv-mission2-pc-card-stat-to {
  color: var(--_primitives---colors--brand-orange);
}
.sv-mission2-pc-card-meta {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

/* +93 block - tiny lattice of future-PortCo cells in the background,
   masked toward the centre so the prominent "+93 · others to come"
   reads clean. Pattern says "more is coming" without spelling it. */
.sv-mission2-pc-card.is-plus {
  background: rgba(255, 255, 255, 0.012);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  text-align: center;
  padding: 0;
  cursor: default;
}
/* No hover state on the "+93 others to come" card - it isn't a
   real portfolio tile (no link, `cursor: default`), so lifting the
   bg or strengthening the border on hover incorrectly suggested
   it was interactive. Hold the resting visual on hover. */
.sv-mission2-pc-card.is-plus:hover {
  background: rgba(255, 255, 255, 0.012);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Tiling SVG pattern - a tiny filled square repeats every 17px across
   the entire card, so the lattice fills the tile edge-to-edge instead
   of sitting in a centred band. Radial mask preserves the centre
   clearing so "+93 / OTHERS TO COME" reads clean over the pattern. */
.sv-mission2-pc-plus-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Lattice tuned to a near-invisible 0.04 so the small squares
     read as a barely-there texture, not a mosaic competing with
     the "+93" callout at the centre. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17'><rect x='0' y='0' width='12' height='12' fill='%23ffffff' fill-opacity='0.04' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/></svg>");
  background-size: 17px 17px;
  background-repeat: repeat;
  background-position: 4px 4px;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,0) 24%, rgba(0,0,0,0.6) 52%, rgba(0,0,0,1) 78%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,0) 24%, rgba(0,0,0,0.6) 52%, rgba(0,0,0,1) 78%);
}
.sv-mission2-pc-plus-center {
  position: relative;
  z-index: 1;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.75rem 1rem;
}
.sv-mission2-pc-plus-num {
  font-family: var(--_typography---font-styles--heading);
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
}
.sv-mission2-pc-plus-label {
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}


/* =====================================================================
   §B  Photon Legal bento - case-study grid
   ===================================================================== */

.sv-pl-section {
  background: transparent;
}

/* Header row: eyebrow + headline + visit-link. No bottom divider so
   the header flows into the bento without a hard rule. */
.sv-pl-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Centered variant - single column, page-aligned. Visit link drops
   below the headline (still inline-flex, just centered in the column).
   Used to anchor the case-study section to the page centerline. */
.sv-pl-head.is-centered {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 1.25rem;
}
.sv-pl-head.is-centered .sv-pl-head-left {
  max-width: 50rem;
  margin: 0 auto;
}
.sv-pl-head-left { max-width: 42rem; }
.sv-pl-head .heading-style-h2 em {
  font-style: italic;
  color: #fff;
}
/* Eyebrow - plain neutral-gray text. No chip, no orange. */
.sv-pl-eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  display: inline-block;
  margin-bottom: 0.875rem;
}
.sv-pl-head .heading-style-h2 { margin: 0; }

.sv-pl-visit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  transition: color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.sv-pl-visit:hover {
  color: var(--_primitives---colors--brand-orange);
  border-color: var(--_primitives---colors--brand-orange);
}

/* Bento grid - no outer frame, no accent ribbon. Tiles stand on the
   page surface directly. Row 3 (plays) is intentionally `auto` so
   the thin chip strip sizes to its content; the other rows have
   minmax floors to keep their card heights consistent. */
.sv-pl-bento-wrap { position: relative; }
/* Two-row 12-col grid. Row 1 is taller because the hero tile now holds
   the time-to-scale slope graph (the graph IS the hero stat). The
   video tile spans BOTH rows on the right so its top aligns with the
   top of the hero - gives the founder testimonial a much more
   prominent footprint. Row 2 holds ACV + Repositioning side by side. */
.sv-pl-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows:
    minmax(22rem, auto)         /* row 1: hero (taller - graph inside) */
    minmax(17rem, auto);        /* row 2: acv + repositioning - auto so Repositioning's stacked blocks aren't clipped */
  gap: 1rem;
}

/* Tile base */
.sv-pl-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  background: #0f0f0f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-radius: 0;
  color: #fff;
  overflow: hidden;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
  min-height: 13rem;
}
/* Hover state removed - the Photon Legal case-study tiles aren't
   navigable; their value is the data they display in place. A
   bg-lift + brighter border on hover incorrectly suggested they
   were clickable. Hold the resting visual. The is-video variant
   below keeps its own subtle hover (it has a play disc that does
   react to hover). */
.sv-pl-tile:hover {
  background: #0f0f0f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sv-pl-tile-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

/* ── Tile spans ──
   Row 1: hero+graph (cols 1-8)              | video (cols 9-12, rows 1-2)
   Row 2: acv  (cols 1-4) + repositioning (cols 5-8) | video continues
   The video tile spans both rows on the right rail so its top edge
   aligns with the top of the hero - gives the founder testimonial
   real estate without making row 1 absurdly tall. */
.sv-pl-tile.is-hero      { grid-column: 1 / span 8;  grid-row: 1 / 2; }
.sv-pl-tile.is-acv       { grid-column: 1 / span 4;  grid-row: 2 / 3; }
.sv-pl-tile.is-position  { grid-column: 5 / span 4;  grid-row: 2 / 3; }
.sv-pl-tile.is-video     { grid-column: 9 / span 4;  grid-row: 1 / 3; min-height: 0; }

/* Hero tile - orange-tinted radial accent so the slope-graph hero
   stat reads against a distinct frame. The graph IS the hero now, so
   we give it the bulk of the tile's interior. */
.sv-pl-tile.is-hero {
  background:
    radial-gradient(ellipse at top right, rgba(245, 110, 56, 0.18), transparent 55%),
    linear-gradient(140deg, #111111 0%, #1a1614 100%);
  justify-content: space-between;
  padding: 2.25rem 2.5rem 1.75rem;
  min-height: 22rem;
}
/* Hover gradient brightening removed - same reason as the base
   .sv-pl-tile:hover above. Hold the resting orange-tinted bg. */
.sv-pl-tile.is-hero:hover {
  background:
    radial-gradient(ellipse at top right, rgba(245, 110, 56, 0.18), transparent 55%),
    linear-gradient(140deg, #111111 0%, #1a1614 100%);
}
/* Big graph wrap - stretches between the eyebrow and the meta strip,
   centered, with the SVG sized to take advantage of the row 1 height.
   The viewBox is 400×240; we let it grow to fit the available width
   while capping height so the meta strip never gets pushed off. */
.sv-pl-hero-graph-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
  min-height: 0;
  scale:1.05;
}
.sv-pl-tile.is-hero .sv-pl-time-graph {
  width: 100%;
  height: auto;
  max-height: 16rem;
  display: block;
}
/* Meta strip under the graph - sized + cased to match the bento
   tile eyebrows ("ANNUAL RECURRING REVENUE", "REPOSITIONING", etc.)
   so it reads as a footer label rather than competing prose. */
.sv-pl-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
.sv-pl-hero-meta strong { color: inherit; font-weight: inherit; }

/* Repositioning tile - two stacked "blocks" with strike-through on
   the before state and a clear connecting arrow line down to the
   after state. Reads at a glance as a transformation. */
.sv-pl-tile.is-position {
  justify-content: flex-start;
  gap: 0.875rem;
  padding: 1.5rem 1.5rem 1.5rem;
}
.sv-pl-position-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sv-pl-position-block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem 0.875rem;
  padding-right: 4.5rem;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sv-pl-position-block.is-before {
  opacity: 0.55;
}
/* Before/After tag - now a small chip absolutely-positioned in the
   top-right of each block instead of taking up its own row at the
   top. Frees up vertical space so the tile sits tighter. The row
   element itself is hidden; only its ::before pseudo (the chip) is
   rendered, anchored to the block's top-right corner. */
.sv-pl-position-block-tag {
  display: none;
}
.sv-pl-position-block::before {
  position: absolute;
  top: 0.5rem;
  right: 0.625rem;
  padding: 0.125rem 0.4375rem;
  letter-spacing: 0.12em;
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
}
.sv-pl-position-block.is-before::before {
  content: "Before";
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
}
.sv-pl-position-block.is-after::before {
  content: "After";
  background: rgba(46, 204, 113, 0.15);
  color: rgba(86, 211, 145, 0.95);
}
.sv-pl-position-block-name {
  font-size: 1.0625rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
/* "Before" name - dimmed for hierarchy (the after-state is the focal
   point), but no strike-through line: the BEFORE/AFTER tags + the
   arrow already communicate the change without striking the text. */
.sv-pl-position-block.is-before .sv-pl-position-block-name {
  color: rgba(255, 255, 255, 0.55);
}
.sv-pl-position-arrow-down {
  align-self: center;
  width: 1px;
  height: 1.25rem;
  background: linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(245,110,56,0.7));
  position: relative;
}
.sv-pl-position-arrow-down::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--_primitives---colors--brand-orange);
}

/* Product strip embedded inside the After block - name + one-liner.
   Reads as "we re-positioned them AND built the product that makes
   the new position real" in one place. The earlier MVP-screenshot
   thumbnail was cropped by the tile height and felt incomplete, so
   we ship the text-only version. */
.sv-pl-position-product {
  /* margin-top: 0.5rem;
  padding-top: 0.5rem; */
  display: block;
  background: transparent;
  box-shadow: none;
  /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
}
.sv-pl-position-product-text {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}
.sv-pl-position-product-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.sv-pl-position-product-desc {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.35;
}

/* ACV / biggest-deal tile - leads with the ₹9 Cr wow stat (biggest
   single contract closed); the ICP-refinement → ACV-jump story is
   the supporting sub-line. */
.sv-pl-tile.is-acv {
  justify-content: space-between;
  gap: 0.875rem;
}
.sv-pl-acv-stat {
  font-family: var(--_typography---font-styles--heading);
  font-size: clamp(2.75rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
}
.sv-pl-acv-sub {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.45;
}
.sv-pl-acv-sub strong { color: #fff; font-weight: 600; }

/* Slope-contrast growth chart (was its own tile, now lives inside the
   hero). Two zones: "Before Shifu" (wide left, gentle gray slope to
   $700K) and "With Shifu" (narrow right, steep orange line up to
   $2.5M). Inflection point labelled. Time labels under each zone make
   the speed contrast read instantly (6 yrs vs 1.5 yrs). The base
   .sv-pl-time-graph styles are kept generic so animations still work;
   the hero-specific sizing is in .sv-pl-tile.is-hero .sv-pl-time-graph
   above. */
.sv-pl-time-graph {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Sequenced path-draw animation for the time-to-scale graph:
   1. before-line draws from origin to inflection (₹6.7 Cr)  - 1.2s
   2. inflection dot + "₹6.7 Cr" label fade in              - at 1.2s
   3. after-line draws from inflection to endpoint (₹22 Cr) - 0.9s @ 1.6s
   4. arrowhead pops at the tip                             - at 2.4s
   5. "₹22 Cr" endpoint label fades in                      - at 2.5s
   The graph stays in its final state at rest; the .is-animating
   class fires once when the tile scrolls into view. */
.sv-pl-graph-before-line {
  stroke-dasharray: 254;
  stroke-dashoffset: 254;
}
.sv-pl-graph-after-line {
  stroke-dasharray: 113;
  stroke-dashoffset: 113;
}
.sv-pl-graph-mid-dot,
.sv-pl-graph-mid-label,
.sv-pl-graph-after-head,
.sv-pl-graph-end-label { opacity: 0; }

.sv-pl-time-graph.is-animating .sv-pl-graph-before-line {
  animation: svGraphDraw 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.sv-pl-time-graph.is-animating .sv-pl-graph-mid-dot,
.sv-pl-time-graph.is-animating .sv-pl-graph-mid-label {
  animation: svGraphFade 0.45s ease-out 1.15s forwards;
}
.sv-pl-time-graph.is-animating .sv-pl-graph-after-line {
  animation: svGraphDraw 0.9s cubic-bezier(0.4, 0, 0.2, 1) 1.6s forwards;
}
.sv-pl-time-graph.is-animating .sv-pl-graph-after-head {
  animation: svGraphPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s forwards;
  transform-origin: center;
  transform-box: fill-box;
}
.sv-pl-time-graph.is-animating .sv-pl-graph-end-label {
  animation: svGraphFade 0.5s ease-out 2.55s forwards;
}

@keyframes svGraphDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes svGraphFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes svGraphPop {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
  .sv-pl-graph-before-line,
  .sv-pl-graph-after-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .sv-pl-graph-mid-dot,
  .sv-pl-graph-mid-label,
  .sv-pl-graph-after-head,
  .sv-pl-graph-end-label { opacity: 1; }
  .sv-pl-time-graph.is-animating * { animation: none !important; }
}

/* Product MVP tile - a dedicated tile for the AI product we built
   for Photon Legal. Lives in row 2 alongside ACV and Time. */
.sv-pl-tile.is-product {
  justify-content: space-between;
  gap: 0.875rem;
}
.sv-pl-product-headline {
  font-family: var(--_typography---font-styles--heading);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
}
.sv-pl-product-body {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.4;
}
.sv-pl-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4375rem;
  margin-top: auto;
}
.sv-pl-product-tag {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  background: rgba(46, 204, 113, 0.1);
  color: rgba(86, 211, 145, 0.92);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.28);
}

/* Plays tile - chip grid. Compact min-height so the tile fits its
   content without leaving a dead band of empty space; chips sit
   directly under the eyebrow with a single gap. */
.sv-pl-tile.is-plays {
  justify-content: flex-start;
  min-height: 0;
  gap: 1rem;
}
.sv-pl-plays-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sv-pl-play-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.75rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Video tile - the embedded YouTube-style thumbnail already has a
   centered play button baked in, so we don't add a second one over
   the image. Eyebrow + caption + play indicator live together in a
   clean strip BELOW the thumbnail (not over it) so nothing competes
   with the image. Hover dims the thumbnail slightly and lights up
   the play indicator. */
.sv-pl-tile.is-video {
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}
/* Match the neutral hover the rest of the bento tiles use - same
   inset white hairline strength, no orange tint. The translucent play
   disc inside is what reacts on hover; the tile frame stays calm. */
.sv-pl-tile.is-video:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: #0f0f0f;
}
/* Video tile cover - full-bleed founder thumbnail behind a dark
   gradient veil. The .sv-pl-video-cover-thumb img fills the cover
   absolutely so text + play button float on top. The grain layer
   doubles as a dark veil (its radial gradients are stronger to dim
   the photo enough that the text reads). Eyebrow/headline/meta carry
   their own text-shadow so they stay legible on any image.

   Inset 1px hairline mirrors the other bento tiles' border - the
   cover sits on top of the parent .sv-pl-tile's own inset shadow, so
   we re-apply it here so the testimonial tile reads as part of the
   same family. */
.sv-pl-video-cover {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.75rem 1.5rem 1.5rem;
  background:
    radial-gradient(ellipse at 75% 25%, rgba(245, 110, 56, 0.16), transparent 60%),
    linear-gradient(135deg, #0f0f0f 0%, #1a1413 100%);
  overflow: hidden;
}
/* Border rendered ON TOP of all cover children via ::after. The
   inset box-shadow approach gets covered by the thumbnail image
   (which is position: absolute; inset: 0 and paints over the
   shadow). A pseudo with z-index above the thumbnail keeps the
   1px frame visible above the photo.

   The PERCEIVED border weight has to match the other bento tiles
   (which sit on a flat #0f0f0f bg). Pure white at the other tiles'
   0.06 alpha is virtually invisible against the bright spots in the
   founder photo (green wall, white wall) - so the alpha here is
   bumped to land at the same VISUAL weight. */
.sv-pl-video-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: box-shadow 0.2s ease;
}
.sv-pl-tile.is-video:hover .sv-pl-video-cover::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.sv-pl-video-cover-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  z-index: 0;
  /* Subtle warm tint so the founder photo doesn't pop saturated
     against the rest of the bento. */
  filter: saturate(0.85) contrast(0.95);
}
.sv-pl-video-cover-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Two-layer dark veil:
     1. Base black wash at 25% across the whole tile - dims the
        thumbnail uniformly so it never competes with the text.
     2. Stronger gradient at top (headline zone) + bottom (meta chip
        zone) - pushes contrast where the cover text lives.
     The founder portrait stays visible through the wash. */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 22%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.45) 72%, rgba(0,0,0,0.85) 100%),
    radial-gradient(circle at 18% 70%, rgba(255,255,255,0.025), transparent 36%),
    radial-gradient(circle at 82% 82%, rgba(245,110,56,0.10), transparent 40%);
  z-index: 1;
}
.sv-pl-video-cover-eyebrow {
  position: relative;
  z-index: 2;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 700;
  /* Layered shadow: tight dark halo for crisp edges + soft wide halo
     for ambient contrast - readable on the busiest part of any
     thumbnail. */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 6px rgba(0, 0, 0, 0.95),
    0 0 22px rgba(0, 0, 0, 0.7);
}
.sv-pl-video-cover-headline {
  position: relative;
  z-index: 2;
  font-family: var(--_typography---font-styles--heading);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 2px 8px rgba(0, 0, 0, 0.95),
    0 0 28px rgba(0, 0, 0, 0.75);
}
.sv-pl-video-cover-meta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  gap: 0.5rem;
}
.sv-pl-video-cover-stat {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
}
.sv-pl-video-cover-stat.is-orange {
  background: rgba(245, 110, 56, 0.12);
  box-shadow: inset 0 0 0 1px rgba(245, 110, 56, 0.55);
  color: var(--_primitives---colors--brand-orange);
}
/* Translucent play disc - frosted-glass surface, thin white border,
   white triangle. Sits unobtrusively over the cover; the eyebrow + the
   "Watch · N min" chip do the labelling. Hover brightens the surface
   and tightens the border. */
.sv-pl-video-cover-play {
  align-self: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
  position: relative;
  z-index: 2;
  margin: auto 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.sv-pl-video-cover-play svg { width: 1.125rem; height: 1.125rem; margin-left: 2px; }
.sv-pl-tile.is-video:hover .sv-pl-video-cover-play {
  transform: scale(1.06);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.42);
}

/* Caption strip - full footer below the thumbnail. Holds the
   eyebrow (small uppercase), caption (readable), and a play
   indicator on the right that turns orange on hover. */
.sv-pl-video-caption {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9375rem 1.5rem 0.9375rem 1.75rem;
  background: rgba(0, 0, 0, 0.55);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 2;
}
.sv-pl-video-caption-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
.sv-pl-video-eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  line-height: 1;
}
.sv-pl-video-caption-body {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
}
.sv-pl-video-caption-body strong { color: #fff; font-weight: 600; }

/* Play indicator on the right of the caption strip - small chip
   with a triangle + "WATCH" label that brightens on hover. */
.sv-pl-video-play-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.75rem 0.4375rem 0.625rem;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.sv-pl-tile.is-video:hover .sv-pl-video-play-chip {
  background: rgba(245, 110, 56, 0.18);
  box-shadow: inset 0 0 0 1px rgba(245, 110, 56, 0.6);
  color: #fff;
}
.sv-pl-video-play-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  background: var(--_primitives---colors--brand-orange);
  color: #0a0a0a;
  border-radius: 50%;
}
.sv-pl-video-play-chip-icon svg { width: 0.5rem; height: 0.5rem; margin-left: 1px; }

/* Customers tile - 5-col span alongside video. 6 logos in a 3x2 grid. */
.sv-pl-tile.is-customers {
  background: #0d0d0d;
  gap: 1rem;
  justify-content: flex-start;
  min-height: 16rem;
  padding: 1.5rem 1.5rem;
}
.sv-pl-customers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(3rem, 1fr);
  gap: 0.5rem;
  flex: 1 1 auto;
}
.sv-pl-customer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.sv-pl-customer:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.sv-pl-customer img {
  max-height: 1.625rem;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.82;
  transition: opacity 0.18s ease;
}
.sv-pl-customer:hover img { opacity: 1; }
.sv-pl-customer-wordmark {
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  text-align: center;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  font-feature-settings: "ss01", "kern";
}
.sv-pl-customers-foot {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
  padding-top: 0.5rem;
}


/* =====================================================================
   §C  Investor Gateway band
   ===================================================================== */

.section_home_investor-gateway { max-width: 100%; overflow: clip; }

/* Investor gateway band - two equal-height columns. The grid default
   stretches both columns to the tallest content; on the left side we
   use flex column + space-between so the eyebrow top-aligns with the
   first portrait row and the CTA bottom-aligns with the last row. */
.sv-invgw {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: stretch;
  padding: 3.25rem 3rem;
  background: linear-gradient(140deg, #0f0f0f 0%, #181818 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-radius: 0;
  overflow: hidden;
}

.sv-invgw-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

/* Eyebrow - plain gray, no § symbol, no orange. */
.sv-invgw-eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
}
.sv-invgw-headline {
  font-family: var(--_typography---font-styles--heading);
  font-weight: 500;
  /* Reduced by 4px across the clamp (max 2.5rem → 2.25rem, min
     1.75rem → 1.5rem) so the headline sits more comfortably above
     the supporting copy. */
  font-size: clamp(1.5rem, 2.7vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 1.125rem;
}
.sv-invgw-sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9375rem;
  line-height: 1.55;
  max-width: 32rem;
}

/* Left-column wrapper blocks - the top group holds eyebrow/headline/
   sub, the bottom group holds FOMO strip + CTA. With the left column
   set to space-between, these two blocks anchor to the top and bottom
   of the band so the left and right columns visually align. */
.sv-invgw-left-top { display: flex; flex-direction: column; }
.sv-invgw-left-bottom {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}

/* FOMO card - taller "investor briefing" treatment. Top row is an
   eyebrow ("ACTIVE ROUND · CLOSING SOON") with a pulsing dot; below
   it sits a two-stat block (3× preferred returns | May '26 close
   date) divided by a vertical hairline. The substantial card gives
   the round real presence and creates clear FOMO. */
.sv-invgw-fomo {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem 1.25rem 1.125rem;
  background:
    radial-gradient(ellipse at top left, rgba(245, 110, 56, 0.10), transparent 60%),
    #131313;
  box-shadow: inset 0 0 0 1px rgba(245, 110, 56, 0.28);
  align-self: stretch;
  max-width: 30rem;
}
/* Slim variant - just the header pill, no stat block underneath.
   `width: fit-content` hugs the text so the box never stretches past
   its label and never feels half-empty at any column width. */
.sv-invgw-fomo.is-slim {
  padding: 0.75rem 1rem;
  gap: 0;
  width: fit-content;
  width: -moz-fit-content;
  max-width: 100%;
  align-self: flex-start;
}
.sv-invgw-fomo-header {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--_primitives---colors--brand-orange);
}
.sv-invgw-fomo-pulse {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--_primitives---colors--brand-orange);
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(245, 110, 56, 0.55);
  animation: svFomoPulse 1.6s ease-in-out infinite;
}
.sv-invgw-fomo-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.875rem;
  align-items: center;
}
.sv-invgw-fomo-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sv-invgw-fomo-stat.is-solo {
  gap: 0.375rem;
}
.sv-invgw-fomo-num {
  font-family: var(--_typography---font-styles--heading);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
}
.sv-invgw-fomo-stat.is-accent .sv-invgw-fomo-num {
  color: var(--_primitives---colors--brand-orange);
}
.sv-invgw-fomo-stat.is-solo .sv-invgw-fomo-num {
  font-size: 1.875rem;
  color: var(--_primitives---colors--brand-orange);
}
.sv-invgw-fomo-label {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}
.sv-invgw-fomo-stat.is-solo .sv-invgw-fomo-label {
  text-transform: none;
  letter-spacing: 0.005em;
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.4;
}
.sv-invgw-fomo-sep {
  width: 1px;
  height: 2.25rem;
  background: rgba(255, 255, 255, 0.12);
  align-self: stretch;
  justify-self: center;
}
@keyframes svFomoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 110, 56, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 110, 56, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-invgw-fomo-pulse { animation: none; }
}

/* CTA wrap - single button. We use the site's existing `.button`
   class so the CTA matches every other CTA on the homepage. */
.sv-invgw-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Right side - portrait grid teaser. Full-bleed: the right column
   escapes the .sv-invgw padding on the right + top + bottom so the
   tile mosaic reads as one continuous image strip. Zero gaps so the
   tiles touch each other, forming a single composite block.
   .is-static carries the seven curated investor faces (full wordmark
   logos in the header strip, no rotation). 4 cols × 2 rows: row 1
   shows 4 cards, row 2 shows 3 cards centred (col 1 left as the
   "Backed by" caption space). */
.sv-invgw-portraits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Restored to the original `1fr 1fr` + bleed margins (user wanted
     the CARDS back at their previous size, just the PHOTO inside
     each card made smaller). Per-card photo shrink + non-overlapping
     logo are handled below via the photo's `inset` offset. */
  grid-template-rows: 1fr 1fr;
  gap: 0;
  margin: -3.25rem -3rem -3.25rem 0;
  align-self: stretch;
}
.sv-invgw-portraits.is-static {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
}
/* Desktop: the carousel wrappers melt away (cards participate directly
   in the parent grid). Dots are hidden - desktop sees all 6 at once. */
.sv-invgw-track { display: contents; }
.sv-invgw-dots { display: none; }
.sv-invgw-portrait {
  position: relative;
  background: transparent;  /* let the section gradient show through */
  overflow: hidden;
  transition: transform 0.22s ease;
  text-decoration: none;
  /* Restored to 11rem (the original) per user direction. The PHOTO
     inside is what shrinks now, not the card itself - see the
     `inset: 64px 0 0 0` rule below which clears the top 64px of
     each card so the company-logo chip sits in its own zone above
     the photo (no longer overlapping the subject). */
  min-height: 11rem;
  cursor: pointer;
}
/* The 5 rotating slots slide their inner photo + meta horizontally on
   each batch rotation. We animate the children (not the <a> itself)
   so the cell border, hover affordance, and click target stay stable
   while content moves through. JS drives a 3-phase sequence per cycle:
     1. add .is-slide-out  → current 5 slide out to the left (~450ms)
     2. swap content + add .is-slide-in-prep → snap to off-right with
        no transition so the next 5 are waiting just outside the cell
     3. remove .is-slide-in-prep → next 5 slide back to centre (~450ms)
   The same easing curves on every slot keep all 5 cards in lockstep. */
.sv-invgw-portrait[data-invgw-slot] > img,
.sv-invgw-portrait[data-invgw-slot] > .sv-invgw-portrait-meta {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}
.sv-invgw-portrait[data-invgw-slot].is-slide-out > img,
.sv-invgw-portrait[data-invgw-slot].is-slide-out > .sv-invgw-portrait-meta {
  transform: translateX(-30%);
  opacity: 0;
}
.sv-invgw-portrait[data-invgw-slot].is-slide-in-prep > img,
.sv-invgw-portrait[data-invgw-slot].is-slide-in-prep > .sv-invgw-portrait-meta {
  transform: translateX(30%);
  opacity: 0;
  transition: none;
}

/* Company-logo chip in the top-right corner. Square icon-sized
   panel (36×36). The double-class selector beats the parent rule
   `.sv-invgw-portrait img { position: absolute; left: 0; right: 0;
   width: 100%; height: 100% }` which would otherwise stretch this
   logo to the full card AND pin it to the left edge. Explicit
   `left: auto` is required - the parent's `left: 0` is its own
   declaration and would otherwise still apply, leaving the logo
   anchored at left despite our `right: 10px`. */
.sv-invgw-portrait img.sv-invgw-portrait-logo,
.sv-invgw-portrait-logo {
  position: absolute;
  top: 10px;
  left: auto;
  right: 10px;
  bottom: auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
  object-position: center;
  z-index: 2;
  padding: 5px;
  background: rgba(10, 10, 10, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* Wordmark variant - when the card carries a full company logo (not
   a favicon icon), the logo lives inside a wider pill at the top of
   the photo. The wrapper sizes the container; the <img> inside fits
   the wordmark by object-fit and never stretches the parent rule's
   `width: 100%`. */
.sv-invgw-portrait-logoframe {
  position: absolute;
  top: 12px;
  left: auto;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  max-width: calc(100% - 24px);
  padding: 0 12px;
  background: rgba(10, 10, 10, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.sv-invgw-portrait .sv-invgw-portrait-logoframe img.sv-invgw-portrait-logo,
.sv-invgw-portrait-logoframe .sv-invgw-portrait-logo {
  position: static;
  inset: auto;
  width: auto;
  height: 20px;
  max-width: 120px;
  padding: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  object-fit: contain;
  object-position: center;
  /* Default to a white silhouette so black-on-transparent SVG wordmarks
     (Meta, Notion, Whatfix, Harness, …) read on the dark chip. */
  filter: brightness(0) invert(1);
}
/* Numero ships its own brand-correct wordmark (white square + "numero"
   text), so it should pass through untreated. */
.sv-invgw-portrait .sv-invgw-portrait-logoframe img.sv-invgw-portrait-logo[alt="Numero"],
.sv-invgw-portrait-logoframe .sv-invgw-portrait-logo[alt="Numero"] {
  filter: none;
}
/* Hairline border system - uniform 0.05 alpha on every edge (inner
   dividers + outer frame). Soft enough to whisper "frame" without
   reading as a hard line. Edges per cell:
     1 Karthik    (col 1, row 1):  L + R + B   (all 0.05)
     2 Raveen     (col 2, row 1):      R + B
     3 Kesavan    (col 3, row 1):      R + B
     4 Nageshwara (col 1, row 2):  L + R
     5 Lalit      (col 2, row 2):      R
     6 +33        (col 3, row 2):      R
*/
.sv-invgw-portrait:not(:nth-child(3n)) {
  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.05);
}
.sv-invgw-portrait:nth-child(-n + 3) {
  box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.05);
}
.sv-invgw-portrait:not(:nth-child(3n)):nth-child(-n + 3) {
  box-shadow:
    inset -1px 0 0 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.05);
}
/* First-column cards: soft LEFT outer + standard internal R divider. */
.sv-invgw-portrait:nth-child(3n + 1) {
  box-shadow:
    inset 1px 0 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.05);
}
.sv-invgw-portrait:nth-child(3n + 1):nth-child(-n + 3) {
  box-shadow:
    inset 1px 0 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.05);
}
/* Last-column cards: soft RIGHT outer edge - closes the grid frame
   without imposing a hard wall. */
.sv-invgw-portrait:nth-child(3n) {
  box-shadow: inset -1px 0 0 0 rgba(255, 255, 255, 0.05);
}
.sv-invgw-portrait:nth-child(3n):nth-child(-n + 3) {
  box-shadow:
    inset -1px 0 0 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.05);
}
.sv-invgw-portrait:hover { z-index: 2; }
.sv-invgw-portrait:hover .sv-invgw-portrait-photo { transform: scale(1.04); }
.sv-invgw-portrait .sv-invgw-portrait-photo {
  position: absolute;
  /* Photo's top edge pushed down 64px to clear room for the company
     logo chip (which sits at `top: 10px; right: 10px`). The logo
     now lives ABOVE the photo, not on top of it - resolves the
     overlap issue. The remaining 3 edges hug the card so the photo
     fills the area below the logo strip; object-fit:cover +
     `object-position: top center` keeps the head in frame. */
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.35s ease;
}
/* Portrait meta - bottom-left chip overlay (name + credibility line).
   Sits in the bottom-left corner of the card on a subtle dark + blur
   backdrop so it stays legible over the photo. */
.sv-invgw-portrait-meta {
  position: absolute;
  inset: auto auto 0.625rem 0.625rem;
  padding: 0.4375rem 0.5625rem 0.5rem;
  background: rgba(15, 15, 15, 0.7);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  max-width: calc(100% - 1.25rem);
}
.sv-invgw-portrait-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-invgw-portrait-co {
  font-size: 0.5625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.18;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "+ many more" tile - avatar-pile variant of the closing 6th cell,
   reusing the investors.html bento pile component (.inv-bento-pile)
   so the same stacked-avatar look renders here without pulling in
   investors.css. Pile-item border is #161616 to match this band's
   #0f0f0f→#181818 gradient (vs #1a1a1a on the investors page). */
.sv-invgw-portrait.is-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding: 1.25rem 1rem;
  text-decoration: none;
}
.sv-invgw-portrait.is-more .inv-bento-pile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
}
.sv-invgw-portrait.is-more .inv-bento-pile-item {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #161616;
  overflow: hidden;
  flex-shrink: 0;
  background: #2a2a2a;
  margin-left: -14px;
}
.sv-invgw-portrait.is-more .inv-bento-pile-item:first-child { margin-left: 0; }
.sv-invgw-portrait.is-more .inv-bento-pile-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sv-invgw-portrait.is-more .inv-bento-name {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: 1rem;
  text-align: center;
}

/* Meta-card - typographic "+33 more investors" tile that closes the
   6-cell grid (5 portraits + 1 meta). Intentionally dim so the real
   portraits keep the visual focus; clicking it sends the visitor to
   the full investor bento on the investors page. */
.sv-invgw-portrait.is-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.875rem;
  /* Match the section's gradient instead of a separate tile-bg so the
     +33 cell reads as part of the same surface as the portraits. */
  background:
    radial-gradient(ellipse at 50% 100%, rgba(245, 110, 56, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.02);
  text-align: center;
  gap: 0.375rem;
}
.sv-invgw-portrait.is-meta:hover {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(245, 110, 56, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.045);
}
.sv-invgw-portrait.is-meta:hover .sv-invgw-portrait-meta-num {
  color: #fff;
}
.sv-invgw-portrait.is-meta:hover .sv-invgw-portrait-meta-label {
  color: rgba(255, 255, 255, 0.78);
}
.sv-invgw-portrait-meta-num {
  font-family: var(--_typography---font-styles--heading);
  font-size: 1.625rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: -0.015em;
  line-height: 1;
  transition: color 0.2s ease;
}
.sv-invgw-portrait-meta-label {
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: color 0.2s ease;
}


/* =====================================================================
   FAQ - split layout: heading + sub on the LEFT (sticky during scroll
   through the section), question list on the RIGHT. The left column
   stays anchored ~5rem below the top of the viewport while the user
   scrolls through the question list, giving the FAQ an editorial,
   reference-style feel.
   ===================================================================== */
.home_faq_component.is-split {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
.home_faq_component.is-split .section-header {
  position: sticky;
  top: 5rem;
  align-self: start;
  /* Left-aligned. The default .section-header is a column flex; allow
     items to size to their own width here (no centering). */
  text-align: left;
}
.home_faq_component.is-split .section-header .max-width-large,
.home_faq_component.is-split .section-header .max-width-small {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}
/* Webflow's .text-size-medium has a hardcoded width: 506px which would
   overflow .max-width-small inside the narrower left column. Unset it
   so the paragraph honors the column width. */
.home_faq_component.is-split .section-header .text-size-medium {
  width: auto;
  max-width: 100%;
}

/* Collapse to single column on tablet + below; drop the sticky so the
   header reads + scrolls naturally above the questions. */
@media (max-width: 991px) {
  .home_faq_component.is-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .home_faq_component.is-split .section-header {
    position: static;
  }
}


/* =====================================================================
   Responsive - tablet (≤ 991px) + mobile (≤ 767px)
   ===================================================================== */

@media screen and (max-width: 991px) {
  /* Mission v2 */
  .sv-mission2 { gap: 2.5rem; }
  .sv-mission2-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.5rem;
  }
  .sv-mission2-counter { align-items: flex-start; text-align: left; }

  /* Tablet: 5 frac cards split into 3 + 2 (closed row + closing row),
     3 portfolio cards stay in 3 columns but tighter. */
  .sv-mission2-frac-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .sv-mission2-pc-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
  .sv-mission2-frac-card { padding: 1.125rem 1rem 1rem; min-height: 11.5rem; }

  /* Photon Legal bento - collapse to 6-col */
  .sv-pl-head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .sv-pl-bento {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
  }
  /* Tablet: linearise - every tile in its own band; the time-to-scale
     graph now lives inside the hero so there are only four tiles. */
  .sv-pl-tile.is-hero      { grid-column: span 6; grid-row: auto; min-height: 24rem; }
  .sv-pl-tile.is-acv       { grid-column: span 3; grid-row: auto; }
  .sv-pl-tile.is-position  { grid-column: span 3; grid-row: auto; }
  .sv-pl-tile.is-video     { grid-column: span 6; grid-row: auto; min-height: 16rem; }

  /* Investor Gateway - stack on tablet. Full-bleed only makes sense
     side-by-side, so reset the negative margins and re-enable a
     small gap between portrait tiles. */
  .sv-invgw {
    grid-template-columns: 1fr;
    padding: 2.5rem 2rem;
    gap: 2.5rem;
  }
  .sv-invgw-portraits {
    margin: 0;
    gap: 0.5rem;
    grid-template-rows: auto;
  }
  .sv-invgw-portrait {
    aspect-ratio: 3 / 4;
    min-height: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  }

  /* Fractional cards on tablet - tagline below the role title may be
     tight at 3-col widths; trim a touch. */
  .sv-mission2-frac-tagline { font-size: 0.75rem; }

  /* Position tile on tablet - tighten the product strip's typography
     so it stays readable inside the narrower tile. The boxed-card
     treatment is replaced by a top divider (see desktop rule above),
     so no padding override is needed here. */
  .sv-pl-position-product-name { font-size: 0.8125rem; }
  .sv-pl-position-product-desc { font-size: 0.6875rem; }
}

@media screen and (max-width: 767px) {
  .sv-mission2 { gap: 2rem; }

  .sv-mission2-tier-label {
    flex-wrap: wrap;
    gap: 0.625rem;
  }

  /* Mobile vision layout per user direction:
       Row 1 - Photon Legal              (alone, full width)
       Row 2 - Curious Men Films         (alone, full width)
       Row 3 - CMO + CPO + CFO           (3 cards in one row)
       Row 4 - CRO + CHRO + +93          (3 cards in one row)
     Frac-row uses a 6-col grid with each of the 6 children (5 frac
     cards + 1 mobile-only +93 tile appended via HTML earlier)
     spanning 2 cells = clean 3+3 layout. Original +93 inside
     pc-row is hidden on mobile - it has been relocated to the
     last cell of frac-row. */
  .sv-mission2-frac-row { grid-template-columns: repeat(6, 1fr); }
  .sv-mission2-frac-card,
  .sv-mission2-frac-row > .sv-mission2-pc-card.is-plus {
    grid-column: span 2;
    min-height: 8rem;
  }
  .sv-mission2-pc-row { grid-template-columns: 1fr; gap: 0.75rem; }
  /* Hide the +93 tile that lives in pc-row on mobile (it's now
     paired with CRO + CHRO in frac-row's last cell instead). */
  .sv-mission2-pc-row > .sv-mission2-pc-card.is-plus {
    display: none;
  }
  /* Show the mobile-only +93 duplicate inside frac-row. */
  .sv-mission2-pc-card.is-plus.is-mobile-only {
    display: flex;
    padding: 0;
  }
  .sv-mission2-pc-plus-num { font-size: clamp(1.5rem, 7vw, 2rem); }
  .sv-mission2-pc-plus-label { font-size: 0.625rem; }
  /* Faded background "3 / 4 / 5 / 6 / 7" digits on frac cards
     shrunk so they read as a quiet watermark inside the narrower
     mobile card, not a billboard competing with the role label. */
  .sv-mission2-frac-card .sv-mission2-card-num {
    font-size: 2.5rem;
    bottom: -0.375rem;
  }
  /* Reduce the gap between the section subhead ("We cap intake at
     4-5 a year...") and the first row of cards. Was 4.5rem on
     desktop, dropped to 1.75rem on mobile - the desktop margin
     was leaving an awkward empty band between the copy and the
     Photon Legal card below it. */
  .sv-mission2-tier.is-portfolio {
    margin-top: 1.75rem;
  }

  /* Bento - single-column-ish on mobile */
  .sv-pl-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 0.75rem;
  }
  .sv-pl-tile.is-hero,
  .sv-pl-tile.is-position,
  .sv-pl-tile.is-acv,
  .sv-pl-tile.is-video {
    grid-column: span 2;
    grid-row: auto;
  }
  .sv-pl-tile { padding: 1.375rem; }
  .sv-pl-tile.is-hero { min-height: 20rem; padding: 1.5rem 1.25rem 1.25rem; }
  /* Video tile on mobile - the portrait thumbnail (766×1258) gets
     heavily cropped at 13rem; bump the floor so the founder face is
     visible alongside the before/after stripes baked into the image. */
  .sv-pl-tile.is-video { min-height: 22rem; }
  /* Shift the focal point on mobile so the founder centre, not the
     "BEFORE SHIFU" top text, lands inside the visible crop. */
  .sv-pl-tile.is-video .sv-pl-video-cover-thumb { object-position: center 38%; }
  .sv-pl-video-cover { padding: 1.5rem 1.5rem 4.5rem; }
  .sv-pl-video-cover-play { right: 1.25rem; bottom: 1.25rem; width: 3rem; height: 3rem; }

  .sv-invgw { padding: 2rem 1.5rem; gap: 2rem; }
  /* CTA button = full width + centred label on mobile. The flex
     container needs `align-items: stretch` so the child anchor's
     width: 100% applies to the layout, and the inner `.button`
     anchor itself needs justify-content:center + text-align:center
     to centre the label + icon row inside the now-stretched box. */
  .sv-invgw-ctas {
    align-items: stretch;
  }
  .sv-invgw-ctas .button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .sv-invgw-portraits {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 0.4rem;
  }
  /* The desktop `.sv-invgw-portrait:nth-child(3n)` divider system
     (designed for a 3-col grid) produces orphan borders on the
     mobile carousel where each card is full-width (only one card
     visible at a time). Override here so each carousel card carries
     a clean uniform 1px frame on all four sides instead of just the
     right-edge inheritance from the desktop divider logic. */
  .sv-invgw-portraits.is-static .sv-invgw-portrait {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  }
  /* Logo chips on the investor portrait cards bumped to 56px tall
     on mobile (was 44, was 36 on desktop). At carousel scale where
     ONE card fills the viewport, the chip needs to read clearly as
     a credible credential - not a thumb-sized stamp. */
  .sv-invgw-portrait-logoframe {
    height: 56px;
    padding: 0 18px;
    top: 12px;
    right: 12px;
    border-radius: 10px;
  }
  .sv-invgw-portrait-logoframe .sv-invgw-portrait-logo {
    height: 30px;
    max-width: 170px;
  }
  /* Icon-only variant (favicon-style; lives as a DIRECT child of
     .sv-invgw-portrait, not inside .sv-invgw-portrait-logoframe).
     Same 56px square as the wordmark chip's new height. */
  .sv-invgw-portrait > img.sv-invgw-portrait-logo {
    width: 56px;
    height: 56px;
    padding: 8px;
    border-radius: 10px;
    top: 12px;
    right: 12px;
  }

  /* PortCo cards at 1-col on mobile - drop card min-height so the
     content (logo + name + tagline + stat + meta) determines size
     rather than forcing a tall card with empty space. */
  .sv-mission2-pc-card { min-height: 0; padding: 1.375rem 1.25rem; }
  .sv-mission2-pc-card-name { font-size: 1rem; }

  /* +93 mosaic grid scales down with auto-fill so the box density
     stays similar on narrow widths. */
  .sv-mission2-pc-plus-grid {
    grid-template-columns: repeat(auto-fill, 10px);
    grid-auto-rows: 10px;
    gap: 4px;
  }

  /* Fractional taglines wrap to 2 lines on a 2-col grid; cap them
     to a tight, predictable height so card stops don't jitter. */
  .sv-mission2-frac-tagline {
    font-size: 0.6875rem;
    line-height: 1.35;
  }

  /* Slope graph inside the hero - give it a floor on narrow widths so
     the curve doesn't squash too small to read. */
  .sv-pl-tile.is-hero .sv-pl-time-graph { max-height: 13rem; }

  /* Video cover stacks on mobile: bigger play hit-target. */
  .sv-pl-video-cover-quote { font-size: 1rem; }
  .sv-pl-video-cover-meta { gap: 0.4rem; }

  /* ── Investor-gateway carousel (mobile only). On mobile the 3×2 grid
     packs the faces too tight and the logo chip overlaps each head, so
     we switch to a one-card-at-a-time horizontal carousel with auto-
     advance + dot pagination. `display: contents` on the track wrapper
     is undone here so it becomes a real scroll-snap row container. */
  /* The portraits column doubles as the slider viewport: overflow is
     clipped so that the wider .sv-invgw-track inside can slide its
     6-card row in and out via transform: translateX. min-width: 0 is
     required so the grid cell of .sv-invgw above doesn't grow to fit
     the track's intrinsic size. */
  .sv-invgw-portraits.is-static {
    grid-template-columns: unset;
    grid-template-rows: unset;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  /* Transform-based slider: each card is full viewport width, the
     track holds them in a row and translates as a single unit. We
     don't use scrollLeft because an ancestor (Lenis or otherwise)
     reliably clobbered it during testing. */
  .sv-invgw-portraits.is-static .sv-invgw-track {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .sv-invgw-portraits.is-static .sv-invgw-portrait {
    flex: 0 0 100%;
    min-height: 22rem;
    aspect-ratio: 3 / 4;
  }
  .sv-invgw-portraits.is-static .sv-invgw-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1rem 0.5rem;
  }
  .sv-invgw-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 220ms ease, transform 220ms ease, width 220ms ease;
  }
  .sv-invgw-dot.is-active {
    background: rgba(255, 255, 255, 0.95);
    width: 18px;
    border-radius: 4px;
  }
}

/* Small phones (≤479) - final polish for the most cramped widths.
   NOTE: previously this block forced `.sv-mission2-frac-row` to
   `grid-template-columns: 1fr` (1 card per row) which was
   overriding the ≤767 3+3 layout on small phones - the bug the
   user kept pointing at. The 6-col grid + each card spanning 2
   from the ≤767 rule is preserved here. Just trimming the inner
   typography for the narrowest widths. */
@media screen and (max-width: 479px) {
  .sv-mission2-frac-card { min-height: 0; padding: 0.75rem 0.75rem 1rem; }
  .sv-mission2-frac-title { font-size: 1.25rem; }
  .sv-mission2-frac-tagline { font-size: 0.75rem; }

  .sv-pl-tile { padding: 1.125rem; }
  .sv-pl-tile.is-hero { padding: 1.5rem 1.25rem; }
  .sv-pl-hero-to { font-size: 2.5rem; }
  .sv-pl-hero-from { font-size: 1.75rem; }
  .sv-pl-acv-stat { font-size: 2.5rem; }

  .sv-pl-video-cover { padding: 1.25rem 1.25rem 4rem; }
  .sv-pl-video-cover-play { width: 2.75rem; height: 2.75rem; right: 1rem; bottom: 1rem; }

  .sv-invgw-portraits { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   DESKTOP ONE-VIEWPORT FIT - Mission2 ("On a mission to co-build 100
   companies in our lifetime") section. Without these overrides the
   section spans ~1040px at 1280×900 - the headline scrolls past the
   top before the user reaches the +95 tile. Trim section padding +
   inter-block gaps + card heights so the heading + subhead + both
   tier rows fit in a single 900vh viewport at 100% zoom. Mobile is
   untouched.
   ──────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 768px) {
  .sv-mission2-section .padding-section-large {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
  .sv-mission2 {
    /* gap zeroed - the per-tier margin-top values up top handle the
       head→portfolio (4.5rem) and portfolio→foundational (0.75rem)
       gaps independently. */
    gap: 0;
  }
  .sv-mission2-head .heading-style-h2 {
    margin: 0 0 1.75rem;
  }
  .sv-mission2-head-eyebrow {
    margin-bottom: 0.5rem;
  }
  .sv-mission2-tier {
    gap: 0.75rem;
  }
  .sv-mission2-tier-sub {
    margin-bottom: 0;
  }
  .sv-mission2-pc-card {
    min-height: 9rem;
    padding: 1.25rem 1.25rem 1.125rem;
  }
  .sv-mission2-frac-card {
    min-height: 7rem;
    padding: 0.875rem 1rem 1rem;
  }
  /* A little extra breathing room between the role row (FRACTIONAL +
     CMO/CPO/etc) and the person row at the bottom of each card. */
  .sv-mission2-frac-divider {
    margin: auto 0 1.25rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   "How we co-build with our Portfolio Companies" process tabs - phone.
   Keep the existing horizontally-scrollable tab rows (main tabs +
   active tab's nested sub-tabs) exactly as before; just HIDE the
   scrollbar UI so the strip scrolls/swipes without a visible bar.
   ════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 767px) {
  .section_home_portfolio-companies .portfolio-tabs-menu,
  .section_home_portfolio-companies .portfolio-tabs-nested-list {
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* old Edge / IE */
  }
  .section_home_portfolio-companies .portfolio-tabs-menu::-webkit-scrollbar,
  .section_home_portfolio-companies .portfolio-tabs-nested-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;               /* Chrome / Safari */
  }
}

/* Headings: balance line lengths so a lone 1-2 word widow never drops to its
   own line; subheads get pretty (no last-line orphan). Site-wide via this
   shared sheet (index + investors). Added by CoS 1, 15 Jul. */
.heading-style-h1, .heading-style-h2, .heading-style-h3 { text-wrap: balance; }
.sv-mission2-head-sub, .section-header p, .text-size-medium { text-wrap: pretty; }
/* Mission header width: 1010px lets the (trimmed) headline sit on 2 lines AND
   the subhead sit on 1 line (its one-line width is ~986px). Added by CoS 1, 15 Jul. */
.sv-mission2-head.is-centered .sv-mission2-head-left { max-width: 1010px; }


/* GP marker: fractional-company leads who are also Shifu General
   Partners (Panda on CMO, Nahata on CFO) get a thin brand-orange ring.
   The tooltip ("General Partner, Shifu") carries the explanation. */
a.sv-mission2-frac-avatar.is-gp {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1.5px rgba(245, 110, 56, 0.75);
}
a.sv-mission2-frac-avatar.is-gp:hover,
a.sv-mission2-frac-avatar.is-gp:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 2px #f56e38;
}