/* ==========================================================
   SANKEY MOTION · FINAL THREE-SURFACE SYSTEM

   Studio / Learn / Playground

   One header
   One background
   One hero geometry
   One movie rectangle
   No transition tricks
   ========================================================== */

:root {
  --sm-paper: #fcfdfd;
  --sm-ink: #102b42;
  --sm-muted: #5f7488;
  --sm-blue: #0f5fb4;

  --sm-edge: 48px;

  --sm-header-h: 76px;

  --sm-hero-max: 1640px;
  --sm-hero-h: 630px;

  --sm-copy-w: 330px;
  --sm-gap: 26px;
}


/* ==========================================================
   BACKGROUND
   ========================================================== */

html {
  margin: 0;
  padding: 0;

  background: var(--sm-paper);

  scroll-behavior: auto !important;
}


body.family-page {
  margin: 0 !important;

  background:
    radial-gradient(
      circle at 1px 1px,
      rgba(28,58,78,.052) 1px,
      transparent 0
    )
    0 0 / 22px 22px,
    var(--sm-paper) !important;

  color: var(--sm-ink);

  animation: none !important;
}


/* ==========================================================
   HEADER
   Exact same physical coordinates on all three.
   ========================================================== */

.family-header {
  width: 100% !important;
  height: var(--sm-header-h) !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;

  background: rgba(253,254,254,.985) !important;

  border-top:
    1px solid rgba(160,176,187,.16) !important;

  border-bottom:
    1px solid rgba(151,171,187,.27) !important;

  transform: none !important;
  animation: none !important;
}


.family-header-inner {
  width: 100% !important;
  max-width: none !important;

  height: 100% !important;

  margin: 0 !important;

  padding:
    0
    var(--sm-edge) !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    390px
    minmax(0,1fr) !important;

  align-items: center !important;
}


/* brand */

.family-brand {
  width: 390px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;

  grid-template-columns:
    40px
    1fr !important;

  column-gap: 14px !important;

  align-items: center !important;

  text-decoration: none !important;
}


.family-mark {
  width: 40px !important;
  height: 40px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  border:
    1px solid #bdd0df !important;

  border-radius: 10px !important;

  color: #15364e !important;

  font-size: 13px !important;
  font-weight: 850 !important;
}


.family-wordmark {
  width: auto !important;

  margin: 0 !important;

  white-space: nowrap !important;

  color: var(--sm-ink) !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size: 22px !important;
  line-height: 1 !important;

  font-weight: 650 !important;

  letter-spacing: -.025em !important;
}


.family-divider,
.family-meta {
  display: none !important;
}


/* navigation */

.family-nav {
  justify-self: end !important;

  display: flex !important;

  align-items: center !important;

  gap: 28px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;
}


.family-nav-link {
  position: relative;

  min-height: 42px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;

  color: #142536 !important;

  font-size: 12px !important;
  font-weight: 750 !important;

  text-decoration: none !important;

  transition: none !important;
  animation: none !important;
  transform: none !important;
}


.family-nav-link.active {
  color: var(--sm-blue) !important;
}


.family-nav-link.active::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 2px;

  height: 1px;

  background: var(--sm-blue);
}


/*
Learn / Playground's old wrapper cannot affect header.
*/
body.family-page > .product-shell:first-child {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==========================================================
   HERO
   Grid instead of absolute-position hacks.

   Left content and movie are independent grid cells.
   Tall Studio copy therefore CANNOT push movie down.
   ========================================================== */

.surface-studio .family-hero-grid,
.surface-learn .family-hero-grid,
.surface-playground .family-hero-grid {

  width:
    min(
      var(--sm-hero-max),
      calc(100% - (2 * var(--sm-edge)))
    ) !important;

  max-width: none !important;

  height: var(--sm-hero-h) !important;
  min-height: var(--sm-hero-h) !important;

  margin: 0 auto !important;

  padding:
    36px
    0
    34px !important;

  box-sizing: border-box !important;

  display: grid !important;

  grid-template-columns:
    var(--sm-copy-w)
    minmax(0,1fr) !important;

  grid-template-rows:
    1fr !important;

  column-gap: var(--sm-gap) !important;

  align-items: center !important;

  overflow: visible !important;

  position: relative !important;
}


/* Learn / Playground outer hero wrappers */

.surface-learn .neutral-product-hero,
.surface-playground .neutral-product-hero {
  width: 100% !important;

  height: var(--sm-hero-h) !important;
  min-height: var(--sm-hero-h) !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;

  overflow: visible !important;
}


/* ==========================================================
   LEFT COLUMN
   ========================================================== */

.surface-learn .family-hero-copy,
.surface-playground .family-hero-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: var(--sm-copy-w) !important;
  max-width: var(--sm-copy-w) !important;

  margin: 0 !important;

  align-self: center !important;

  position: static !important;

  transform: none !important;
}


