/* Layout.module.css */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.Layout_layoutContainer__iLbQP {
    color: rgb(204, 204, 204);
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(0, 12, 28);
    /* background-image: url('/misc/background-texture.png'); */
    padding-top: 1vh;
  }
  /* Footer.module.css */
  .Layout_footer__e0TcZ {
    display: flex;
    justify-content: center; /* Centers children horizontally */
    align-items: flex-start; /* Centers children vertically */
    flex-direction: row; /* Aligns children in a row */
    width: 100%;
    height: auto;
    font-size: 0.8rem;
    padding: 20px 0;
    margin-top: 5%;
    text-align: center;
    border-top: 1px solid rgba(204, 204, 204, 0.3); /* Adds a light gray top border */
}

.Layout_footerSection__eIxxv h3 {
    font-weight: bold; /* Ensures h3 tags are bold */
}

/* Footer.module.css */
.Layout_footer__e0TcZ a {
    opacity: 0.7; /* Set the default opacity to 70% */
    transition: opacity 0.3s ease; /* Smooth transition for opacity changes */
}

.Layout_footer__e0TcZ a:hover {
    opacity: 1.0; /* Full opacity on hover */
}


/* Layout.module.css */
.Layout_footerSection__eIxxv {
    width: 30%;
    height: 90%;
    display: flex; /* Establish flex container */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Align children to the start (left) horizontally */
    justify-content: flex-start; /* Align children to the start (top) vertically */
    gap: 20px; /* Space between items */
    padding: 10px; /* Padding inside the section */
    box-sizing: border-box; /* Include padding in the width and height calculations */

    /* Hide on small screens */
    display: none;

    /* Show on medium screens and up */
    @media (orientation: landscape), (min-width: 1024px) {
            display: flex;
    }
}
.Layout_footerSectionAlwaysVisible__n800h {
    display: flex !important; /* Important to override media queries set in .footerSection */
}


.simulation_simulated-desktop__LYBkI {
  position: absolute;
  width: 100%;
  z-index: 0;
  background-color: var(--sim-desktop-bg);
  height: 100%;
  color: var(--sim-desktop-fg);
  caret-color: transparent;
  background-size: cover;
  /* Cover the entire container */
  font-family: 'Courier New', Courier, monospace;
  background-position: center;
  /* Center the background image */
}

.simulation_desktop-background__r2yIu {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: contain;
  /* For the background, use contain */
  background-position: center;
  /* Center the image */
}

.simulation_desktop-controls__YKxPL {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Allow mouse events to pass through */
}

.simulation_desktop-windows__n3_jx {
  position: absolute;
  opacity: 1;
  top: 0;
  z-index: 2;
  left: 0;
  width: 100%;
  height: 100%;
}


.simulation_control-bar__isNaS {
  width: 60%;
  max-width: 800px;
  pointer-events: auto;
  height: 50px;
  display: flex;
  padding: 4px;
  padding-left: 8px;
  background-color: var(--sim-chrome-bg);
  border: 1px solid var(--sim-chrome-border);
  align-items: center;
  position: absolute;
  bottom: 10px;
  left: 50%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0.8;
  z-index: 1;
  transform: translateX(-50%);
  border-radius: 20px;
}

.simulation_control-bar__isNaS .simulation_vertical-line__cXUze {
  width: 1px;
  /* Line width */
  height: 90%;
  /* Height of the line (can be adjusted as needed) */
  background-color: var(--sim-chrome-border);
  /* Color of the line */
  margin-left: 10px;
  /* Space between the button and the line */
  margin-right: 10px;
  /* Optional: Space on the other side */
}

.simulation_control-bar-item__SDlS0 {
  padding: 2px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  opacity: 0.8;
  /* Set initial opacity to 0.8 */
  transition: opacity 0.3s ease;
  /* Smooth transition for opacity change */
}

.simulation_control-bar-item__SDlS0:hover {
  opacity: 1;
  /* Change opacity to 1 on hover */
}


.simulation_startMenu___F7Sx {
  width: 60%;
  max-width: 800px;
  height: 80%;
  max-height: 700px;
  display: flex;
  background-color: var(--sim-startmenu-bg);
  border: 1px solid var(--sim-chrome-border);
  align-items: center;
  position: absolute;
  bottom: 65px;
  left: 50%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transform: translateX(-50%) translateY(100%);
  /* Initially positioned off-screen at the bottom */
  opacity: 0.1;
  /* Initial opacity */
  border-radius: 10px;
  transition: transform 200ms ease, opacity 200ms ease;
}

.simulation_startMenuEnter__u9r96 {
  transform: translateX(-50%) translateY(100%);
  /* Starts off-screen below */
  opacity: 0.1;
  /* Initial opacity when entering */
}

.simulation_startMenuEnterActive__ot7co {
  transform: translateX(-50%) translateY(0);
  /* Slide up to the center */
  opacity: 1;
  /* Fade in to 0.9 during the slide-up */
}

.simulation_startMenuEnterDone__H5xUX {
  transform: translateX(-50%) translateY(0);
  /* Ensures it remains in the final position */
  opacity: 1;
  /* Ensures it stays fully visible after entering */
}

.simulation_startMenuExit__uxdjx {
  transform: translateX(-50%) translateY(0);
  /* Keep it at the final position initially */
  opacity: 1;
  /* Maintain full opacity before exit */
}

.simulation_startMenuExitActive__XOcei {
  transform: translateX(-50%) translateY(100%);
  /* Slide down to off-screen below */
  opacity: 0.1;
  /* Fade out to 0.1 during the slide-down */
}

.simulation_startMenuExitDone__R_8VA {
  transform: translateX(-50%) translateY(100%);
  /* Ensure it stays off-screen after exit */
  opacity: 0.1;
  /* Ensure it remains transparent after exit */
}

/* The main apps section */
.simulation_apps__M4u1p {
  flex: 1;
  /* Take up the remaining space */
  height: 100%;
  padding: 10px;
  overflow-y: auto;
  /* Allow scrolling if content overflows */
}

.simulation_opacity-hover___y6Qq {
  opacity: 0.6;
  /* Start with 0.9 opacity */
  transition: opacity 0.3s ease;
  /* Smooth transition for opacity change */
}

.simulation_opacity-hover___y6Qq:hover {
  opacity: 1;
  /* Transition to full opacity on hover */
}

.simulation_applicationsContent__MCv6K {
  height: 96%;
  /* Take up 90% of the height */
  width: 100%;
  /* Full width */
  background-color: var(--sim-panel-bg);
  /* Panel colour (dark grey in dark mode, light grey in light mode) */

  padding: 30px;
  /* Add padding around the container */
  display: grid;
  /* Grid, not flex-wrap: flex-wrap's justify-content centers each row
     independently, which strands a lone leftover item (once more than one
     app is unlocked and it spans multiple rows) floating mid-row instead of
     top-left like the row above it. Grid keeps every row on the same fixed
     column tracks, so items just fill left-to-right, top-to-bottom in
     reading order - a single item sits top-left, not centered.
     2 equal-width (1fr) columns always span the full menu width; the media
     query below switches to 3 above 1024px so tiles don't grow past a
     comfortable size on wider screens (see .application/.applicationIcon,
     which size themselves as a percentage of whatever the grid gives each
     column, so they track this automatically either way). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
  /* Even spacing between items */
  align-content: flex-start;
  /* Align rows to the top */
  overflow-y: auto;
  /* Add vertical scrolling when content overflows */
  overflow-x: hidden;
  /* Never a horizontal scrollbar. Belt-and-suspenders with the minmax(0, ...)
     above: a bare 1fr track won't shrink below its content's min-content
     width (e.g. a long app title), which can force the grid wider than its
     container - minmax(0, 1fr) lets tracks actually shrink to fit, and this
     is the backstop in case anything ever still overflows. Also matters
     because overflow-y: auto alone would otherwise make an unset overflow-x
     compute as auto too (mismatched overflow-x/y pairs both resolve to
     auto per spec), silently allowing a horizontal scrollbar to appear.
     For narrow tiles, see .application's overflow-wrap. */
  scrollbar-width: thin;
  /* For modern browsers, thin scrollbar */
  scrollbar-color: var(--sim-scroll-thumb) var(--sim-scroll-track);
  /* For modern browsers */
}

