:root{
  --paper:#f7f9fb;
  --white:#ffffff;
  --ink:#111d2c;
  --navy:#153654;
  --navy2:#294c82;
  --blue:#2464b4;
  --muted:#657487;
  --line:#cfdae7;
  --soft:#eef3f9;
  --teal:#45a4a0;
  --green:#7fbf62;
  --gold:#e0b72f;
  --orange:#e78b32;
  --coral:#d95a3a;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
}
a{color:inherit}
.product-shell{
  width:min(1220px,calc(100% - 44px));
  margin:0 auto;
}
.product-topbar{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:white;
}
.product-brand{
  text-decoration:none;
  font-weight:850;
  color:#102840;
  letter-spacing:-.02em;
}
.product-brand small{
  display:block;
  margin-bottom:4px;
  color:#1260b6;
  font-size:9px;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.product-nav{
  display:flex;
  gap:26px;
  align-items:center;
  font-size:12px;
  font-weight:750;
}
.product-nav a{text-decoration:none}
.product-nav .active{
  color:#155aa8;
  border-bottom:1px solid #155aa8;
  padding-bottom:5px;
}
.product-hero{
  background:linear-gradient(100deg,#183858,#304e87);
  color:white;
}
.product-hero-inner{
  width:min(1220px,calc(100% - 44px));
  margin:0 auto;
}
.eyebrow{
  font-size:10px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.card{
  background:white;
  border:1px solid var(--line);
  border-radius:15px;
}
.micro{
  color:#2865ad;
  font-size:9px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.btn{
  min-height:40px;
  border:1px solid #afc4df;
  border-radius:8px;
  padding:0 14px;
  background:white;
  color:#17375b;
  font:750 12px var(--sans);
  cursor:pointer;
}
.btn.primary{
  background:#2b63aa;
  color:white;
  border-color:#2b63aa;
}
.btn.active{
  background:#eaf1fb;
  border-color:#2b63aa;
}
.chip{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  background:#eef3f8;
  color:#385169;
  font:700 10px/1 var(--sans);
}
.product-footer{
  margin-top:52px;
  border-top:1px solid var(--line);
  background:#fbfcfd;
}
.product-footer-inner{
  width:min(1220px,calc(100% - 44px));
  margin:0 auto;
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  color:#6d7d8c;
  font-size:11px;
}
.product-footer-links{
  display:flex;
  align-items:center;
  gap:20px;
}
.product-footer a{
  color:#173149;
  font-weight:750;
  text-decoration:none;
}
@media(max-width:760px){
  .product-shell,
  .product-hero-inner,
  .product-footer-inner{
    width:min(100% - 26px,1220px);
  }
  .product-topbar{
    padding:15px 0;
    align-items:flex-start;
  }
  .product-nav{
    gap:13px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .product-footer-inner{
    align-items:flex-start;
    padding:16px 0;
    flex-direction:column;
  }
}


/* ----------------------------------------------------------
   Product links that behave as controls are never underlined.
   Active navigation uses border position, not text decoration.
   ---------------------------------------------------------- */

.btn,
a.btn,
.product-brand,
.product-nav a,
.product-footer a,
.api-card-link {
  text-decoration: none !important;
}



/* ==========================================================
   FINAL PUBLIC UI POLISH
   ========================================================== */

/* All control-like links behave like buttons, not hyperlinks. */
.btn,
a.btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px;
  padding:0 16px !important;
  line-height:1.1 !important;
  text-align:center !important;
  text-decoration:none !important;
  white-space:nowrap;
}

.chip,
.related-api {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:28px;
  padding:5px 10px !important;
  line-height:1.15 !important;
  text-align:center !important;
  text-decoration:none !important;
}

.product-brand,
.product-nav a,
.product-footer a,
.api-card-link {
  text-decoration:none !important;
}

/*
  Shared film window for Learn / Python / Playground.
  120% is the breathing territory.
  White protects the scientific palette from the blue hero.
*/
.flow-film {
  width:120%;
  margin-left:-10%;

  padding:10px;

  background:#ffffff;
  border:1px solid rgba(255,255,255,.98);
  border-radius:14px;

  box-shadow:
    0 0 0 1px rgba(25,55,86,.08),
    0 8px 28px rgba(8,33,58,.12);

  overflow:visible;
}

.flow-film video {
  display:block;
  width:100%;
  height:auto;

  object-fit:contain;

  background:#ffffff;
  border-radius:9px;

  pointer-events:none;
  user-select:none;
}

@media(max-width:900px) {
  .flow-film {
    width:108%;
    margin-left:-4%;
  }
}

@media(max-width:650px) {
  .flow-film {
    width:100%;
    margin-left:0;
  }
}



/* ==========================================================
   SANKEY MOTION · NEUTRAL PRODUCT HERO FAMILY
   Learn / Playground / Python Support
   Everything below the hero remains unchanged.
   ========================================================== */

.neutral-product-hero {
  position: relative;

  background: #ffffff !important;
  color: var(--ink) !important;

  border-top: 1px solid rgba(133,151,166,.16);
  border-bottom: 1px solid rgba(133,151,166,.20);

  overflow: hidden;
}


/* ----------------------------------------------------------
   Give the three surfaces the same Studio-like composition
   ---------------------------------------------------------- */

.neutral-product-hero .learn-hero-inner,
.neutral-product-hero .python-hero-grid,
.neutral-product-hero .pg-hero-grid {
  width: min(1460px, calc(100% - 64px));

  min-height: 500px;

  margin: 0 auto;
  padding: 54px 0 52px;

  display: grid;
  grid-template-columns:
    minmax(340px, .68fr)
    minmax(620px, 1.32fr);

  align-items: center;
  gap: clamp(28px, 4vw, 64px);

  overflow: visible !important;
}


/* ----------------------------------------------------------
   Hero typography
   ---------------------------------------------------------- */

.neutral-product-hero .eyebrow {
  color: #1260b6 !important;
}

.neutral-product-hero h1 {
  color: #102a42 !important;
}

.neutral-product-hero .learn-hero-copy p,
.neutral-product-hero .python-hero-copy p,
.neutral-product-hero .pg-hero-copy p {
  max-width: 540px;

  color: #536678 !important;

  font-size: 13px;
  line-height: 1.62;
}


/* ----------------------------------------------------------
   Movie: no white card, no border, no shadow.
   The page itself is white, so the film dissolves naturally.
   ---------------------------------------------------------- */

.neutral-product-hero .flow-film {
  width: 120% !important;
  margin-left: -10% !important;

  padding: 0 !important;

  background: transparent !important;

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

  box-shadow: none !important;

  overflow: visible !important;
}

.neutral-product-hero .flow-film video,
.neutral-product-hero .learn-movie {
  display: block;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  object-fit: contain !important;

  background: #ffffff !important;

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

  box-shadow: none !important;

  /*
  Do not blend scientific colours into the page background.
  */
  mix-blend-mode: normal !important;
  filter: none !important;

  pointer-events: none;
  user-select: none;
}


/* ----------------------------------------------------------
   Control text alignment
   ---------------------------------------------------------- */

.btn,
a.btn {
  display: inline-flex !important;

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

  min-height: 42px;

  padding: 0 16px !important;

  line-height: 1.15 !important;
  text-align: center !important;

  text-decoration: none !important;
}

.lesson-actions .btn {
  min-height: 44px;
}

.lesson-action .btn {
  min-height: 44px;

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


/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */

@media (max-width: 1000px) {

  .neutral-product-hero .learn-hero-inner,
  .neutral-product-hero .python-hero-grid,
  .neutral-product-hero .pg-hero-grid {
    width: min(100% - 36px, 1460px);

    grid-template-columns: 1fr;

    min-height: auto;

    padding: 48px 0 54px;
  }

  .neutral-product-hero .flow-film {
    width: 108% !important;
    margin-left: -4% !important;
  }
}

@media (max-width: 650px) {

  .neutral-product-hero .learn-hero-inner,
  .neutral-product-hero .python-hero-grid,
  .neutral-product-hero .pg-hero-grid {
    width: min(100% - 26px, 1460px);
  }

  .neutral-product-hero .flow-film {
    width: 100% !important;
    margin-left: 0 !important;
  }
}



/* ==========================================================
   FINAL LEARN JOURNEY RAIL
   Light / compact / clickable
   ========================================================== */

.learn-layout {
  align-items: start !important;

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

  gap: 18px !important;
}


/*
No full-height navy slab.
The navigator now ends where its content ends.
*/
.learn-sidebar {
  align-self: start !important;

  width: 100%;

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

  margin: 22px 0 !important;
  padding: 18px 14px 15px !important;

  position: sticky;
  top: 16px;

  background: #ffffff !important;
  color: #17283a !important;

  border: 1px solid var(--line);
  border-radius: 14px;

  box-shadow: none !important;
}


/* heading */
.learn-sidebar .eyebrow {
  color: #61788e !important;
}

.learn-sidebar h3 {
  margin: 6px 4px 14px !important;

  color: #17283a !important;

  font-size: 15px !important;
  font-weight: 800;
}


/* lesson list */
.lesson-nav {
  display: grid !important;

  gap: 3px !important;
}


/* every concept is a real button */
.lesson-nav button {
  width: 100% !important;

  min-height: 40px !important;

  display: flex !important;
  align-items: center !important;

  gap: 10px !important;

  padding: 0 11px !important;

  border: 1px solid transparent !important;
  border-radius: 9px !important;

  background: transparent !important;

  color: #182b3e !important;

  text-align: left !important;

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

  cursor: pointer;

  transition:
    background .14s ease,
    border-color .14s ease,
    color .14s ease;
}


.lesson-nav button:hover {
  background: #f3f6f9 !important;
  color: #10273d !important;
}


/*
Active = subtle blue relationship,
not a large blue background.
*/
.lesson-nav button.active {
  background: #f8fbff !important;

  color: #105da9 !important;

  border-color: #a9c3df !important;

  box-shadow: none !important;
}


.lesson-num {
  width: 22px !important;

  color: #667b8f !important;

  font-weight: 850 !important;
}


.lesson-nav button.active .lesson-num {
  color: #105da9 !important;
}


/* ----------------------------------------------------------
   Consistent buttons everywhere
   ---------------------------------------------------------- */

.btn,
a.btn,
.lesson-action .btn,
.lesson-actions .btn {
  display: inline-flex !important;

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

  min-height: 42px !important;

  padding: 0 16px !important;

  line-height: 1.1 !important;
  text-align: center !important;

  text-decoration: none !important;
}


/* prevent inherited link underline */
.btn:link,
.btn:visited,
.btn:hover,
.btn:active {
  text-decoration: none !important;
}


/* ----------------------------------------------------------
   Responsive Learn rail
   ---------------------------------------------------------- */

@media (max-width: 980px) {

  .learn-layout {
    grid-template-columns: 1fr !important;
  }

  .learn-sidebar {
    position: static !important;

    margin: 16px 0 0 !important;
  }

  .lesson-nav {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 560px) {

  .lesson-nav {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   PLAYGROUND MOVIE CONTROLS
   ========================================================== */

.result-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 12px;
}


.result-heading h2 {
  margin-bottom: 0 !important;
}


.movie-actions {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  flex-wrap: wrap;
}


.movie-state {
  min-width: 92px;

  color: #697a8b;

  font-size: 10px;
  font-weight: 750;

  text-align: right;
}


.movie-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}


@media (max-width: 700px) {

  .result-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .movie-actions {
    justify-content: flex-start;
  }

  .movie-state {
    text-align: left;
  }
}



/* ==========================================================
   SHARED 4-STAGE FLOW MOVIE
   Learn + Playground
   ========================================================== */

.hero-flow-film {
  width: 120% !important;
  margin-left: -10% !important;

  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}

.shared-flow-movie {
  display: block !important;

  width: 100% !important;
  max-width: none !important;
  height: auto !important;

  object-fit: contain !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

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

  pointer-events: none;
  user-select: none;
}

/* Never expose native browser video controls. */
.shared-flow-movie::-webkit-media-controls {
  display: none !important;
}

@media (max-width: 950px) {
  .hero-flow-film {
    width: 108% !important;
    margin-left: -4% !important;
  }
}

@media (max-width: 650px) {
  .hero-flow-film {
    width: 100% !important;
    margin-left: 0 !important;
  }
}



/* SHARED NO-OTHER FOUR-STAGE GIF */

.shared-flow-gif {
  display:block !important;

  width:100% !important;
  max-width:none !important;
  height:auto !important;

  object-fit:contain !important;

  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;

  background:transparent !important;

  pointer-events:none;
  user-select:none;
}

.hero-flow-film {
  width:120% !important;
  margin-left:-10% !important;

  padding:0 !important;

  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  overflow:visible !important;
}