/* Studio: keep existing serif identity but compact it. */

.surface-studio .hero-copy,
.surface-studio .hero-left,
.surface-studio .hero-intro {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: var(--sm-copy-w) !important;
  max-width: var(--sm-copy-w) !important;

  align-self: center !important;

  position: relative !important;

  transform: none !important;
}


/* Studio eyebrow down slightly, as requested. */

.surface-studio .hero-eyebrow,
.surface-studio .eyebrow,
.surface-studio .hero-kicker,
.surface-studio .section-kicker {
  position: relative !important;

  top: 10px !important;
}


/* Studio title footprint */

.surface-studio .family-hero-grid h1,
.surface-studio .hero h1 {
  max-width: 340px !important;

  margin:
    0
    0
    18px !important;

  font-size: 66px !important;
  line-height: .88 !important;

  letter-spacing: -.052em !important;
}


/* Learn / Playground */

.surface-learn .family-hero-copy h1,
.surface-playground .family-hero-copy h1 {
  max-width: 350px !important;

  margin:
    0
    0
    18px !important;

  font-size: 52px !important;
  line-height: .96 !important;

  letter-spacing: -.05em !important;
}


.surface-learn .family-hero-copy p,
.surface-playground .family-hero-copy p {
  max-width: 350px !important;

  margin: 0 !important;

  color: var(--sm-muted) !important;

  font-size: 13px !important;
  line-height: 1.55 !important;
}


/* ==========================================================
   MOVIE
   Much larger, same coordinates, same scale.
   ========================================================== */

.surface-studio .family-hero-media,
.surface-learn .family-hero-media,
.surface-playground .family-hero-media {

  grid-column: 2 !important;
  grid-row: 1 !important;

  width: 118% !important;

  height: 560px !important;
  min-height: 560px !important;

  margin:
    0
    0
    0
    -5% !important;

  padding: 0 !important;

  align-self: center !important;
  justify-self: stretch !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  position: static !important;

  transform: none !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;
}


.family-hero-media video,
.family-hero-media img {

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  filter: none !important;
  mix-blend-mode: normal !important;

  transform: none !important;

  pointer-events: none !important;
}


/*
No native video controls.
The movie itself has already had the baked cursor area cropped.
*/

.family-hero-media video::-webkit-media-controls {
  display: none !important;
}

/* Keep the media licence tethered to every shared Sankey hero asset. */
.family-hero-media.has-media-credit {
  position: relative !important;
}

.sankey-media-frame {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 32 / 15 !important;
  align-self: center !important;
  justify-self: center !important;
}

.sankey-media-credit {
  position: absolute !important;
  left: 82% !important;
  right: auto !important;
  bottom: 14.5% !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #35556e !important;
  font-size: clamp(6px, .42vw, 7.5px) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: right !important;
  transform: translateX(-50%) !important;
  white-space: nowrap !important;
}

.sankey-media-credit a {
  color: inherit !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

/* Studio must show the full Input → Outcome frame without right-edge clipping. */
.surface-studio .family-hero-media.has-media-credit {
  width: 100% !important;
  margin-left: 0 !important;
}

.surface-studio .family-hero-media.has-media-credit video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}


/* ==========================================================
   STUDIO GET STARTED
   CSS ONLY — DO NOT MODIFY HTML OR JS.
   ========================================================== */

/* compact card */

.surface-studio .start-card,
.surface-studio .get-started,
.surface-studio [class*="start-card"],
.surface-studio [class*="start-panel"] {

  width: 315px !important;

  margin-top: 18px !important;

  padding:
    14px
    18px
    12px !important;

  border-radius: 15px !important;
}


/*
Use existing click targets exactly as they are.

All three rows:
same left text origin
same right arrow origin
same height.
*/

.surface-studio #uploadButton,
.surface-studio #sampleButton,
.surface-studio .start-action-format,
.surface-studio .start-card a[href*="csv"],
.surface-studio .get-started a[href*="csv"] {

  position: relative !important;

  display: block !important;

  width: 100% !important;

  min-height: 42px !important;

  margin: 0 !important;

  padding:
    0
    34px
    0
    4px !important;

  box-sizing: border-box !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  color: #173149 !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  line-height: 42px !important;

  text-align: left !important;
  text-decoration: none !important;

  appearance: none !important;
  -webkit-appearance: none !important;

  cursor: pointer !important;
}


/* Upload emphasis */

.surface-studio #uploadButton {
  color: var(--sm-blue) !important;

  font-weight: 800 !important;
}


/* separators */

.surface-studio #sampleButton {
  border-top:
    1px solid
    rgba(164,180,192,.30) !important;
}