/* .startMenu's own width is 60vw capped at 800px (see .startMenu below), so
   this viewport breakpoint corresponds to roughly 615px of actual menu
   width - past that point 2 equal columns would grow tiles uncomfortably
   large, so 3 takes over instead. */
@media (min-width: 1024px) {
  .simulation_applicationsContent__MCv6K {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.simulation_application__AlmjL {
  /* Width comes from the grid column track (an equal 1/2 or 1/3 share of
     .applicationsContent's full width, see its grid-template-columns above)
     - aspect-ratio keeps it square at whatever width that ends up being,
     instead of a second hardcoded size that could drift out of sync with
     the grid's own sizing. */
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow-wrap: break-word;
  /* Guards against a single long app title word forcing this tile (and so
     the grid track containing it) wider than its share of the row. */
  padding-top: 20px;
  background-color: var(--sim-tile-bg);
  border: 1px solid var(--sim-tile-border);
  /* Add border with specified color */
  border-radius: 5px;
  /* Optional: add rounded corners */
  display: flex;
  flex-direction: column;
  justify-content: start;
  /* Center content horizontally */
  align-items: center;
  /* Center content vertically */
  color: var(--sim-tile-fg);
  /* Tile text colour (white in dark mode, near-black in light mode) */
  font-size: 14px;
  /* Font size for the text inside */
  font-weight: bold;
  /* Make text bold */
  cursor: pointer;
  /* Indicate interactivity */
  transition: background-color 0.3s ease, transform 0.2s ease;
  /* Smooth hover transition */
}

.simulation_applicationIcon__CCUlk {
  /* 70% of .application's own size - same ratio as the original fixed
     140px/200px, but tracks whatever width the grid column actually gives
     the tile instead of a separately-tuned formula that could drift out of
     sync with it. */
  width: 70%;
  height: 70%;
}

.simulation_application__AlmjL:hover {
  background-color: var(--sim-tile-hover);
  /* Change background color on hover */

}
.simulation_windowContent__53VO_ {
  width: 100%;
  flex-grow: 1;
  overflow: hidden;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
}

.simulation_appWindow__E_D4H {
  position: relative;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none; /* Prevent text selection */
  display: flex;
  flex-direction: column;
  background-color: var(--sim-chrome-bg);
  border-radius: 8px;
  /* Add a subtle border radius */
  border: 1px solid var(--sim-window-border);
  /* Grey border */
  box-shadow: 0 2px 4px var(--sim-window-shadow);
  /* Very slight box shadow */
}

/* Shared styles for resize handles */
.simulation_resizeHandle__MaMHX {
  position: absolute;
  z-index: 10;

  cursor: grab;
}

/* Top handle */
.simulation_resizeTop__OkMeW {
  top: -5px;
  left: 0;
  width: 100%;
  height: 10px;
  cursor: ns-resize;
}

/* Right handle */
.simulation_resizeRight__EeO5_ {
  top: 0;
  right: -5px;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
}

/* Bottom handle */
.simulation_resizeBottom__NuP4K {
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 10px;
  cursor: ns-resize;
}

/* Left handle */
.simulation_resizeLeft__Rfb2G {
  top: 0;
  left: -5px;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
}

/* Corner resize handles */
.simulation_cornerHandle__YDL34 {
  position: absolute;
  width: 15px;

  height: 15px;
  border-radius: 50%;
  /* Make them circular */
  z-index: 11;
  /* Ensure they appear above other elements */
  cursor: grab;
}

/* Specific corner positions */
.simulation_topLeft__CyXHf {
  top: -7.5px;
  left: -7.5px;
  cursor: nwse-resize;
  /* Diagonal resize cursor */
}

.simulation_topRight__njE2s {
  top: -7.5px;
  right: -7.5px;
  cursor: nesw-resize;
  /* Diagonal resize cursor */
}

.simulation_bottomLeft__u4_tM {
  bottom: -7.5px;
  left: -7.5px;
  cursor: nesw-resize;
  /* Diagonal resize cursor */
}

.simulation_bottomRight__1nwFB {
  bottom: -7.5px;
  right: -7.5px;
  cursor: nwse-resize;
  /* Diagonal resize cursor */
}

.simulation_header__MkgNh {
  background-color: var(--sim-header-bg);
  color: var(--sim-header-fg);
  border-bottom: 1px solid var(--sim-window-border);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: 35px;
  padding: 10px 10px;
  text-align: center;
  font-size: 18px;
}

.simulation_appHeaderButton__8IO0t {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.simulation_simulationMenu__zdXmb {
  width: 100%;
  height: 100%;
  /* Above every other overlay in this file (spotlight 29, objective 30, fact
     31, objectiveFailedOverlay 200000) - opening settings should sit on top
     of an in-progress spotlight, not the other way round. Still below
     voiceoverControlBar.tsx's cog (inline z-index 999999, also a direct
     #simulated-desktop-root sibling), so the cog that opened this stays
     visible/clickable above it to close it again. */
  z-index: 500000;
  background-color: var(--sim-menu-bg); /* Dark grey in dark mode, light grey in light mode */
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  align-items: center;
  opacity: 0;
  /* position:absolute (not relative, unlike every sibling overlay in this
     file - .objectiveOverlay/.spotlightOverlay/.objectiveFailedOverlay/
     .factOverlay all use absolute) - relative kept this in normal document
     flow, so mounting it (width/height 100%) pushed every subsequent sibling
     in desktop.tsx's DOM order (SpotlightOverlay included) down out of the
     viewport for as long as this was open. */
  position: absolute;
  transition: opacity 0.2s ease-in-out; /* Smooth transition */
}

.simulation_simulationMenuEnter___d2PK {
  opacity: 0; /* Start from fully transparent */
}

.simulation_simulationMenuEnterActive__YvDYp {
  opacity: 0.98; /* Transition to 90% opacity */
}

.simulation_simulationMenuEnterDone__F4XbE {
  opacity: 0.98; /* Fully visible */
}

.simulation_simulationMenuExit__1WUFO {
  opacity: 0.98; /* Start from fully visible */
}

.simulation_simulationMenuExitActive__dhETU {
  opacity: 0; /* Transition to fully transparent */
}

.simulation_simulationMenuExitDone__LwIre {
  opacity: 0; /* Fully hidden */
}

/* styles.module.css */
.simulation_menuScrollbar__rju5u::-webkit-scrollbar {
  width: 8px; /* Thin scrollbar width */
}

.simulation_menuScrollbar__rju5u::-webkit-scrollbar-track {
  background: var(--sim-menu-scroll-track); /* Track */
  border-radius: 10px; /* Rounded corners for track */
}

.simulation_menuScrollbar__rju5u::-webkit-scrollbar-thumb {
  background: var(--sim-menu-scroll-thumb); /* Scroll handle */
  border-radius: 10px; /* Rounded corners for thumb */
}

.simulation_menuScrollbar__rju5u::-webkit-scrollbar-thumb:hover {
  background: var(--sim-menu-scroll-thumb-hover); /* Handle on hover */
}

/* Firefox scrollbar styling */
.simulation_menuScrollbar__rju5u {
  scrollbar-width: thin; /* Thin scrollbar for Firefox */
  scrollbar-color: var(--sim-menu-scroll-thumb) var(--sim-menu-scroll-track); /* Thumb and track colours */
}


.simulation_objectiveOverlay__1_u77 {
  width: 100%;
  height: 100%;
  z-index: 30;
  background-color: rgba(30, 30, 30, 0.78); /* Slightly lighter grey with 90% opacity */
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  align-items: center;
  opacity: 0;
  position: absolute;
  transition: opacity 0.6s ease-in-out; /* Smooth transition */
}

.simulation_objectiveOverlayEnter__JaOPC {
  opacity: 0; /* Start from fully transparent */
}

.simulation_objectiveOverlayEnterActive__iugCu {
  opacity: 0.98; /* Transition to visible */
}

.simulation_objectiveOverlayEnterDone__yrT4e {
  opacity: 0.98; /* Fully visible */
}

.simulation_objectiveOverlayExit__2fQuf {
  opacity: 0.98; /* Start from fully visible */
}

.simulation_objectiveOverlayExitActive__FWmcO {
  opacity: 0; /* Transition to fully transparent */
}

.simulation_objectiveOverlayExitDone__ZwUCu {
  opacity: 0; /* Fully hidden */
}

.simulation_objectiveFailedOverlay__cP2iW {
  width: 100%;
  height: 100%;
  z-index: 200000;
  background-color: var(--sim-objective-failed-overlay-bg); /* Dark grey in dark mode, light grey in light mode */
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  align-items: center;
  opacity: 0;
  position: absolute;
  transition: opacity 0.6s ease-in-out; /* Smooth transition */
}

.simulation_objectiveFailedOverlayEnter__7afB1 {
  opacity: 0; /* Start from fully transparent */
}

.simulation_objectiveFailedOverlayEnterActive__t6HLR {
  opacity: 0.98; /* Transition to visible */
}

.simulation_objectiveFailedOverlayEnterDone__Qv9bI {
  opacity: 0.98; /* Fully visible */
}

.simulation_objectiveFailedOverlayExit__fu_Vf {
  opacity: 0.98; /* Start from fully visible */
}

.simulation_objectiveFailedOverlayExitActive__mYfT0 {
  opacity: 0; /* Transition to fully transparent */
}

.simulation_objectiveFailedOverlayExitDone__4oU1P {
  opacity: 0; /* Fully hidden */
}


.simulation_factOverlay__QtRZu {
  width: 100%;
  height: 100%;
  z-index: 31;
  background-color: transparent; /* now transparent */
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  align-items: center;
  opacity: 0;
  position: absolute;
  transition: opacity 0.6s ease-in-out; /* Smooth transition */
  pointer-events: none; /* Allow pointer events to pass through */
}

.simulation_factOverlayEnter__uf4T7 {
  opacity: 0; /* Start from fully transparent */
}

.simulation_factOverlayEnterActive__ANoO_ {
  opacity: 1; /* Transition to visible */
}

.simulation_factOverlayEnterDone__udWgx {
  opacity: 1; /* Fully visible */
}

.simulation_factOverlayExit__ZSN7q {
  opacity: 1; /* Start from fully visible */
}

.simulation_factOverlayExitActive__rLCYp {
  opacity: 0; /* Transition to fully transparent */
}

.simulation_factOverlayExitDone__RSbk2 {
  opacity: 0; /* Fully hidden */
}




.simulation_objectivesBox__z5SpI {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 40%;
}



.simulation_spotlightOverlay__cj_tp {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 29;
}

/* Enter transitions */
.simulation_spotlightOverlayEnter__tapNC {
  opacity: 0;
}

.simulation_spotlightOverlayEnterActive__AoVC0 {
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
}

.simulation_spotlightOverlayEnterDone__BR6Ke {
  opacity: 1;
}

/* Exit transitions */
.simulation_spotlightOverlayExit__jnTwT {
  opacity: 1;
}

.simulation_spotlightOverlayExitActive__CzF_U {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.simulation_spotlightOverlayExitDone__wJTGt {
  opacity: 0;
}

/* Spotlight-specific styles */
.simulation_spotlightSvg__psJDu {
  width: 10000px;
  background-color: transparent;
  height: 10000px;
}

.simulation_fullscreenRect__7iugE {
  width: 100%;
  height: 100%;
}

.simulation_spotlightRect__K1TJL {
  fill: black;
}

.simulation_overlayMask__oYPn8 {
  width: 100%;
  height: 100%;
  fill: var(--sim-spotlight-scrim);
}

/* default text inside the popup */
.simulation_spotlightOverlay__cj_tp div {
  font-size: 1em;
  line-height: 1.4;
}

/* headings */
.simulation_spotlightOverlay__cj_tp h2 {
  font-size: 1.1em;
  margin: 0 0 0.5em;
}

/* bold text */
.simulation_spotlightOverlay__cj_tp b,
.simulation_spotlightOverlay__cj_tp strong {
  font-weight: bold;
}

/* italic text */
.simulation_spotlightOverlay__cj_tp i,
.simulation_spotlightOverlay__cj_tp em {
  font-style: italic;
}

/* Landing slides: scroll-snap container, alternating shades, and the
   entrance animations. Every animation/transition here is switched off in the
   prefers-reduced-motion block at the bottom — keep it that way when adding more. */

/* Adjust the two shades here (per theme). Slide 1/3 use --bg-dark, 2/4 --bg-light. */
.slides_root__j0Px4 {
  --bg-dark: #0d0d0f;
  --bg-light: #202024;
  --slide-header-h: 62px; /* overwritten at runtime with the real header height */
  --stagger: 0.6s;
  /* Slide-to-slide graduation (try-out): each slide's top and bottom edge fades to the mid-tone of the two shades, so
     neighbouring slides meet in the same colour with no seam. --blend-h is the height of the fade; set it to 0 to switch
     the whole thing off. */
  --bg-mid: color-mix(in srgb, var(--bg-dark), var(--bg-light));
  --blend-h: 6rem;

  /* No scroller of its own: the page scrolls. Paged scrolling is handled in
     LandingSlides (JS, off for reduced motion). */
  width: 99vw;
}

.hlf-v2.light .slides_root__j0Px4 {
  --bg-dark: #e4e5ea;
  --bg-light: #fbfbfc;
}

.slides_slide__Q__dj {
  position: relative;
  min-height: calc(100dvh - var(--slide-header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 3rem 1.25rem;
  isolation: isolate; /* a stacking context, so the fades below can sit behind the slide's content but above its colour */
}
.slides_slide__Q__dj::before, .slides_slide__Q__dj::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--blend-h);
  z-index: -1;
  pointer-events: none;
}
.slides_slide__Q__dj::before { top: 0; background: linear-gradient(to bottom, var(--bg-mid), transparent); }
.slides_slide__Q__dj::after { bottom: 0; background: linear-gradient(to top, var(--bg-mid), transparent); }
/* Slides with a picture (hero, Tech-tionary, final) need the fade above it, not behind. Their copy is z-index 1. */
.slides_blendOver__Cs4q1::before, .slides_blendOver__Cs4q1::after { z-index: 1; } /* 1, not 0: the top fade (::before) comes first in the page, so at 0 the picture and wash, which come after it, painted over it; copy that must stay above is also z-index 1 and later in the page */
.slides_noBlendTop__cwuHa::before { display: none; }      /* the hero is at the very top of the page */
.slides_noBlendBottom__MPHav::after { display: none; }    /* the final slide is followed by the footer */
.slides_shadeDark__KWsiG { background: var(--bg-dark); }
.slides_shadeLight__sC4cv { background: var(--bg-light); }

/* ---------- "Next slide" cue ---------- */
/* Slides that have a cue reserve extra room at the bottom for it, which also lifts their content a little. */
.slides_hasNext__U5yFM { padding-bottom: 6rem; }
.slides_tightTop__qQ9Rm { padding-top: 1.25rem; } /* these slides start higher; the layouts below account for it */
.slides_nextCue__P7K8X {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  translate: -50% 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.4rem 1.5rem;
  background: none;
  border: 0;
  color: rgb(var(--accent));
  cursor: pointer;
  font-family: inherit;
  /* Always the last thing to appear: hidden until its slide is "visible", then fades in after --cue-delay
     (set per slide in LandingSlides.tsx, about a second after that slide's last text). */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease-out var(--cue-delay, 0s);
}
.slides_visible__A_Heg .slides_nextCue__P7K8X { opacity: 1; pointer-events: auto; }
.slides_nextCueLabel__dv0Vi { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } /* always one line */
/* Phones: a more compact cue, so it takes less vertical room. */
@media (max-width: 899px) {
  .slides_nextCueLabel__dv0Vi { font-size: 11px; letter-spacing: 0.1em; }
  .slides_nextCueArrow__VWU0d { width: 32px; height: 32px; }
  .slides_nextCue__P7K8X { padding: 0.25rem 1rem; }
}
/* A cue can have a different label where the next slide differs (e.g. the quizzes and articles are one slide on
   large screens and two on phones): .cueSmall shows under 1024px, .cueLarge from 1024px up. */
.slides_cueSmall__GJE5r { display: inline; }
.slides_cueLarge__GPq38 { display: none; }
@media (min-width: 1024px) {
  .slides_cueSmall__GJE5r { display: none; }
  .slides_cueLarge__GPq38 { display: inline; }
}
.slides_nextCueArrow__VWU0d { animation: slides_cueBob__S_JrP 1.8s ease-in-out infinite; filter: drop-shadow(0 0 6px rgb(var(--accent) / 0.45)); }
.slides_nextCue__P7K8X:hover .slides_nextCueArrow__VWU0d, .slides_nextCue__P7K8X:focus-visible .slides_nextCueArrow__VWU0d { animation-play-state: paused; opacity: 1; }
@keyframes slides_cueBob__S_JrP {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* ---------- Headline sizes ---------- */
/* One place for every slide's heading size. Three steps: phones, medium screens (768-999px, a touch
   smaller so they don't crowd), and 1000px up. (Done here rather than with Tailwind's min-[1000px]
   variant, which this project's custom `screens` config doesn't generate.) */
.slides_sectionTitle__4vB0g { font-size: 26px; }   /* simulation, journey, quizzes, case studies, Tech-tionary */
.slides_castleTitle__nNKRB { font-size: 24px; }    /* the two titles on the castle slide */
.slides_punchline__yKGgC { font-size: 24px; }      /* "HighLowFlow is the radical new approach..." */
.slides_heroTitle__mCs_8 { font-size: 36px; }
@media (min-width: 768px) {
  .slides_sectionTitle__4vB0g { font-size: 30px; }
  .slides_castleTitle__nNKRB { font-size: 28px; }
  .slides_punchline__yKGgC { font-size: 28px; }
  .slides_heroTitle__mCs_8 { font-size: 52px; }
}
@media (min-width: 1000px) {
  .slides_sectionTitle__4vB0g { font-size: 34px; }
  .slides_castleTitle__nNKRB { font-size: 32px; }
  .slides_punchline__yKGgC { font-size: 34px; }
  .slides_heroTitle__mCs_8 { font-size: 64px; }
}

/* ---------- Slide 1 ---------- */
/* Place the background picture so the orange tile's "F" lands at about 72% across the screen, at every width. Measured on
   hero-network-bg.png (1736x530): the tile's "F" is at 83.5% of the picture's width, and the picture's width at "cover"
   size is the larger of the slide's width and 3.275 times its height. The position is then "F at 72%", clamped so the
   picture never leaves a gap at either side (on the very widest screens that means the "F" ends a little further right,
   as far left as the picture allows). Because it is computed, the narrower the screen, the further the picture is
   shifted. This replaces the position rule in globals.css for these two slides (hero and final). */
.hlf-v2 div.slides_heroBgShift__u_Y_3 {
  --hero-w: 99vw;
  --hero-wi: max(var(--hero-w), calc(3.275 * (100dvh - var(--slide-header-h))));
  background-size: var(--hero-wi) auto;
  background-position-x: clamp(calc(var(--hero-w) - var(--hero-wi)), calc(0.72 * var(--hero-w) - 0.835 * var(--hero-wi)), 0px);
}
.slides_heroStage__VooRe {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: 900px;
}
.slides_fadeUp__rRqw2 { animation: slides_fadeUp__rRqw2 0.7s ease-out both; }
.slides_fadeUpLate__tmOaH { animation: slides_fadeUp__rRqw2 0.7s ease-out 0.25s both; }
.slides_fadeUpLater__Ax2j0 { animation: slides_fadeUp__rRqw2 0.7s ease-out 0.5s both; }
.slides_heroNext__xS5Kf {
  position: absolute;
  left: 50%;
  bottom: calc(var(--blend-h) + 1.25rem); /* clear of the bottom fade (the fade paints over anything inside it) */
  z-index: 1;
  translate: -50% 0;
}

/* ---------- Slide 2 ---------- */
.slides_painLayout__yf2CE {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2.5rem;
  max-width: 1100px;
  width: 100%;
}
@media (min-width: 900px) {
  .slides_painLayout__yf2CE { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; }
}

/* Step 1: the box + its shadow (the shadow lives on ::before so it can fade on its own). */
.slides_frame__UQ7Dt {
  position: relative;
  aspect-ratio: 1 / 1;
  width: min(64vw, 340px);
  justify-self: center;
  border-radius: 24px;
}
.slides_frame__UQ7Dt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.8s ease-out 0s;
}
/* Step 2: the image, inside the box. */
.slides_frame__UQ7Dt img {
  position: relative;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.7s ease-out calc(var(--stagger) * 1), transform 0.7s ease-out calc(var(--stagger) * 1);
}

/* Steps 3 & 4: copy. */
.slides_copy__HGrJV { display: flex; flex-direction: column; gap: 3rem; }
.slides_copy__HGrJV p, .slides_copy__HGrJV h2 { margin: 0; }
/* One title + subtitle pair; the two pairs are deliberately separate blocks. */
.slides_copyBlock__G4cRy { display: flex; flex-direction: column; gap: 0.75rem; }
.slides_copyBlock__G4cRy > p:first-child { margin-bottom: -0.25rem; } /* the Fact N label sits tight above its title */
.slides_painText__HUhQU,
.slides_diagnosisText__eGaEK {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.slides_painText__HUhQU { transition-delay: calc(var(--stagger) * 2); }
.slides_diagnosisText__eGaEK { transition-delay: calc(var(--stagger) * 3); }

.slides_visible__A_Heg .slides_frame__UQ7Dt::before { opacity: 1; }
.slides_visible__A_Heg .slides_frame__UQ7Dt img { opacity: 1; transform: none; }
.slides_visible__A_Heg .slides_painText__HUhQU,
.slides_visible__A_Heg .slides_diagnosisText__eGaEK { opacity: 1; transform: none; }

/* ---------- "Click to learn more" (simulation slide) + modal ---------- */
/* Light blue in dark mode, dark blue in light mode (the same blues as the logo / mind map). */
/* The wrapper does the fade-in (the button itself is busy pulsing its own opacity): hidden until the slide's text
   is in, then it fades in with the same delay as the next-slide cue (--cue-delay, from SIM_CUE_DELAY_S in LandingSlides.tsx). */
.slides_learnMoreWrap__a4N_K {
  align-self: center;
  margin-top: 1.5rem;   /* a clear gap below the paragraph */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease-out var(--cue-delay, 1.9s);
}
.slides_visible__A_Heg .slides_learnMoreWrap__a4N_K { opacity: 1; pointer-events: auto; }
.slides_learnMore__ddJ2p {
  --lm: #75d8d6;
  display: inline-block;
  padding: 0.35rem 0.6rem;
  background: none;
  border: 0;
  color: var(--lm);
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  cursor: pointer;
}
/* Phones: smaller, so it stays compact under the copy. */
@media (max-width: 899px) {
  .slides_learnMore__ddJ2p { font-size: 14px; padding: 0.25rem 0.5rem; }
  .slides_learnMoreWrap__a4N_K { margin-top: 0.75rem; }
}
.hlf-v2.light .slides_learnMore__ddJ2p { --lm: #1c5f8d; }
/* A slow, slight pulse (fade, with a touch of scale) so it reads as clickable. On hover (or keyboard focus) the pulse
   stops and it goes to full opacity. No underline. */
.slides_learnMore__ddJ2p { animation: slides_learnPulse__SZz_Y 2.4s ease-in-out infinite; transition: opacity 0.2s ease; }
.slides_learnMore__ddJ2p:hover, .slides_learnMore__ddJ2p:focus-visible { animation: none; opacity: 1; text-decoration: none; }
@keyframes slides_learnPulse__SZz_Y {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}
.slides_modalBackdrop__h_tEn {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.62);
  /* Fades in (and back out) rather than popping: opacity only. */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.slides_modalShown__d_AFv { opacity: 1; }
.slides_modalPanel__tvHvs {
  position: relative;
  width: min(920px, 100%);
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: 20px;
  background: rgb(var(--card));
  border: 1px solid rgb(var(--border));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.slides_modalClose__BfoWk {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
}
.slides_modalVideo__AWfGj { display: block; width: 100%; max-height: 56dvh; background: rgb(var(--muted)); }
.slides_modalBody__sCuAn { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.5rem 1.5rem 1.75rem; }
.slides_modalBody__sCuAn h2, .slides_modalBody__sCuAn p { margin: 0; }
.slides_modalList__Cazqj { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; color: rgb(var(--muted-foreground-3)); font-size: 16px; line-height: 1.5; }
.slides_modalList__Cazqj strong { color: rgb(var(--foreground)); }

/* ---------- Slide 3 ---------- */
/* Breathing is driven by two registered numbers so hovering the core can ease it off smoothly:
   --mm-dim is each element's own animated 0..1 pulse; --mm-amp scales every pulse at once
   (1 = breathing, 0 = held at full opacity) and is what the core's hover transitions. */
@property --mm-dim { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --mm-amp { syntax: '<number>'; inherits: true; initial-value: 1; }

/* Anything inside the diagram tagged [data-agenda-item] is revealed in DOM order
   (index assigned in AgendaSlide via --i): core, then spoke / node / spoke / node... */
.slides_agendaDiagram__pYtnD { width: 100%; display: flex; justify-content: center; }
/* Mind map slide copy: stacked around the diagram on phones, in opposite corners on desktop. */
.slides_agendaSlide__chE2n { flex-direction: column; gap: 1.25rem; }
.slides_agendaCopy__TTxBn { position: relative; z-index: 1; max-width: 520px; text-align: center; }
.slides_agendaCopy__TTxBn p { margin: 0; }
@media (min-width: 900px) {
  .slides_agendaSlide__chE2n { flex-direction: row; }
  .slides_agendaCopy__TTxBn { position: absolute; max-width: 400px; }
  /* Pinned relative to a centred 1200px column rather than the screen edge, so on wide screens the
     two blocks stay close to the diagram instead of drifting to the corners. */
  .slides_agendaCopyTop__MdyM_ { top: 8rem; left: max(3rem, calc(50% - 600px)); text-align: left; }
  .slides_agendaCopyBig__5rD48 { max-width: 520px; } /* the punchline is bigger, so it gets a wider box */
  .slides_agendaCopyBottom__LIlnB { bottom: 8rem; right: max(3rem, calc(50% - 600px)); text-align: right; }
}
.slides_agendaDiagram__pYtnD [data-agenda-item] {
  opacity: 0.12;
  filter: none;
  transition: opacity 0.6s ease-out, filter 0.6s ease-out;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.slides_visible__A_Heg .slides_agendaDiagram__pYtnD [data-agenda-item] { opacity: 1; }
.slides_visible__A_Heg .slides_agendaDiagram__pYtnD .slides_spoke__acUl5 { filter: drop-shadow(0 0 3px rgba(var(--mm-glow), 0.3)); }
.slides_visible__A_Heg .slides_agendaDiagram__pYtnD .slides_node__To3_O { filter: drop-shadow(0 0 8px rgba(var(--mm-glow), 0.25)); }

.slides_mindMap__rZ8fT {
  /* Dark theme: the brand teal/orange. Light theme: same hues with the lightness clamped down,
     the way the All Seeing Eye recolours its neon icons for light mode (see recolourForLight in
     simulationTheme.tsx), but eased: the light-mode teal sits at L 0.38 and is nudged toward blue
     (hue ~200deg) because the ASE's L 0.17 read as near-black here. */
  --mm-teal: 118 216 215;
  --mm-orange: 236 93 33;
  --mm-glow: 118, 216, 215;
  --orb-teal: #3b7f7e;
  --orb-teal-deep: #25585a;
  --orb-teal-core: #173e40;
  --orb-orange: #a8401a;
  --orb-orange-hi: #d98440;
  --mm-dimmest: 0.78; /* how far a pulse dims: opacity bottoms out at 1 - this */
  /* Whole diagram sits back so copy laid over it stays readable. One knob: raise toward 1 for more presence. */
  --mm-overall: 0.4;
  opacity: var(--mm-overall);
  transition: --mm-amp 1.1s ease-in-out;
  position: relative;
  width: min(92vw, calc(46dvh * 0.8));
  aspect-ratio: 4 / 5;
}
@media (min-width: 800px) {
  .slides_mindMap__rZ8fT { aspect-ratio: 16 / 10; width: min(52vw, 700px, calc((100dvh - var(--slide-header-h) - 9rem) * 1.6)); }
}
.hlf-v2.light .slides_mindMap__rZ8fT {
  --mm-teal: 39 116 155;
  --mm-orange: 169 61 15;
  --mm-glow: 39, 116, 155;
  --orb-teal: #2e799e;
  --orb-teal-deep: #20546f;
  --orb-teal-core: #17415a;
  --orb-orange: #8f3410;
  --orb-orange-hi: #b05a22;
}
.slides_spokes__5QZQy { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.slides_spokeLine__vwrCo {
  fill: none;
  stroke: rgb(var(--mm-teal) / 0.3);
  stroke-width: 1.2px;
  transition: stroke 0.7s ease-out calc(var(--k, 0) * 50ms);
  opacity: calc(1 - var(--mm-dim) * var(--mm-amp) * var(--mm-dimmest));
  animation: slides_breathe__WBC6v var(--sd, 6s) ease-in-out var(--sl, 0s) infinite;
}
.slides_spokeFlow__uPJ3m {
  fill: none;
  stroke: rgb(var(--mm-teal) / 0.7);
  stroke-width: 1.6px;
  transition: stroke 0.7s ease-out calc(var(--k, 0) * 50ms);
  stroke-linecap: round;
  stroke-dasharray: 2 18;
  opacity: calc((1 - var(--mm-dim) * var(--mm-amp) * var(--mm-dimmest)) * 0.6);
  animation: slides_flow__eT9_Y 3s linear infinite var(--d, 0s), slides_breathe__WBC6v var(--sd, 6s) ease-in-out var(--sl, 0s) infinite;
}
/* Hovering the core wakes the whole map. */
/* Hovering the core warms the lines up one by one (each waits its turn via --k) rather than all at once. */
.slides_mindMap__rZ8fT:has(.slides_swirl__dxVRg:hover) { --mm-amp: 0; } /* hover the core: everything eases to full opacity and holds */
.slides_mindMap__rZ8fT:has(.slides_swirl__dxVRg:hover) .slides_spokeLine__vwrCo { stroke: rgb(var(--mm-orange) / 0.5); transition-delay: calc(var(--k, 0) * 140ms); }
.slides_mindMap__rZ8fT:has(.slides_swirl__dxVRg:hover) .slides_spokeFlow__uPJ3m { stroke: rgb(var(--mm-orange) / 0.85); transition-delay: calc(var(--k, 0) * 140ms); }

/* The swirl: three counter-rotating conic-gradient layers in the brand teal + orange, blurred
   into each other, over a pulsing core. Isolated so its blend modes stay inside it. */
.slides_swirl__dxVRg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(48px, 7.5%, 88px);
  aspect-ratio: 1;
  translate: -50% -50%;
  isolation: isolate;
  cursor: default;
}
/* After the generic [data-agenda-item] rule so it wins: fades in quickly, but intensifies / relaxes
   over a few seconds on hover so it never feels like a switch flipping. */
.slides_agendaDiagram__pYtnD .slides_swirl__dxVRg { transition: opacity 0.6s ease-out, scale 1.8s ease-in-out, filter 1.8s ease-in-out; }
.slides_swirl__dxVRg > div { position: absolute; border-radius: 50%; pointer-events: none; }
.slides_swirlGlow__BF_a6 {
  inset: -45%;
  background: conic-gradient(from 0deg, var(--orb-teal-deep), var(--orb-orange), var(--orb-teal-deep), var(--orb-orange), var(--orb-teal-deep));
  filter: blur(34px);
  opacity: 0.22;
  animation: slides_spin__yBwBi 18s linear infinite;
  transition: opacity 1.8s ease-in-out;
}
.slides_swirlBody__5JXtH {
  inset: 0;
  background: conic-gradient(from 90deg, var(--orb-teal), var(--orb-teal-deep), var(--orb-orange), var(--orb-orange-hi), var(--orb-teal));
  filter: blur(9px);
  animation: slides_spin__yBwBi 9s linear infinite reverse;
}
.slides_swirlBody2__SXXXc {
  inset: 8%;
  background: conic-gradient(from 200deg, var(--orb-orange), var(--orb-teal), var(--orb-teal-core), var(--orb-teal), var(--orb-orange));
  filter: blur(6px);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: slides_spin__yBwBi 6s linear infinite;
}
.slides_swirlCore__r7PL4 {
  inset: 24%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--orb-teal) 55%, white) 0, var(--orb-teal) 38%, transparent 72%);
  filter: blur(3px);
  animation: slides_pulse__HzOzO 3.2s ease-in-out infinite;
}
/* "Lights up and glows": the visible-state rule above only sets opacity, so these win by specificity. */
.slides_visible__A_Heg .slides_agendaDiagram__pYtnD .slides_swirl__dxVRg:hover { scale: 1.07; filter: brightness(1.28) saturate(1.12); }
.slides_swirl__dxVRg:hover .slides_swirlGlow__BF_a6 { opacity: 0.5; }

/* Nodes: a ring-and-label per concept, each shimmering on its own offset. */
.slides_node__To3_O {
  position: absolute;
  translate: -50% -50%;
  transition: opacity 0.6s ease-out, filter 0.6s ease-out;
}
.slides_nodeInner__36eEW {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  animation: slides_shimmer__p8tYF 4.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.slides_nodeIcon__nSdf6 {
  color: rgb(var(--mm-teal));
  background: rgb(var(--card));
  border: 1px solid rgb(var(--mm-teal) / 0.4);
  opacity: calc(1 - var(--mm-dim) * var(--mm-amp) * var(--mm-dimmest));
  animation: slides_breathe__WBC6v var(--bd, 5s) ease-in-out var(--bl, 0s) infinite;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 800px) {
  .slides_nodeIcon__nSdf6 { width: 62px; height: 62px; border-radius: 18px; }
}

/* Each element sets its own duration/offset (--bd/--bl, --sd/--sl) so nothing pulses in unison. */
@keyframes slides_breathe__WBC6v { 0%, 100% { --mm-dim: 0; } 50% { --mm-dim: 1; } }
@keyframes slides_spin__yBwBi { to { transform: rotate(360deg); } }
@keyframes slides_pulse__HzOzO { 0%, 100% { transform: scale(0.9); opacity: 0.85; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes slides_flow__eT9_Y { to { stroke-dashoffset: -20; } }
@keyframes slides_shimmer__p8tYF {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-4px); filter: brightness(1.35); }
}

/* ---------- Slide 4 ---------- */
.slides_simLayout__ex6ed {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 1500px;
  /* Exactly the room the slide has (1.25rem top + 6rem bottom padding, and the header, taken out), so all
     of the copy is always on screen and the video gets what's left. */
  height: calc(100dvh - var(--slide-header-h) - 7.25rem);
}
.slides_simVideo__Wsrsv {
  width: 100%;
  /* Stacked layout: the video fills whatever height the copy leaves (flex), fitted inside with object-fit. */
  flex: 1 1 0;
  min-height: 120px;
  -o-object-fit: contain;
     object-fit: contain;
  /* Deliberately no background/shadow/radius: the WebM carries its own alpha, so the
     slide shade must show straight through it. */
  background: transparent;
}
.slides_simText__VC6Z4 {
  margin: 0;
  max-width: 960px;
  flex: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  opacity: 0;
  transition: opacity 0.9s ease-out;
}
.slides_simText__VC6Z4 h2, .slides_simText__VC6Z4 p { margin: 0; }
.slides_simText__VC6Z4 p { max-width: 820px; align-self: center; }
/* Very large screens only: text on the left, laptop on the right, filling most of the slide's height instead
   of sharing it with the copy. Below this the copy goes under the laptop so the laptop can be bigger. */
@media (min-width: 1500px) {
  .slides_simLayout__ex6ed {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 3rem;
    max-width: 1700px;
    padding: 0 2rem;
  }
  .slides_simText__VC6Z4 { order: -1; text-align: left; max-width: none; }
  .slides_simText__VC6Z4 p { align-self: flex-start; }
  .slides_learnMoreWrap__a4N_K { align-self: flex-start; margin-left: -0.6rem; } /* cancels the button's padding so the text lines up with the paragraph above */
  .slides_simLayout__ex6ed { height: auto; }
  .slides_simVideo__Wsrsv { flex: none; max-height: calc(100dvh - var(--slide-header-h) - 8.25rem); justify-self: center; }
}
.slides_simTextOn__J1KKI { opacity: 1; }

@keyframes slides_fadeUp__rRqw2 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Continuous journey (dark slide) ---------- */
/* The slideshow is ALWAYS shown whole: it scales to fit the room and is never cut off at any width. The stage is
   the size of the widest screenshot; frames are centred in it at their true relative scale. */
.slides_journeyLayout__HACj8 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  width: 100%;
  max-width: 1500px;
}
/* Phones and anything under 1100px: stacked. A column exactly as tall as the room, copy at its natural height, and
   the slideshow taking whatever is left (its frame fitted inside that, keeping its proportions). */
@media (max-width: 1099px) {
  .slides_journeyLayout__HACj8 { display: flex; flex-direction: column; gap: 0.75rem; height: calc(100dvh - var(--slide-header-h) - 7.25rem); }
  .slides_journeyStage___zpz_ { flex: 1 1 0; min-height: 0; width: 100%; aspect-ratio: auto; }
  .slides_journeyStage___zpz_ .slides_journeyFrame__xZfnv { inset: auto; top: 0; left: 50%; translate: -50% 0; height: 100%; aspect-ratio: 2206 / 1220; max-width: 100%; }
}
.slides_journeyStage___zpz_ {
  position: relative;
  justify-self: center;
  width: min(100%, calc((100dvh - var(--slide-header-h) - 9rem) * 1.81));
  aspect-ratio: 2206 / 1220;
}
.slides_journeyFrame__xZfnv { position: absolute; inset: 0; }   /* desktop: fills the stage, which sets the size */
.slides_journeyImg__1SMDH {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  height: auto;
  pointer-events: none;
}
.slides_journeyCopy__GhXzt { display: flex; flex-direction: column; gap: 1rem; text-align: center; order: -1; } /* above the pictures when stacked */
.slides_journeyCopy__GhXzt p, .slides_journeyCopy__GhXzt h2 { margin: 0; }
/* 1100-1399px: side by side, copy on the left and the slideshow (whole) on the right. */
@media (min-width: 1100px) {
  .slides_journeyLayout__HACj8 { grid-template-columns: minmax(380px, 4fr) minmax(0, 8fr); gap: 1.5rem; padding: 0 1rem; }
  .slides_journeyCopy__GhXzt { text-align: left; order: -1; }
  .slides_journeyStage___zpz_ { justify-self: end; }
}
/* 1400px and up: slideshow on the left, copy on the right. */
@media (min-width: 1400px) {
  .slides_journeyLayout__HACj8 { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem; }
  .slides_journeyCopy__GhXzt { order: 0; }
  .slides_journeyStage___zpz_ { justify-self: center; }
}

/* ---------- Slides 5 / 6: quizzes + case studies ---------- */
/* Large screens get one 2x2 slide; phones get two stacked ones. Both variants are in the DOM. */
.slides_desktopOnly__DXcCy { display: none; }
.slides_mobileOnly__8DvGp { display: flex; }
@media (min-width: 1024px) {
  .slides_desktopOnly__DXcCy { display: flex; }
  .slides_mobileOnly__8DvGp { display: none; }
}

/* Content fades in (opacity only) when its slide is first scrolled onto. */
.slides_fadeIn__zcrGG { opacity: 0; transition: opacity var(--fdur, 0.5s) ease-out; transition-delay: var(--fd, 0s); }
.slides_visible__A_Heg .slides_fadeIn__zcrGG { opacity: 1; }

.slides_qaCopy__70szF { display: flex; flex-direction: column; gap: 0.9rem; max-width: 520px; }
.slides_qaCopy__70szF p, .slides_qaCopy__70szF h2 { margin: 0; }
.slides_qaCell__vWrmU { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.slides_qaImg___U8VD { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
/* The phone is tall and narrow, so it reads small next to the laptop in an equal-sized cell: scale it up a touch
   and sit it a little lower (it may spill a little past its cell; the transparent margins make that invisible). */
.slides_phoneImg__nVmT9 { transform: translateY(10%) scale(1.28); }
/* Show the screenshot that matches the page theme. */
.slides_imgLight__lXFyt { display: none; }
.hlf-v2.light .slides_imgDark__basbe { display: none; }
.hlf-v2.light .slides_imgLight__lXFyt { display: block; }

/* Desktop: copy / image checkerboard. */
.slides_qaGrid__wvGQi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 4rem;
  align-items: center;
  width: min(100%, 1300px);
  height: calc(100dvh - var(--slide-header-h) - 8rem);
  min-height: 460px;
}
.slides_qaGrid__wvGQi .slides_qaCopy__70szF { justify-self: center; }
/* The image fills its grid cell exactly (absolute, so it can't push the row taller than the cell). */
.slides_qaGrid__wvGQi .slides_qaCell__vWrmU { position: relative; align-self: stretch; }
.slides_qaGrid__wvGQi .slides_qaImg___U8VD { position: absolute; inset: 0; }

/* Mobile: copy above, image below. */
.slides_qaStack__oNSLc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  max-width: 560px;
  /* Exactly the room the slide has (its 3rem top/bottom padding taken out): the picture cell below takes
     whatever the copy leaves, so the two can never overlap, whatever the screen height or copy length. */
  height: calc(100dvh - var(--slide-header-h) - 9rem);
  text-align: center;
}
.slides_qaStack__oNSLc .slides_qaCopy__70szF { align-items: center; }
.slides_qaStack__oNSLc .slides_qaCell__vWrmU { position: relative; width: 100%; flex: 1 1 0; min-height: 140px; }
/* The picture fills that cell and is fitted inside it (object-fit: contain), so it scales down with the room. */
.slides_qaStack__oNSLc .slides_qaImg___U8VD { position: absolute; inset: 0; }
.slides_qaStack__oNSLc .slides_phoneImg__nVmT9 { transform: none; } /* no enlarge-and-drop here: it would spill over the copy */
/* Split layout (phones / anything under 1024px): the device images sit shifted right so they bleed a little off the
   right edge. 15% of the image's own width; change this one number to taste. */
.slides_qaStack__oNSLc .slides_qaImg___U8VD { translate: 15% 0; }

/* ---------- Slide 7: Tech-tionary ---------- */
/* Shade alternates with the slide before it: dark after the one 2x2 desktop slide, light after the
   second phone slide. The slide clips (overflow: hidden from .slide), which is what lets the picture
   run off the bottom edge. */
.slides_techSlide__WX3jP { background: var(--bg-dark); padding: 0; align-items: stretch; }
@media (max-width: 1023px) {
  .slides_techSlide__WX3jP { background: var(--bg-light); }
}
.slides_techLayout__M2SBZ {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
}
/* Medium and big screens: text on the left, picture on the right. */
@media (min-width: 900px) {
  /* The copy column never gets narrower than 380px, so the heading doesn't break into five short lines. */
  .slides_techLayout__M2SBZ { grid-template-columns: minmax(380px, 4fr) minmax(0, 8fr); grid-template-rows: 1fr; gap: 1rem; padding: 0 2rem; }
}

/* The stage is a full-height box the picture is pinned to the bottom of. */
.slides_techStage__GOT8D { position: relative; min-height: 52dvh; }
.slides_techImg__LeonV {
  position: absolute;
  left: -3%;
  bottom: -17%;          /* the lower part runs off the slide; any higher and a picture this big would cover the copy */
  /* PHONES: bigger and more zoomed in. Much wider than the screen (232%, never under 760px) and pushed to the
     left edge (just past it), so the dictionary text is clearly readable and the right side is cropped. */
  width: clamp(760px, 232%, 1200px);
  /* ...but never taller than the space under the copy allows (plus the part that bleeds off the bottom), so it
     can't cover the text on short or narrow screens. 100cqh = the stage's height; 1.96 = 1.17 / the picture's
     0.598 height-to-width ratio. Browsers without container units simply keep the width above. */
  max-width: none;
  height: auto;          /* whole picture, never cropped by a frame */
  translate: 0 38%;      /* starts further down, rises into place */
  opacity: 0;
  transition: translate 1.3s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 1.3s ease-out;
}
@supports (height: 1cqh) {
  @media (max-width: 899px) {
    .slides_techLayout__M2SBZ { min-height: calc(100dvh - var(--slide-header-h)); }
    .slides_techStage__GOT8D { min-height: 0; container-type: size; }
    .slides_techImg__LeonV { width: min(clamp(760px, 232%, 1200px), calc(100cqh * 1.96)); }
  }
}
@media (min-width: 900px) {
  .slides_techImg__LeonV {
    left: auto;
    right: -8%;          /* pushed right, bleeding off that edge, which also keeps it clear of the copy on the left */
    bottom: -10%;
    /* Bigger than its column (115%), with a floor (760px) so a medium screen still gets a big picture, and a
       ceiling tied to the slide height so it never grows taller than the slide. */
    width: min(max(115%, 760px), calc((100dvh - var(--slide-header-h)) * 1.6));
  }
}
/* Medium screens: the picture is wider than its column, so push it further right (off the edge) to keep clear of the copy. */
@media (min-width: 900px) and (max-width: 1549px) {
  .slides_techImg__LeonV { right: -14%; }
}
/* Under 1400px: the picture starts where its column starts (clear of the copy) and runs off the right edge of the
   screen, so the left of the screenshot, where the readable text is, stays visible and the copy keeps a comfortable
   column instead of being squashed. Same size as above, just a little higher. The narrower the screen, the more of
   the right side is cut off. (Overrides the pushed-right rule above for this range.) */
@media (min-width: 900px) and (max-width: 1399px) {
  .slides_techLayout__M2SBZ { grid-template-columns: minmax(400px, 4fr) minmax(0, 8fr); }
  .slides_techImg__LeonV {
    left: 0;
    right: auto;
    bottom: -6%;
  }
}
/* Under 1300px it stops scaling down: it keeps the size it has at 1300px (about 910px wide) and the right side is
   cut off instead, so the screenshot's text stays readable. (The journey slideshow never does this.) */
@media (min-width: 900px) and (max-width: 1299px) {
  .slides_techImg__LeonV { width: min(max(115%, 910px), calc((100dvh - var(--slide-header-h)) * 1.6)); }
}
.slides_visible__A_Heg .slides_techImg__LeonV { translate: 0 0; opacity: 0.85; }

/* (z-index: keeps the copy above the fade at the slide's edge.) */
.slides_techCopy__OjhoA {
  position: relative;
  z-index: 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem 0;   /* phones: copy starts high so the big picture below has room */
  text-align: center;
  order: -1;             /* copy first: above the picture on phones, left of it on larger screens */
}
@media (min-width: 900px) {
  .slides_techCopy__OjhoA { text-align: left; padding: 0 1rem 0 1rem; }
}
.slides_techCopy__OjhoA h2, .slides_techCopy__OjhoA p { margin: 0; }

/* ---------- Final slide: join the open beta ---------- */
.slides_finalSlide__lYizW { padding: 3rem 1.25rem; }
.slides_finalStage__pn_bo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  max-width: 900px;
}
.slides_finalStage__pn_bo h2, .slides_finalStage__pn_bo p { margin: 0; }
/* The background picture uses the hero's own class (.heroBgShift, earlier in this file), so it is positioned
   exactly as on the hero. The copy sits on the left on large screens so the tile stays visible on the right. */
@media (min-width: 1000px) {
  .slides_finalSlide__lYizW { justify-content: flex-start; padding-left: max(2rem, 7vw); }
  .slides_finalStage__pn_bo { align-items: flex-start; text-align: left; max-width: 600px; }
}

/* ---------- Reduced motion: plain scroll, static content ---------- */
@media (prefers-reduced-motion: reduce) {
  .slides_fadeUp__rRqw2, .slides_fadeUpLate__tmOaH, .slides_fadeUpLater__Ax2j0 { animation: none; }
  .slides_frame__UQ7Dt::before,
  .slides_frame__UQ7Dt img,
  .slides_painText__HUhQU,
  .slides_diagnosisText__eGaEK,
  .slides_agendaDiagram__pYtnD [data-agenda-item],
  .slides_swirl__dxVRg, .slides_swirlGlow__BF_a6, .slides_node__To3_O,
  .slides_simText__VC6Z4 { transition: none; }
  .slides_frame__UQ7Dt::before { opacity: 1; }
  .slides_frame__UQ7Dt img { opacity: 1; transform: none; }
  .slides_painText__HUhQU, .slides_diagnosisText__eGaEK { opacity: 1; transform: none; }
  .slides_agendaDiagram__pYtnD [data-agenda-item] { opacity: 1; }
  .slides_swirlGlow__BF_a6, .slides_swirlBody__5JXtH, .slides_swirlBody2__SXXXc, .slides_swirlCore__r7PL4, .slides_spokeFlow__uPJ3m, .slides_spokeLine__vwrCo, .slides_nodeIcon__nSdf6, .slides_nodeInner__36eEW, .slides_nextCueArrow__VWU0d { animation: none; }
  .slides_nextCue__P7K8X { opacity: 1; pointer-events: auto; transition: none; }
  .slides_learnMore__ddJ2p { animation: none; }
  .slides_learnMoreWrap__a4N_K { opacity: 1; pointer-events: auto; transition: none; }
  .slides_modalBackdrop__h_tEn { transition: none; }
  .slides_simText__VC6Z4 { opacity: 1; }
  .slides_fadeIn__zcrGG { transition: none; opacity: 1; }
  .slides_techImg__LeonV { transition: none; translate: 0 0; opacity: 0.85; }
}

/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_d8ebd1 {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_d8ebd1 {--font-inter: 'Inter', 'Inter Fallback'
}