.surface-studio .start-action-format,
.surface-studio .start-card a[href*="csv"],
.surface-studio .get-started a[href*="csv"] {
  border-top:
    1px solid
    rgba(164,180,192,.30) !important;

  color: #48677f !important;
}


/* aligned arrows */

.surface-studio #uploadButton::after,
.surface-studio #sampleButton::after,
.surface-studio .start-action-format::after,
.surface-studio .start-card a[href*="csv"]::after,
.surface-studio .get-started a[href*="csv"]::after {

  content: "→" !important;

  position: absolute !important;

  right: 3px !important;
  top: 50% !important;

  transform:
    translateY(-50%) !important;

  color: #315d7c !important;

  font-size: 16px !important;
  font-weight: 500 !important;

  line-height: 1 !important;
}


/* ==========================================================
   NO ARTIFICIAL PAGE TRANSITION
   ========================================================== */

body.family-page,
.family-header,
.family-header *,
.family-hero-grid,
.family-hero-media {

  animation: none !important;

  transition-delay: 0s !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width: 1050px) {

  :root {
    --sm-edge: 24px;
  }

  .family-header-inner {
    display: flex !important;

    justify-content: space-between !important;
  }

  .family-brand {
    width: auto !important;

    display: flex !important;
  }

  .family-nav {
    gap: 16px !important;
  }

  .family-nav-link:nth-child(4),
  .family-nav-link:nth-child(5) {
    display: none !important;
  }

  .surface-studio .family-hero-grid,
  .surface-learn .family-hero-grid,
  .surface-playground .family-hero-grid {

    height: auto !important;
    min-height: auto !important;

    grid-template-columns:
      1fr !important;

    grid-template-rows:
      auto
      auto !important;

    row-gap: 26px !important;

    padding:
      42px
      0
      48px !important;
  }

  .surface-learn .neutral-product-hero,
  .surface-playground .neutral-product-hero {

    height: auto !important;
    min-height: auto !important;
  }

  .surface-learn .family-hero-copy,
  .surface-playground .family-hero-copy,
  .surface-studio .hero-copy,
  .surface-studio .hero-left,
  .surface-studio .hero-intro {

    width: 100% !important;
    max-width: 100% !important;
  }

  .surface-studio .family-hero-media,
  .surface-learn .family-hero-media,
  .surface-playground .family-hero-media {

    grid-column: 1 !important;
    grid-row: 2 !important;

    width: 108% !important;

    height: auto !important;
    min-height: 0 !important;

    margin-left: -4% !important;
  }

  .family-hero-media video,
  .family-hero-media img {

    width: 100% !important;
    height: auto !important;
  }
}



/* ==========================================================
   20% COMPACT LEFT-SIDE PASS
   Shared geometry remains identical across all three surfaces.
   ========================================================== */

:root {
  /* ~20% reduction from 330px */
  --sm-copy-w: 264px;

  /* slightly tighter space between copy and movie */
  --sm-gap: 22px;
}


/* ----------------------------------------------------------
   STUDIO
   ---------------------------------------------------------- */

.surface-studio .family-hero-grid h1,
.surface-studio .hero h1 {
  max-width: 270px !important;

  /* reduced proportionally */
  font-size: 55px !important;
  line-height: .89 !important;

  margin-bottom: 15px !important;
}


/* compact Studio start card */
.surface-studio .start-card,
.surface-studio .get-started,
.surface-studio [class*="start-card"],
.surface-studio [class*="start-panel"] {
  width: 255px !important;

  margin-top: 14px !important;

  padding:
    12px
    14px
    10px !important;

  border-radius: 14px !important;
}


/* GET STARTED label */
.surface-studio .start-card .eyebrow,
.surface-studio .start-card .kicker,
.surface-studio .get-started .eyebrow,
.surface-studio .get-started .kicker {
  font-size: 9px !important;
}


/* three actions */
.surface-studio #uploadButton,
.surface-studio #sampleButton,
.surface-studio .start-action-format,
.surface-studio .start-card a[href*="csv"],
.surface-studio .get-started a[href*="csv"] {
  min-height: 38px !important;

  padding-left: 2px !important;
  padding-right: 29px !important;

  font-size: 11px !important;
  line-height: 38px !important;
}


/* arrows scale with the smaller rows */
.surface-studio #uploadButton::after,
.surface-studio #sampleButton::after,
.surface-studio .start-action-format::after,
.surface-studio .start-card a[href*="csv"]::after,
.surface-studio .get-started a[href*="csv"]::after {
  font-size: 14px !important;
}


/* ----------------------------------------------------------
   LEARN + PLAYGROUND
   Their copy zones shrink by the same amount so movie geometry
   remains identical on all three pages.
   ---------------------------------------------------------- */

.surface-learn .family-hero-copy h1,
.surface-playground .family-hero-copy h1 {
  max-width: 270px !important;

  font-size: 43px !important;
  line-height: .97 !important;

  margin-bottom: 15px !important;
}


.surface-learn .family-hero-copy p,
.surface-playground .family-hero-copy p {
  max-width: 270px !important;

  font-size: 11.5px !important;
  line-height: 1.52 !important;
}


.surface-learn .family-hero-copy .eyebrow,
.surface-playground .family-hero-copy .eyebrow {
  font-size: 9px !important;
}


/* ----------------------------------------------------------
   MOVIE
   Do not move it independently.
   It naturally gains the released horizontal territory.
   ---------------------------------------------------------- */


/* Studio title: Sankey Motion on one line, Studio below */

.surface-studio .family-hero-grid h1,
.surface-studio .hero h1 {
  max-width: 330px !important;

  font-size: 54px !important;
  line-height: .92 !important;

  letter-spacing: -.05em !important;
}

/* Keep only the explicit line break before Studio */
.surface-studio .family-hero-grid h1 br:first-of-type,
.surface-studio .hero h1 br:first-of-type {
  display: none !important;
}


/* ==========================================================
   STUDIO FINAL LEFT-COLUMN TUNE
   ========================================================== */

/* Sankey Motion / Studio */
.surface-studio .family-hero-grid h1,
.surface-studio .hero h1 {
  width: 330px !important;
  max-width: 330px !important;

  margin: 0 0 16px !important;

  font-size: 52px !important;
  line-height: .92 !important;

  letter-spacing: -.05em !important;
}

/* Sankey Motion remains on one line */
.surface-studio .family-hero-grid h1 br:first-of-type,
.surface-studio .hero h1 br:first-of-type {
  display: none !important;
}


/* Compact card */
.surface-studio .start-card,
.surface-studio .get-started,
.surface-studio [class*="start-card"],
.surface-studio [class*="start-panel"] {
  width: 250px !important;

  margin-top: 12px !important;

  padding: 12px 14px 10px !important;

  border-radius: 14px !important;
}


/* Three equal rows */
.surface-studio #uploadButton,
.surface-studio #sampleButton,
.surface-studio .start-action-format,
.surface-studio .start-card a[href*="csv"],
.surface-studio .get-started a[href*="csv"] {
  min-height: 38px !important;

  padding:
    0
    28px
    0
    2px !important;

  font-size: 11px !important;
  line-height: 38px !important;

  text-align: left !important;
}


/* Same arrow position */
.surface-studio #uploadButton::after,
.surface-studio #sampleButton::after,
.surface-studio .start-action-format::after,
.surface-studio .start-card a[href*="csv"]::after,
.surface-studio .get-started a[href*="csv"]::after {
  right: 2px !important;

  font-size: 14px !important;
}


/* Header title micro-tune */
.family-wordmark {
  font-size: 18px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}


/* Header wordmark: another ~20% smaller */
.family-wordmark {
  font-size: 15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}



/* ==========================================================
   FINAL HERO MOVIE UPSHIFT
   Sankey + spectrum move together on all 3 interfaces.
   ========================================================== */

.surface-studio .family-hero-media,
.surface-learn .family-hero-media,
.surface-playground .family-hero-media {
  position: relative !important;
  top: -48px !important;
}

/* Restore natural position on smaller screens. */
@media (max-width: 1050px) {
  .surface-studio .family-hero-media,
  .surface-learn .family-hero-media,
  .surface-playground .family-hero-media {
    top: 0 !important;
  }
}


/* Studio: bring movie closer to title */
.surface-studio .family-hero-media {
  left: -36px !important;
}

/* Keep Studio title/card clearly above the visual plane */
.surface-studio .hero-copy,
.surface-studio .hero-left,
.surface-studio .hero-intro {
  position: relative !important;
  z-index: 2 !important;
}


/* Studio: separate title and movie with a small clean gap */
.surface-studio .family-hero-media {
  left: 28px !important;
}

/* Mobile: return to normal */
@media (max-width: 1050px) {
  .surface-studio .family-hero-media {
    left: 0 !important;
  }
}

/* ==========================================================
   STUDIO MOVIE — MORE RIGHT + LARGER
   Learn / Playground unchanged
   ========================================================== */

.surface-studio .family-hero-media {
  left: 54px !important;

  width: 128% !important;

  height: 600px !important;
  min-height: 600px !important;
}

@media (max-width: 1050px) {
  .surface-studio .family-hero-media {
    left: 0 !important;

    width: 108% !important;

    height: auto !important;
    min-height: 0 !important;
  }
}

/* ==========================================================
   HERO GEOMETRY PARITY
   Studio / Learn / Playground use identical coordinates
   relative to the shared header.
   ========================================================== */

:root {
  --sm-copy-w: 264px;
  --sm-gap: 22px;

  --sm-media-width: 118%;
  --sm-media-height: 560px;
  --sm-media-up: -48px;
}


/* ----------------------------------------------------------
   SAME HERO FRAME BELOW HEADER
   ---------------------------------------------------------- */

.surface-studio .family-hero-grid,
.surface-learn .family-hero-grid,
.surface-playground .family-hero-grid {
  width:
    min(
      var(--sm-hero-max),
      calc(100% - (2 * var(--sm-edge)))
    ) !important;

  height: var(--sm-hero-h) !important;
  min-height: var(--sm-hero-h) !important;

  margin: 0 auto !important;

  padding:
    36px
    0
    34px !important;

  display: grid !important;

  grid-template-columns:
    var(--sm-copy-w)
    minmax(0, 1fr) !important;

  column-gap: var(--sm-gap) !important;

  align-items: center !important;

  position: relative !important;
}


/* ----------------------------------------------------------
   SAME MOVIE POSITION RELATIVE TO HEADER
   ---------------------------------------------------------- */

.surface-studio .family-hero-media,
.surface-learn .family-hero-media,
.surface-playground .family-hero-media {
  grid-column: 2 !important;
  grid-row: 1 !important;

  position: relative !important;

  /* remove all previous Studio-only horizontal shifts */
  left: 0 !important;

  /* identical upward placement */
  top: var(--sm-media-up) !important;

  width: var(--sm-media-width) !important;

  height: var(--sm-media-height) !important;
  min-height: var(--sm-media-height) !important;

  margin:
    0
    0
    0
    -5% !important;

  align-self: center !important;
  justify-self: stretch !important;
}


/* ----------------------------------------------------------
   STUDIO LEFT BLOCK
   Different content, SAME structural anchor.
   ---------------------------------------------------------- */

.surface-studio .hero-copy,
.surface-studio .hero-left,
.surface-studio .hero-intro {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: var(--sm-copy-w) !important;
  max-width: var(--sm-copy-w) !important;

  margin: 0 !important;

  align-self: center !important;

  position: relative !important;

  left: 0 !important;
  right: auto !important;
  top: 0 !important;

  transform: none !important;
}


/* Studio title still keeps its own visual identity */
.surface-studio .family-hero-grid h1,
.surface-studio .hero h1 {
  width: 264px !important;
  max-width: 264px !important;

  margin: 0 0 15px !important;

  font-size: 52px !important;
  line-height: .92 !important;

  letter-spacing: -.05em !important;
}


/* Sankey Motion stays on first line, Studio on second */
.surface-studio .family-hero-grid h1 br:first-of-type,
.surface-studio .hero h1 br:first-of-type {
  display: none !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 1050px) {
  .surface-studio .family-hero-media,
  .surface-learn .family-hero-media,
  .surface-playground .family-hero-media {
    left: 0 !important;
    top: 0 !important;

    width: 108% !important;

    height: auto !important;
    min-height: 0 !important;
  }
}


/* ==========================================================
   STUDIO → LEARN / PLAYGROUND VISUAL PARITY
   Measured from current screenshots.
   ========================================================== */

.surface-studio .family-hero-media {
  /* retain the common structural anchor */
  left: 0 !important;

  /* Studio is ~17% visually smaller than the other two */
  transform:
    translateX(73px)
    scale(1.171) !important;

  transform-origin: 50% 50% !important;
}

/* Let the enlarged visual use the available viewport cleanly. */
.surface-studio,
.surface-studio .family-hero-grid {
  overflow-x: clip !important;
}

@media (max-width: 1050px) {
  .surface-studio .family-hero-media {
    transform: none !important;
  }
}

/* ==========================================================
   UNIFIED FOOTER — STUDIO / LEARN / PLAYGROUND
   ========================================================== */

.family-footer {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: rgba(253,254,254,.985) !important;

  border-top:
    1px solid rgba(151,171,187,.28) !important;

  box-sizing: border-box !important;
}


.family-footer-inner {
  width: 100% !important;
  min-height: 72px !important;

  margin: 0 !important;

  padding:
    0
    var(--sm-edge) !important;

  box-sizing: border-box !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;
}


.family-footer-copy {
  margin: 0 !important;

  color: #60768a !important;

  font-size: 12px !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}


.family-footer-nav {
  display: flex !important;

  align-items: center !important;

  gap: 28px !important;

  margin: 0 !important;
  padding: 0 !important;
}


.family-footer-nav a {
  color: #142b40 !important;

  font-size: 12px !important;
  font-weight: 750 !important;

  line-height: 1 !important;

  text-decoration: none !important;
}


.family-footer-nav a:hover {
  color: #0f5fb4 !important;
}


@media (max-width: 760px) {

  .family-footer-inner {
    min-height: auto !important;

    padding-top: 20px !important;
    padding-bottom: 20px !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 16px !important;
  }

  .family-footer-nav {
    flex-wrap: wrap !important;

    gap: 16px !important;
  }
}


/* ==========================================================
   STUDIO RIGHT-EDGE CORRECTION
   Keep Outcome fully visible.
   Learn / Playground unchanged.
   ========================================================== */

.surface-studio .family-hero-media {
  /* cancel previous scale/translate experiment */
  transform: none !important;

  left: 0 !important;

  /* use the shared hero cell, but slightly fuller */
  width: 120% !important;

  height: 575px !important;
  min-height: 575px !important;

  /* small left expansion, not a rightward shove */
  margin-left: -4% !important;

  /* preserve common vertical alignment */
  top: -48px !important;
}


/* Do NOT clip the visual at the Studio grid boundary */
.surface-studio .family-hero-grid {
  overflow-x: visible !important;
}


/* Keep the page itself from generating horizontal scrolling */
html,
body.surface-studio {
  overflow-x: hidden !important;
}


@media (max-width: 1050px) {
  .surface-studio .family-hero-media {
    transform: none !important;
    left: 0 !important;
    top: 0 !important;

    width: 108% !important;

    height: auto !important;
    min-height: 0 !important;

    margin-left: -4% !important;
  }
}

/* ==========================================================
   STUDIO FOOTER — TRUE PAGE END
   Match Learn / Playground behaviour.
   ========================================================== */

body.surface-studio {
  min-height: 100vh !important;

  display: flex !important;
  flex-direction: column !important;
}

/* Everything above the footer stays unchanged. */
body.surface-studio .family-header {
  flex: 0 0 auto !important;
}

/* Push footer to the actual bottom of the viewport/page. */
body.surface-studio .family-footer {
  margin-top: auto !important;

  flex: 0 0 auto !important;

  width: 100% !important;
}

/* Exact same footer inner geometry as Learn / Playground. */
body.surface-studio .family-footer-inner {
  width: 100% !important;

  min-height: 72px !important;

  padding-left: var(--sm-edge) !important;
  padding-right: var(--sm-edge) !important;

  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ==========================================================
   LEARN + PLAYGROUND MOVIE — 5% SMALLER
   Studio unchanged.
   Shrink equally from all sides around the visual centre.
   ========================================================== */

.surface-learn .family-hero-media,
.surface-playground .family-hero-media {
  transform: scale(.95) !important;
  transform-origin: 50% 50% !important;
}

/* Mobile remains natural */
@media (max-width: 1050px) {
  .surface-learn .family-hero-media,
  .surface-playground .family-hero-media {
    transform: none !important;
  }
}

/* Studio movie: final 1% right shift */
.surface-studio .family-hero-media {
  transform: translateX(1%) !important;
}

/* Studio movie: +5% size, retain final +1% right shift */
.surface-studio .family-hero-media {
  transform: translateX(1%) scale(1.05) !important;
  transform-origin: 50% 50% !important;
}

/* Studio only: +5% uniformly in all directions */
.surface-studio .family-hero-media {
  transform: scale(1.05) !important;
  transform-origin: 50% 50% !important;
}

/* Studio only: +5% size + 5% horizontal shift right */
.surface-studio .family-hero-media {
  transform: translateX(5%) scale(1.05) !important;
  transform-origin: 50% 50% !important;
}


/* === STUDIO FINAL GEOMETRY LOCK === */


/* ----------------------------------------------------------
   1. STUDIO MOVIE

   Previous state = scale(1.05).
   Another +5% = 1.05 × 1.05 = 1.1025.

   Retain requested +5% horizontal shift right.
   ---------------------------------------------------------- */

.surface-studio .family-hero-media {
  transform:
    translateX(5%)
    scale(1.1025) !important;

  transform-origin:
    50% 50% !important;
}


/* ----------------------------------------------------------
   2. STUDIO PAGE HEIGHT

   Studio is the short one-page surface.
   Make the page occupy at least the complete viewport so the
   footer cannot stop halfway up the screen.
   ---------------------------------------------------------- */

body.studio-final-shell {
  min-height: 100dvh !important;

  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  box-sizing: border-box !important;

  overflow-x: hidden !important;
}


/* Header keeps its existing exact shared height. */

body.studio-final-shell .family-header {
  flex: 0 0 var(--sm-header-h) !important;
}


/* Hero keeps its current geometry.
   Remaining viewport space is placed AFTER the hero,
   not inside the footer. */

body.studio-final-shell .family-hero-grid {
  flex: 0 0 auto !important;
}


/* ----------------------------------------------------------
   3. STUDIO FOOTER

   Same compact physical footer as Learn / Playground.
   margin-top:auto consumes any remaining viewport space ABOVE
   the footer.
   ---------------------------------------------------------- */

body.studio-final-shell .family-footer {
  width: 100% !important;

  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;

  margin:
    auto
    0
    0 !important;

  padding: 0 !important;

  flex: 0 0 72px !important;

  box-sizing: border-box !important;

  background:
    rgba(253,254,254,.985) !important;

  border-top:
    1px solid rgba(151,171,187,.28) !important;

  overflow: hidden !important;
}


body.studio-final-shell .family-footer-inner {
  width: 100% !important;

  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;

  margin: 0 !important;

  padding:
    0
    var(--sm-edge) !important;

  box-sizing: border-box !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;
}


body.studio-final-shell .family-footer-copy,
body.studio-final-shell .family-footer-nav {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* Mobile: no desktop movie transform. */

@media (max-width: 1050px) {

  .surface-studio .family-hero-media {
    transform: none !important;
  }

}


/* === END STUDIO FINAL GEOMETRY LOCK === */



/* === STUDIO TRUE FOOTER END === */


/*
Studio is a column:
header / existing content / remaining free space / footer.

The free space belongs ABOVE the footer.
*/

body.studio-page-final {
  min-height: 100dvh !important;

  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  box-sizing: border-box !important;

  overflow-x: hidden !important;
}


/*
The footer is now a DIRECT body child, so auto margin
can finally push it to the real viewport/page bottom.
*/

body.studio-page-final > .family-footer {
  width: 100% !important;

  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;

  margin: auto 0 0 !important;
  padding: 0 !important;

  flex: 0 0 72px !important;

  box-sizing: border-box !important;

  background: rgba(253,254,254,.985) !important;

  border-top:
    1px solid rgba(151,171,187,.28) !important;

  overflow: hidden !important;
}


/* Exact compact footer geometry used by the family */

body.studio-page-final > .family-footer .family-footer-inner {
  width: 100% !important;

  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;

  margin: 0 !important;

  padding:
    0
    var(--sm-edge) !important;

  box-sizing: border-box !important;

  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;
}


body.studio-page-final > .family-footer .family-footer-copy,
body.studio-page-final > .family-footer .family-footer-nav {
  margin: 0 !important;
}


/*
Important:
do NOT artificially increase the Studio hero height.
Its existing visual coordinates stay exactly where they are.
The flex free-space absorbs the difference.
*/


/* === END STUDIO TRUE FOOTER END === */


/* Studio only — another +5% movie enlargement */
.surface-studio .family-hero-media {
  transform: translateX(5%) scale(1.1576) !important;
  transform-origin: 50% 50% !important;
}

/* === STUDIO FAMILY ROUTING V2 === */
.studio-family-routing {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0 18px;
  margin:16px 0 24px;
  padding:0;
}

.studio-family-routing a {
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 0 5px;
  color:#536d82;
  text-decoration:none !important;
  font:750 10px/1.1 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}

.studio-family-routing a:hover,
.studio-family-routing a:focus-visible {
  color:#1260cf;
}

.studio-family-routing a:focus-visible {
  outline:2px solid #1260cf;
  outline-offset:4px;
  border-radius:2px;
}

.studio-family-routing a[aria-current="page"] {
  color:#1260cf;
}

.studio-family-routing a[aria-current="page"]::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1.5px;
  background:#1260cf;
}

@media(max-width:700px) {
  .studio-family-routing {
    gap:0 15px;
    margin:13px 0 22px;
  }

  .studio-family-routing a {
    min-height:26px;
    font-size:9.25px;
    letter-spacing:.045em;
  }
}

@media(prefers-reduced-motion:reduce) {
  .studio-family-routing a {
    transition:none !important;
  }
}
/* === /STUDIO FAMILY ROUTING V2 === */

/* === DATA AI RESPONSIVE FOUNDATION V19.2 === */
/* Sankey Motion family — responsive foundation.
   Desktop geometry is untouched; only containment + breakpoint behavior. */

html,
body.family-page,
body.surface-studio,
body.surface-learn,
body.surface-playground{
  max-width:100%;
}

body.family-page,
body.surface-studio,
body.surface-learn,
body.surface-playground{
  overflow-x:hidden !important;
}

.product-shell,
.family-header,
.family-hero,
.hero,
.learn-layout,
.playground-layout,
.workspace,
.content-layout,
.step,
.panel,
.card,
.movie-wrap,
.movie-stage,
.flow-film,
.hero-flow-film,
.family-hero-media{
  min-width:0;
  max-width:100%;
}

.family-header{
  box-sizing:border-box;
}

.family-nav{
  min-width:0 !important;
  max-width:100% !important;
}

.family-hero-media,
.movie-wrap,
.movie-stage,
.flow-film,
.hero-flow-film{
  overflow:hidden !important;
}

.shared-five-stage-hero,
.movie,
.family-hero-media video{
  max-width:100% !important;
}

.surface-learn pre,
.surface-playground pre,
.surface-studio pre{
  max-width:100% !important;
  overflow-x:auto !important;
}

.surface-learn table,
.surface-playground table,
.surface-studio table{
  max-width:100% !important;
}

.surface-playground table{
  display:block !important;
  overflow-x:auto !important;
}

.surface-playground svg,
.surface-learn svg,
.surface-studio svg{
  max-width:100% !important;
}

.learn-layout > *,
.surface-playground .workspace > *,
.surface-playground .content-layout > *,
.surface-playground .step > *,
.surface-learn .learn-layout > *{
  min-width:0 !important;
}

@media (max-width:1100px){
  .family-header{
    height:auto !important;
    min-height:72px !important;
    flex-wrap:wrap !important;
    gap:0 18px !important;
    padding-top:12px !important;
    padding-bottom:8px !important;
  }

  .family-brand{
    min-width:0 !important;
    max-width:100% !important;
  }

  .family-name{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .family-nav{
    flex:1 1 100% !important;
    width:100% !important;
    display:flex !important;
    justify-content:flex-start !important;
    gap:20px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
  }

  .family-nav::-webkit-scrollbar{
    display:none;
  }

  .family-nav a{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  /* Studio's deliberate desktop scale/translate must not leak into tablet/mobile. */
  .surface-studio .family-hero-media,
  .surface-studio .movie-wrap,
  .surface-studio .movie-stage,
  .surface-studio .movie{
    transform:none !important;
    translate:none !important;
    scale:none !important;
    width:100% !important;
    max-width:100% !important;
  }

  .family-hero,
  .surface-studio .hero,
  .surface-learn .hero,
  .surface-playground .hero{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

@media (max-width:900px){
  .learn-layout,
  .surface-learn .learn-layout,
  .surface-playground .workspace,
  .surface-playground .content-layout{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .surface-learn .learning-journey,
  .surface-learn .learn-rail,
  .surface-learn .slide-nav{
    max-width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }

  .surface-playground select,
  .surface-playground input,
  .surface-playground button,
  .surface-studio select,
  .surface-studio input,
  .surface-studio button{
    max-width:100% !important;
  }

  .surface-playground .controls,
  .surface-playground .control-strip,
  .surface-playground .actions,
  .surface-playground .navigation-buttons{
    max-width:100% !important;
    flex-wrap:wrap !important;
  }
}

@media (max-width:620px){
  .product-shell{
    width:100% !important;
    max-width:100% !important;
  }

  .family-header{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .family-nav{
    gap:16px !important;
  }

  .family-nav a{
    min-height:40px !important;
    display:inline-flex !important;
    align-items:center !important;
  }

  .surface-studio .start,
  .surface-studio [class*="start"]{
    max-width:100% !important;
  }

  .surface-playground button,
  .surface-studio button,
  .surface-learn button{
    min-height:38px;
  }

  .surface-playground .step,
  .surface-playground .panel,
  .surface-learn .panel{
    max-width:100% !important;
  }
}
/* === /DATA AI RESPONSIVE FOUNDATION V19.2 === */

/* === SANKEY FAMILY MOBILE HEADER v19.7.4 === */
@media (max-width:620px){
  .family-header{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    align-items:start !important;
    gap:0 !important;
    padding:12px 16px 0 !important;
    overflow:hidden !important;
  }

  .family-header .family-brand{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding-bottom:8px !important;
  }

  .family-header .family-name{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .family-header .family-nav{
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:16px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    padding:0 0 8px !important;
  }

  .family-header .family-nav::-webkit-scrollbar{
    display:none;
  }

  .family-header .family-nav a{
    flex:0 0 auto !important;
    min-height:38px !important;
    display:inline-flex !important;
    align-items:center !important;
    white-space:nowrap !important;
  }
}
/* === /SANKEY FAMILY MOBILE HEADER v19.7.4 === */

/* === LICENSED MEDIA OVERLAY + STUDIO OUTCOME VISIBILITY === */
.family-hero-media.has-media-credit {
  position: relative !important;
}

.family-hero-media.has-media-credit .sankey-media-frame {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 32 / 15 !important;
  align-self: center !important;
  justify-self: center !important;
}

.family-hero-media.has-media-credit .sankey-media-credit {
  position: absolute !important;
  left: 82% !important;
  right: auto !important;
  bottom: 14.5% !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: translateX(-50%) !important;
}

.surface-studio .family-hero-media.has-media-credit {
  left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

.surface-studio .movie-wrap {
  overflow: visible !important;
}

.surface-studio .family-hero-media.has-media-credit video {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

@media (max-width: 620px) {
  .family-hero-media.has-media-credit .sankey-media-credit {
    left: 82% !important;
    right: auto !important;
    bottom: 14.5% !important;
  }
}
/* === /LICENSED MEDIA OVERLAY + STUDIO OUTCOME VISIBILITY === */