/* ==========================================================================
   Jeddle landing system — shared across all new marketing + storefront pages.
   Plain CSS by design: the theme has no build step, so these bytes ship as-is.
   Token values mirror the approved landing-page design system.
   ========================================================================== */

/* Self-host the two design families so typography does not depend on a
   third-party request (or change underneath a cached page). Sen is the
   upstream 400–800 variable font; Bebas Neue is used only by the product-tour
   fallback plate. Both are distributed under the OFL in /fonts/<family>/. */
@font-face {
  font-family: "Sen";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/sen/Sen-LatinExt.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-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Sen";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/sen/Sen-Latin.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: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue/BebasNeue-LatinExt.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-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue/BebasNeue-Latin.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;
}

.jl,
body.jl-page,
.jl-site-header,
.jl-chrome-modals {
  /* brand */
  --jl-purple: #4801d4;          /* THE primary: solid CTAs, links, eyebrows */
  --jl-purple-alt: #4b0fe0;      /* CTA band bg, FAQ eyebrow, headline highlight */
  --jl-purple-300: #7200e0;      /* set-text eyebrow, play button, subject chips */
  --jl-purple-light: #7f4cde;    /* footer subscribe — white text passes AA */
  --jl-lilac: #f1e6fc;           /* section bands, active rows, chips */
  --jl-lilac-soft: #fbf7fe;

  /* ink */
  --jl-ink: #12063d;             /* every H2/H3 + FAQ question */
  --jl-ink-deep: #2e2177;        /* footer, video band, photo panels */
  --jl-ink-sub: #50587f;         /* hero sub-headlines */
  --jl-body: #4b464f;            /* body + nav labels */
  --jl-muted: #6c6472;           /* bylines, placeholders */
  --jl-faint: #6e6676;           /* facet counts */

  /* surface */
  --jl-page: #fbfaff;
  --jl-surface: #ffffff;
  --jl-rule: #dbd8e6;
  --jl-rule-soft: #edeaf6;

  /* accents */
  --jl-star: #e0693e;
  --jl-yellow: #ffdc0f;
  --jl-cyan: #00defe;

  /* type */
  --jl-font: "Sen", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* metrics */
  --jl-gutter: clamp(20px, 6vw, 120px);
  --jl-wide: 1680px;   /* header + catalogue body */
  --jl-mid: 1560px;    /* hero rows */
  --jl-col: 1096px;    /* marketing prose column */
  --jl-pill: 999px;
}

/* -------------------------------------------------------- site header ---- */
body.jl-page #content {
  width: 100%;
  margin: 0;
  padding: 0;
}
.jl-site-header,
.jl-site-header * {
  box-sizing: border-box;
}
.jl-site-header {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 90px;
  background: #fff;
  color: var(--jl-body);
  font-family: var(--jl-font);
}
.jl-site-header__inner {
  width: 100%;
  max-width: 1920px;
  height: 90px;
  margin-inline: auto;
  padding: 20px 120px;
  display: flex;
  align-items: center;
  gap: 30px;
}
.jl-site-header__brand {
  width: 213px;
  height: 54px;
  min-height: 44px;
  flex: 0 0 213px;
  display: flex;
  align-items: center;
}
/* The wordmark SVG is 213x54; the artboard's 254x50 box stretched it at and
   above 1800px (1B feedback: blurred/distorted logo on full-screen views). */
.jl-site-header__brand img,
.jl-site-header__brand svg {
  display: block;
  width: 213px;
  height: auto;
  max-width: none;
}
.jl-site-header__nav {
  flex: 1 1 0;
  min-width: 0;
}
.jl-site-header__nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.jl-site-header__nav li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jl-site-header__nav li:nth-child(3) { margin-right: -1px; }
.jl-site-header__nav li:nth-child(4) > a { gap: 0; }
.jl-site-header__nav a {
  display: flex;
  align-items: center;
  gap: 1px;
  color: #4b464f;
  font-family: var(--jl-font);
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}
.jl-site-header__nav img {
  width: 24px;
  height: 24px;
  flex: none;
  transition: transform .16s ease;
}
.jl-site-header__submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  z-index: 20;
  display: grid;
  visibility: hidden;
  width: 310px;
  padding: 10px;
  gap: 4px;
  border: 1px solid var(--jl-rule);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(46, 33, 119, .18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.jl-site-header__submenu::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 18px;
}
.jl-site-header__nav-item:not(.is-escape-closed):is(:hover, :focus-within, .is-open) > .jl-site-header__submenu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.jl-site-header__nav-item:not(.is-escape-closed):is(:hover, :focus-within, .is-open) > a > img {
  transform: rotate(180deg);
}
.jl-site-header__nav .jl-site-header__submenu > a {
  display: flex;
  min-height: 66px;
  padding: 10px 12px;
  border-radius: 10px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  color: var(--jl-ink);
  font-size: 15px;
  line-height: 1.35;
  white-space: normal;
}
.jl-site-header__nav .jl-site-header__submenu > a:hover,
.jl-site-header__nav .jl-site-header__submenu > a:focus-visible {
  background: var(--jl-lilac);
}
.jl-site-header__submenu strong { font-size: 16px; }
.jl-site-header__submenu span { color: var(--jl-muted); font-size: 13px; font-weight: 400; }
.jl-site-header__account {
  position: relative;
}
.jl-site-header__account > summary {
  min-height: 48px;
  padding: 11px 18px;
  border: 1px solid var(--jl-purple);
  border-radius: 32px;
  display: inline-flex;
  align-items: center;
  color: var(--jl-purple);
  font-family: var(--jl-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  list-style: none;
}
.jl-site-header__account > summary::-webkit-details-marker { display: none; }
.jl-site-header__account > div {
  position: absolute;
  top: 56px;
  right: 0;
  z-index: 20;
  display: grid;
  width: 170px;
  padding: 8px;
  border: 1px solid var(--jl-rule);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(46, 33, 119, .18);
}
.jl-site-header__account:not([open]) > div { display: none; }
.jl-site-header__account > div a {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  color: var(--jl-body);
  font-size: 15px;
  text-decoration: none;
}
.jl-site-header__account > div a:hover,
.jl-site-header__account > div a:focus-visible { background: var(--jl-lilac); }
.jl-site-header__tools,
.jl-site-header__selectors,
.jl-site-header__actions {
  display: flex;
  align-items: center;
}
.jl-site-header__tools {
  flex: none;
  gap: 32px;
}
.jl-site-header__selectors {
  gap: 8px;
}
.jl-site-header__actions {
  gap: 16px;
}
.jl-site-header__selector {
  height: 38px;
  padding: 6px 9px 6px 10px;
  border: 1px solid #b7bacd;
  border-radius: 12px;
  background: #fff;
  color: #4b464f;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--jl-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}
.jl-site-header__selector--subject {
  gap: 0;
}
.jl-site-header__selector > span { margin-left: 10px; }
.jl-site-header__selector--subject > span { margin-left: 3px; }
.jl-site-header__location-icon {
  width: 26px;
  height: 25px;
  margin-left: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
}
.jl-site-header__location-icon img {
  width: 26px;
  height: 25px;
  object-fit: contain;
}
.jl-site-header__location-icon [hidden] { display: none !important; }
.jl-site-header__location-code {
  min-width: 26px;
  color: var(--jl-purple);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
  text-align: center;
}
.jl-site-header__selector img {
  width: 24px;
  height: 24px;
  flex: none;
}
.jl-site-header__selector .jl-site-header__location-icon img {
  width: 26px;
  height: 25px;
}
.jl-site-header__selector > img:first-child:not([width="24"]) {
  width: 26px;
}
.jl-site-header__preference-select {
  width: auto;
  min-width: 0;
  max-width: 160px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-overflow: ellipsis;
  cursor: pointer;
}
.jl-site-header__preference-select::-ms-expand { display: none; }
.jl-site-header__selector:focus-within {
  outline: 3px solid var(--jl-purple);
  outline-offset: 3px;
}
.jl-site-header__action {
  height: 48px;
  min-height: 48px;
  padding: 11px 19px;
  border: 1px solid transparent;
  border-radius: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--jl-purple);
  font-family: var(--jl-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}
.jl-site-header__action--outline {
  border-color: var(--jl-purple);
  background: #fff;
  color: var(--jl-purple);
}
.jl-site-header__action--primary {
  padding-right: 20px;
  background: var(--jl-purple);
  color: #fff;
}
.jl-site-header__action--text {
  min-height: 48px;
  padding-inline: 0;
  color: var(--jl-purple);
}
.jl-site-header__action img {
  width: 24px;
  height: 24px;
  flex: none;
}
.jl-site-header__cart {
  position: relative;
  height: 48px;
  margin-left: 16px;
  padding: 8px;
  border-radius: 8px;
  background: var(--jl-lilac);
  color: var(--jl-purple);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--jl-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}
.jl-site-header__cart > img {
  width: 32px;
  height: 32px;
  flex: none;
}
.jl-site-header__cart b {
  position: absolute;
  top: -10px;
  left: 76px;
  width: 20px;
  height: 20px;
  border-radius: 30px;
  background: var(--jl-purple);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--jl-font);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 20px;
}
.jl-site-header__cart b[hidden] { display: none; }
.jl-site-header--generic .jl-site-header__inner,
.jl-site-header--detail .jl-site-header__inner {
  gap: 342px;
}
.jl-site-header--generic .jl-site-header__nav,
.jl-site-header--detail .jl-site-header__nav {
  flex: none;
}
.jl-site-header--jeddai-student .jl-site-header__inner,
.jl-site-header--jeddai-staff .jl-site-header__inner {
  gap: 26px;
}
.jl-site-header--jeddai-student .jl-site-header__nav,
.jl-site-header--jeddai-staff .jl-site-header__nav {
  flex: none;
}
.jl-site-header--jeddai-student .jl-site-header__nav {
  margin-right: auto;
}
.jl-site-header--jeddai-staff .jl-site-header__tools {
  flex: 1 1 auto;
  margin-left: 6px;
  justify-content: space-between;
  gap: 0;
}
.jl-site-header--jeddai-staff .jl-site-header__action--outline {
  padding-left: 20px;
}
.jl-site-header__mobile {
  display: none;
  margin-left: auto;
  position: relative;
}
.jl-site-header__mobile > summary {
  padding: 12px 20px;
  border: 1px solid var(--jl-purple);
  border-radius: 32px;
  color: var(--jl-purple);
  font-family: var(--jl-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  list-style: none;
}
.jl-site-header__mobile > summary::-webkit-details-marker { display: none; }
.jl-site-header__mobile > div {
  position: absolute;
  top: 58px;
  right: 0;
  z-index: 10;
  width: 230px;
  padding: 14px;
  border: 1px solid var(--jl-rule);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(46, 33, 119, .18);
  display: grid;
  gap: 4px;
  max-height: calc(100vh - 110px);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.jl-site-header__mobile:not([open]) > div { display: none; }
.jl-site-header__mobile-preferences { display: grid; gap: 8px; padding-bottom: 8px; }
.jl-site-header__selector--mobile {
  width: 100%;
  height: auto;
  min-height: 44px;
  padding-block: 0;
}
.jl-site-header__selector--mobile .jl-site-header__preference-select {
  width: 0;
  min-width: 0;
  max-width: none;
  min-height: 44px;
  flex: 1 1 auto;
}
.jl-site-header__mobile a {
  min-height: 44px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  color: var(--jl-body);
  font-family: var(--jl-font);
  font-size: 16px;
  text-decoration: none;
}
.jl-site-header__mobile-group > summary {
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--jl-body);
  font-family: var(--jl-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.jl-site-header__mobile-group > summary::-webkit-details-marker { display: none; }
.jl-site-header__mobile-group > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.jl-site-header__mobile-group[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.jl-site-header__mobile-group > div { display: grid; }
.jl-site-header__mobile-group:not([open]) > div { display: none; }
.jl-site-header__mobile-group > div > a {
  min-height: 44px;
  padding-block: 8px;
  padding-left: 24px;
  color: var(--jl-muted);
  font-size: 14px;
}
.jl-site-header a:focus-visible,
.jl-site-header button:focus-visible,
.jl-site-header summary:focus-visible {
  outline: 3px solid var(--jl-purple);
  outline-offset: 3px;
}
@media (max-width: 1180px) {
  .jl-site-header__inner {
    padding-inline: 24px;
    gap: 24px;
  }
  .jl-site-header--generic .jl-site-header__inner,
  .jl-site-header--detail .jl-site-header__inner {
    gap: 24px;
  }
  .jl-site-header__nav,
  .jl-site-header__tools {
    display: none;
  }
  .jl-site-header__mobile {
    display: block;
  }
}

/* The desktop header was originally positioned with the 1920px artboard's
   literal gaps. Keep that exact composition at the design width, then let the
   same controls share the available space on ordinary laptops and desktops. */
@media (min-width: 1181px) and (max-width: 1799px) {
  .jl-site-header__inner {
    padding-inline: clamp(24px, 4vw, 72px);
    gap: clamp(18px, 2vw, 30px);
  }
  .jl-site-header__brand {
    width: 213px;
    flex-basis: 213px;
  }
  .jl-site-header__brand img,
  .jl-site-header__brand svg { width: 100%; height: auto; }
  .jl-site-header__nav,
  .jl-site-header--generic .jl-site-header__nav,
  .jl-site-header--detail .jl-site-header__nav,
  .jl-site-header--jeddai-student .jl-site-header__nav,
  .jl-site-header--jeddai-staff .jl-site-header__nav {
    flex: 1 1 auto;
  }
  .jl-site-header__nav ul {
    gap: clamp(14px, 1.6vw, 26px);
  }
  .jl-site-header--generic .jl-site-header__inner,
  .jl-site-header--detail .jl-site-header__inner,
  .jl-site-header--jeddai-student .jl-site-header__inner,
  .jl-site-header--jeddai-staff .jl-site-header__inner {
    gap: clamp(18px, 2vw, 30px);
  }
  .jl-site-header__tools,
  .jl-site-header--jeddai-staff .jl-site-header__tools {
    flex: none;
    margin-left: 0;
    justify-content: flex-start;
    gap: clamp(16px, 2vw, 28px);
  }
}

/* The staff header carries two preference selectors plus three account
   actions. At laptop widths, keep every control available in the responsive
   menu instead of silently dropping the selectors from the desktop row. */
@media (min-width: 1181px) and (max-width: 1919px) {
  .jl-site-header--jeddai-staff .jl-site-header__nav,
  .jl-site-header--jeddai-staff .jl-site-header__tools { display: none; }
  .jl-site-header--jeddai-staff .jl-site-header__mobile { display: block; }
}

/* Signed-in headers have extra course/account actions. Use the already-rendered
   responsive menu until the full 1920 composition fits, keeping location and
   subject controls available instead of dropping them at laptop widths. */
@media (min-width: 1181px) and (max-width: 1919px) {
  .jl-site-header--logged-in.jl-site-header--jeddai-student .jl-site-header__nav,
  .jl-site-header--logged-in.jl-site-header--jeddai-student .jl-site-header__tools,
  .jl-site-header--logged-in.jl-site-header--jeddai-staff .jl-site-header__nav,
  .jl-site-header--logged-in.jl-site-header--jeddai-staff .jl-site-header__tools { display: none; }
  .jl-site-header--logged-in.jl-site-header--jeddai-student .jl-site-header__mobile,
  .jl-site-header--logged-in.jl-site-header--jeddai-staff .jl-site-header__mobile { display: block; }
}

@media (max-width: 460px) {
  .jl-site-header__inner {
    padding-inline: 20px;
    gap: clamp(12px, 4vw, 18px);
  }
  .jl-site-header__brand {
    width: min(203px, calc(100vw - 144px));
    max-width: 203px;
    height: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .jl-site-header__brand img,
  .jl-site-header__brand svg {
    width: 100%;
    height: auto;
  }
  .jl-site-header__mobile { flex: none; }
  .jl-site-header__mobile > summary {
    min-height: 44px;
    padding: 9px 16px;
  }
  .jl-site-header__mobile > div {
    width: min(280px, calc(100vw - 40px));
  }
}

/* JeddAI persona pages carry the one-step-lighter page ground */
.jl--jeddai { --jl-page: #faf8ff; }

/* --------------------------------------------------------------- base ---- */
.jl {
  background: var(--jl-page);
  color: var(--jl-body);
  font-family: var(--jl-font);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: clip;
}
.jl *, .jl *::before, .jl *::after { box-sizing: border-box; }
/* A class selector like .jl-btn { display: inline-flex } out-specifies the UA's
   [hidden] rule, so anything toggled via the hidden attribute would stay
   visible. Restore the attribute's meaning across the whole system. */
.jl [hidden], .jl-modal [hidden], [hidden].jl-btn, [hidden].jl-bundlebar { display: none !important; }
.jl img { max-width: 100%; height: auto; display: block; }
.jl :focus-visible { outline: 3px solid var(--jl-purple) !important; outline-offset: 3px; border-radius: 4px; }

/* The tokens are CONTENT widths, so the gutter is added on top rather than
   eaten out of them -- otherwise every container sits 2x120px narrower than
   the 1920 artboard it was drawn against. */
.jl-wrap  { width: 100%; max-width: calc(var(--jl-wide) + var(--jl-gutter) * 2); margin-inline: auto; padding-inline: var(--jl-gutter); }
.jl-mid   { width: 100%; max-width: calc(var(--jl-mid)  + var(--jl-gutter) * 2); margin-inline: auto; padding-inline: var(--jl-gutter); }
.jl-col   { width: 100%; max-width: calc(var(--jl-col)  + var(--jl-gutter) * 2); margin-inline: auto; padding-inline: var(--jl-gutter); }
.jl-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.jl-sr:is(button, input[type="submit"]):focus-visible {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100001;
  display: inline-flex;
  width: auto;
  min-width: 44px;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 10px 16px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  clip: auto;
  border: 2px solid var(--jl-purple);
  border-radius: 8px;
  background: #fff;
  color: var(--jl-purple);
  font: 700 14px/1.2 var(--jl-font);
  white-space: normal;
}

/* ---------------------------------------------------------- typography ---- */
.jl h1, .jl h2, .jl h3, .jl h4, .jl h5, .jl h6 {
  margin: 0; color: var(--jl-ink); font-family: var(--jl-font); text-wrap: balance; overflow-wrap: anywhere;
}
.jl p { margin: 0; }

.jl-h1        { font-size: clamp(2rem, 3.2vw, 2.875rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
.jl-h1--hero  { font-size: clamp(2.4rem, 4.6vw, 4.25rem); font-weight: 800; line-height: 1.235; letter-spacing: -0.03em; }
.jl-h2        { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.jl-h2--display { font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 700; line-height: 1.29; letter-spacing: -0.02em; }
.jl-h3        { font-size: clamp(1.35rem, 2vw, 2rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.jl-hi        { color: var(--jl-purple-alt); }
.jl-sub       { font-size: clamp(1rem, 1.2vw, 1.125rem); font-weight: 500; line-height: 1.55; color: var(--jl-ink-sub); }
.jl-eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--jl-purple); margin: 0 0 12px;
}
.jl-eyebrow--alt { color: var(--jl-purple-alt); }

/* --------------------------------------------------------------- rating -- */
.jl-rating { display: flex; align-items: center; gap: 10px; font-size: 0.845rem; }
.jl-rating__stars { color: var(--jl-star); letter-spacing: 2px; }
.jl-rating__text  { flex: 1 1 180px; min-width: 0; color: var(--jl-body); }
.jl-rating { flex-wrap: wrap; }

/* -------------------------------------------------------------- buttons -- */
.jl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  max-width: 100%; text-align: center; white-space: normal; overflow-wrap: anywhere;
  font-family: var(--jl-font); font-size: 1.125rem; font-weight: 600; line-height: 1.33;
  padding: 16px 27px; border-radius: var(--jl-pill); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.jl-btn svg { flex: none; }
.jl-btn--primary,
.jl-btn--primary:focus { background: var(--jl-purple); color: #fff; }
.jl-btn--primary:hover, .jl-btn--primary:focus-visible { background: #3a01ab; color: #fff; }
.jl-btn--alt { background: var(--jl-purple-alt); color: #fff; }
.jl-btn--alt:hover, .jl-btn--alt:focus-visible { background: #3d0bb8; color: #fff; }
.jl-btn--ghost { background: transparent; color: var(--jl-purple); border-color: var(--jl-purple); }
.jl-btn--ghost:hover, .jl-btn--ghost:focus-visible { background: var(--jl-lilac); color: var(--jl-purple); }
.jl-btn--white { background: #fff; color: var(--jl-purple); }
.jl-btn--white:hover, .jl-btn--white:focus-visible { background: var(--jl-lilac); }
.jl-btn--sm { min-height: 44px; font-size: 0.9375rem; font-weight: 700; padding: 12px 22px; }
.jl-btn--block { width: 100%; }

.jl-textlink {
  display: inline-flex; align-items: center; gap: 3px; padding-bottom: 4px;
  min-height: 44px;
  font-size: 1.125rem; font-weight: 600; color: var(--jl-purple-alt);
  border-bottom: 1px solid var(--jl-purple-alt); text-decoration: none; width: fit-content;
}
.jl-textlink:hover { color: var(--jl-purple); border-color: var(--jl-purple); }

/* ---------------------------------------------------------------- hero --- */
.jl-hero { position: relative; padding: clamp(48px, 7vw, 110px) 0 clamp(40px, 5vw, 64px); }
/* Ribbon strokes behind the hero, clipped to the design's 1920x970 stage.
   The stage pokes below the hero section on purpose -- in the frame the
   ribbons run behind the crest marquee that follows. */
.jl-hero__deco {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1920px; height: 970px; overflow: clip; pointer-events: none;
}
.jl-hero__deco svg { position: absolute; }
.jl-ribbon--left  { left: -748px; top: -270px; rotate: 46.59deg; }
.jl-ribbon--upper { left: calc(50% + 101px); top: -282px; rotate: 11.82deg; }
.jl-ribbon--lower { left: calc(33.33% + 52px); top: 623px; rotate: 7.08deg; }
@media (prefers-reduced-motion: no-preference) {
  .jl-ribbon path { stroke-dashoffset: 0; }
  .jl-ribbon--left path {
    animation: jl-ribbon-left-draw 3.322221s linear 1 forwards;
  }
  .jl-ribbon--upper path {
    animation: jl-ribbon-upper-draw 3.322221s linear 1 forwards;
  }
  .jl-ribbon--lower path {
    animation: jl-ribbon-lower-draw 3.322221s linear 1 forwards;
  }
}
@keyframes jl-ribbon-left-draw {
  0% { stroke-dasharray: 0 1; visibility: hidden; }
  1.352% {
    animation-timing-function: cubic-bezier(.5, 0, .5, 1);
    stroke-dasharray: 0 1;
    visibility: hidden;
  }
  67.75%, 100% { stroke-dasharray: 1 1; visibility: visible; }
}
@keyframes jl-ribbon-upper-draw {
  0% { stroke-dasharray: 0 1; visibility: hidden; }
  32.25% {
    animation-timing-function: cubic-bezier(.5, 0, .5, 1);
    stroke-dasharray: 0 1;
    visibility: hidden;
  }
  100% { stroke-dasharray: 1 1; visibility: visible; }
}
@keyframes jl-ribbon-lower-draw {
  0% { stroke-dasharray: 0 1; visibility: hidden; }
  15.767% {
    animation-timing-function: cubic-bezier(.5, 0, .5, 1);
    stroke-dasharray: 0 1;
    visibility: hidden;
  }
  83.517%, 100% { stroke-dasharray: 1 1; visibility: visible; }
}
.jl-hero .jl-mid { position: relative; }
/* Anchored deco stage: zero-height 1920px canvas between sections. */
.jl-deco-anchor { position: relative; height: 0; }
.jl-deco {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1920px; height: 0; overflow: visible; pointer-events: none;
}
.jl-deco svg, .jl-ctaband__deco svg { position: absolute; }
.jl-ctaband__deco { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
/* The design's decorative draw-on loop: hidden until 40%, drawn by 80%. */
@media (prefers-reduced-motion: no-preference) {
  .jl-deco svg path[pathLength], .jl-ctaband__deco svg path[pathLength] {
    animation: jl-deco-draw 2s linear infinite;
  }
}
@keyframes jl-deco-draw {
  0%, 40% { stroke-dasharray: 0 1; }
  80%, 100% { stroke-dasharray: 1 1; }
}
/* Decorative layers never cause sideways scroll. */
.jl { overflow-x: clip; }
/* Every section's own content stacks above any decorative positioned layer. */
.jl-section > .jl-wrap, .jl-section > .jl-mid, .jl-marquee > .jl-wrap { position: relative; }
.jl-hero__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(32px, 5vw, 72px); flex-wrap: wrap;
}
.jl-hero__col { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.jl-hero__media { flex: 1 1 480px; min-width: 0; }
.jl-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}
.jl-hero__badges > span {
  min-height: 33px;
  padding: 7px 18px;
  border: 1px solid #392f4e;
  border-radius: 27px;
  background: #fff;
  color: #392f4e;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
}
.jl-hero__badges svg { width: 16px; height: 16px; color: #0f6e56; }
.jl-hero__usps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jl-hero__usps li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: -.68px;
  white-space: nowrap;
}
.jl-hero__usps img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.jl-hero__savings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4e247f;
  font-size: 16px;
  font-weight: 700;
}
.jl-hero__savings img { width: 30px; height: 30px; flex: none; }

/* Persona/product hero variants share semantics but not geometry. */
.jl-hero--teacher-jeddai,
.jl-hero--student-jeddai,
.jl-hero--school-jeddai { padding: 109px 0 80px; }
.jl-hero--teacher-study-guides,
.jl-hero--student-study-guides,
.jl-hero--school-study-guides {
  min-height: 604px;
  padding: 74px 0 44px;
  background:
    radial-gradient(ellipse at 100% 0, rgba(253,250,223,.95), rgba(251,250,255,0) 48%),
    radial-gradient(ellipse at 0 0, rgba(243,232,254,.95), rgba(251,250,255,0) 45%);
}
.jl-hero--teacher-study-guides .jl-hero__col,
.jl-hero--student-study-guides .jl-hero__col,
.jl-hero--school-study-guides .jl-hero__col { gap: 34px; }
.jl-hero--teacher-study-guides .jl-h1,
.jl-hero--student-study-guides .jl-h1,
.jl-hero--school-study-guides .jl-h1 {
  color: #000;
  font-size: clamp(2.25rem, 3vw, 44px);
  line-height: 1.14;
  letter-spacing: -.44px;
}
.jl-hero--teacher-study-guides .jl-sub,
.jl-hero--student-study-guides .jl-sub,
.jl-hero--school-study-guides .jl-sub {
  color: #535b82;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

/* The student frame starts its achiever band at page y=811. Its hero media
   finishes at y=655, leaving the authored 156px breathing room below it. */
.jl-hero--student-jeddai .jl-h1 {
  font-size: clamp(2.25rem, 3vw, 44px);
  letter-spacing: -.44px;
}

@media (min-width: 1200px) {
  .jl-hero--student-jeddai { padding-bottom: 156px; }
}

@media (min-width: 1800px) {
  .jl-hero--teacher-jeddai .jl-hero__row,
  .jl-hero--school-jeddai .jl-hero__row { gap: 113px; flex-wrap: nowrap; }
  .jl-hero--teacher-jeddai .jl-hero__col,
  .jl-hero--school-jeddai .jl-hero__col { flex: 0 0 636px; }
  .jl-hero--student-jeddai .jl-hero__row { gap: 33px; flex-wrap: nowrap; }
  .jl-hero--student-jeddai .jl-hero__col { flex: 0 0 716px; }
  .jl-hero--teacher-jeddai .jl-hero__media,
  .jl-hero--student-jeddai .jl-hero__media,
  .jl-hero--school-jeddai .jl-hero__media { flex: 0 0 811px; }
  .jl-hero--teacher-jeddai .jl-video,
  .jl-hero--student-jeddai .jl-video,
  .jl-hero--school-jeddai .jl-video { width: 811px; height: 455.817px; aspect-ratio: auto; }

  .jl-hero--teacher-study-guides .jl-hero__row,
  .jl-hero--student-study-guides .jl-hero__row,
  .jl-hero--school-study-guides .jl-hero__row { gap: 55px; flex-wrap: nowrap; }
  .jl-hero--teacher-study-guides .jl-hero__col,
  .jl-hero--student-study-guides .jl-hero__col,
  .jl-hero--school-study-guides .jl-hero__col { flex: 0 0 641px; }
  .jl-hero--teacher-study-guides .jl-hero__media,
  .jl-hero--student-study-guides .jl-hero__media,
  .jl-hero--school-study-guides .jl-hero__media { flex: 0 0 864px; }
  .jl-hero--teacher-study-guides .jl-video,
  .jl-hero--student-study-guides .jl-video,
  .jl-hero--school-study-guides .jl-video { width: 864px; height: 486px; aspect-ratio: auto; }
}

@media (min-width: 1200px) and (max-width: 1799px) {
  .jl-hero:not(.jl-hero--centre) .jl-hero__row { flex-wrap: nowrap; gap: clamp(24px, 3vw, 48px); }
  .jl-hero:not(.jl-hero--centre) .jl-hero__col { flex: 1 1 44%; }
  .jl-hero:not(.jl-hero--centre) .jl-hero__media { flex: 1 1 56%; }
}

@media (max-width: 1199px) {
  .jl-hero:not(.jl-hero--centre) { padding: 64px 0; }
  .jl-hero:not(.jl-hero--centre) .jl-hero__row { flex-direction: column; align-items: stretch; }
  .jl-hero:not(.jl-hero--centre) .jl-hero__col { width: 100%; max-width: 760px; margin-inline: auto; }
  .jl-hero:not(.jl-hero--centre) .jl-hero__media { width: 100%; max-width: 864px; margin-inline: auto; }
}

@media (max-width: 640px) {
  .jl-hero:not(.jl-hero--centre) { padding: 44px 0 52px; }
  .jl-hero__badges { gap: 8px; }
  .jl-hero__badges > span { width: 100%; justify-content: flex-start; font-size: 13px; }
  .jl-hero__usps { display: grid; width: 100%; grid-template-columns: 1fr; gap: 12px; }
  .jl-hero__usps li { white-space: normal; }
  .jl-hero:not(.jl-hero--centre) .jl-row__actions { width: 100%; }
  .jl-hero:not(.jl-hero--centre) .jl-row__actions .jl-btn { width: 100%; }
  .jl-hero--teacher-study-guides .jl-sub,
  .jl-hero--student-study-guides .jl-sub,
  .jl-hero--school-study-guides .jl-sub { font-size: 17px; }
}

/* centred variant — the generic landing page */
.jl-hero--centre { text-align: center; }
.jl-hero--centre .jl-hero__col { align-items: center; margin-inline: auto; gap: 30px; }
.jl-hero--centre .jl-h1 { color: #000; max-width: 834px; }
.jl-hero--centre .jl-h1 .jl-hi { color: var(--jl-purple); }
.jl-hero--centre .jl-sub { max-width: 647px; font-weight: 700; font-size: clamp(1.125rem, 1.25vw, 1.5rem); line-height: 1.16; color: #535b82; }

/* email capture pill */
.jl-capture {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 560px;
  background: #fff; border: 1px solid rgba(0,0,0,.27); border-radius: var(--jl-pill);
  padding: 8px 8px 8px 27px;
}
.jl-capture input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; border: 0; background: none; outline: none;
  font-family: var(--jl-font); font-size: 1.125rem; font-weight: 500; color: var(--jl-ink);
}
.jl-capture input::placeholder { color: #777; }
.jl-capture .jl-btn { flex: none; }
@media (max-width: 560px) {
  .jl-capture { flex-direction: column; align-items: stretch; border-radius: 24px; padding: 14px; }
  .jl-capture input { padding: 6px 10px; }
}

/* promo video plate */
.jl-video {
  position: relative; width: 100%; aspect-ratio: 811 / 456; border-radius: 24px;
  overflow: hidden; background: #d9d9d9; border: 0; padding: 0; cursor: pointer; display: block;
}
.jl-video img { width: 100%; height: 100%; object-fit: cover; }
.jl-video__play {
  position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%;
  background: var(--jl-purple-300); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(46,33,119,.35); pointer-events: none;
}
.jl-video__play svg { margin-left: 4px; }
.jl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.jl-video--wistia {
  cursor: default; background: #171123;
  /* Fixed Figma heights must not letterbox videos when their columns shrink. */
  height: auto !important; aspect-ratio: 16 / 9 !important;
}
.jl-video--wistia > img,
.jl-video--wistia wistia-player {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
}
.jl-video--wistia > img { object-fit: contain; }
.jl-video__sound,
.jl-video__fallback {
  position: absolute; z-index: 2; top: 12px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.65);
  border-radius: var(--jl-pill); background: rgba(23,17,35,.92); color: #fff;
  font: 700 14px/1.3 var(--jl-font); text-transform: none; letter-spacing: normal;
  cursor: pointer; text-decoration: none;
}
.jl-video__sound svg { flex: none; }
.jl-video__sound:disabled { cursor: wait; }
.jl-video__sound:hover,
.jl-video__fallback:hover { background: var(--jl-purple); color: #fff; }
.jl-video__sound:focus-visible,
.jl-video__fallback:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.jl-video__sound[hidden], .jl-video__fallback[hidden] { display: none; }
@media (max-width: 480px) {
  .jl-video__sound { top: 8px; right: 8px; padding: 8px 12px; font-size: 12px; }
}

/* ------------------------------------------------------- persona picker --- */
.jl-personas { display: flex; flex-direction: column; gap: 36px; align-items: center; width: 100%; }
.jl-personas__label { font-size: 1.5rem; font-weight: 700; color: #000; }
.jl-personas__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 40px; width: 100%; list-style: none; margin: 0; padding: 0;
}
/* The card is the design's fixed 225x254 stage; label and arrow sit at its
   drawn offsets, so every card lines up regardless of illustration crop. */
.jl-persona {
  position: relative; display: block; width: 225px; height: 254px;
  background: #fff; border: 2.5px solid #eaeaea; border-radius: 21px;
  font-family: var(--jl-font); text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.jl-persona:hover, .jl-persona:focus-visible {
  transform: translateY(-3px); border-color: var(--jl-purple);
  box-shadow: 0 16px 34px -18px rgba(46,33,119,.45);
}
.jl-persona > img { position: absolute; top: 0; left: 0; width: 219px; height: 169px; border-radius: 18px 18px 0 0; }
.jl-persona__arrow img { width: 16px; height: 11px; }
.jl-persona__label {
  position: absolute; top: 175.5px; left: 50%; translate: -50% 0;
  font-size: 1.25rem; font-weight: 700; line-height: 1.35; color: #000; white-space: nowrap;
}
.jl-persona__arrow { position: absolute; top: 213px; left: 50%; translate: -50% 0; line-height: 0; }

/* --------------------------------------------------------- logo marquee --- */
.jl-marquee { padding: clamp(28px, 4vw, 48px) 0; text-align: center; }
.jl-marquee__label { font-size: 1.25rem; font-weight: 600; color: #000; margin-bottom: 50px; }
.jl-marquee__viewport { position: relative; overflow: hidden; padding: 10px 0; max-width: 1396px; margin-inline: auto; }
.jl-marquee__viewport::before, .jl-marquee__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 10%; z-index: 2; pointer-events: none;
}
.jl-marquee__viewport::before { left: 0;  background: linear-gradient(90deg, var(--jl-page), transparent); }
.jl-marquee__viewport::after  { right: 0; background: linear-gradient(270deg, var(--jl-page), transparent); }
/* Figma motion: one exact 347px translation every 7.965079 seconds. */
.jl-marquee__track { display: flex; align-items: center; gap: 26px; width: max-content; animation: jl-marquee 7.965079s linear infinite; }
.jl-marquee__viewport:hover .jl-marquee__track { animation-play-state: paused; }
.jl-marquee.is-paused .jl-marquee__track { animation-play-state: paused !important; }
.jl-marquee__toggle {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(72, 1, 212, .24);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--jl-purple);
  box-shadow: 0 3px 12px rgba(46, 33, 119, .16);
  transform: translateY(-50%);
  cursor: pointer;
}
.jl-marquee__toggle::before {
  content: "";
  width: 12px;
  height: 14px;
  background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px);
}
.jl-marquee__toggle[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  background: transparent;
}
.jl-marquee__toggle:focus-visible { outline: 3px solid var(--jl-purple); outline-offset: 3px; }
/* Fixed slots; each crest renders at its drawn size, never stretched to fill. */
.jl-marquee__slot { flex: none; width: 167.857px; height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.jl-marquee__slot img { flex: none; max-width: none; }
.jl-marquee--captioned .jl-marquee__slot {
  height: 134px;
  flex-direction: column;
  gap: 16px;
  overflow: visible;
}
.jl-marquee__caption {
  max-width: 167.857px;
  color: #4e4963;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
  white-space: normal;
}

/* Persona artboards place the trust/social-proof bands at measured page
   coordinates rather than using the generic 44px section padding. */
@media (min-width: 1200px) {
  :is([data-jl-persona="teacher"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-marquee {
    padding: 0 0 79px;
  }
  :is([data-jl-persona="teacher"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-marquee__label {
    margin-bottom: 26px;
    line-height: 24px;
  }

  :is([data-jl-persona="teacher"], [data-jl-persona="school"])[data-jl-product="study-guides"] .jl-marquee--captioned {
    padding-top: 33px;
    padding-bottom: 142px;
  }
  :is([data-jl-persona="teacher"], [data-jl-persona="school"])[data-jl-product="study-guides"] .jl-marquee--captioned .jl-marquee__label {
    margin-bottom: 39px;
    color: #12063d;
    font-size: 24px;
    font-weight: 700;
    line-height: 41.4px;
    letter-spacing: -.36px;
  }
}
@keyframes jl-marquee { from { transform: translateX(0); } to { transform: translateX(-347px); } }
@media (prefers-reduced-motion: reduce) {
  .jl-marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .jl-marquee__toggle { display: none !important; }
}

/* ----------------------------------------------------------- section ---- */
.jl-section { padding: clamp(48px, 6vw, 92px) 0; }
.jl-section--band { background: var(--jl-lilac); }
.jl-section--soft { background: var(--jl-lilac-soft); }
.jl-section__head { text-align: center; max-width: 760px; margin: 0 auto clamp(28px, 3.5vw, 48px); }
.jl-section__head .jl-sub { margin-top: 12px; }

/* ------------------------------------------------------- feature tabs ---- */
.jl-tabs__layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
@media (max-width: 900px) { .jl-tabs__layout { grid-template-columns: 1fr; } }
.jl-tabs__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jl-tabs__list > li::before { content: none !important; display: none !important; }
.jl-tab {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 14px; padding: 16px 18px;
  font-family: var(--jl-font); color: var(--jl-ink); transition: background-color .18s ease;
}
.jl-tab:hover { background: var(--jl-lilac); }
.jl-tab[aria-selected="true"] { background: var(--jl-lilac); box-shadow: inset 3px 0 0 var(--jl-purple); }
.jl-tab--static { cursor: default; }
.jl-tab--static:hover { background: transparent; }
.jl-tab--static-featured,
.jl-tab--static-featured:hover { background: var(--jl-lilac); box-shadow: inset 3px 0 0 var(--jl-purple); }
.jl-tab__title { font-size: 1.0625rem; font-weight: 700; }
.jl-tab__body { font-size: 0.9375rem; font-weight: 400; color: var(--jl-muted); margin-top: 6px; display: none; }
.jl-tab[aria-selected="true"] .jl-tab__body,
.jl-tab--static-featured .jl-tab__body { display: block; }
.jl-tabs__panel { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px -34px rgba(46,33,119,.55); }
.jl-tabs__panel[hidden] { display: none; }
.jl-tabs__panel img { width: 100%; }
.jl-tabs__cta { display: flex; justify-content: center; margin-top: 34px; }

/* ------------------------------------------------------- journey rows ---- */
.jl-journey { position: relative; overflow: clip; background: var(--jl-lilac); border-radius: 40px; padding: clamp(32px, 4vw, 72px) clamp(20px, 3vw, 56px); }
.jl-journey__deco { position: absolute; inset: 0; pointer-events: none; }
.jl-journey__deco svg { position: absolute; }
.jl-journey > *:not(.jl-journey__deco) { position: relative; }
.jl-journey__rows { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 84px); }
.jl-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; }
.jl-pdp-page .jl-row { gap: clamp(32px, 8.4vw, 162px); }
.jl-row--flip .jl-row__text { order: 2; }
@media (max-width: 860px) { .jl-row { grid-template-columns: 1fr; } .jl-row--flip .jl-row__text { order: 0; } }
.jl-row__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.jl-row__media img { border-radius: 20px; }
.jl-steps { counter-reset: jl-step; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; width: 100%; }
.jl-steps li {
  counter-increment: jl-step; position: relative; padding: 12px 0 12px 34px;
  border-bottom: 1px solid rgba(46,33,119,.14); font-size: 0.9375rem; color: var(--jl-body);
}
/* common-styles.css styles every `body ol li:before` as the WP editor's RTL,
   right-aligned, negatively-indented list marker. `direction: rtl` reorders our
   trailing full stop - a bidi-neutral character - to the left of the digit, so
   `1.` painted as `.1`; its `margin-left: -1em` also hung the marker outside the
   section's text column. Our class already outranks its four type selectors, so
   it is enough to name the properties it sets and we never redeclared. Same
   neutralisation the quote dots needed at .jl-pullquote__dots > li::before. */
.jl-steps li::before {
  content: counter(jl-step) "."; position: absolute; left: 0; top: 12px;
  direction: ltr; text-align: left; width: auto; margin-left: 0; margin-right: 0;
  font-weight: 700; color: var(--jl-purple);
}
.jl-checks { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; width: 100%; }
.jl-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9375rem; color: var(--jl-body); }
.jl-checks svg { flex: none; color: var(--jl-purple); margin-top: 3px; }
.jl-checks__status {
  display: inline-flex;
  margin-left: 8px;
  padding: 4px 12px;
  border-radius: 100px;
  background: #f1e6fc;
  color: #4801d4;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}
.jl-row__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.jl-badge-pill {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--jl-rule);
  border-radius: var(--jl-pill); padding: 8px 16px; font-size: 0.8125rem; font-weight: 600; color: var(--jl-ink);
}

/* -------------------------------------------------------------- stats ---- */
.jl-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 5vw, 72px); }
.jl-stat { text-align: center; }
.jl-stat__n { font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 800; color: var(--jl-purple); line-height: 1; letter-spacing: -0.02em; }
.jl-stat__c { font-size: 0.9375rem; color: var(--jl-muted); margin-top: 8px; }

/* ------------------------------------------------------- testimonials ---- */
.jl-quotes {
  display: flex;
  width: 100%;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.jl-quotes::-webkit-scrollbar { display: none; }
.jl-quote-page {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 0 0 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (max-width: 900px) { .jl-quote-page { grid-template-columns: 1fr; } }
.jl-quote { margin: 0; background: #fff; border: 1px solid var(--jl-rule); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.jl-quote__text { margin: 0; font-size: 0.9375rem; color: var(--jl-body); }
.jl-quote__who { display: flex; align-items: center; gap: 12px; }
.jl-quote__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.jl-quote__name { font-size: 0.8125rem; font-weight: 700; color: var(--jl-ink-deep); }
.jl-quote__role { font-size: 0.75rem; color: var(--jl-muted); }

/* featured pull-quote pill — three stacked slabs, front one carries the content */
.jl-pullquote { position: relative; max-width: 1676px; margin-inline: auto; }
.jl-pullquote__slab { position: absolute; inset: 0; border-radius: 234px; pointer-events: none; }
.jl-pullquote__slab--back { background: #ebd5ff; transform: rotate(-3.03deg) skewX(2.02deg) translateY(-39px); }
.jl-pullquote__slab--mid  { background: #cff9ff; transform: rotate(-1.38deg) skewX(0.92deg) translateY(-15px); }
.jl-pullquote__front {
  position: relative; background: var(--jl-lilac); border-radius: 234px;
  padding: clamp(28px, 2.2vw, 40px) clamp(48px, 8vw, 160px);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.2vw, 35px);
}
@media (max-width: 720px) {
  .jl-pullquote__front { border-radius: 32px; }
  .jl-pullquote__slab { border-radius: 32px; }
}
.jl-pullquote__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100%; max-width: 753px; margin: 0; padding: 0; list-style: none; }
.jl-pullquote__track::-webkit-scrollbar { display: none; }
.jl-pullquote__slide { min-width: 0; flex: 0 0 100%; scroll-snap-align: center; }
.jl-pullquote__slide figure { width: 100%; min-width: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.2vw, 35px); }
.jl-pullquote__text { margin: 0; font-size: clamp(1.05rem, 1.25vw, 1.5rem); font-weight: 400; line-height: 1.55; color: #000; }
.jl-pullquote__text em { font-style: normal; font-weight: 600; color: #3817f4; }
.jl-pullquote__who { display: flex; align-items: center; text-align: left; gap: 17px; }
.jl-pullquote__who img { width: 62px; height: 64px; object-fit: contain; flex: none; }
.jl-pullquote__name { display: block; font-size: 1rem; font-weight: 600; line-height: 1.44; color: #353535; }
.jl-pullquote__role { display: block; font-size: 1rem; font-weight: 400; line-height: 1.44; color: #3c3c3c; }
.jl-pullquote__dots { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.jl-pullquote__dots li { display: flex; line-height: 0; }
.jl-pullquote__dots > li::before,
.jl-wordquote__dots > li::before { content: none !important; display: none !important; }
.jl-pullquote__dot {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer; background: transparent;
}
.jl-pullquote__dot::before {
  content: ""; position: absolute; inset: 0; width: 8px; height: 8px; margin: auto;
  border-radius: 50%; background: rgba(37,37,37,.24);
}
.jl-pullquote__dot[aria-current="true"] { background: transparent; }
.jl-pullquote__dot[aria-current="true"]::before { background: var(--jl-purple); }
.jl-pullquote__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.8); color: #000; display: grid; place-items: center;
}
.jl-pullquote__arrow--prev { left: clamp(16px, 8.3%, 140px); }
.jl-pullquote__arrow--next { right: clamp(16px, 8.3%, 140px); }
.jl-pullquote__arrow:hover, .jl-pullquote__arrow:focus-visible { background: #fff; }
.jl-pullquote__arrow[disabled] { opacity: .45; cursor: default; }

/* video testimonial band */
.jl-videoband {
  width: 100%; max-width: 1096px; margin-inline: auto;
  background: var(--jl-ink-deep); border-radius: 20px; padding: clamp(20px, 2.5vw, 32px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center;
}
@media (max-width: 860px) { .jl-videoband { grid-template-columns: 1fr; } }
.jl-videoband__copy { color: #fff; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.jl-videoband__quote { font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 700; color: #fff; }
.jl-videoband__body { font-size: 0.9375rem; color: rgba(255,255,255,.82); }
.jl-videoband__who { font-size: 0.875rem; font-weight: 600; color: #fff; }
.jl-videoband__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.jl-videoband .jl-video { background: #241a66; }
.jl-videoband .jl-video__play { width: 60px; height: 60px; border-radius: 50%; box-shadow: none; }
.jl-video--poster { cursor: default; }
.jl-video--poster img { width: 100%; height: 100%; object-fit: cover; }
.jl-videoband .jl-btn--ghost { color: #fff; border-color: #fff; background: transparent; }
.jl-videoband .jl-btn--ghost:hover,
.jl-videoband .jl-btn--ghost:focus-visible { color: #fff; border-color: #fff; background: rgba(255,255,255,.08); }
.jl-videoband__art { display: none; }
@media (min-width: 861px) {
  .jl-videoband {
    min-height: 386.13px; padding: 52px;
    grid-template-columns: 451.42px 1fr; gap: 44.58px;
  }
  .jl-videoband .jl-video { width: 451.42px; height: 282.13px; aspect-ratio: auto; border-radius: 14px; }
  .jl-videoband__copy { gap: 17px; }
  .jl-videoband__quote { font-size: 22px; font-weight: 800; line-height: 34.1px; letter-spacing: -.44px; }
  .jl-videoband__body { font-size: 16px; line-height: 23.25px; color: #dfc5fe; }
  .jl-videoband__who { font-size: 16px; line-height: 20.93px; color: #d1cbec; }
  .jl-videoband__actions { margin-top: 16px; }
  .jl-videoband__actions .jl-btn { gap: 4px; }
}

/* --------------------------------------------------------- case study ---- */
.jl-case { margin-top: 56px; background: var(--jl-lilac); border-radius: 32px; padding: clamp(28px, 4vw, 56px); }
.jl-case__art { display: none; }
.jl-case__head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.jl-case__head img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.jl-case__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
@media (max-width: 860px) { .jl-case__grid { grid-template-columns: 1fr; } }
.jl-case__chart { background: #fff; border-radius: 18px; padding: 20px; }
.jl-case__chart svg { width: 100%; height: auto; display: block; }
.jl-case__quotes { display: flex; flex-direction: column; gap: 18px; font-size: 0.9375rem; color: var(--jl-body); }
.jl-case__stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); margin-top: 32px; }
.jl-case__stat .jl-stat__n { color: #501ee3; }
.jl-case__cta { margin-top: 30px; display: flex; justify-content: center; }

/* --------------------------------------------------------- comparison ---- */
.jl-compare {
  background: #f1edfb; border-radius: clamp(48px, 23vw, 441px);
  padding: clamp(36px, 4.8vw, 91px) clamp(24px, 15vw, 292px) clamp(36px, 4vw, 72px);
}
.jl-compare .jl-section__head { text-align: left; max-width: none; margin: 0 0 clamp(24px, 3vw, 44px); }
.jl-compare .jl-section__head h2 { max-width: 560px; }
.jl-compare .jl-section__head .jl-eyebrow { color: var(--jl-purple-alt); }
.jl-compare__hint { display: none; }
.jl-compare__logo { display: block; margin: 0 auto 10px; }
.jl-compare__scroll { overflow-x: auto; }
.jl-compare table { width: 100%; min-width: 720px; border-collapse: collapse; }
.jl-compare--single table { width: min(100%, 760px); min-width: 0; margin-inline: auto; }
.jl-compare th, .jl-compare td { padding: 16px 14px; text-align: center; font-size: 0.875rem; }
.jl-compare tbody th, .jl-compare tbody td { padding-block: clamp(16px, 1.6vw, 30px); }
.jl-compare thead th {
  font-size: 0.875rem; font-weight: 600; letter-spacing: .72px; text-transform: uppercase;
  color: #57517a; border-bottom: 1px solid #e3ddf5; vertical-align: bottom; padding-bottom: 14px;
}
.jl-compare thead th.is-jeddle { color: var(--jl-purple-alt); border-radius: 8px 8px 0 0; }
.jl-compare tbody th { text-align: left; font-weight: 600; color: var(--jl-ink); font-size: 1.125rem; }
.jl-compare tbody tr + tr th, .jl-compare tbody tr + tr td { border-top: 1px solid #e3ddf5; }
.jl-compare td.is-jeddle { background: #f1edfb; }
.jl-compare__yes { color: var(--jl-purple-alt); font-weight: 700; font-size: 1.25rem; }
.jl-compare__no  { color: #514a6e; font-size: 0.9rem; }
.jl-compare__cta { display: flex; justify-content: center; margin-top: 32px; }
@media (max-width: 560px) {
  .jl-compare { padding-inline: 20px; }
  .jl-compare__hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 12px;
    color: var(--jl-muted);
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .jl-compare__hint span { color: var(--jl-purple-alt); font-size: 1.125rem; }
  .jl-compare__scroll {
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--jl-purple-alt) transparent;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  .jl-compare__scroll:focus-visible {
    outline: 3px solid var(--jl-purple);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .jl-compare table {
    width: 636px;
    min-width: 636px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }
  .jl-compare thead th:first-child,
  .jl-compare tbody th {
    position: sticky;
    z-index: 2;
    left: 0;
    width: 108px;
    background: #f1edfb;
    box-shadow: 8px 0 12px -12px rgb(28 10 80 / 70%);
  }
  .jl-compare thead th:not(:first-child),
  .jl-compare tbody td { width: 132px; scroll-snap-align: start; }
  .jl-compare th,
  .jl-compare td { padding-inline: 8px; }
  .jl-compare tbody th { font-size: 0.875rem; line-height: 1.35; }
  .jl-compare--single .jl-compare__scroll { overflow: visible; }
  .jl-compare--single table { width: 100%; min-width: 0; table-layout: auto; }
  .jl-compare--single thead th:first-child,
  .jl-compare--single tbody th { position: static; width: auto; box-shadow: none; }
}

/* --------------------------------------------------------------- FAQ ----- */
.jl-faq { max-width: 760px; margin-inline: auto; }
.jl-faq__item { border-bottom: 1px solid var(--jl-rule); }
.jl-faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  background: none; border: 0; padding: 22px 0; cursor: pointer; text-align: left;
  font-family: var(--jl-font); font-size: 1.0625rem; font-weight: 600; color: var(--jl-ink);
}
.jl-faq__sign { flex: none; width: 24px; height: 24px; position: relative; color: var(--jl-purple-alt); }
.jl-faq__sign::before, .jl-faq__sign::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
  transition: transform .2s ease, opacity .2s ease;
}
.jl-faq__sign::before { width: 15px; height: 2px; }
.jl-faq__sign::after  { width: 2px; height: 15px; }
.jl-faq__q[aria-expanded="true"] .jl-faq__sign::after { transform: scaleY(0); opacity: 0; }
.jl-faq__a { padding: 0 0 22px; font-size: 0.9375rem; color: var(--jl-body); max-width: 66ch; }
.jl-faq__a[hidden] { display: none; }

/* ---------------------------------------------------------- CTA band ----- */
.jl-ctaband {
  position: relative; background: var(--jl-purple-alt); color: #fff; overflow: clip;
  border-radius: 90px 90px 0 0;
  padding: clamp(48px, 6vw, 88px) 0; text-align: center;
}
/* The design's crowd-of-educators collage, screened into the purple. */
.jl-ctaband__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.8) saturate(.92);
  opacity: .16; mix-blend-mode: hard-light; pointer-events: none;
}
/* The School/JeddAI Figma component is the flat violet variant. Keep the
   configured photo element (so the renderer does not add arc decoration), but
   suppress it at every responsive size. */
[data-jl-persona="school"][data-jl-product="jeddai"] .jl-ctaband__photo { display: none; }
.jl-ctaband > .jl-wrap { position: relative; }
.jl-ctaband .jl-eyebrow { color: #d7cbff; }
.jl-ctaband h2 { color: #fff; }
.jl-ctaband p { color: rgba(255,255,255,.88); margin: 14px auto 0; max-width: 56ch; }
.jl-ctaband__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; position: relative; }
.jl-ctaband--deep { background: #310a93; }
.jl-ctaband--violet { background: #723afe; }

/* The teacher frame has a secondary action on the same violet surface. Keep
   the Figma outline treatment visible instead of painting violet on violet. */
[data-jl-persona="teacher"][data-jl-product="jeddai"] .jl-ctaband .jl-btn--ghost {
  border-color: #fff;
  background: transparent;
  color: #fff;
}
[data-jl-persona="teacher"][data-jl-product="jeddai"] .jl-ctaband .jl-btn--ghost:hover,
[data-jl-persona="teacher"][data-jl-product="jeddai"] .jl-ctaband .jl-btn--ghost:focus-visible {
  border-color: #fff;
  background: rgba(255,255,255,.12);
  color: #fff;
}
[data-jl-persona="teacher"][data-jl-product="jeddai"] .jl-ctaband .jl-btn--ghost:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* ------------------------------------------------------------ carousel --- */
.jl-carousel { position: relative; }
.jl-carousel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.jl-carousel__head > :first-child { flex: 1 1 220px; min-width: 0; }
.jl-carousel__nav { flex: none; }
.jl-carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 328px);
  gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: thin;
}
.jl-carousel__track > * { scroll-snap-align: start; }
.jl-carousel__nav { display: flex; gap: 8px; }
.jl-arrow {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--jl-rule); color: var(--jl-purple); cursor: pointer;
}
.jl-arrow:hover:not(:disabled) { background: var(--jl-lilac); }
.jl-arrow:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .jl-carousel__track { scroll-behavior: auto; } }

/* ------------------------------------------------------ set-text browser -- */
.jl-settext {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 7vw, 88px) 0;
  border-radius: clamp(56px, 9vw, 160px);
  background: #fff;
}
.jl-settext > .jl-wrap { position: relative; z-index: 1; }
.jl-settext .jl-section__head { max-width: 1105px; }
.jl-settext .jl-section__head .jl-sub { max-width: 640px; margin-inline: auto; }
.jl-settext__filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: -18px auto 60px;
}
.jl-settext__filter { position: relative; display: block; }
.jl-settext__filter::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #2e2177;
  border-bottom: 1.5px solid #2e2177;
  rotate: 45deg;
  translate: 0 -70%;
  pointer-events: none;
}
.jl-settext__filter select {
  min-height: 44px;
  appearance: none;
  border: 1px solid #a99ad7;
  border-radius: 999px;
  padding: 9px 34px 9px 14px;
  background: #fff;
  color: #17123e;
  font: 600 12px/18px var(--jl-font);
  cursor: pointer;
}
.jl-settext__filter:nth-of-type(1) select { width: 121px; }
.jl-settext__filter:nth-of-type(2) select { width: 120px; }
.jl-settext__filter:nth-of-type(3) select { width: 166px; }
.jl-settext__filter select:focus-visible { outline: 3px solid var(--jl-purple); outline-offset: 3px; }
.jl-settext__submit {
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--jl-purple);
  color: #fff;
  font: 700 13px/18px var(--jl-font);
  cursor: pointer;
}
.jl-settext__submit:hover { background: #1f155c; }
.jl-settext__submit:focus-visible { outline: 3px solid var(--jl-purple); outline-offset: 3px; }
.jl-settext__submit[hidden] { display: none; }
.jl-settext__carousel { position: relative; width: 100%; }
.jl-settext__track {
  display: flex;
  gap: 51px;
  overflow-x: auto;
  padding: 0 max(0px, calc((100vw - 1394px) / 2));
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.jl-settext__track::-webkit-scrollbar { display: none; }
.jl-settext__subject {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 19px;
  flex: 0 0 499px;
  min-height: 345.253px;
  overflow: hidden;
  padding: 24px 30px;
  border-radius: 36px;
  color: #000;
  text-decoration: none;
  scroll-snap-align: center;
}
.jl-settext__subject::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 621.033px;
  height: 328.857px;
  background: center / 100% 100% no-repeat;
  pointer-events: none;
}
.jl-settext__subject--lilac { background: #f1e6fc; }
.jl-settext__subject--lilac::after { left: .6685px; top: 97.8485px; rotate: -21.11deg; background-image: url('../images/landing/deco/settext-english.svg'); }
.jl-settext__subject--aqua { background: #cdf4ef; }
.jl-settext__subject--aqua::after { left: -114.9195px; top: 163.367px; rotate: 26.66deg; background-image: url('../images/landing/deco/settext-economics.svg'); }
.jl-settext__subject--lemon { background: #f3f1b2; }
.jl-settext__subject--lemon::after { left: -56.129px; top: 229.6525px; rotate: -8.63deg; background-image: url('../images/landing/deco/settext-chemistry.svg'); }
.jl-settext__subject > * { position: relative; z-index: 1; }
.jl-settext__subject h3 { margin: 0; color: #000; font-size: 24px; font-weight: 800; line-height: 29px; letter-spacing: -.92px; }
.jl-settext__chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.jl-settext__chips span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  padding: 8px 16px;
  border-radius: 16px;
  background: #fff;
  color: #2e2177;
  font-size: 14px;
  font-weight: 700;
  line-height: 17px;
  white-space: nowrap;
}
.jl-settext__books { display: flex; width: 100%; height: 157.253px; }
.jl-settext__book {
  display: flex;
  flex: 0 0 min(117.157px, calc((100% + 30px) / 4));
  height: 157.253px;
  flex-direction: column;
  overflow: hidden;
  border-radius: 3.759px 7.518px 7.518px 3.759px;
  background: #fff;
  box-shadow: 0 8.771px 18.795px rgba(46, 33, 119, .2);
}
.jl-settext__book + .jl-settext__book { margin-left: -10px; }
.jl-settext__book img { width: 100%; height: 100%; object-fit: cover; }
.jl-settext__book-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(145deg, #fff 0%, #f5efff 100%);
}
.jl-settext__book-title {
  display: block;
  padding: 10px 10px 0;
  color: #080414;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 13px;
}
.jl-settext__book-author {
  display: block;
  margin: 5px 13px 0;
  padding-top: 4px;
  border-top: 1px solid #111;
  color: #080414;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7px;
  line-height: 9px;
}
.jl-settext__more {
  display: block;
  margin-top: auto;
  color: #4801d4;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
}
.jl-settext__arrow { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; }
.jl-settext__arrow { border: 0; background: #f0f0f0; color: #575757; }
.jl-settext__arrow:hover:not(:disabled) { background: #e6e6e6; }
.jl-settext__arrow--prev { left: clamp(16px, 9vw, 175px); }
.jl-settext__arrow--next { right: clamp(16px, 7vw, 134px); }
.jl-settext__dots { display: flex; justify-content: center; gap: 5px; margin-top: 30px; }
.jl-settext__dots i { width: 8px; height: 8px; border-radius: 50%; background: #b8b8b8; }
.jl-settext__dots i.is-active { background: var(--jl-purple); }
.jl-settext__dots i[hidden] { display: none; }
.jl-settext__cta { display: flex; justify-content: center; margin-top: 30px; }
.jl-settext__owl,
.jl-settext__tree { position: absolute; z-index: 0; pointer-events: none; }
.jl-settext__owl { left: -22px; bottom: -16px; width: min(302px, 24vw); }
.jl-settext__tree { right: -155px; bottom: -56px; width: min(672px, 43vw); }

@media (max-width: 760px) {
  .jl-settext { padding-block: 56px; border-radius: 56px; }
  .jl-settext__filters { margin-top: -8px; margin-bottom: 40px; gap: 8px; }
  .jl-settext__filter select { max-width: calc(100vw - 40px); font-size: 11px; }
  .jl-settext__submit { flex-basis: min(100%, 220px); }
  .jl-settext__track { gap: 16px; padding-inline: 8vw; }
  .jl-settext__subject { flex-basis: min(499px, 84vw); padding-inline: 20px; }
  .jl-settext__chips { gap: 4px; }
  .jl-settext__chips span { max-width: 100%; padding-inline: 9px; font-size: 12px; white-space: normal; }
  .jl-settext__books { width: 100%; }
  .jl-settext__book { flex-basis: calc((100% + 30px) / 4); }
  .jl-settext__book img { width: 100%; }
  .jl-settext__arrow { display: none; }
  .jl-settext__owl { width: 150px; opacity: .45; }
  .jl-settext__tree { width: 260px; opacity: .4; }
}

@media (min-width: 1800px) {
  .jl-settext { width: 100%; height: 965.033px; padding: 0; border-radius: 160px; }
  .jl-settext > .jl-wrap { width: 1920px; max-width: none; height: 965.033px; margin: 0 auto; padding: 0; }
  .jl-settext .jl-section__head { position: absolute; left: 407px; top: 88px; width: 1105px; max-width: none; margin: 0; }
  .jl-settext .jl-section__head .jl-eyebrow { height: 17px; margin: 0 0 16px; font-size: 12px; line-height: 17px; }
  .jl-settext .jl-section__head .jl-h2 { height: 55px; font-size: 48px; line-height: 55px; letter-spacing: -.96px; white-space: nowrap; }
  .jl-settext .jl-section__head .jl-sub { width: 640px; height: 57px; margin: 15px auto 0; font-size: 18px; line-height: 28px; }
  .jl-settext__filters { position: absolute; z-index: 4; left: 744px; top: 277px; width: 431px; height: 44px; margin: 0; flex-wrap: nowrap; gap: 12px; }
  .jl-settext__filter select { height: 44px; min-height: 44px; }
  .jl-settext__submit {
    position: absolute;
    top: 56px;
    left: 50%;
    width: 190px;
    translate: -50% 0;
    white-space: nowrap;
  }
  .jl-settext__carousel { position: absolute; left: 0; top: 318px; width: 1920px; height: 503px; }
  .jl-settext__track { position: absolute; left: 263px; top: 60px; width: 1393px; height: 346px; gap: 51px; overflow: hidden; padding: 0; }
  /* Expand the target around its authored centre; the 18px glyph is unchanged. */
  .jl-settext__arrow { top: 170px; width: 44px; height: 44px; translate: 0; }
  .jl-settext__arrow--prev { left: 172px; }
  .jl-settext__arrow--next { right: auto; left: 1743px; }
  .jl-settext__dots { position: absolute; left: 938px; top: 435px; width: 44px; height: 8px; margin: 0; gap: 4px; }
  .jl-settext__cta { position: absolute; left: 0; top: 821px; width: 1920px; height: 56px; margin: 0; }
  /* The artboard's 181px box cannot hold "Try JeddAI, it’s free!" at 18px; let the label size the button. */
  .jl-settext__cta .jl-btn { width: auto; min-width: 181px; height: 56px; padding-inline: 24px; gap: 4px; font-size: 18px; white-space: nowrap; }
  .jl-settext__owl { left: -78px; bottom: -7px; width: 302px; height: 373px; object-fit: cover; }
  .jl-settext__tree { top: 0; right: -93px; bottom: auto; width: 483px; max-width: none; height: 575px; object-fit: contain; filter: brightness(1.03); }
}

/* ====================================================== STOREFRONT ======== */

/* ----------------------------------------------------------- guide card -- */
.jl-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 18px;
  overflow: hidden; box-shadow: inset 0 0 0 1px var(--jl-rule);
  transition: box-shadow .18s ease, transform .18s ease;
}
.jl-card:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--jl-purple), 0 18px 38px -24px rgba(46,33,119,.5); }
.jl-card__cover { position: relative; height: 196px; background: var(--jl-lilac); display: grid; place-items: center; overflow: hidden; }
.jl-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.jl-card__cover--flat { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.25rem; color: #fff; text-align: center; padding: 20px; line-height: 1.2; }
.jl-card__badge {
  position: absolute; top: 10px; right: 10px; background: #fff; color: var(--jl-ink);
  font-size: 0.625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--jl-pill); box-shadow: 0 2px 8px rgba(46,33,119,.18);
}
.jl-card__preview {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px;
  background: rgba(255,255,255,.94); color: var(--jl-purple); font-size: 0.8125rem; font-weight: 700;
  padding: 8px; text-decoration: none; border: 0; cursor: pointer; width: 100%;
}
.jl-card__preview:hover { background: #fff; }
.jl-card__body { display: flex; flex-direction: column; gap: 9px; padding: 15px 16px 16px; flex: 1 1 auto; align-items: flex-start; }
.jl-card__title { font-size: 0.9375rem; font-weight: 700; color: var(--jl-ink); }
.jl-card__title a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
  text-decoration: none;
}
.jl-card__title a:hover { text-decoration: underline; }
.jl-card__byline { font-size: 0.75rem; color: var(--jl-muted); margin-top: -4px; }
.jl-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jl-chip {
  display: inline-flex; align-items: center; gap: 4px; background: var(--jl-lilac);
  color: var(--jl-purple-300); font-size: 0.6875rem; font-weight: 600;
  padding: 4px 9px; border-radius: var(--jl-pill);
}
.jl-chip--grey { background: #f3f1f7; color: var(--jl-muted); }
.jl-card__price { font-size: 0.875rem; font-weight: 800; color: var(--jl-ink); margin-top: auto; }
.jl-card__price small { font-weight: 400; color: var(--jl-muted); font-size: 0.6875rem; margin-left: 6px; }
.jl-card__actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px; }
.jl-card__actions .jl-btn { min-height: 44px; font-size: 0.875rem; font-weight: 700; padding: 11px 16px; border-radius: 22px; }
.jl-card.is-in-bundle .jl-btn--bundle { background: var(--jl-ink-deep); color: #fff; }

/* ------------------------------------------------ marketing guide rails -- */
/* Exact 1410 x 1543 composition from Figma node 633:12049. At narrower
   viewports the same cards become a keyboard-accessible horizontal rail. */
.jl-guide-rail {
  position: relative;
  width: 100%;
  overflow: clip;
  padding: 56px 0;
}
.jl-guide-rail__inner {
  position: relative;
  width: min(100%, 1410px);
  margin-inline: auto;
}
.jl-guide-rail h2 {
  margin: 0 clamp(20px, 4.55vw, 64px);
  color: #12063d;
  font-size: clamp(30px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.36px;
}
.jl-guide-rail__track {
  display: flex;
  gap: 24px;
  width: 100%;
  margin-top: 50px;
  padding-inline: clamp(20px, 4.55vw, 64px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-padding-inline: clamp(20px, 4.55vw, 64px);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jl-guide-rail__track::-webkit-scrollbar { display: none; }
.jl-guide-rail__cta {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  padding-inline: 20px;
}
.jl-guide-rail__cta .jl-btn {
  min-height: 56px;
  gap: 4px;
  padding: 16px 27px;
  border: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
}
.jl-guide-rail__cta .jl-btn img { width: 24px; height: 24px; flex: none; }
.jl-guide-rail__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 40px;
  height: 40px;
  padding: 8px 9px 8px 7px;
  border: 0;
  border-radius: 20px;
  background: rgba(0, 0, 0, .1);
  color: #000;
  translate: 0 -50%;
}
.jl-guide-rail__arrow:hover:not(:disabled) { background: rgba(0, 0, 0, .16); }
.jl-guide-rail__arrow:disabled { opacity: .35; }
.jl-guide-rail__arrow--prev { left: 0; }
.jl-guide-rail__arrow--next { right: 0; }
.jl-guide-rail__arrow--next img { rotate: 180deg; }

.jl-marketing-card {
  flex: 0 0 min(411.333px, calc(100vw - 40px));
  width: min(411.333px, calc(100vw - 40px));
  border: 0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 13.9px rgba(113, 113, 113, .2);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transform: none;
}
.jl-marketing-card--popular { height: 562px; }
.jl-marketing-card--skills { height: 505px; }
.jl-marketing-card:hover {
  transform: none;
  box-shadow: 0 6px 13.9px rgba(113, 113, 113, .2);
}
.jl-marketing-card__media {
  position: relative;
  flex: 0 0 255px;
  height: 255px;
  margin: 0;
  overflow: hidden;
  background: #f1e6fc;
}
.jl-marketing-card__media > img:first-child {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jl-marketing-card__cover--flat {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 38px;
  background: var(--jl-marketing-cover);
  background: linear-gradient(160deg, color-mix(in srgb, var(--jl-marketing-cover) 82%, #fff), var(--jl-marketing-cover));
  color: #fff;
  text-align: center;
}
.jl-marketing-card__cover--flat small {
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.jl-marketing-card__cover--flat strong { font: 700 24px/1.2 Georgia, "Times New Roman", serif; }
.jl-marketing-card__cover--flat span { font-size: 13px; }
.jl-marketing-card--cover-light .jl-marketing-card__cover--flat { color: #7a2e10; }
.jl-marketing-card--cover-light .jl-marketing-card__cover--flat small { color: #a75b3b; }
.jl-marketing-card--popular .jl-marketing-card__media::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 8px solid #fff;
  border-bottom: 0;
  pointer-events: none;
}
.jl-marketing-card__preview {
  border: 0;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 32px;
  padding: 4px;
  background: rgba(255, 255, 255, .92);
  color: #4801d4;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  text-decoration: none;
}
.jl-marketing-card__preview:hover { background: #fff; color: #4801d4; }
.jl-marketing-card__preview img { width: 24px; height: 24px; flex: none; }
.jl-marketing-card__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.jl-marketing-card--popular .jl-marketing-card__body {
  height: 307px;
  gap: 7px;
  padding: 20px 13px;
}
.jl-marketing-card--skills .jl-marketing-card__body {
  height: 250px;
  gap: 16px;
  padding: 17px 13px;
}
.jl-marketing-card h3 {
  display: -webkit-box;
  min-height: 24px;
  max-height: 24px;
  margin: 0;
  overflow: hidden;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.jl-marketing-card h3 a {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jl-marketing-card h3 a:hover { text-decoration: underline; }
.jl-marketing-card h3 a:focus-visible {
  outline: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px var(--jl-purple);
}
.jl-marketing-card__byline {
  min-height: 17px;
  max-height: 17px;
  overflow: hidden;
  color: rgba(75, 75, 75, .85);
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.jl-marketing-card__description {
  min-height: 38px;
  max-height: 38px;
  overflow: hidden;
  color: rgba(75, 75, 75, .85);
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.jl-marketing-card__chips {
  display: flex;
  flex: 0 0 64px;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 4px;
  height: 64px;
  overflow: hidden;
}
.jl-marketing-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 3px 9px 3px 5px;
  border-radius: 37px;
  background: #efefef;
  color: rgba(75, 75, 75, .85);
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  white-space: nowrap;
}
.jl-marketing-card--skills .jl-marketing-chip {
  font-size: 13px;
  line-height: 16px;
}
.jl-marketing-chip img { width: 24px; height: 24px; flex: none; }
.jl-marketing-card__actions {
  display: flex;
  flex: 0 0 96px;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 96px;
  padding-top: 4px;
}
.jl-marketing-card__actions .jl-btn {
  flex: 0 0 42px;
  width: 100%;
  min-height: 42px;
  height: 42px;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 21px;
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  white-space: nowrap;
}
.jl-marketing-card__actions .jl-btn--ghost {
  padding: 2px 7px;
  border: 0;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px #4801d4;
}
.jl-marketing-card__actions .jl-btn--primary { border: 0; }
.jl-marketing-card__actions .jl-btn img { width: 24px; height: 24px; flex: none; }
.jl-marketing-card.is-in-bundle .jl-btn--bundle { background: #2e2177; color: #fff; }

@media (min-width: 1410px) {
  .jl-guide-rail { padding: 0; }
  .jl-guide-rail--popular { height: 760px; }
  .jl-guide-rail--skills { height: 703px; margin-top: 80px; }
  .jl-guide-rail__inner { height: 100%; }
  .jl-guide-rail h2 { height: 42px; margin-inline: 64px; font-size: 36px; line-height: 41.4px; }
  .jl-guide-rail__track {
    width: 1282px;
    height: 562px;
    margin: 50px 64px 0;
    padding: 0;
    scroll-padding-inline: 0;
    overflow: hidden;
  }
  .jl-guide-rail--skills .jl-guide-rail__track { height: 505px; }
  .jl-guide-rail__cta { margin-top: 50px; padding: 0; }
}

@media (max-width: 899px) {
  .jl-guide-rail__arrow { display: none; }
}

@media (max-width: 600px) {
  .jl-guide-rail { padding: 48px 0; }
  .jl-guide-rail h2 { font-size: 30px; line-height: 1.2; }
  .jl-guide-rail__track { gap: 16px; margin-top: 32px; }
  .jl-guide-rail__cta { margin-top: 36px; }
  .jl-marketing-card { height: auto; }
  .jl-marketing-card__media {
    flex-basis: auto;
    height: auto;
    aspect-ratio: 411.333 / 255;
  }
  .jl-marketing-card--popular .jl-marketing-chip { font-size: 13px; line-height: 16px; }
  .jl-marketing-card h3 {
    min-height: 48px;
    max-height: 48px;
    -webkit-line-clamp: 2;
  }
  .jl-marketing-card h3 a {
    display: -webkit-box;
    max-height: 48px;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .jl-marketing-card--popular .jl-marketing-card__body { height: 331px; }
  .jl-marketing-card--skills .jl-marketing-card__body { height: 274px; }
}

@media (max-width: 359px) {
  .jl-guide-rail__cta .jl-btn { padding-inline: 20px; font-size: 16px; }
  .jl-marketing-card { min-height: 0; }
  .jl-marketing-card h3 { flex-shrink: 0; min-height: 48px; }
  .jl-marketing-card--popular .jl-marketing-card__body { height: auto; min-height: 331px; }
  .jl-marketing-card--skills .jl-marketing-card__body { height: auto; min-height: 274px; }
  .jl-marketing-card__chips { flex-basis: auto; height: auto; min-height: 64px; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .jl-guide-rail__track { scroll-behavior: auto; }
}

/* --------------------------------------------------------- catalogue ----- */
.jl-cat__hero {
  position: relative;
  z-index: 3;
  height: 393px;
  overflow: visible;
  background: #f8f3ff;
  text-align: center;
  isolation: isolate;
}
.jl-cat__hero-stage { position: relative; width: min(1920px, 100%); height: 393px; margin-inline: auto; }
.jl-cat__decor { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.jl-cat__hero-copy {
  position: absolute;
  z-index: 5;
  top: 64px;
  left: 50%;
  width: min(622px, calc(100% - 40px));
  transform: translateX(-50%);
}
.jl-cat__hero .jl-h1 {
  color: #000;
  font-size: 46px;
  font-weight: 800;
  line-height: 48.3px;
  letter-spacing: -1.38px;
  white-space: nowrap;
}
.jl-cat__hero .jl-sub {
  width: min(622px, 100%);
  max-width: none;
  margin: 12px auto 0;
  color: var(--jl-muted);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 24.75px;
}
.jl-search-shell { position: relative; z-index: 25; width: 100%; margin-top: 34px; }
.jl-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 58px;
  margin: 0;
  padding: 0 24px;
  border-radius: 29px;
  background: #fff;
  box-shadow: 0 10px 13px rgba(119,111,151,.14);
}
.jl-search:focus-within { box-shadow: 0 0 0 3px rgba(72,1,212,.16), 0 10px 13px rgba(119,111,151,.14); }
.jl-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #12063d;
  font-family: var(--jl-font);
  font-size: 16px;
  line-height: 24px;
}
.jl-search input::-webkit-search-cancel-button { width: 18px; height: 18px; cursor: pointer; }
.jl-search input::placeholder { color: var(--jl-muted); opacity: 1; }
.jl-search svg { flex: none; color: var(--jl-muted); }
.jl-cat__pills { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; margin-top: 27px; }
.jl-pill {
  display: inline-flex;
  align-items: center;
  gap: 8.847px;
  min-height: 44.234px;
  padding: 4.423px 13.27px 4.423px 7.372px;
  border-radius: 54.556px;
  background: #492686;
  box-shadow: 0 2px 0 #8843ff;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
  white-space: nowrap;
}
.jl-pill:first-child { width: 255.877px; }
.jl-pill--alt { width: 272.877px; margin-left: 17px; background: #264f86; box-shadow-color: #3886ef; }
.jl-pill img { flex: 0 0 35.388px; width: 35.388px; height: 35.388px; }
.jl-pill:hover { filter: brightness(1.12); }

/* 1680 content - 272 rail - 36 gap = 1372 results, which divides into the
   design's 4 x 328px cards with 20px gutters exactly. */
.jl-cat__hero + .jl-wrap { padding-top: 14px; }
.jl-cat__body {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  padding-bottom: 120px;
}
.jl-cat__body[data-jl-request-state="loading"] {
  opacity: .64;
  transition: opacity 160ms ease;
}
.jl-catalogue-status {
  display: flex;
  min-height: 52px;
  margin: 0 0 16px;
  padding: 10px 14px;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid #d8c9f4;
  border-radius: 12px;
  background: #f7f2ff;
  color: var(--jl-ink);
  font-size: 14px;
  line-height: 1.35;
}
.jl-catalogue-status[hidden] { display: none; }
.jl-catalogue-status[data-state="loading"]::before {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid #d8c9f4;
  border-top-color: var(--jl-purple);
  border-radius: 50%;
  animation: jl-status-spin .8s linear infinite;
  content: "";
}
.jl-catalogue-status[data-state="error"] {
  border-color: #d59a88;
  background: #fff5f1;
}
.jl-catalogue-status > span { min-width: min(100%, 240px); margin-right: auto; flex: 1 1 320px; }
.jl-catalogue-status button,
.jl-catalogue-status a {
  display: inline-flex;
  min-height: 44px;
  padding: 9px 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jl-purple);
  border-radius: 22px;
  background: #fff;
  color: var(--jl-purple);
  font: 700 13px/1.2 var(--jl-font);
  text-decoration: none;
  cursor: pointer;
}
.jl-catalogue-status button { background: var(--jl-purple); color: #fff; }
@keyframes jl-status-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .jl-catalogue-status[data-state="loading"]::before,
  .jl-preview__spinner { animation: none; }
}

.jl-filters { position: static; padding: 26px 24px; border-radius: 22px; background: #fff; }
.jl-filters__head { display: flex; align-items: center; justify-content: space-between; }
.jl-filters__head h2 { color: #000; font-size: 17px; font-weight: 800; line-height: 22px; }
.jl-filters__tools { display: flex; align-items: center; gap: 10px; }
.jl-filters__clear {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 1px 6px;
  border: 0;
  background: transparent;
  color: #4801d4;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: none;
}
.jl-filters__toggle { display: none; }
.jl-filters__content { display: flex; flex-direction: column; gap: 26px; margin-top: 26px; }
.jl-fgroup { display: flex; flex-direction: column; gap: 11px; }
.jl-fgroup__label { color: var(--jl-muted); font-size: 11.5px; font-weight: 800; line-height: 15px; letter-spacing: 1.15px; text-transform: uppercase; }
.jl-fgroup__rows { display: flex; flex-direction: column; gap: 3px; }
.jl-frow {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  padding: 8px 11px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #4b464f;
  font-family: var(--jl-font);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 18px;
  text-decoration: none;
}
.jl-frow:hover { background: var(--jl-lilac-soft); }
.jl-frow__dot { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #cfc9de; display: grid; place-items: center; }
.jl-frow__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.jl-frow__label { flex: 1 1 auto; min-width: 0; }
.jl-frow__count { color: var(--jl-muted); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jl-frow[aria-current="true"] { background: var(--jl-lilac); color: #2e2177; font-weight: 800; }
.jl-frow[aria-current="true"] .jl-frow__dot { background: var(--jl-purple); box-shadow: none; }
.jl-frow[aria-current="true"] .jl-frow__dot::after { background: #fff; }
.jl-fgroup__more { width: 100%; }
.jl-fgroup__more summary {
  min-height: 44px;
  padding: 8px 11px 8px 39px;
  color: #4801d4;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 19px;
  cursor: pointer;
  list-style: none;
}
.jl-fgroup__more summary::-webkit-details-marker { display: none; }
.jl-fgroup__more summary:hover { text-decoration: underline; }
.jl-fgroup__extra { display: flex; flex-direction: column; gap: 3px; padding-top: 3px; }

.jl-results { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.jl-results__bar { display: flex; min-height: 37px; align-items: center; justify-content: space-between; gap: 16px; }
.jl-results__count { color: #000; font-size: 20px; font-weight: 800; line-height: 26px; }
.jl-results__count span { margin-left: 8px; color: var(--jl-muted); font-size: 14px; font-weight: 700; }
.jl-sort { display: flex; align-items: center; gap: 12px; }
.jl-sort label { color: var(--jl-muted); font-size: 13px; font-weight: 700; }
.jl-sort select {
  appearance: none; background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%2312063d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 0; box-shadow: inset 0 0 0 1px var(--jl-rule); border-radius: 14px;
  width: 125px; height: 37px; min-height: 37px; padding: 8px 34px 8px 10px; font-family: var(--jl-font); font-size: 13px; font-weight: 700; color: #000; cursor: pointer;
}
.jl-sort__submit {
  min-height: 37px;
  padding: 8px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--jl-purple);
  color: #fff;
  font-family: var(--jl-font);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.jl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.jl-empty { background: #fff; border-radius: 18px; padding: 48px 24px; text-align: center; box-shadow: inset 0 0 0 1px var(--jl-rule); }
.jl-empty h3 { margin-bottom: 8px; }
.jl-empty p { color: var(--jl-muted); font-size: 0.9375rem; }

.jl-pager { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; padding-top: 0; }
.jl-pager__range { color: var(--jl-muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jl-pager__list { display: flex; align-items: center; gap: 8px; }
.jl-pager__list a, .jl-pager__list span {
  min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px;
  background: #fff; color: #4b464f; font-size: 14px; font-weight: 800; text-decoration: none; padding: 0 12px;
}
.jl-pager__list a:hover { background: var(--jl-lilac); }
.jl-pager__list [aria-current="page"] { background: var(--jl-purple); color: #fff; }

/* Catalogue bundle offer. Its DOM node lives outside the replaceable results
   fragment, so filtering never duplicates or removes it. */
.jl-bundlebar {
  position: static;
  z-index: 2;
  background: #3f00ac;
  color: #fff;
}
.jl-bundlebar[hidden] { display: none; }
.jl-bundlebar--catalogue {
  width: 100%;
  min-height: 82px;
}
.jl-bundlebar__inner {
  width: min(1920px, 100%);
  min-height: 82px;
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 51px;
}
.jl-bundlebar__lead { display: flex; align-items: center; gap: 14px; }
.jl-bundlebar__books { width: 49px; height: 54px; flex: none; transform: rotate(180deg); }
.jl-bundlebar__title { color: #fff; font-size: 30px; font-weight: 800; line-height: 34px; letter-spacing: -.6px; }
.jl-bundlebar__sub { color: rgba(255,255,255,.86); font-size: 14px; font-weight: 600; }
.jl-bundlebar .jl-btn { min-height: 60px; padding: 16px 18px; border-radius: 51px; color: #3f00ac; font-size: 16px; font-weight: 700; }
.jl-bundlebar .jl-btn img { width: 22px; height: 24px; transform: rotate(180deg); }
.jl-bundlebar__close { width: 44px; height: 44px; padding: 4px; border: 0; background: transparent; color: #fff; cursor: pointer; }
.jl-bundlebar__close img { width: 36px; height: 36px; }

/* Keep the catalogue bundle offer flush with the viewport bottom. */
@media (min-width: 1200px) {
  main[data-jl-catalogue] > .jl-bundlebar--catalogue {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 82px;
    min-height: 82px;
  }
}

@media (min-width: 1800px) {
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__inner {
    position: relative;
    display: block;
    width: 1920px;
    height: 82px;
    padding: 0;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__lead {
    position: absolute;
    top: 9px;
    left: 570px;
    gap: 23px;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__lead > div { width: 468px; }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__title {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -.72px;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__sub {
    font-size: 16px;
    line-height: 20px;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-btn {
    position: absolute;
    top: 11px;
    left: 1161px;
    width: 200px;
    height: 60px;
    padding: 16px 18px;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__close {
    position: absolute;
    top: 19px;
    right: 71px;
  }
}

/* Catalogue-only card treatment; marketing rails retain their own anatomy. */
.jl-card--catalogue { min-width: 0; }
.jl-card--catalogue .jl-card__cover { height: 196px; }
.jl-card--catalogue .jl-card__cover--flat {
  width: 100%; height: 100%; padding: 44px 20px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: var(--jl-card-cover);
  background: linear-gradient(160.965deg, color-mix(in srgb, var(--jl-card-cover) 82%, #fff) 7.735%, var(--jl-card-cover) 92.265%);
  color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 700; line-height: 23px; text-align: center;
}
.jl-card--catalogue .jl-card__cover--flat small {
  position: absolute;
  left: 32px;
  bottom: 9px;
  z-index: 2;
  color: #706b77;
  font: 700 11px/14px var(--jl-font);
  letter-spacing: 1.32px;
  text-transform: uppercase;
  pointer-events: none;
}
.jl-card--catalogue.jl-card--cover-light .jl-card__cover--flat { color: #7a2e10; }
.jl-card--catalogue.jl-card--cover-light .jl-card__cover--flat small { color: #b5714f; }
.jl-card--catalogue .jl-card__badge { top: 10px; right: 10px; padding: 4px 9px; border-radius: 10px; font-size: 13px; font-weight: 800; letter-spacing: .6px; box-shadow: 0 4px 2px rgba(0,0,0,.25); }
.jl-card--catalogue .jl-card__preview { min-height: 32px; padding: 4px; gap: 3px; background: rgba(255,255,255,.92); color: #4801d4; font-size: 14px; font-weight: 500; }
.jl-card--catalogue .jl-card__preview img { width: 24px; height: 24px; object-fit: contain; }
.jl-card--catalogue .jl-card__body { min-height: 210px; padding: 15px 16px 16px; gap: 9px; }
.jl-card--catalogue .jl-card__heading { width: 100%; min-height: 44px; }
.jl-card--catalogue .jl-card__title { color: #000; font-size: 15px; font-weight: 800; line-height: 18.75px; }
.jl-card--catalogue .jl-card__byline { overflow: hidden; margin-top: 2px; color: var(--jl-muted); font-size: 12.5px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.jl-card--catalogue .jl-card__chips { width: 100%; gap: 5px; }
.jl-card--catalogue .jl-card__chip { display: inline-flex; max-width: 100%; min-height: 21px; align-items: center; gap: 6px; padding: 3px 9px 3px 5px; border-radius: 37px; background: #f3eefb; color: #7200e0; font-size: 10.5px; font-weight: 700; line-height: 15px; }
.jl-card--catalogue .jl-card__chip--feature { background: #efefef; color: #5b5b5b; font-size: 13px; }
.jl-card--catalogue .jl-card__chip img { width: 19px; height: 19px; flex: none; }
.jl-card--catalogue .jl-card__chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-card--catalogue .jl-card__price { display: flex; margin-top: auto; align-items: baseline; gap: 8px; color: #000; }
.jl-card--catalogue .jl-card__price strong { font-size: 19px; font-weight: 800; line-height: 24px; letter-spacing: -.19px; }
.jl-card--catalogue .jl-card__price small { margin: 0; color: var(--jl-muted); font-size: 11.5px; font-weight: 700; }
.jl-card--catalogue .jl-card__actions { margin-top: auto; }
.jl-card--catalogue .jl-card__actions .jl-btn { min-height: 42px; padding: 9px 14px; border-radius: 21px; font-size: 13.5px; }
.jl-card__bundle-icon { display: inline-flex; }
.jl-card__bundle-icon--check { display: none; }
.jl-card--catalogue.is-in-bundle .jl-card__bundle-icon--add { display: none; }
.jl-card--catalogue.is-in-bundle .jl-card__bundle-icon--check { display: inline-flex; }

/* Live title/author suggestions from the public guide data endpoint. */
.jl-suggestions {
  position: absolute;
  z-index: 100;
  top: 66px;
  left: 50%;
  width: min(800px, calc(100vw - 32px));
  max-height: 307px;
  padding: 12px;
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #dbd8e6, 0 18px 44px rgba(46,33,119,.18);
  text-align: left;
}
.jl-suggestions__eyebrow { min-height: 21px; display: flex; align-items: center; gap: 6px; color: var(--jl-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .945px; text-transform: uppercase; }
.jl-suggestions__chip { padding: 4px 10px; border-radius: 11px; background: #f1e6fc; color: #4801d4; font-size: 11px; font-weight: 700; letter-spacing: .66px; text-transform: none; }
.jl-suggestions__list { max-height: 250px; margin-top: 12px; overflow: auto; display: grid; gap: 12px; }
.jl-suggestion-group {
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  color: #000;
  box-shadow: inset 0 0 0 1px #edeaf6;
}
.jl-suggestion-group:is(.is-selected, :hover, :focus-within) { box-shadow: inset 0 0 0 1.5px #8961d9; }
.jl-suggestion__item.is-selected { background: #f6f0ff; }
.jl-suggestion__course:focus-visible { outline: 3px solid var(--jl-purple); outline-offset: -3px; }
.jl-suggestion__course {
  min-height: 61px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f6f0fe;
}
.jl-suggestion__year,
.jl-suggestion__type {
  flex: none;
  min-height: 21px;
  padding: 4px 10px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  color: #4801d4;
  background: #f1e6fc;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .66px;
  white-space: nowrap;
}
.jl-suggestion__course-copy,
.jl-suggestion__copy { min-width: 0; flex: 1 1 auto; }
.jl-suggestion__course-title,
.jl-suggestion__course-meta,
.jl-suggestion__title,
.jl-suggestion__author { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jl-suggestion__course-title { color: #2e2177; font-size: 15px; font-weight: 800; line-height: 18px; }
.jl-suggestion__course-meta { color: var(--jl-muted); font-size: 12.5px; line-height: 17px; }
.jl-suggestion__course-actions,
.jl-suggestion__actions { flex: none; display: flex; align-items: center; gap: 12px; }
.jl-suggestion__course-preview,
.jl-suggestion__course-bundle,
.jl-suggestion__bundle,
.jl-suggestion__single {
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1.5px solid #4801d4;
  color: #4801d4;
  background: #fff;
  font: 700 12.5px/18px var(--jl-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.jl-suggestion__course-preview::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url("../images/landing/guide-icon-preview.svg") center/contain no-repeat;
}
.jl-suggestion__course-preview { background: transparent; }
.jl-suggestion__course-bundle {
  min-height: 36px;
  padding-inline: 16px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: #4801d4;
  font-size: 13px;
}
.jl-suggestion__course-bundle::before {
  content: "";
  width: 22px;
  height: 24px;
  background: url("../images/landing/catalogue/banner-button-books-icon.svg") center/contain no-repeat;
  transform: rotate(180deg);
}
.jl-suggestion__item {
  min-height: 57px;
  padding: 11px 16px 11px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #edeaf6;
  background: #fff;
}
.jl-suggestion__item:hover { background: #fbfaff; }
.jl-suggestion__title { display: block; overflow: hidden; color: #000; font-size: 14.5px; font-weight: 700; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.jl-suggestion__author { display: block; overflow: hidden; color: var(--jl-muted); font-size: 12.5px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.jl-suggestion__single { border-color: #dbd8e6; color: #4b464f; }
.jl-suggestions__state { min-height: 72px; padding: 24px; display: grid; place-items: center; color: var(--jl-muted); font-size: 14px; text-align: center; }

@media (max-width: 1579px) {
  .jl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jl-bundlebar__inner { gap: 28px; }
  .jl-bundlebar__title { font-size: 26px; }
}
@media (max-width: 1240px) {
  .jl-cat__hero-copy { width: min(580px, calc(100% - 40px)); }
  .jl-cat__hero .jl-h1 { font-size: 42px; }
  .jl-cat__body { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
  .jl-filters { padding-inline: 18px; }
  .jl-frow { padding-inline: 8px; }
  .jl-bundlebar__books { display: none; }
}
@media (max-width: 1080px) {
  .jl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jl-bundlebar__title { font-size: 22px; line-height: 26px; }
  .jl-bundlebar .jl-btn { min-height: 48px; padding-block: 10px; }
}
@media (max-width: 860px) {
  .jl-cat__hero { height: auto; min-height: 393px; }
  .jl-cat__hero-stage { height: auto; min-height: 393px; padding: 45px 20px 38px; }
  .jl-cat__hero-copy { position: relative; top: auto; left: auto; width: min(622px, 100%); margin-inline: auto; transform: none; }
  .jl-cat__hero .jl-h1 { font-size: clamp(34px, 7vw, 42px); line-height: 1.1; white-space: normal; }
  .jl-cat__hero .jl-sub { font-size: 15.5px; line-height: 23px; }
  .jl-cat__hero + .jl-wrap { padding-top: 24px; }
  .jl-cat__body { grid-template-columns: 1fr; gap: 20px; padding-bottom: 80px; }
  .jl-filters { padding: 18px 20px; }
  .jl-filters__toggle { display: inline-flex; min-height: 44px; padding: 8px 10px; align-items: center; gap: 5px; border: 0; background: transparent; color: #4801d4; font: 700 13px/18px var(--jl-font); cursor: pointer; }
  .jl-filters[data-jl-collapsed="true"] .jl-filters__content { display: none; }
  .jl-filters__content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .jl-filters__active { grid-column: 1 / -1; }
  .jl-bundlebar__inner { min-height: 82px; gap: 18px; justify-content: space-between; }
  .jl-bundlebar__lead { min-width: 0; }
  .jl-bundlebar__sub { overflow-wrap: anywhere; }
}
@media (max-width: 620px) {
  .jl-cat__hero-stage { padding-inline: 16px; }
  .jl-search-shell { margin-top: 20px; }
  .jl-search { height: 54px; padding-inline: 18px; }
  .jl-cat__pills { gap: 9px; }
  .jl-pill, .jl-pill:first-child, .jl-pill--alt { width: auto; min-height: 44px; margin: 0; padding: 4px 11px 4px 6px; font-size: 13px; }
  .jl-pill img { width: 31px; height: 31px; flex-basis: 31px; }
  .jl-results__bar { align-items: flex-end; }
  .jl-results__count { font-size: 18px; }
  .jl-sort { gap: 6px; }
  .jl-sort select { width: 116px; height: 44px; min-height: 44px; }
  .jl-filters__clear { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 6px; }
  .jl-card--catalogue .jl-card__preview,
  .jl-card--catalogue .jl-card__actions .jl-btn,
  .jl-pdp-card__view,
  .jl-pdp-card__actions .jl-btn { min-height: 44px; }
  .jl-grid { grid-template-columns: 1fr; }
  .jl-filters__content { grid-template-columns: 1fr; }
  .jl-filters__active { grid-column: auto; }
  .jl-bundlebar__inner { padding-block: 12px; flex-wrap: wrap; }
  .jl-bundlebar__lead { flex: 1 1 calc(100% - 52px); }
  .jl-bundlebar__title { font-size: 20px; line-height: 24px; }
  .jl-bundlebar .jl-btn { order: 3; width: 100%; }
  .jl-pager { align-items: flex-start; flex-direction: column; }
  .jl-pager__list { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .jl-suggestions { top: 62px; max-height: min(420px, calc(100vh - 150px)); }
  .jl-suggestions__list { max-height: min(355px, calc(100vh - 214px)); }
  .jl-suggestion__course,
  .jl-suggestion__item { align-items: stretch; flex-direction: column; padding: 12px; }
  .jl-suggestion__course-actions,
  .jl-suggestion__actions { width: 100%; justify-content: stretch; }
  .jl-suggestion__course-preview,
  .jl-suggestion__course-bundle,
  .jl-suggestion__bundle,
  .jl-suggestion__single { flex: 1 1 0; min-height: 44px; }
}
@media (max-width: 390px) {
  .jl-cat__hero-stage { min-height: 420px; padding-top: 38px; }
  .jl-cat__hero .jl-h1 { font-size: 34px; }
  .jl-cat__hero .jl-sub { font-size: 16px; line-height: 24px; }
  .jl-cat__pills { align-items: center; flex-direction: column; }
  .jl-pill, .jl-pill:first-child, .jl-pill--alt { width: min(255px, 100%); justify-content: flex-start; }
  .jl-results__bar { align-items: flex-start; flex-direction: column; }
  .jl-card--catalogue .jl-card__body { min-height: 230px; }
}

/* Catalogue closing band has its own square, 426px Figma component. Shared
   persona and product CTAs retain their rounded, content-driven treatment. */
@media (min-width: 1200px) {
  main[data-jl-catalogue] > .jl-ctaband--violet {
    width: 100%;
    height: 426px;
    min-height: 426px;
    padding: 0;
    border-radius: 0;
  }
  main[data-jl-catalogue] > .jl-ctaband--violet > .jl-wrap {
    position: relative;
    width: min(1920px, 100%);
    max-width: 1920px;
    height: 426px;
    margin-inline: auto;
    padding: 0;
  }
  main[data-jl-catalogue] > .jl-ctaband--violet h2 {
    position: absolute;
    top: 89px;
    left: 50%;
    width: 700px;
    margin: 0;
    color: #fff;
    font-size: 48px;
    line-height: 59px;
    letter-spacing: -.96px;
    transform: translateX(-50%);
  }
  main[data-jl-catalogue] > .jl-ctaband--violet h2 + p {
    position: absolute;
    top: 239px;
    left: 50%;
    width: min(1000px, calc(100% - 48px));
    max-width: none;
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: 18px;
    line-height: 24px;
    transform: translateX(-50%);
  }
  main[data-jl-catalogue] > .jl-ctaband--violet .jl-ctaband__actions {
    position: absolute;
    top: 280px;
    left: 50%;
    width: 291.17px;
    height: 56px;
    margin: 0;
    transform: translateX(-50%);
  }
  main[data-jl-catalogue] > .jl-ctaband--violet .jl-ctaband__actions .jl-btn {
    width: 291.17px;
    height: 56px;
    min-height: 56px;
    padding: 0 34px;
    border-radius: 28px;
    gap: 8px;
    color: #2e2177;
    font-size: 17px;
    line-height: 22px;
    white-space: nowrap;
  }
}

/* Route-specific desktop artboard rhythm. Figma supplies only 1920px frames;
   smaller screens keep the fluid layouts above. These rules reserve the
   authored section gaps without freezing live card counts or copy. */
@media (min-width: 1920px) {
  :is(.jl-hero--teacher-jeddai, .jl-hero--school-jeddai) {
    box-sizing: border-box;
    height: 645px;
    min-height: 645px;
    padding: 109px 0 80px;
  }

  :is(
    .jl-hero--teacher-study-guides,
    .jl-hero--student-study-guides,
    .jl-hero--school-study-guides
  ) {
    box-sizing: border-box;
    height: 604px;
    min-height: 604px;
    padding: 74px 0 44px;
  }

  /* The compact FAQ is the live, interactive 760x568.92 component shared by
     the three Study Guides frames. */
  .jl-section--faq-compact {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 568.92px;
    min-height: 568.92px;
    padding: 0;
    overflow: visible;
    background: #fbfaff;
  }
  .jl-section--faq-compact > .jl-wrap {
    position: relative;
    width: 760px;
    max-width: none;
    height: 568.92px;
    margin: 0 auto;
    padding: 0;
  }
  .jl-section--faq-compact .jl-section__head {
    position: absolute;
    left: 32px;
    top: 0;
    width: 696px;
    max-width: none;
    height: 65.5px;
    margin: 0;
    text-align: left;
  }
  .jl-section--faq-compact .jl-section__head .jl-eyebrow {
    height: 18.6px;
    margin: 0;
    font-size: 12px;
    line-height: 18.6px;
    letter-spacing: 1.68px;
  }
  .jl-section--faq-compact .jl-section__head .jl-h2 {
    height: 41.4px;
    margin-top: 5.5px;
    font-size: 36px;
    font-weight: 600;
    line-height: 41.4px;
    letter-spacing: -.36px;
    white-space: nowrap;
  }
  .jl-section--faq-compact .jl-faq {
    position: absolute;
    left: 32px;
    top: 130.78px;
    width: 696px;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .jl-section--faq-compact .jl-faq__item {
    min-height: 0;
    border: 0;
    box-shadow: inset 0 -1px #e3ddf5;
  }
  .jl-section--faq-compact .jl-faq__item h3 { margin: 0; }
  .jl-section--faq-compact .jl-faq__q {
    position: relative;
    align-items: flex-start;
    width: 696px;
    height: 76px;
    padding: 25.19px 0 0;
    font-size: 16px;
    line-height: 24.8px;
  }
  .jl-section--faq-compact .jl-faq__q[aria-expanded="true"] { height: 53px; }
  .jl-section--faq-compact .jl-faq__sign {
    position: absolute;
    top: 22px;
    right: 0;
    width: 12px;
    height: 31px;
  }
  .jl-section--faq-compact .jl-faq__sign::before { width: 12px; }
  .jl-section--faq-compact .jl-faq__sign::after { height: 12px; }
  .jl-section--faq-compact .jl-faq__a {
    width: 590.92px;
    max-width: none;
    min-height: 81.94px;
    padding: 13.23px 0 23.75px;
    color: #57517a;
    font-size: 14.5px;
    line-height: 22.48px;
  }
  .jl-section--faq-compact.is-interacted {
    height: auto;
    min-height: 568.92px;
    overflow: hidden;
  }
  .jl-section--faq-compact.is-interacted > .jl-wrap {
    width: 760px;
    height: auto;
    min-height: 568.92px;
    padding: 0 32px;
  }
  .jl-section--faq-compact.is-interacted .jl-section__head {
    position: static;
    width: 696px;
    margin: 0 0 65.28px;
  }
  .jl-section--faq-compact.is-interacted .jl-faq {
    position: static;
    width: 696px;
  }

  [data-jl-product="study-guides"] :is(.jl-section--loved-by, .jl-section--word-for-it) {
    margin-top: 154px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-guide-rail--popular { margin-top: 108px; }
  [data-jl-persona="student"][data-jl-product="study-guides"] .jl-guide-rail--popular { margin-top: 112px; }
  [data-jl-persona="school"][data-jl-product="study-guides"] .jl-guide-rail--popular { margin-top: 95px; }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-section--journey { margin-top: -203.11px; }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-section--faq-compact { margin-top: 111px; }
  [data-jl-persona="student"][data-jl-product="study-guides"] .jl-section--faq-compact { margin-top: -10.7px; }
  [data-jl-persona="school"][data-jl-product="study-guides"] .jl-section--faq-compact { margin-top: -22.11px; }

  [data-jl-product="study-guides"] .jl-ctaband {
    box-sizing: border-box;
    width: 100%;
    height: 426px;
    min-height: 426px;
    margin-top: 168.08px;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
  }
  [data-jl-product="study-guides"] .jl-ctaband > .jl-wrap {
    position: relative;
    width: 1920px;
    max-width: none;
    height: 426px;
    margin: 0 auto;
    padding: 0;
  }
  [data-jl-product="study-guides"] .jl-ctaband .jl-h2--display {
    position: absolute;
    left: 50%;
    top: 89px;
    width: 486.68px;
    max-width: none;
    height: 118px;
    margin: 0;
    font-size: 48px;
    font-weight: 800;
    line-height: 59px;
    letter-spacing: -.96px;
    translate: -50% 0;
  }
  [data-jl-persona="student"][data-jl-product="study-guides"] .jl-ctaband .jl-h2--display { width: 567px; }
  [data-jl-product="study-guides"] .jl-ctaband .jl-h2--display + p {
    position: absolute;
    left: 50%;
    top: 239px;
    width: min(1000px, calc(100% - 48px));
    max-width: none;
    height: 24px;
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: 18px;
    line-height: 24px;
    translate: -50% 0;
  }
  [data-jl-product="study-guides"] .jl-ctaband__actions {
    position: absolute;
    left: 50%;
    top: 280px;
    display: block;
    width: 291.17px;
    height: 56px;
    margin: 0;
    translate: -50% 0;
  }
  [data-jl-product="study-guides"] .jl-ctaband__actions .jl-btn {
    width: 291.17px;
    height: 56px;
    min-height: 56px;
    padding: 0 34px;
    border-radius: 28px;
    gap: 8px;
    color: #2e2177;
    font-size: 17px;
    line-height: 22px;
    white-space: nowrap;
  }

  :is(
    [data-jl-persona="generic"][data-jl-product="generic"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-ctaband {
    box-sizing: border-box;
    width: 100%;
    height: 413.63px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 90px 90px 0 0;
    background: #4b0fe0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-ctaband { margin-bottom: -.63px; }
  :is(
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-ctaband { margin-bottom: -1px; }
  :is(
    [data-jl-persona="generic"][data-jl-product="generic"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-ctaband__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }
  :is(
    [data-jl-persona="generic"][data-jl-product="generic"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-ctaband > .jl-wrap {
    position: relative;
    width: 1920px;
    max-width: none;
    height: 413.63px;
    margin: 0 auto;
    padding: 0;
  }

  [data-jl-persona="generic"][data-jl-product="generic"] .jl-ctaband .jl-eyebrow {
    position: absolute;
    left: 0;
    top: 110.2px;
    width: 1920px;
    max-width: none;
    height: 18.6px;
    margin: 0;
    font-size: 12px;
    line-height: 18.6px;
    letter-spacing: 1.68px;
    text-align: center;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-ctaband .jl-h2--display {
    position: absolute;
    left: 651px;
    top: 163px;
    width: 618px;
    max-width: none;
    height: 51px;
    margin: 0;
    font-size: 38px;
    line-height: 51px;
    letter-spacing: -.38px;
    white-space: nowrap;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-ctaband__actions {
    position: absolute;
    left: 873.08px;
    top: 250px;
    display: block;
    width: 173.84px;
    height: 51.25px;
    margin: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-ctaband__actions .jl-btn {
    width: 173.84px;
    height: 51.25px;
    min-height: 0;
    padding: 0;
    font-size: 15px;
    line-height: 23.25px;
  }

  :is(
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-ctaband .jl-eyebrow {
    position: absolute;
    left: 0;
    top: 99.2px;
    width: 1920px;
    max-width: none;
    height: 18.6px;
    margin: 0;
    font-size: 12px;
    line-height: 18.6px;
    letter-spacing: 1.68px;
    text-align: center;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-ctaband .jl-h2--display {
    position: absolute;
    left: 677px;
    top: 118.1px;
    width: 566px;
    max-width: none;
    height: 117.8px;
    margin: 0;
    font-size: 38px;
    line-height: 58.9px;
    letter-spacing: -.38px;
  }
  [data-jl-persona="school"][data-jl-product="jeddai"] .jl-ctaband__actions {
    position: absolute;
    left: 873.08px;
    top: 262.38px;
    display: block;
    width: 173.84px;
    height: 51.25px;
    margin: 0;
  }
  [data-jl-persona="school"][data-jl-product="jeddai"] .jl-ctaband__actions .jl-btn {
    width: 173.84px;
    height: 51.25px;
    min-height: 0;
    padding: 0;
    font-size: 15px;
    line-height: 23.25px;
  }
  [data-jl-persona="teacher"][data-jl-product="jeddai"] .jl-ctaband__actions {
    position: absolute;
    left: 50%;
    top: 262.38px;
    display: flex;
    width: max-content;
    height: 56px;
    margin: 0;
    flex-wrap: nowrap;
    gap: 14px;
    translate: -50% 0;
  }
  [data-jl-persona="teacher"][data-jl-product="jeddai"] .jl-ctaband__actions .jl-btn {
    height: 56px;
    min-height: 56px;
    padding: 16px 27px;
    font-size: 18px;
    line-height: 24px;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------- PDP ------- */
.jl-pdp__crumbs { font-size: 0.8125rem; color: var(--jl-muted); padding: 22px 0 0; }
.jl-pdp__crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--jl-muted);
  text-decoration: none;
}
.jl-pdp__crumbs a:hover { color: var(--jl-purple); text-decoration: underline; }
.jl-pdp__hero { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: 24px 0 clamp(32px, 4vw, 56px); align-items: start; }
.jl-pdp__hero > *, .jl-pdp__info, .jl-pdp__actions { min-width: 0; max-width: 100%; }
@media (max-width: 860px) { .jl-pdp__hero { grid-template-columns: 1fr; } }
.jl-pdp__cover-media img { border-radius: 18px; width: 100%; }
.jl-pdp__peek img { flex: none; width: 24px; height: 24px; }
.jl-pdp__peek, .jl-pdp__outline-peek { margin-top: 16px; }
.jl-pdp__info { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.jl-pdp__author { font-size: 1.0625rem; font-weight: 700; color: var(--jl-purple); }
.jl-pdp__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.jl-pdp__price { font-size: 1.0625rem; font-weight: 700; color: var(--jl-ink); }
.jl-pdp__price b { color: var(--jl-purple); }
.jl-pdp__price small { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--jl-muted); margin-top: 2px; }
.jl-pdp__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.jl-buybar {
  position: fixed; left: 50%; bottom: 16px; z-index: 50; background: #fff;
  width: min(810px, calc(100% - 32px)); border-radius: 18px; min-height: 91px;
  box-shadow: 0 -8px 30px rgba(46,33,119,.18); padding: 12px 0;
  transform: translate(-50%, calc(100% + 24px)); transition: transform .25s ease;
}
.jl-buybar.is-visible { transform: translate(-50%, 0); }
.jl-buybar__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.jl-buybar__inner > *, .jl-buybar__actions { min-width: 0; max-width: 100%; }
.jl-buybar__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.jl-buybar__who img { width: 34px; height: 44px; object-fit: cover; border-radius: 4px; flex: none; }
.jl-buybar__title { font-size: 0.9375rem; font-weight: 700; color: var(--jl-ink); }
.jl-buybar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .jl-buybar { transition: none; } }

@media (min-width: 480px) and (max-height: 480px) {
  .jl-bundlebar { position: static; padding: 6px 0; }
  .jl-bundlebar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    gap: 8px;
    width: calc(100% - 24px);
    margin-inline: auto;
  }
  .jl-bundlebar__lead { min-width: 0; }
  .jl-bundlebar__title { font-size: 0.875rem; line-height: 1.15; }
  .jl-bundlebar__sub { font-size: 0.6875rem; }
  .jl-bundlebar .jl-btn { min-height: 44px; padding: 9px 14px; font-size: 0.8125rem; }

  main[data-jl-catalogue] > .jl-bundlebar--catalogue {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    height: auto;
    min-height: 0;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__inner {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    width: calc(100% - 24px);
    height: auto;
    min-height: 0;
    padding: 0;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__lead {
    position: static;
    min-width: 0;
    gap: 8px;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__lead > div { width: auto; }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__title { font-size: 0.875rem; line-height: 1.15; }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__sub { font-size: 0.6875rem; }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-btn {
    position: static;
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 9px 14px;
    font-size: 0.8125rem;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue .jl-bundlebar__close { position: static; }

  .jl-suggestions {
    max-height: min(240px, calc(100dvh - 240px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .jl-suggestions__list { max-height: min(183px, calc(100dvh - 297px)); }

  .jl-buybar { display: none; }
}

/* On phone and tablet layouts the empty promotion remains in flow, but once
   a guide is selected this compact tray keeps bundle review reachable without
   making someone scroll past the complete catalogue. */
.jl.has-bundle-selection {
  padding-bottom: calc(94px + env(safe-area-inset-bottom));
}

@media (max-width: 1199px) {
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 72px;
    padding: 0;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-bundlebar__inner {
    position: static;
    display: grid;
    width: min(760px, 100%);
    height: auto;
    min-height: 72px;
    margin-inline: auto;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-bundlebar__lead {
    position: static;
    min-width: 0;
    gap: 0;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-bundlebar__lead > div {
    width: auto;
    min-width: 0;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-bundlebar__books,
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-btn img,
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-bundlebar__close {
    display: none;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-bundlebar__title {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-bundlebar__sub {
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 16px;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-btn {
    position: static;
    order: initial;
    width: auto;
    height: auto;
    min-height: 44px;
    padding: 9px 14px;
    gap: 0;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 390px) {
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-bundlebar__title {
    font-size: 14px;
    line-height: 18px;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-bundlebar__sub {
    font-size: 11px;
    line-height: 14px;
  }
  main[data-jl-catalogue] > .jl-bundlebar--catalogue.has-selection .jl-btn {
    padding-inline: 12px;
    font-size: 12.5px;
  }
}

.jl-modules { display: flex; flex-direction: column; gap: 10px; }
.jl-module { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--jl-rule); overflow: hidden; }
.jl-module__q {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 16px 20px; cursor: pointer;
  background: none; border: 0; text-align: left; font-family: var(--jl-font);
}
.jl-module__n { font-size: 0.8125rem; font-weight: 800; color: var(--jl-purple); width: 26px; flex: none; font-variant-numeric: tabular-nums; }
.jl-module__t { flex: 1 1 auto; min-width: 0; }
.jl-module__t b { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--jl-ink); }
.jl-module__t span { font-size: 0.8125rem; color: var(--jl-muted); }
.jl-module__count { flex: none; font-size: 0.75rem; font-weight: 700; color: var(--jl-purple); background: var(--jl-lilac); border-radius: var(--jl-pill); padding: 5px 12px; }
.jl-module__a { padding: 0 20px 18px 62px; font-size: 0.875rem; color: var(--jl-body); }
.jl-module__a[hidden] { display: none; }
.jl-modules__more { display: flex; justify-content: center; margin-top: 20px; }
.jl-modules__stats { display: flex; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; }
.jl-modules__stats .jl-stat__n { font-size: 1.75rem; }

/* ---------------------------------------------------------- bundle modal - */
.jl-modal[hidden] { display: none; }
.jl-modal {
  position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center;
  grid-template-columns: minmax(0, 1fr);
  background: rgba(18,6,61,.55); padding: 20px; overflow-y: auto;
  backdrop-filter: blur(4px);
}
.jl-modal__box {
  background: #fff; border-radius: 24px; width: min(1024px, 100%);
  min-width: 0;
  box-shadow: 0 30px 80px rgba(20,10,60,.35); display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100vh - 40px);
}
.jl-modal__head {
  min-height: 114px; display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  padding: 28px 32px 21px; border-bottom: 1px solid var(--jl-rule-soft);
}
.jl-modal__box.is-step-2 .jl-modal__head { min-height: 138px; }
.jl-modal__heading { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.jl-modal__title-row { min-width: 0; display: flex; align-items: center; gap: 12px; }
.jl-modal__mark { flex: 0 0 25.4px; display: block; width: 25.4px; height: 28px; object-fit: contain; transform: rotate(180deg); }
.jl-modal__head h2 { min-width: 0; margin: 0; font-size: 1.625rem; line-height: 1.08; font-weight: 800; letter-spacing: -.52px; color: #000; overflow-wrap: anywhere; }
.jl-modal__head h2 em { font-style: normal; color: var(--jl-purple); }
.jl-modal__head p { max-width: 904px; margin: 0; font-size: 0.90625rem; line-height: 1.25; color: var(--jl-muted); }
.jl-modal__head p b { color: #000; font-weight: 600; }
.jl-modal__close {
  flex: none; width: 44px; height: 44px; border-radius: 22px; border: 0; cursor: pointer;
  background: var(--jl-rule-soft); color: #2e2177; display: grid; place-items: center;
}
.jl-modal__body {
  flex: 1 1 544px;
  min-height: 0;
  height: 544px;
  padding: 40px;
  overflow-y: auto;
}
.jl-modal__box.is-step-2 .jl-modal__body { flex-basis: 547px; height: 547px; padding: 28px 32px; }
.jl-modal__section-title {
  width: 100%; margin: 0 0 60px; color: #000; text-align: center;
  font: 700 1.25rem/1.2 var(--jl-font); letter-spacing: -.52px;
}
.jl-modal__foot {
  flex: 0 0 auto; min-height: 85px; display: flex; align-items: center; gap: 20px; justify-content: space-between;
  background: #fbfaff; border-top: 1px solid var(--jl-rule-soft); padding: 18px 32px;
}
.jl-modal__selection { min-width: 0; display: flex; align-items: center; gap: 12px; }
.jl-modal__selection > div:last-child { min-width: 0; }
.jl-modal__covers { min-width: 32px; display: flex; align-items: center; padding-left: 0; }
.jl-modal__cover {
  width: 32px; height: 42px; margin-left: -15px; border-radius: 4px;
  display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--jl-purple);
  border: 1px solid #fff; box-shadow: 0 4px 10px rgba(46,33,119,.22);
  font-size: 12px; font-weight: 800; text-transform: uppercase;
}
.jl-modal__cover:first-child { margin-left: 0; }
.jl-modal__cover:nth-child(2) { transform: rotate(9.22deg); }
.jl-modal__cover:nth-child(3) { transform: rotate(-6.57deg); }
.jl-modal__cover img { width: 100%; height: 100%; object-fit: cover; }
.jl-modal__tally { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.25rem; line-height: 1; font-weight: 800; color: #000; white-space: nowrap; }
.jl-modal__tally b { color: var(--jl-purple); }
.jl-modal__tally span { display: inline-flex; align-items: center; gap: 8px; color: var(--jl-purple); margin-left: 0; }
.jl-modal__tally span::before { content: ""; width: 1px; height: 18px; background: var(--jl-rule); }
.jl-modal__status { min-height: 18px; margin: 3px 0 0; color: var(--jl-muted); font-size: .75rem; line-height: 1.4; }
.jl-modal__status[data-state="error"] { color: #a11934; }
.jl-modal__status[data-state="success"] { color: #166a3c; }
.jl-modal__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.jl-modal__actions [data-jl-modal-close] { display: none; }
.jl-modal__box.is-step-2 .jl-modal__actions [data-jl-modal-close] { display: inline-flex; }
.jl-modal__scope {
  width: fit-content; max-width: 100%; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 8px; border: 0; background: transparent;
}
.jl-modal__scope > span {
  min-height: 21px; display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 11px; background: #f1e6fc; color: var(--jl-purple);
  font: 700 .6875rem/1 var(--jl-font); letter-spacing: .66px; white-space: nowrap;
}
.jl-modal__scope > span:nth-child(2) { background: var(--jl-rule-soft); }
.jl-modal__update {
  width: 80px; height: 21px; min-height: 21px; border: 1px solid var(--jl-purple); border-radius: 5px; padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 0; cursor: pointer;
  font: 700 .6875rem/1 var(--jl-font); letter-spacing: .66px; text-transform: uppercase;
  color: var(--jl-purple); background: #fff;
}
.jl-modal__update img { width: 13px; height: 13px; }

.jl-steppers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.jl-stepper {
  position: relative; width: 100%; height: 380px; overflow: visible;
  background: var(--jl-lilac-soft); border: 2px dashed #8961d9; border-radius: 20px;
  padding: 30px;
}
.jl-stepper__options {
  width: 100%; height: 100%; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px; scrollbar-width: thin;
}
.jl-stepper__tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: #8961d9; color: #fff; border-radius: var(--jl-pill);
  padding: 4px 16px; font-size: 1.25rem; line-height: 1.2; font-weight: 700; letter-spacing: -.52px; white-space: nowrap;
}
.jl-opt {
  width: 100%; border-radius: 13px; padding: 12px 26px; cursor: pointer; font-family: var(--jl-font);
  font-size: 1.25rem; font-weight: 800; text-transform: uppercase; text-align: center;
  background: #fff; color: #6f6a8c; border: 1px solid #a29faf;
  box-shadow: 0 4px 1.9px rgba(91,68,136,.24);
}
.jl-opt[aria-pressed="true"] { box-shadow: none; }
.jl-opt:hover { border-color: var(--jl-purple); color: var(--jl-purple); }
.jl-opt[aria-pressed="true"] { background: var(--jl-purple); color: #fff; border-color: var(--jl-purple); }
.jl-opt--tall { min-height: 149px; border-radius: 22px; padding: 20px 40px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 1.5rem; }
.jl-opt--tall[aria-pressed="true"] { min-height: 147px; }
.jl-opt--tall svg { width: 68px; height: 68px; }
.jl-stepper--subject .jl-opt { padding-inline: 16px; font-size: 1.25rem; text-transform: uppercase; }

.jl-textpick__groups { display: grid; gap: 24px; }
.jl-textpick__section { display: grid; gap: 10px; }
.jl-textpick__section + .jl-textpick__groups { margin-top: 24px; }
.jl-textpick__section-title {
  margin: 0;
  color: #7200e0;
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 1.44px;
  text-transform: uppercase;
}
.jl-textpick__loading { min-height: 80px; margin: 0; display: grid; place-items: center; color: var(--jl-muted); }
.jl-textpick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; list-style: none; margin: 0; padding: 0; }
.jl-textpick--core { grid-auto-rows: minmax(46px, auto); row-gap: 20px; }
.jl-textpick > li { list-style: none; margin: 0; display: flex; }
.jl-textpick > li > .jl-textpick__item { width: 100%; }
.jl-textpick--core > li > .jl-textpick__item { height: auto; min-height: 46px; align-self: stretch; }
.jl-textpick__item {
  min-height: 56px; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--jl-rule); cursor: pointer; text-align: left;
  font-family: var(--jl-font); border: 0; width: 100%;
}
.jl-textpick__item[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--jl-rule); background: #f6f0fe; }
.jl-textpick__item--core { cursor: default; }
.jl-textpick__item:disabled { opacity: .45; cursor: not-allowed; }
.jl-textpick__box { flex: none; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px #dbd8e6; background: #fff; display: grid; place-items: center; color: #fff; }
.jl-textpick__item[aria-pressed="true"] .jl-textpick__box { background: var(--jl-purple); box-shadow: none; }
.jl-textpick__item--core .jl-textpick__box { background: #9787b5; box-shadow: inset 0 0 0 1.5px #6b5891; }
.jl-textpick__box.is-checked::after,
.jl-textpick__item[aria-pressed="true"] .jl-textpick__box::after {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}
.jl-textpick__t { font-size: 0.875rem; font-weight: 700; color: var(--jl-ink); }
.jl-textpick__b { font-size: 0.75rem; color: var(--jl-muted); }
.jl-modal :focus-visible { outline: 3px solid var(--jl-purple); outline-offset: 3px; }

/* On short and landscape screens the header and footer cannot remain pinned
   without crushing the picker. Let the overlay own one continuous scroll so
   every option and action stays reachable at browser zoom and small heights. */
@media (max-height: 700px) {
  .jl-modal { place-items: start center; }
  .jl-modal__box { max-height: none; overflow: visible; }
  .jl-modal__head,
  .jl-modal__body,
  .jl-modal__foot { flex: none; }
  .jl-modal__body { height: auto !important; min-height: 0; overflow: visible; }
}

@media (min-width: 761px) and (max-width: 1000px) {
  .jl-modal__body { padding-inline: 24px; }
  .jl-steppers { gap: 16px; }
  .jl-stepper { padding-inline: 14px; }
}

@media (max-width: 760px) {
  /* Let the white panel grow with its contents. A backdrop-filter on this
     scrolling ancestor would also capture the fixed footer and scroll it away. */
  .jl-modal { padding: 0; place-items: start stretch; backdrop-filter: none; }
  .jl-modal__box { width: 100%; min-height: 100%; min-height: 100dvh; max-height: none; border-radius: 0; overflow: visible; }
  .jl-modal__head,
  .jl-modal__box.is-step-2 .jl-modal__head { flex: none; min-height: 0; position: sticky; top: 0; z-index: 5; padding: 18px 16px; background: #fff; }
  .jl-modal__heading { gap: 9px; }
  .jl-modal__title-row { gap: 10px; }
  .jl-modal__mark { flex-basis: 25.4px; width: 25.4px; height: 28px; }
  .jl-modal__head h2 { font-size: 1.25rem; }
  .jl-modal__head p { font-size: .8125rem; }
  .jl-modal__close { width: 44px; height: 44px; }
  .jl-modal__body,
  .jl-modal__box.is-step-2 .jl-modal__body { flex: none; height: auto; min-height: 0; padding: 32px 16px calc(var(--jl-modal-footer-height, 156px) + 16px); overflow: visible; }
  .jl-modal__section-title { margin-bottom: 48px; font-size: 1.125rem; }
  .jl-modal__scope { flex-wrap: wrap; gap: 6px; }
  .jl-modal__update { width: auto; height: 44px; min-height: 44px; padding-inline: 14px; }
  .jl-steppers { display: grid; grid-template-columns: 1fr; gap: 38px; }
  .jl-stepper { width: 100%; height: auto; max-height: none; padding: 30px 18px 18px; }
  .jl-stepper__options { height: auto; max-height: 312px; }
  .jl-textpick { grid-template-columns: 1fr; }
  .jl-modal__foot {
    position: fixed; z-index: 6; right: 0; bottom: 0; left: 0;
    gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    flex-wrap: wrap;
    box-shadow: 0 -8px 24px rgba(46,33,119,.12);
  }
  .jl-modal__selection { width: 100%; flex: 1 1 100%; }
  .jl-modal__tally { font-size: 1rem; line-height: 1.25; flex-wrap: wrap; white-space: normal; }
  .jl-modal__tally span { min-width: 0; max-width: 100%; }
  .jl-modal__actions { width: 100%; flex-wrap: nowrap; }
  .jl-modal__actions .jl-btn { min-width: 0; justify-content: center; }
  .jl-modal__actions [data-jl-modal-close] { flex: 0 1 96px; }
  .jl-modal__actions .jl-btn:not([data-jl-modal-close]) { flex: 1 1 auto; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .jl-modal__head,
  .jl-modal__box.is-step-2 .jl-modal__head,
  .jl-modal__foot { position: static; }
  .jl-modal__body,
  .jl-modal__box.is-step-2 .jl-modal__body { padding-bottom: 32px; }
}

/* -------------------------------------------------------------- footer --- */
.jl-foot { background: var(--jl-ink-deep); color: rgba(255,255,255,.78); padding: clamp(40px, 5vw, 64px) 0 0; }
.jl-foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
@media (max-width: 860px) { .jl-foot__grid { grid-template-columns: 1fr; } }
/* The footer has its own two-colour lockup: coloured loop mark, white wordmark. */
.jl-foot__logo {
  display: block;
  width: min(213px, 100%);
  height: auto;
  filter: none;
}
.jl-foot__tag { font-size: 0.875rem; margin-top: 14px; max-width: 34ch; }
.jl-foot h3 { font-size: 0.6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.jl-foot a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 0.875rem; }
.jl-foot a:hover { color: #fff; text-decoration: underline; }
.jl-foot__list { display: flex; flex-direction: column; gap: 8px; }
.jl-foot__list a,
.jl-foot__bar nav a { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; }
.jl-foot__news input {
  width: 100%; min-height: 44px; border: 0; border-radius: 8px; padding: 11px 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.1); color: #fff; font-family: var(--jl-font); font-size: 0.875rem;
}
.jl-foot__news input::placeholder { color: rgba(255,255,255,.5); }
.jl-foot__news button {
  width: 100%; min-height: 44px; border: 0; border-radius: 8px; padding: 11px 14px; cursor: pointer;
  background: var(--jl-purple-light); color: #fff; font-family: var(--jl-font); font-size: 0.875rem; font-weight: 700;
}
.jl-foot__news button:hover { filter: brightness(1.08); }
.jl-foot__newsletter-form .gform_heading { display: none; }
.jl-foot__newsletter-form .gform_fields { display: grid; gap: 9px; margin: 0; padding: 0; }
.jl-foot__newsletter-form .gfield { position: relative; margin: 0; padding: 0; list-style: none; }
.jl-foot__newsletter-form .gfield_label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.jl-foot__newsletter-form input:not([type="submit"]) { margin: 0; }
.jl-foot__newsletter-form .gform_footer { margin: 9px 0 0; padding: 0; }
.jl-foot__newsletter-form input[type="submit"] {
  width: 100%; min-height: 44px; margin: 0; border: 0; border-radius: 100px;
  background: var(--jl-purple-light); color: #fff; font: 700 .875rem/1 var(--jl-font); cursor: pointer;
}
.jl-foot__newsletter-form .validation_message,
.jl-foot__newsletter-form .gform_validation_errors { color: #fff; font-size: 12px; line-height: 1.25; }
.jl-foot__newsletter-form .gform_ajax_spinner { width: 18px; height: 18px; margin: 8px auto 0; }
.jl-foot .jl-foot__news > .jl-btn--white { color: var(--jl-purple); }
.jl-foot__bar {
  margin-top: clamp(32px, 4vw, 52px); border-top: 1px solid rgba(255,255,255,.14);
  padding: 20px 0; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 0.75rem;
}
.jl-foot__bar nav { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------------------------------------------------- guide preview ----- */
.jl-preview {
  width: min(1120px, calc(100vw - 32px));
  height: min(820px, calc(100dvh - 32px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: var(--jl-ink);
  box-shadow: 0 30px 100px rgba(18,6,61,.35);
}
.jl-preview::backdrop { background: rgba(18,6,61,.72); backdrop-filter: blur(4px); }
.jl-preview[open],
.jl-preview.is-open {
  position: fixed;
  z-index: 100000;
  inset: 16px;
  display: flex;
  flex-direction: column;
}
.jl-preview__head {
  display: flex;
  flex: 0 0 auto;
  min-height: 68px;
  padding: 14px 18px 14px 24px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--jl-rule);
}
.jl-preview__head h2 { margin: 0; font-size: clamp(18px, 2vw, 24px); line-height: 1.25; }
.jl-preview__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  flex-direction: column;
  background: #edeaf6;
}
.jl-preview__pages { flex: 1 1 auto; min-height: 0; padding: 16px; overflow: auto; overscroll-behavior: contain; }
.jl-preview__pages canvas { display: block; width: 100%; max-width: 840px; height: auto; margin: 0 auto; background: #fff; box-shadow: 0 2px 12px rgba(18,6,61,.12); }
.jl-preview__pagination { display: flex; align-items: center; justify-content: center; gap: 8px; }
.jl-preview__pagination button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--jl-rule); border-radius: 12px; background: #fff; color: var(--jl-ink); font: inherit; cursor: pointer; }
.jl-preview__pagination button:disabled { opacity: .4; cursor: default; }
.jl-preview__pagination span { min-width: 92px; text-align: center; font-size: 14px; }
.jl-preview__state {
  display: grid;
  width: min(520px, calc(100% - 32px));
  min-height: 100%;
  margin: auto;
  padding: 32px;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: var(--jl-ink);
  text-align: center;
}
.jl-preview__state p { max-width: 52ch; margin: 0; line-height: 1.55; }
.jl-preview__spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #d8c9f4;
  border-top-color: var(--jl-purple);
  border-radius: 50%;
  animation: jl-status-spin .8s linear infinite;
}
.jl-preview__state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.jl-preview__state-actions .jl-btn,
.jl-preview__fallback .jl-btn { min-height: 44px; }
.jl-preview__fallback {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px 24px;
  min-height: 56px;
  padding: 6px 16px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--jl-rule);
  background: #fff;
}
.jl-preview__focus-loop {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}
.jl-module[hidden] { display: none; }

/* ==================================================== DECORATIVE WASHES === */
/* Study-guide heroes carry two stacked gradient washes in the design:
   a warm cream bleed from the top-right and a lilac glow from the top-left. */
[data-jl-product="study-guides"] .jl-hero {
  position: relative;
  isolation: isolate;
}
[data-jl-product="study-guides"] .jl-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(253, 250, 223, 1) 0%, rgba(251, 250, 255, 0) 58%),
    radial-gradient(90% 80% at 0% 0%,   rgba(243, 232, 254, 1) 0%, rgba(251, 250, 255, 0) 60%);
}

/* JeddAI heroes use the lilac glow alone. */
.jl--jeddai .jl-hero { position: relative; isolation: isolate; }
.jl--jeddai .jl-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 70% at 8% 0%, rgba(243, 232, 254, .9) 0%, rgba(250, 248, 255, 0) 62%);
}

/* Exact catalogue badge and cover primitives; composed natively, never as a
   full-frame screenshot. Their desktop positions are measured from Figma. */
.jl-burst {
  --jl-burst-copy-angle: 12.321786deg;
  position: absolute;
  z-index: 2;
  top: -210px;
  left: 1315px;
  width: 718.316px;
  height: 718.316px;
  pointer-events: none;
}
.jl-burst img {
  position: absolute; top: 50%; left: 50%; max-width: none;
  /* These nine-point SVGs are cropped to their painted bounds. Their radial
     centre is below the image-box midpoint; rotate around that true centre. */
  transform-origin: 50% 51.55456%;
  transform: translate(-50%, -51.55456%) rotate(var(--jl-burst-star-angle, 0deg));
}
/* Absolute Figma rotations after composing the rotated parent and each star.
   Use the exported artwork widths, excluding the original square's insets. */
.jl-burst__large { width: 695.274px; }
.jl-burst__mid { width: 537.705px; --jl-burst-star-angle: -15deg; }
.jl-burst__small { width: 423.788px; --jl-burst-star-angle: -30deg; }
/* Keep the badge and caption on one rotated axis through the stars' centre. */
.jl-burst__content {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 298px;
  /* Small Sen ink correction in the group's own axes, before page scaling. */
  transform: translate(-50%, -50%) rotate(var(--jl-burst-copy-angle)) translate(-.35px, 2.3px);
}
.jl-burst__symbol { position: relative; width: 91.368px; height: 91.368px; }
.jl-burst img.jl-burst__tiny {
  width: 84.4165px;
  transform-origin: 50% 51.445%;
  transform: translate(-50%, -51.445%) rotate(calc(-30deg - var(--jl-burst-copy-angle)));
}
.jl-burst__pct {
  position: absolute; inset: 0; display: grid; place-items: center; margin: 0;
  color: #fff; font-size: 36px; font-weight: 800; line-height: 40px; letter-spacing: -1.38px;
  transform: translate(-.8px, .16px);
}
.jl-burst__copy {
  width: 298px;
  margin: 0;
  color: #5d2694;
  font-size: 36px;
  font-weight: 800;
  line-height: 40px;
  letter-spacing: -1.38px;
  text-align: center;
}

/* Reduced motion: no marquee, no smooth scroll, no bar transition. */
@media (prefers-reduced-motion: reduce) {
  .jl-persona, .jl-card, .jl-buybar { transition: none; }
  .jl-persona:hover, .jl-card:hover { transform: none; }
}

/* ----------------------------------------------------------- print -------- */
@media print {
  .jl-bundlebar, .jl-buybar, .jl-modal, .jl-marquee, .jl-carousel__nav { display: none !important; }
  .jl { background: #fff; }
}

/* Graceful gaps where an asset could not be exported from the design. */
.jl-row--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.jl-tabs__placeholder { aspect-ratio: 802 / 451; background: var(--jl-lilac); }

/* ==================================================== SITE CHROME ========= */
/* The theme's persona nav already carries the design's four items and the
   fly-cart button. These rules restyle that existing chrome to the Figma
   header, scoped to .jl-page:not(.logged-in) so the sign-up pages keep their current look. */

.jl-page:not(.logged-in) #masthead { background: #fff; }

.jl-page:not(.logged-in) .primary-menu--persona > li > a {
  font-family: var(--jl-font);
  font-size: 18px;
  font-weight: 400;
  color: var(--jl-body);
  white-space: nowrap;
}

/* Log In / Book a call — 32px pills, 12px 20px, Sen SemiBold 18/24. */
.jl-page:not(.logged-in) #extras .wp-block-button__link,
.jl-page:not(.logged-in) #extras .button {
  font-family: var(--jl-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  padding: 12px 20px;
  border-radius: var(--jl-pill);
}

/* Cart chip: lilac tile, purple label, purple count badge. */
.jl-page:not(.logged-in) .fly-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background: var(--jl-lilac);
  color: var(--jl-purple);
  font-family: var(--jl-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
}
.jl-page:not(.logged-in) .fly-cart-btn:hover { background: #e7d8fb; color: var(--jl-purple); }
.jl-page:not(.logged-in) .fly-cart-btn i { font-size: 20px; }
.jl-page:not(.logged-in) .fly-cart-btn__label { color: inherit; }

/* The count badge is drawn from the button's own data-qty, so it cannot
   disagree with the cart it links to. */
.jl-page:not(.logged-in) .fly-cart-btn::after {
  content: attr(data-qty);
  position: absolute;
  top: -10px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 30px;
  background: var(--jl-purple);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.jl-page:not(.logged-in) .fly-cart-btn[data-qty="0"]::after { display: none; }

/* The design's promo plate, reproduced to its drawn geometry. Percentages are
   the Figma offsets over the 811 x 455.817 plate, so it holds at any width. */
.jl-video--plate {
  position: relative;
  width: 100%;
  aspect-ratio: 811 / 455.817;
  background: #d9d9d9;
  border-radius: 24px;
  overflow: hidden;
  cursor: default;
}
.jl-video__wordmark {
  position: absolute;
  left: 11.497%;   /* 93.24 / 811   */
  top: 30.194%;    /* 137.63 / 455.817 */
  font-family: "Bebas Neue", "Sen", sans-serif;
  font-weight: 400;
  font-size: 19.069cqw;         /* 154.652 / 811 */
  line-height: 1;
  color: rgba(0, 0, 0, .17);
  white-space: nowrap;
}
.jl-hero__media, .jl-videoband > div { container-type: inline-size; }
@supports not (font-size: 1cqw) {
  .jl-video__wordmark { font-size: clamp(2rem, 9.5vw, 9.7rem); }
}
.jl-video__triangle {
  position: absolute;
  left: 42.244%;   /* 342.6 / 811 */
  top: 39.286%;    /* 179.07 / 455.817 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6.023cqw 0 6.023cqw 10.432cqw;  /* 97.675 square, rotated 90deg = pointing right */
  border-color: transparent transparent transparent #7200e0;
}
@supports not (width: 1cqw) {
  .jl-video__triangle { border-width: 34px 0 34px 58px; }
}

/* ================================================== ARTBOARD MODE ========= */
/*
 * The Figma file is a single fixed 1920 canvas with no tablet or mobile frame,
 * so below 1920 there are two possible readings of "matches the design":
 *
 *   1. Reflow  — the shipped default. Usable on a phone, but the layout below
 *                1920 is authored here rather than drawn by a designer.
 *   2. Artboard — render the 1920 canvas and scale it proportionally. Literally
 *                the design at every width, down to the pixel, because it IS
 *                the artboard; just zoomed. Unreadable on a phone, which is why
 *                it is not the default.
 *
 * Artboard mode exists so design review can diff any viewport against the frame
 * without arguing about invented breakpoints. Enable per-request with
 * ?jl-artboard=1, or permanently with add_filter('jl_artboard_mode','__return_true').
 */
.jl-artboard-viewport {
  width: 100%;
  overflow: hidden;
}
.jl-artboard-host {
  width: 1920px;
  transform: scale(var(--jl-artboard-scale, 1));
  transform-origin: top left;
}
.jl-artboard-host #content > .jl {
  width: 1920px;
  /* Every clamp() in the system resolves against the 1920 canvas, not the
     viewport, so the scaled output is proportionally identical to the frame. */
  --jl-gutter: 120px;
}

/*
 * Artboard overrides.
 *
 * The scaling host alone is not enough: media queries and vw-based clamp()
 * both resolve against the VIEWPORT, not the 1920 canvas, so a phone-width
 * artboard render would still reflow and still shrink its type. Everything
 * viewport-dependent is restated here at the value 1920 resolves to, so the
 * canvas is the frame regardless of the window it is scaled into.
 *
 * Kept last in the file so it wins over every breakpoint above.
 */
.jl-artboard-host #content > .jl { font-size: 18px; }
.jl-artboard-host .jl-site-header__nav { display: block; }
.jl-artboard-host .jl-site-header__tools { display: flex; }
.jl-artboard-host .jl-site-header__mobile { display: none; }

/* type — each is the upper bound its clamp() reaches at 1920 */
.jl-artboard-host .jl-h1          { font-size: 46px; }
.jl-artboard-host .jl-h1--hero    { font-size: 68px; }
.jl-artboard-host .jl-h2          { font-size: 36px; }
.jl-artboard-host .jl-h2--display { font-size: 48px; }
.jl-artboard-host .jl-h3          { font-size: 32px; }
.jl-artboard-host .jl-sub         { font-size: 18px; }

/* section rhythm */
.jl-artboard-host .jl-section   { padding: 92px 0; }
.jl-artboard-host .jl-hero      { padding: 110px 0 64px; }
.jl-artboard-host .jl-ctaband   { padding: 88px 0; }
.jl-artboard-host .jl-journey   { padding: 72px 56px; }
.jl-artboard-host .jl-case      { padding: 56px; }
.jl-artboard-host .jl-compare   { padding: 64px 56px; }

/* layout — the desktop definitions, re-asserted past every breakpoint */
.jl-artboard-host .jl-cat__body      { grid-template-columns: 272px minmax(0, 1fr); gap: 36px; }
.jl-artboard-host .jl-grid           { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jl-artboard-host .jl-personas__grid { flex-wrap: nowrap; gap: 40px; }
.jl-artboard-host .jl-tabs__layout   { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 48px; }
.jl-artboard-host .jl-row            { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.jl-artboard-host .jl-row--single    { grid-template-columns: minmax(0, 1fr); }
.jl-artboard-host .jl-row--flip .jl-row__text { order: 2; }
.jl-artboard-host .jl-quotes         { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jl-artboard-host .jl-case__grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.jl-artboard-host .jl-videoband {
  width: 1096px; max-width: 1096px; min-height: 386.13px; margin-inline: auto;
  grid-template-columns: 451.42px 1fr; gap: 44.58px; padding: 52px; border-radius: 20px;
}
.jl-artboard-host .jl-videoband .jl-video {
  width: 451.42px; height: 282.13px; aspect-ratio: auto; border-radius: 14px;
}
.jl-artboard-host .jl-pdp__hero      { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; }
.jl-artboard-host .jl-foot__grid     { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 56px; }
.jl-artboard-host .jl-filters        { position: sticky; top: 20px; }
.jl-artboard-host .jl-capture        { flex-direction: row; align-items: center; border-radius: var(--jl-pill); padding: 8px 8px 8px 27px; }
.jl-artboard-host .jl-burst          { display: grid; }
.jl-artboard-host .jl-marquee__track { animation: jl-marquee 40s linear infinite; flex-wrap: nowrap; width: max-content; }

/* ------------------------------------------------ syllabus panel ---------- */
.jl-syl__section-title {
  max-width: 1439px;
  margin: 0 auto 47px;
  text-align: left;
}
.jl-syl {
  background: #fff; border-radius: 24px; padding: 40px 36px;
  display: flex; flex-direction: column; gap: 35px; align-items: flex-start;
  box-shadow: 0 4px 5.6px rgba(119,111,151,.16), inset 0 0 0 1px var(--jl-rule);
  max-width: 1439px; margin-inline: auto;
}
.jl-syl__tabs {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 44px;
  background: #f4f4f4; border: 1px solid #888691;
  box-shadow: inset 0 1px 7.4px rgba(68,54,145,.46);
}
.jl-syl__tab {
  border: 0; cursor: pointer; padding: 11px 18px; border-radius: 22px;
  font-family: var(--jl-font); font-size: 18px; font-weight: 700;
  background: transparent; color: #6f6a8c;
}
.jl-syl__tab[aria-selected="true"] {
  background: linear-gradient(180deg, #2e2177 0%, #462eb1 100%); color: #fff;
}
.jl-syl__panel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.jl-syl__panel[hidden] { display: none; }
.jl-syl__head { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.jl-syl__title { font-size: 30px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: #000; }
.jl-syl__meta  { font-size: 13px; font-weight: 600; color: var(--jl-purple); }
.jl-syl__blurb { font-size: 16px; color: var(--jl-body); line-height: 1.55; max-width: 68ch; margin-inline: 0; }

.jl-syl__rail { position: relative; min-width: 0; }
.jl-syl__cards {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 20px) / 3);
  gap: 10px;
  padding-bottom: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.jl-syl__card {
  background: var(--jl-page); border: 1px solid #ae9ede; border-radius: 16px;
  min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 30px;
  overflow: hidden; scroll-snap-align: start;
}
.jl-syl__cardhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jl-syl__cardtitle { font-size: 20px; font-weight: 700; color: var(--jl-ink); }
.jl-syl__year {
  background: var(--jl-lilac); color: var(--jl-purple); font-size: .8125rem; font-weight: 700;
  padding: 4px 10px; border-radius: 11px;
}
/* Straight, overlapping stack of real catalogue covers from the Figma panel. */
.jl-syl__covers {
  min-height: 157px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 31px 0 4px;
}
.jl-syl__cover {
  position: relative;
  z-index: 1;
  width: 117px;
  height: auto;
  aspect-ratio: 117 / 157;
  flex: 0 1 117px;
  min-width: 0;
  margin-right: -31px;
  overflow: hidden;
  border-radius: 3.759px 7.518px 7.518px 3.759px;
  background: #fff;
  box-shadow: 0 10px 20px -10px rgba(46,33,119,.58), 0 1px 2px rgba(46,33,119,.22);
}
.jl-syl__cover:nth-child(2) { z-index: 2; }
.jl-syl__cover:nth-child(3) { z-index: 3; }
.jl-syl__cover:nth-child(n+4) { z-index: 4; }
.jl-syl__cover:last-child { margin-right: 0; }
.jl-syl__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jl-syl__cover-title {
  display: block;
  padding: 30px 11px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 11px;
  line-height: 1.28;
  color: #080414;
}
.jl-syl__cover-author {
  display: block;
  margin: 12px 11px 0;
  padding-top: 7px;
  border-top: 1px solid rgba(129,129,129,.5);
  color: #626262;
  font-size: 7px;
  line-height: 1.3;
}

/* The controls sit on the card-rail edge in the Figma composition. */
.jl-syl__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  translate: 0 -50%;
  box-shadow: 0 5px 16px rgba(46,33,119,.16);
}
.jl-syl__arrow--prev { left: -22px; }
.jl-syl__arrow--next { right: -22px; }

/* Text-only fallback when a published product has no catalogue cover. */
.jl-syl__spines { display: flex; align-items: flex-end; padding-left: 4px; }
.jl-syl__spine {
  width: 74px; height: 108px; margin-right: -31px; flex: none;
  background: #fff; border-radius: 4px 8px 8px 4px;
  box-shadow: 0 6px 16px -8px rgba(46,33,119,.5);
  border-left: 3px solid rgba(184,184,184,.35);
  display: flex; align-items: center; justify-content: center; padding: 8px 6px;
  font-family: Georgia, serif; font-size: 9px; line-height: 1.2; color: var(--jl-ink);
  text-align: center; overflow: hidden;
}
.jl-syl__spine:last-child { margin-right: 0; }
.jl-syl__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jl-syl__chip {
  background: #fff; color: var(--jl-ink-deep); font-size: .8125rem; font-weight: 700;
  padding: 8px 16px; border-radius: 8px; box-shadow: 0 0 2px rgba(51,34,110,.25);
}
.jl-syl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.jl-syl__card .jl-btn { align-self: flex-start; max-width: 100%; white-space: normal; text-align: center; border-radius: 22px; padding: 9px 16px; }

/* Four live 117px covers need a 449px card to retain the Figma stack and its
   right-hand breathing room. Between the phone layout and the full desktop
   panel, keep that real content in a horizontal rail instead of clipping it
   inside three progressively narrower columns. */
@media (min-width: 901px) and (max-width: 1638px) {
  .jl-syl__cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 450px;
    gap: 14px;
    padding: 0 44px 10px;
    scroll-padding-inline: 44px;
  }
}

@media (max-width: 900px) {
  .jl-syl { padding: 32px 18px; border-radius: 20px; }
  .jl-syl__cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 84%);
    gap: 14px;
    padding: 0 44px 10px;
    scroll-padding-inline: 44px;
  }
  .jl-syl__covers { min-height: 0; }
  .jl-syl__arrow--prev { left: 0; }
  .jl-syl__arrow--next { right: 0; }
}

@media (max-width: 520px) {
  .jl-syl { padding-inline: 12px; }
  .jl-syl__tabs { width: 100%; }
  .jl-syl__tab { flex: 1 1 0; padding-inline: 10px; font-size: 16px; }
  .jl-syl__cards { grid-auto-columns: 100%; padding-inline: 22px; scroll-padding-inline: 22px; }
  .jl-syl__card { padding: 16px; gap: 24px; }
  .jl-syl__arrow { width: 40px; height: 40px; }
}

/* --------------------------------------------- state rank achievers ------- */
.jl-achievers { position: relative; }
.jl-achievers__inner {
  background: var(--jl-lilac); border-radius: 290px;
  padding: clamp(32px, 5vw, 104px) clamp(24px, 5vw, 96px);
  display: grid; grid-template-columns: minmax(0, 445px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
@media (max-width: 900px) { .jl-achievers__inner { grid-template-columns: 1fr; border-radius: 40px; } }
.jl-achievers__copy { display: flex; flex-direction: column; gap: 23px; align-items: flex-start; }
.jl-achievers__copy p { font-size: 16.5px; line-height: 1.55; color: #57517a; }
.jl-achievers__orbit {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center;
  position: relative; isolation: isolate;
}
.jl-achievers__orbit::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 0;
  width: min(695px, 112%); aspect-ratio: 695 / 434;
  background: url("../images/landing/achievers-orbit.svg") center / 100% 100% no-repeat;
  pointer-events: none; transform-origin: center;
}
.jl-header-jeddai-student .jl-achievers__orbit::before {
  animation: jl-achievers-orbit-ai 1.603333s linear infinite alternate;
}
.jl-header-study-guides-student .jl-achievers__orbit::before {
  animation: jl-achievers-orbit-guides 2s linear infinite;
}
@keyframes jl-achievers-orbit-ai {
  0% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); transform: translate(-50%, -50%) scale(.74); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes jl-achievers-orbit-guides {
  0% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); transform: translate(-50%, -50%) scale(.74); }
  80.167%, 100% { transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .jl-header-jeddai-student .jl-achievers__orbit::before,
  .jl-header-study-guides-student .jl-achievers__orbit::before {
    animation: none; transform: translate(-50%, -50%) scale(1);
  }
}
.jl-achiever {
  background: #fff; border-radius: 69px 69px 14px 14px; padding: 7px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  box-shadow: 0 4px 5.4px rgba(94,76,140,.13); position: relative; z-index: 1;
}
.jl-achiever img { width: 104px; height: 104px; border-radius: 69px; object-fit: cover; }
.jl-achiever__cap { font-size: 13.83px; font-weight: 600; color: #221357; }
/* The orbit is a scattered arc in the design; nudge alternates to suggest it. */
@media (min-width: 901px) {
  .jl-achievers__orbit { max-width: 676px; margin-left: auto; }
  .jl-achiever:nth-child(even) { transform: translateY(26px); }
  .jl-achievers--reverse .jl-achievers__orbit { order: -1; margin-right: auto; margin-left: 0; }
}

/* The two student artboards deliberately use different achiever canvases.
   JeddAI is a 625px organic three-ellipse band; Study Guides is a transparent
   679px canvas. Both place the same 675.5px orbit on exact Figma coordinates. */
@media (min-width: 1920px) {
  .jl-header-jeddai-student .jl-achievers,
  .jl-header-study-guides-student .jl-achievers {
    padding: 0;
    overflow: clip;
  }
  .jl-header-jeddai-student .jl-achievers { height: 625px; }
  .jl-header-study-guides-student .jl-achievers { height: 679px; }

  .jl-header-jeddai-student .jl-achievers > .jl-wrap,
  .jl-header-study-guides-student .jl-achievers > .jl-wrap {
    width: 1920px;
    max-width: none;
    height: 100%;
    margin-inline: auto;
    padding: 0;
  }
  .jl-header-jeddai-student .jl-achievers__inner,
  .jl-header-study-guides-student .jl-achievers__inner {
    position: relative;
    display: block;
    width: 1920px;
    height: 100%;
    padding: 0;
    gap: 0;
    border-radius: 290px;
    overflow: clip;
  }
  .jl-header-jeddai-student .jl-achievers__inner {
    background:
      radial-gradient(ellipse 156.5px 158.5px at 2210.5px 103.5px, var(--jl-lilac) 99.4%, transparent 100%),
      radial-gradient(ellipse 731.5px 349.5px at 1216.5px 275.5px, var(--jl-lilac) 99.4%, transparent 100%),
      radial-gradient(ellipse 671.5px 325px at 453.5px 270px, var(--jl-lilac) 99.4%, transparent 100%);
  }
  .jl-header-study-guides-student .jl-achievers__inner { background: transparent; }

  .jl-header-jeddai-student .jl-achievers__copy,
  .jl-header-study-guides-student .jl-achievers__copy {
    position: absolute;
    width: 445px;
    gap: 23px;
    z-index: 2;
  }
  .jl-header-jeddai-student .jl-achievers__copy {
    left: 381px;
    top: 104px;
  }
  .jl-header-study-guides-student .jl-achievers__copy {
    left: 1179.52px;
    top: 50%;
    transform: translateY(calc(-50% - 26.5px));
  }

  .jl-header-jeddai-student .jl-achievers__orbit,
  .jl-header-study-guides-student .jl-achievers__orbit {
    position: absolute;
    display: block;
    width: 675.523px;
    max-width: none;
    height: 733.08px;
    margin: 0;
    z-index: 1;
  }
  .jl-header-jeddai-student .jl-achievers__orbit {
    left: 948px;
    top: -108px;
  }
  .jl-header-study-guides-student .jl-achievers__orbit {
    left: 380px;
    top: -54px;
  }
  .jl-header-jeddai-student .jl-achievers__orbit::before,
  .jl-header-study-guides-student .jl-achievers__orbit::before {
    width: 695px;
    aspect-ratio: 695 / 434;
    left: 50%;
    top: calc(50% - 3.54px);
  }
  .jl-header-jeddai-student .jl-achiever,
  .jl-header-study-guides-student .jl-achiever {
    position: absolute;
    transform: none;
  }
  .jl-header-jeddai-student .jl-achiever:nth-child(1),
  .jl-header-study-guides-student .jl-achiever:nth-child(1) { left: 202.92px; top: 292.2px; }
  .jl-header-jeddai-student .jl-achiever:nth-child(2),
  .jl-header-study-guides-student .jl-achiever:nth-child(2) { left: 355.91px; top: 292.2px; }
  .jl-header-jeddai-student .jl-achiever:nth-child(3),
  .jl-header-study-guides-student .jl-achiever:nth-child(3) { left: 500.47px; top: 428.73px; }
  .jl-header-jeddai-student .jl-achiever:nth-child(4),
  .jl-header-study-guides-student .jl-achiever:nth-child(4) { left: 278.98px; top: 483.18px; }
  .jl-header-jeddai-student .jl-achiever:nth-child(5),
  .jl-header-study-guides-student .jl-achiever:nth-child(5) { left: 58.78px; top: 415.77px; }
  .jl-header-jeddai-student .jl-achiever:nth-child(6),
  .jl-header-study-guides-student .jl-achiever:nth-child(6) { left: 58.78px; top: 168.55px; }
  .jl-header-jeddai-student .jl-achiever:nth-child(7),
  .jl-header-study-guides-student .jl-achiever:nth-child(7) { left: 278.99px; top: 108.05px; }
  .jl-header-jeddai-student .jl-achiever:nth-child(8),
  .jl-header-study-guides-student .jl-achiever:nth-child(8) { left: 500.51px; top: 155.59px; }
}

@media (min-width: 1200px) and (max-width: 1919px) {
  .jl-header-study-guides-student .jl-achievers__inner { background: transparent; }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .jl-header-jeddai-student .jl-achievers__inner,
  .jl-header-study-guides-student .jl-achievers__inner {
    grid-template-columns: 1fr;
    border-radius: 56px;
  }
  .jl-header-study-guides-student .jl-achievers__inner { background: transparent; }
  .jl-header-jeddai-student .jl-achievers__orbit,
  .jl-header-study-guides-student .jl-achievers__orbit {
    width: 100%;
    max-width: 676px;
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  .jl-header-study-guides-student .jl-achievers__inner { background: transparent; }
}

/* Per-guide closing bar — pale lilac, not the full-purple site band. */
.jl-ctaband--soft { background: #e2c6fd; }
.jl-ctaband--soft h2, .jl-ctaband--soft .jl-eyebrow { color: var(--jl-ink); }
.jl-ctaband--soft p { color: var(--jl-ink-sub); }
.jl-ctaband--soft::before, .jl-ctaband--soft::after { border-color: rgba(46,33,119,.14); }

/* Catalogue hero: two tilted book covers bleeding off the left edge. */
.jl-covers { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.jl-cover {
  position: absolute;
  width: 187px;
  height: 251px;
  overflow: hidden;
  border-radius: 6px 12px 12px 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 23px;
  text-align: center;
}
.jl-cover::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 9px; width: 1px; background: rgba(255,255,255,.3); }
.jl-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jl-cover__title, .jl-cover small { position: absolute; z-index: 3; left: 16px; right: 14px; }
.jl-cover__title { bottom: 26px; }
.jl-cover small { bottom: 10px; font: 400 11px/14px var(--jl-font); }
.jl-cover--conflict { top: 98px; left: 58px; background: #ead9bf; color: #000; box-shadow: 0 14px 30px rgba(221,210,186,.5); transform: rotate(4deg); }
.jl-cover--conflict::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 92px; background: linear-gradient(transparent, rgba(234,217,191,.96) 40%); }
.jl-cover--conflict::before { width: 2px; background: rgba(69,69,69,.25); }
.jl-cover--conflict .jl-cover__title { bottom: 35px; }
.jl-cover--contemporary { top: -115px; left: 331px; background: #1b26e8; color: #fff; box-shadow: 0 14px 30px rgba(46,33,119,.2); transform: rotate(19.4deg); }
.jl-cover--contemporary::after { content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 100px; background: linear-gradient(transparent, rgba(27,38,232,.94) 48%); }
.jl-cover--live-photo::after { display: none; }

@media (max-width: 1500px) {
  .jl-cover--conflict { left: -28px; }
  .jl-cover--contemporary { left: 176px; opacity: .84; }
  .jl-burst { left: auto; right: -230px; transform: scale(.82); transform-origin: center; }
}
@media (max-width: 1180px) {
  .jl-cover--contemporary { display: none; }
  .jl-cover--conflict { left: -70px; opacity: .58; }
  .jl-burst { right: -310px; opacity: .72; transform: scale(.68); }
}
@media (max-width: 860px) {
  .jl-covers, .jl-burst { display: none; }
}

/* ============================================ VERTICAL RHYTHM ============= */
/*
 * Section heights measured against the frame's own top-offsets. The design is a
 * fixed canvas, so these restore the drawn rhythm rather than letting padding
 * defaults compress it. Heights stay content-driven -- these set the space
 * around content, never the content box, so longer real copy still fits.
 */
.jl-tabs__panel { max-width: 802px; }          /* was stretching to ~1150 and overshooting by 180px */
.jl-hero              { padding-top: 110px; padding-bottom: 90px; }
.jl-marquee           { padding-block: 44px; }

.jl-section           { padding-block: 104px; }
.jl-section--band     { padding-block: 96px; }
.jl-journey           { padding-block: 96px; }
.jl-faq               { padding-block: 8px; }
.jl-ctaband           { padding-block: 104px; }
.jl-foot              { padding-top: 76px; }
.jl-foot__bar         { padding-block: 26px; }

/* Artboard mode must use the same rhythm, not the responsive clamps. */
.jl-artboard-host .jl-section   { padding-block: 104px; }
.jl-artboard-host .jl-hero      { padding: 110px 0 90px; }
.jl-artboard-host .jl-ctaband   { padding-block: 104px; }
.jl-artboard-host .jl-journey   { padding: 96px 56px; }

/*
 * Artboard overrides, part 2 — sections added after the first block.
 * Same trap as before: a section whose layout lives behind a media query
 * reflows in artboard mode unless it is restated here. Anything new with a
 * breakpoint must be added to this block too.
 */
.jl-artboard-host .jl-syl__cards     { grid-template-columns: none; }
.jl-artboard-host .jl-achievers__inner {
  grid-template-columns: minmax(0, 445px) minmax(0, 1fr);
  border-radius: 290px; padding: 104px 96px; gap: 64px;
}
.jl-artboard-host .jl-achievers__orbit { max-width: 676px; margin-left: auto; }
.jl-artboard-host .jl-achiever:nth-child(even) { transform: translateY(26px); }
.jl-artboard-host .jl-covers  { display: block; }
.jl-artboard-host .jl-burst   { display: grid; }

/* Artboard part 3 -- hero + featured-quote geometry from the v2 re-extraction
   (docs/plans/landing-rebuild/figma-v2/landing-generic.md). Anything above
   that uses vw-clamps must be restated here at its drawn 1920 value. */
.jl-artboard-host .jl-hero--centre .jl-hero__col { gap: 30px; }
.jl-artboard-host .jl-h1--hero { font-size: 68px; line-height: 84px; letter-spacing: -2.04px; }
.jl-artboard-host .jl-hero--centre .jl-sub { font-size: 24px; line-height: 27px; }
.jl-artboard-host .jl-personas { gap: 36px; }
.jl-artboard-host .jl-personas__label { font-size: 24px; }
.jl-artboard-host .jl-persona__label { font-size: 20px; }
.jl-artboard-host .jl-marquee__label { font-size: 20px; margin-bottom: 50px; }
.jl-artboard-host .jl-section--pullquote { padding: 48px 0 100px; }
.jl-artboard-host .jl-pullquote__front { padding: 40px 160px; gap: 35px; min-height: 372px; justify-content: center; }
.jl-artboard-host .jl-pullquote__text { font-size: 24px; line-height: 37.2px; }
.jl-artboard-host .jl-pullquote__slide figure { gap: 35px; }
.jl-artboard-host .jl-pullquote__arrow--prev { left: 140px; }
.jl-artboard-host .jl-pullquote__arrow--next { right: 140px; }

/* =============================== GENERIC HERO — FIGMA 633:10179 ========= */
/* The generic frame owns its crest strip inside the 970px hero stage. Keeping
   it in that stage is important: the decorative ribbons clip at the hero edge
   while the following quote pill intentionally overlaps the final 48px. */
.jl-hero--centre {
  height: 970px;
  padding: 0;
  overflow: clip;
}
.jl-hero--centre .jl-hero__deco { height: 970px; }
.jl-hero--centre .jl-ribbon--left {
  width: 1551.71px;
  height: 747.472px;
  left: -208.704px;
  top: -276.24px;
  rotate: none;
  transform: matrix(.6871889234, .7264787555, -.7264787555, .6871889234, 0, 0);
  transform-origin: 0 0;
}
.jl-hero--centre .jl-ribbon--upper {
  width: 1051.46px;
  height: 573.304px;
  left: 1173.119px;
  top: -285.572px;
  rotate: none;
  transform: matrix(.9787929058, .2048523575, -.2048523575, .9787929058, 0, 0);
  transform-origin: 0 0;
}
.jl-hero--centre .jl-ribbon--lower {
  width: 1438.69px;
  height: 746.99px;
  left: 779.355px;
  top: 617.98px;
  rotate: none;
  transform: matrix(.9923674464, .1233162209, -.1233162209, .9923674464, 0, 0);
  transform-origin: 0 0;
}
.jl-hero--centre > .jl-mid {
  position: absolute;
  top: 53px;
  left: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.jl-hero--centre .jl-hero__row { display: block; }
.jl-hero--centre .jl-hero__col {
  position: relative;
  display: block;
  width: 966px;
  height: 600px;
  margin-inline: auto;
}
.jl-hero--centre .jl-h1 {
  position: absolute;
  top: 0;
  left: 66px;
  width: 834px;
  height: 168px;
  line-height: 84px;
  letter-spacing: -2.04px;
}
.jl-hero--centre .jl-h1 .jl-hi { position: relative; top: 1px; }
.jl-hero--centre .jl-sub {
  position: absolute;
  top: 198px;
  left: 159.5px;
  width: 647px;
  height: 58px;
  line-height: 29px;
}
.jl-hero--centre .jl-personas {
  position: absolute;
  top: 286px;
  left: 0;
  width: 966px;
  height: 313px;
  display: block;
}
.jl-hero--centre .jl-personas__label {
  width: 647px;
  margin-inline: auto;
  line-height: 29px;
}
.jl-hero--centre .jl-personas__grid {
  position: absolute;
  top: 60px;
  left: -27px;
  width: 1020px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 40px;
}
.jl-hero--centre .jl-personas__grid > li { flex: 0 0 225px; }
.jl-hero--centre .jl-persona {
  box-shadow: inset 0 0 0 1px #f4f4f4;
}
.jl-hero--centre .jl-persona > img { top: 1px; left: 1px; }
.jl-hero--centre .jl-persona__label {
  height: 24px;
  line-height: 24px;
  translate: none;
  text-align: center;
}
.jl-hero--centre .jl-persona[data-persona="teacher"] .jl-persona__label {
  top: 178.765625px; left: 73px; width: 77px;
}
.jl-hero--centre .jl-persona[data-persona="student"] .jl-persona__label {
  top: 176px; left: 73px; width: 76px;
}
.jl-hero--centre .jl-persona[data-persona="parent"] .jl-persona__label {
  top: 176px; left: 78px; width: 66px;
}
.jl-hero--centre .jl-persona[data-persona="schoolleader"] .jl-persona__label {
  top: 176px; left: 43px; width: 136px;
}
.jl-hero--centre > .jl-marquee {
  position: absolute;
  top: 706px;
  left: 0;
  width: 100%;
  height: 188px;
  padding: 0;
  z-index: 1;
}
.jl-hero--centre > .jl-marquee .jl-marquee__label {
  height: 24px;
  margin-bottom: 48px;
  font-size: 20px;
  line-height: 24px;
}
.jl-hero--centre > .jl-marquee .jl-marquee__viewport { padding: 10px; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot {
  position: relative;
  display: block;
  width: 167.86px;
}
.jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 2) { width: 169px; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot img { position: absolute; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 1) img { left: 36px; top: 0; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 2) img { left: 35.14453125px; top: -1px; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 3) img { left: 49.140625px; top: 4px; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 4) img { left: 48.2890625px; top: 4px; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 5) img { left: 26.4296875px; top: -9px; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 6) img { left: 37.5703125px; top: -4px; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 7) img { left: 47.7109375px; top: 2px; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 8) img { left: 47.859375px; top: 3px; }
.jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 9) img { left: -8px; top: -17px; }
.jl-hero--centre > .jl-marquee .jl-marquee__viewport::before {
  background: linear-gradient(90deg, #fff, transparent);
}
.jl-hero--centre > .jl-marquee .jl-marquee__viewport::after {
  background: linear-gradient(270deg, #fff, transparent);
}
.jl-hero--centre > .jl-marquee .jl-marquee__track {
  animation: jl-marquee-generic 7.965079s linear infinite;
}
@keyframes jl-marquee-generic {
  from { transform: translateX(0); }
  to { transform: translateX(-347px); }
}
.jl-hero--centre + .jl-section--pullquote {
  position: relative;
  z-index: 2;
  margin-top: -48px;
}

/* The Figma set has no mobile frame. The shipped responsive mode remains a
   usable reflow; review/artboard mode below reasserts the fixed canvas. */
@media (max-width: 1180px) {
  .jl-hero--centre {
    height: auto;
    padding: 48px 0 40px;
    overflow: hidden;
  }
  .jl-hero--centre > .jl-mid {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: calc(var(--jl-mid) + var(--jl-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
  }
  .jl-hero--centre .jl-hero__row { display: flex; }
  .jl-hero--centre .jl-hero__col,
  .jl-hero--centre .jl-personas,
  .jl-hero--centre .jl-personas__grid { width: 100%; }
  .jl-hero--centre .jl-hero__col {
    position: static;
    display: flex;
    height: auto;
  }
  .jl-hero--centre .jl-h1,
  .jl-hero--centre .jl-sub,
  .jl-hero--centre .jl-personas,
  .jl-hero--centre .jl-personas__grid {
    position: static;
    height: auto;
  }
  .jl-hero--centre .jl-h1,
  .jl-hero--centre .jl-sub { width: auto; }
  .jl-hero--centre .jl-h1 { line-height: 1.235; letter-spacing: -.03em; }
  .jl-hero--centre .jl-h1 .jl-hi { top: auto; }
  .jl-hero--centre .jl-sub { line-height: 1.16; }
  .jl-hero--centre .jl-personas { display: flex; }
  .jl-hero--centre .jl-personas__label { width: auto; margin-inline: 0; line-height: 1.55; }
  .jl-hero--centre .jl-personas__grid {
    display: grid;
    max-width: 755px;
    grid-template-columns: repeat(3, 225px);
    gap: 40px;
    justify-content: center;
  }
  .jl-hero--centre .jl-personas__grid > li { min-width: 0; }
  .jl-hero--centre .jl-personas__grid > li:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
  .jl-hero--centre > .jl-marquee {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    margin-top: 44px;
    padding: 28px 0;
  }
  .jl-hero--centre > .jl-marquee .jl-marquee__label {
    height: auto;
    margin-bottom: 30px;
    line-height: 1.55;
  }
  .jl-hero--centre + .jl-section--pullquote { margin-top: 0; }
}

@media (min-width: 1100px) and (max-width: 1180px) {
  .jl-hero--centre .jl-personas__grid {
    max-width: 1020px;
    grid-template-columns: repeat(4, 225px);
    gap: clamp(10px, 1.5vw, 22px);
  }
  .jl-hero--centre .jl-personas__grid > li:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .jl-hero--centre .jl-personas__grid {
    max-width: 474px;
    grid-template-columns: repeat(2, 225px);
    gap: 24px;
  }
  .jl-hero--centre .jl-personas__grid > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (max-width: 539px) {
  .jl-hero--centre .jl-personas__grid {
    max-width: 440px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .jl-hero--centre .jl-personas__grid > li:last-child:nth-child(3n + 1),
  .jl-hero--centre .jl-personas__grid > li:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .jl-hero--centre .jl-persona {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 180px;
    padding: 0 6px 16px;
    flex-direction: column;
    align-items: center;
    border-width: 1px;
    border-radius: 16px;
  }
  .jl-hero--centre .jl-persona > img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 219 / 169;
    object-fit: contain;
  }
  .jl-hero--centre .jl-persona[data-persona] .jl-persona__label {
    position: static;
    width: auto;
    height: auto;
    margin-top: 6px;
    font-size: 15px;
    line-height: 21px;
    white-space: normal;
  }
  .jl-hero--centre .jl-persona__arrow {
    position: static;
    margin-top: 10px;
    translate: none;
  }
}

/* Fixed-canvas reassertion after the responsive media query. */
.jl-artboard-host .jl-hero--centre { height: 970px; padding: 0; overflow: clip; }
.jl-artboard-host .jl-hero--centre > .jl-mid {
  position: absolute; top: 53px; left: 0; width: 100%; max-width: none; margin: 0; padding: 0;
}
.jl-artboard-host .jl-hero--centre .jl-hero__row { display: block; }
.jl-artboard-host .jl-hero--centre .jl-hero__col {
  position: relative; display: block; width: 966px; height: 600px; margin-inline: auto;
}
.jl-artboard-host .jl-hero--centre .jl-h1 {
  position: absolute; top: 0; left: 66px; width: 834px; height: 168px;
}
.jl-artboard-host .jl-hero--centre .jl-h1 .jl-hi { top: 1px; }
.jl-artboard-host .jl-hero--centre .jl-sub {
  position: absolute; top: 198px; left: 159.5px; width: 647px; height: 58px; line-height: 29px;
}
.jl-artboard-host .jl-hero--centre .jl-personas {
  position: absolute; top: 286px; left: 0; width: 966px; height: 313px; display: block;
}
.jl-artboard-host .jl-hero--centre .jl-personas__label { width: 647px; margin-inline: auto; line-height: 29px; }
.jl-artboard-host .jl-hero--centre .jl-personas__grid {
  position: absolute; top: 60px; left: -27px; width: 1020px; height: 254px;
  flex-wrap: nowrap; justify-content: flex-start; gap: 40px;
}
.jl-artboard-host .jl-hero--centre > .jl-marquee {
  position: absolute; top: 706px; left: 0; width: 100%; height: 188px; margin: 0; padding: 0;
}
.jl-artboard-host .jl-hero--centre > .jl-marquee .jl-marquee__label {
  height: 24px; margin-bottom: 48px; font-size: 20px; line-height: 24px;
}
.jl-artboard-host .jl-hero--centre + .jl-section--pullquote { margin-top: -48px; }
@media (prefers-reduced-motion: reduce) {
  .jl-hero--centre > .jl-marquee .jl-marquee__track { animation: none; }
}

/* ========================= FEATURED QUOTE — FIGMA 633:8587 ============= */
.jl-section--pullquote {
  position: relative;
  height: 520px;
  padding: 48px 0 100px;
  overflow: clip;
}
.jl-section--pullquote > .jl-wrap { height: 372px; }
.jl-section--pullquote .jl-pullquote {
  left: 25px;
  width: 1676px;
  max-width: none;
  height: 372px;
  margin-inline: auto;
}
.jl-section--pullquote .jl-pullquote__slab {
  inset: auto;
  display: block;
  transform-origin: 0 0;
}
.jl-section--pullquote .jl-pullquote__slab--back {
  left: -14.0859375px;
  top: 49.5625px;
  width: 1674.40979px;
  height: 362.660919px;
  transform: matrix(.9986003637, -.0528907031, .0881334394, .9961087108, 0, 0);
}
.jl-section--pullquote .jl-pullquote__slab--mid {
  left: -6.91796875px;
  top: 25.0625px;
  width: 1675.65564px;
  height: 362.211914px;
  transform: matrix(.9997118115, -.0240063649, .0400819443, .9991964698, 0, 0);
}
.jl-section--pullquote .jl-pullquote__front {
  width: 1676px;
  height: 372px;
  min-height: 372px;
  padding: 0;
  display: block;
  background: #f1e6fc;
}
.jl-section--pullquote .jl-pullquote__track {
  position: absolute;
  left: 443px;
  top: 66.65625px;
  width: 753px;
  height: 248px;
}
.jl-section--pullquote .jl-pullquote__slide figure { gap: 35px; }
.jl-section--pullquote .jl-pullquote__text {
  width: 753px;
  height: 149px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  font-size: 24px;
  line-height: 37.2px;
}
.jl-section--pullquote .jl-pullquote__who {
  width: 413px;
  height: 64px;
}
.jl-section--pullquote .jl-pullquote__who > span {
  min-width: 0;
  flex: 1 1 auto;
}
.jl-section--pullquote .jl-pullquote__name,
.jl-section--pullquote .jl-pullquote__role {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jl-section--pullquote .jl-pullquote__who img {
  width: 62px;
  height: 64px;
  object-fit: cover;
  object-position: left center;
}
.jl-section--pullquote .jl-pullquote__dots {
  position: absolute;
  left: 797.5px;
  top: 338.65625px;
  width: 44px;
  height: 8px;
}
.jl-section--pullquote .jl-pullquote__arrow { top: 166px; translate: none; }
.jl-section--pullquote .jl-pullquote__arrow--prev { left: 115px; }
.jl-section--pullquote .jl-pullquote__arrow--next { left: auto; right: 165px; }

/* Live pages always render the semantic implementation. The fixed Figma
   canvas remains available only inside the explicit .jl-artboard-host mode. */
@media (max-width: 1919px) {
  .jl-section--pullquote { height: auto; padding: 48px 0; overflow: hidden; }
  .jl-section--pullquote > .jl-wrap { height: auto; }
  .jl-section--pullquote .jl-pullquote {
    left: 0; width: 100%; height: auto; max-width: 100%;
  }
  .jl-section--pullquote .jl-pullquote__slab {
    inset: 0; width: auto; height: auto; transform-origin: center;
  }
  .jl-section--pullquote .jl-pullquote__slab--back { transform: rotate(-3.03deg) skewX(2.02deg) translateY(-18px); }
  .jl-section--pullquote .jl-pullquote__slab--mid { transform: rotate(-1.38deg) skewX(.92deg) translateY(-8px); }
  .jl-section--pullquote .jl-pullquote__front {
    width: 100%; height: auto; min-height: 0; padding: 32px 24px;
    display: flex; gap: 20px;
  }
  .jl-section--pullquote .jl-pullquote__track {
    position: static; width: 100%; height: auto;
  }
  .jl-section--pullquote .jl-pullquote__slide figure { gap: 20px; }
  .jl-section--pullquote .jl-pullquote__text { width: 100%; height: auto; font-size: 17px; line-height: 1.55; }
  .jl-section--pullquote .jl-pullquote__text br { display: none; }
  .jl-section--pullquote .jl-pullquote__who { width: 100%; min-width: 0; max-width: 413px; height: auto; }
  .jl-section--pullquote .jl-pullquote__dots { position: static; width: auto; height: auto; }
  .jl-section--pullquote .jl-pullquote__arrow { top: auto; bottom: 16px; translate: none; }
  .jl-section--pullquote .jl-pullquote__arrow--prev { left: 16px; }
  .jl-section--pullquote .jl-pullquote__arrow--next { left: auto; right: 16px; }
}

/* Artboard mode keeps the 1920px Figma geometry after responsive rules. */
.jl-artboard-host .jl-section--pullquote { height: 520px; padding: 48px 0 100px; overflow: clip; }
.jl-artboard-host .jl-section--pullquote > .jl-wrap { height: 372px; }
.jl-artboard-host .jl-section--pullquote .jl-pullquote {
  left: 25px; width: 1676px; max-width: none; height: 372px;
}
.jl-artboard-host .jl-section--pullquote .jl-pullquote__slab { inset: auto; transform-origin: 0 0; }
.jl-artboard-host .jl-section--pullquote .jl-pullquote__slab--back {
  left: -14.0859375px; top: 49.5625px; width: 1674.40979px; height: 362.660919px;
  transform: matrix(.9986003637, -.0528907031, .0881334394, .9961087108, 0, 0);
}
.jl-artboard-host .jl-section--pullquote .jl-pullquote__slab--mid {
  left: -6.91796875px; top: 25.0625px; width: 1675.65564px; height: 362.211914px;
  transform: matrix(.9997118115, -.0240063649, .0400819443, .9991964698, 0, 0);
}
.jl-artboard-host .jl-section--pullquote .jl-pullquote__front {
  width: 1676px; height: 372px; min-height: 372px; padding: 0; display: block;
}
.jl-artboard-host .jl-section--pullquote .jl-pullquote__track {
  position: absolute; left: 443px; top: 66.65625px; width: 753px; height: 248px;
}
.jl-artboard-host .jl-section--pullquote .jl-pullquote__slide figure { gap: 35px; }
.jl-artboard-host .jl-section--pullquote .jl-pullquote__text {
  width: 753px; height: 149px; font-size: 24px; line-height: 37.2px;
}
.jl-artboard-host .jl-section--pullquote .jl-pullquote__text br { display: initial; }
.jl-artboard-host .jl-section--pullquote .jl-pullquote__who { width: 413px; height: 64px; }
.jl-artboard-host .jl-section--pullquote .jl-pullquote__dots {
  position: absolute; left: 797.5px; top: 338.65625px; width: 44px; height: 8px;
}
.jl-artboard-host .jl-pullquote__dot {
  width: 8px; height: 8px; background: rgba(37,37,37,.24);
}
.jl-artboard-host .jl-pullquote__dot::before { display: none; }
.jl-artboard-host .jl-pullquote__dot[aria-current="true"] { background: var(--jl-purple); }
.jl-artboard-host .jl-section--pullquote .jl-pullquote__arrow { top: 166px; translate: none; }
.jl-artboard-host .jl-section--pullquote .jl-pullquote__arrow { width: 40px; height: 40px; }
.jl-artboard-host .jl-section--pullquote .jl-pullquote__arrow--prev { left: 115px; }
.jl-artboard-host .jl-section--pullquote .jl-pullquote__arrow--next { left: auto; right: 165px; }

/* ======================== EVERYTHING PLATFORM — FIGMA 633:9336 ========= */
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs {
  position: relative;
  height: 893px;
  padding: 0;
  overflow: visible;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs > .jl-wrap {
  position: relative;
  width: 1158px;
  max-width: none;
  height: 893px;
  margin: 0 auto;
  padding: 0;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__group {
  position: absolute;
  left: 0;
  top: 24px;
  width: 1158px;
  height: 587px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-section__head {
  position: absolute;
  left: 131px;
  top: 0;
  width: 897px;
  max-width: none;
  height: 62px;
  margin: 0;
  text-align: left;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-h2 {
  width: 897px;
  height: 62px;
  color: #12063d;
  font-size: 48px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: 0;
  white-space: nowrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__layout {
  position: absolute;
  left: 0;
  top: 136px;
  display: block;
  width: 1158px;
  height: 451px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__list {
  position: absolute;
  left: 0;
  top: 33px;
  width: 326px;
  min-height: 317px;
  gap: 6px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab {
  position: relative;
  width: 323px;
  min-height: 49px;
  padding: 11px 20px;
  border-radius: 8px;
  box-shadow: none;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 3px;
  height: 27px;
  border-radius: 999px;
  background: #e1e0e8;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab[aria-selected="true"],
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab--static-featured {
  min-height: 97px;
  background: #f1e6fc;
  box-shadow: none;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab[aria-selected="true"]::before,
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab--static-featured::before {
  width: 4px;
  height: 75px;
  background: #2e2177;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab__title {
  display: block;
  width: 283px;
  min-height: 27px;
  color: #706b77;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab[aria-selected="true"] .jl-tab__title,
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab--static-featured .jl-tab__title {
  color: #2e2177;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab__body,
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab[aria-selected="true"] .jl-tab__body,
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab--static-featured .jl-tab__body {
  width: 283px;
  min-height: 40px;
  margin-top: 8px;
  color: #4d4952;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__panel {
  position: absolute;
  left: 356px;
  top: 0;
  width: 802px;
  max-width: none;
  height: 451px;
  border: 0;
  border-radius: 12px;
  background: #e8dcfa;
  box-shadow: none;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__panel img {
  display: block;
  width: 802px;
  height: 451px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__cta {
  position: absolute;
  left: 489px;
  top: 691px;
  width: 181px;
  height: 56px;
  margin: 0;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__cta .jl-btn {
  width: 181px;
  height: 56px;
  padding: 16px 27px;
  gap: 4px;
  border: 0;
  border-radius: 32px;
  line-height: 24px;
}

@media (max-width: 1919px) {
  .jl-platform-wave-band,
  .jl-platform-wave-left,
  .jl-platform-wave-right { display: none !important; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs {
    height: auto;
    padding: 64px 0 104px;
    overflow: hidden;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs > .jl-wrap {
    width: calc(100% - 48px);
    max-width: 1200px;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__group {
    position: static;
    width: 100%;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-section__head {
    position: static;
    width: min(897px, 100%);
    max-width: 897px;
    height: auto;
    margin: 0 auto 48px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-h2 {
    width: auto;
    height: auto;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.29;
    white-space: normal;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__layout {
    position: static;
    display: grid;
    grid-template-columns: 326px minmax(0, 802px);
    justify-content: center;
    gap: 30px;
    width: 100%;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__list {
    position: static;
    width: 326px;
    height: 317px;
    margin-top: 33px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__panel {
    position: static;
    width: 100%;
    max-width: 802px;
    height: auto;
    aspect-ratio: 802 / 451;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__panel img {
    width: 100%;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__cta {
    position: static;
    width: auto;
    height: auto;
    margin-top: 48px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__cta .jl-btn {
    width: auto;
    height: auto;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--jl-pill);
    line-height: 1.33;
  }
}

@media (max-width: 900px) {
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__layout { grid-template-columns: 1fr; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__list { width: 100%; height: auto; margin-top: 0; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab__title,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab__body,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab[aria-selected="true"] .jl-tab__body { width: 100%; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab {
    height: auto;
    min-height: 49px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab[aria-selected="true"],
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab--static-featured {
    height: auto;
    min-height: 97px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab__title {
    height: auto;
    min-height: 27px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab__body,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab[aria-selected="true"] .jl-tab__body,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tab--static-featured .jl-tab__body {
    height: auto;
  }
}

/* Artboard mode always preserves the fixed 1920px canvas geometry. */
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs { height: 893px; padding: 0; overflow: visible; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs > .jl-wrap {
  width: 1158px; max-width: none; height: 893px; margin: 0 auto; padding: 0;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__group {
  position: absolute; left: 0; top: 24px; width: 1158px; height: 587px;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-section__head {
  position: absolute; left: 131px; top: 0; width: 897px; max-width: none; height: 62px; margin: 0; text-align: left;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-h2 {
  width: 897px; height: 62px; font-size: 48px; line-height: 62px; white-space: nowrap;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__layout {
  position: absolute; left: 0; top: 136px; display: block; width: 1158px; height: 451px;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__list {
  position: absolute; left: 0; top: 33px; width: 326px; height: 317px; margin-top: 0;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__panel {
  position: absolute; left: 356px; top: 0; width: 802px; max-width: none; height: 451px; aspect-ratio: auto;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__panel img { width: 802px; height: 451px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__cta {
  position: absolute; left: 489px; top: 691px; width: 181px; height: 56px; margin: 0;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--platform-tabs .jl-tabs__cta .jl-btn {
  width: 181px; height: 56px; gap: 4px; border: 0; border-radius: 32px; line-height: 24px;
}
.jl-artboard-host .jl-platform-wave-band,
.jl-artboard-host .jl-platform-wave-left,
.jl-artboard-host .jl-platform-wave-right { display: block !important; }

@media (prefers-reduced-motion: no-preference) {
  /* The generic frame's paths draw once and remain visible (Figma 633:8548).
     Persona-specific looping motion keeps its own authored timeline. */
  [data-jl-persona="generic"] .jl-deco svg path[pathLength],
  [data-jl-persona="generic"] .jl-ctaband__deco svg path[pathLength] {
    animation: jl-deco-draw 3.322221s linear 1 forwards;
  }
  .jl-deco svg.jl-platform-wave-right path[pathLength] {
    stroke-dashoffset: 0;
    animation: jl-platform-wave-right-draw 3.322221s linear 1 forwards;
  }
  .jl-deco svg.jl-platform-wave-left path[pathLength] {
    animation: jl-platform-wave-left-draw 3.322221s linear 1 forwards;
  }
}
@keyframes jl-platform-wave-right-draw {
  0% { stroke-dasharray: 0 1; visibility: hidden; }
  24.14% {
    animation-timing-function: ease-in-out;
    stroke-dasharray: 0 1;
    visibility: hidden;
  }
  48.311%, 100% { stroke-dasharray: 1 1; visibility: visible; }
}
@keyframes jl-platform-wave-left-draw {
  0% {
    animation-timing-function: cubic-bezier(.5, 0, .5, 1);
    stroke-dasharray: 0 1;
    stroke-dashoffset: -1;
    visibility: hidden;
  }
  24.171%, 100% {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
    visibility: visible;
  }
}

/* ========================= WORD-FOR-IT BAND — FIGMA 633:10138 =========== */
.jl-section--word-for-it {
  position: relative;
  height: 800px;
  padding: 0;
  overflow: hidden;
  border-radius: 90px;
  background: #f1e6fc;
}
.jl-section--word-for-it > .jl-wrap {
  position: relative;
  width: 1920px;
  max-width: none;
  height: 800px;
  margin: 0 auto;
  padding: 0;
}
.jl-section--word-for-it .jl-section__head {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1920px;
  max-width: none;
  height: 0;
  margin: 0;
  text-align: left;
}
.jl-section--word-for-it .jl-eyebrow {
  position: absolute;
  left: 848.09375px;
  top: 88.921875px;
  width: 224px;
  height: 19px;
  margin: 0;
  color: #4b0fe0;
  font-size: 12px;
  font-weight: 600;
  line-height: 18.6px;
  letter-spacing: 1.68px;
  text-align: center;
  white-space: nowrap;
}
.jl-section--word-for-it .jl-h2 {
  position: absolute;
  left: 615.65234375px;
  top: 124.921875px;
  width: 690.27655px;
  height: 58px;
  margin: 0;
  color: #000;
  font-size: 48px;
  font-weight: 700;
  line-height: 58px;
  letter-spacing: -.96px;
  text-align: center;
  white-space: nowrap;
}
.jl-section--word-for-it .jl-stats {
  position: absolute;
  left: 606px;
  top: 218.921875px;
  display: block;
  width: 739.65274px;
  height: 31px;
}
.jl-section--word-for-it .jl-stat {
  position: absolute;
  top: 0;
  display: block;
  height: 31px;
  text-align: left;
}
.jl-section--word-for-it .jl-stat:nth-child(1) { left: 0; width: 204px; }
.jl-section--word-for-it .jl-stat:nth-child(2) { left: 284.921875px; width: 148.62552px; }
.jl-section--word-for-it .jl-stat:nth-child(3) { left: 489.183594px; width: 250.46915px; }
.jl-section--word-for-it .jl-stat__n {
  height: 31px;
  color: #4801d4;
  font-size: 26px;
  font-weight: 800;
  line-height: 31px;
  letter-spacing: -.52px;
  white-space: nowrap;
}
.jl-section--word-for-it .jl-stat__c {
  position: absolute;
  top: 6.5px;
  height: 18px;
  color: #4b464f;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  white-space: nowrap;
}
.jl-section--word-for-it .jl-stat:nth-child(1) .jl-stat__c { left: 59px; width: 145px; }
.jl-section--word-for-it .jl-stat:nth-child(2) .jl-stat__c { left: 48.140625px; width: 100.4849px; }
.jl-section--word-for-it .jl-stat:nth-child(3) .jl-stat__c { left: 107.238281px; width: 143.23087px; }
.jl-section--word-for-it .jl-quotes {
  position: absolute;
  left: 383px;
  top: 302px;
  display: flex;
  grid-template-columns: none;
  width: 1155px;
  height: 355px;
  gap: 24px;
  overflow: hidden;
  scrollbar-width: none;
}
.jl-section--word-for-it .jl-quotes::-webkit-scrollbar { display: none; }
.jl-section--word-for-it .jl-quote {
  flex: 0 0 565.5px;
  width: 565.5px;
  height: 355px;
  margin: 0;
  padding: 41px 42px 40px 40px;
  gap: 24px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #dbd8e6, 0 4px 11.2px rgba(119,111,151,.16);
}
.jl-section--word-for-it .jl-quote:nth-child(2) { padding-right: 56px; }
.jl-section--word-for-it .jl-quote__stars {
  width: 90.33906px;
  height: 22px;
  margin: 0;
  color: #e0693e;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
}
.jl-section--word-for-it .jl-quote__text {
  width: 483.5px;
  height: 120px;
  margin: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  color: #353138;
  font-size: 16px;
  font-weight: 500;
  line-height: 23.93px;
}
.jl-section--word-for-it .jl-quote:nth-child(2) .jl-quote__text { width: 469.5px; }
.jl-pullquote__text[data-jl-scrollable-testimonial]:focus-visible,
.jl-quote__text[data-jl-scrollable-testimonial]:focus-visible {
  outline: 3px solid var(--jl-purple);
  outline-offset: 3px;
}
.jl-section--word-for-it .jl-quote__who {
  display: block;
  width: 100%;
  height: 84px;
  margin: 0;
}
.jl-section--word-for-it .jl-quote__who img {
  display: block;
  width: 47px;
  height: 47px;
  margin: 0 0 2px;
  border-radius: 70px;
  object-fit: cover;
}
.jl-section--word-for-it .jl-quote__who > span { display: block; }
.jl-section--word-for-it .jl-quote__who br { display: none; }
.jl-section--word-for-it .jl-quote__name {
  display: block;
  width: 100%;
  height: 18px;
  overflow: hidden;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jl-section--word-for-it .jl-quote__role {
  display: block;
  width: 100%;
  height: 15px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--jl-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jl-wordquote__dots {
  position: absolute;
  left: 938px;
  top: 717px;
  display: flex;
  width: 44px;
  height: 8px;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jl-wordquote__dots li { display: flex; width: 44px; height: 44px; }
.jl-wordquote__dots .jl-wordquote__dot-placeholder { display: none; }
.jl-wordquote__dot {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.jl-wordquote__dot::before {
  content: ""; position: absolute; inset: 0; width: 8px; height: 8px; margin: auto;
  border-radius: 50%; background: rgba(0,0,0,.24);
}
.jl-wordquote__dot[aria-current="true"] { background: transparent; }
.jl-wordquote__dot[aria-current="true"]::before { background: #4801d4; }
.jl-wordquote__arrow {
  position: absolute;
  top: 466px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: rgba(255,255,255,.8);
  cursor: pointer;
}
.jl-wordquote__arrow img { width: 24px; height: 24px; }
.jl-wordquote__arrow:disabled,
.jl-wordquote__dot:disabled { opacity: .42; cursor: default; }
.jl-wordquote__arrow--prev { left: 262px; }
.jl-wordquote__arrow--next { left: 1618px; }
.jl-wordquote__arrow--next img { transform: scaleX(-1); }

@media (max-width: 1919px) {
  .jl-section--word-for-it {
    height: auto;
    padding: 64px 0;
    border-radius: 40px;
  }
  .jl-section--word-for-it > .jl-wrap {
    width: calc(100% - 48px);
    max-width: 1155px;
    height: auto;
    margin: 0 auto;
  }
  .jl-section--word-for-it .jl-section__head {
    position: static;
    width: 100%;
    height: auto;
    margin: 0 0 40px;
    text-align: center;
  }
  .jl-section--word-for-it .jl-eyebrow,
  .jl-section--word-for-it .jl-h2 {
    position: static;
    width: auto;
    height: auto;
    margin-inline: auto;
    text-align: center;
    white-space: normal;
  }
  .jl-section--word-for-it .jl-eyebrow { margin-bottom: 12px; }
  .jl-section--word-for-it .jl-h2 { font-size: clamp(30px, 5vw, 48px); line-height: 1.2; }
  .jl-section--word-for-it .jl-stats {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    gap: 24px 48px;
  }
  .jl-section--word-for-it .jl-stat,
  .jl-section--word-for-it .jl-stat:nth-child(n) {
    position: relative;
    left: auto;
    width: auto;
    min-width: 148px;
  }
  .jl-section--word-for-it .jl-stat__c,
  .jl-section--word-for-it .jl-stat:nth-child(n) .jl-stat__c {
    position: static;
    display: inline;
    margin-left: 8px;
  }
  .jl-section--word-for-it .jl-stat__n { display: inline; }
  .jl-section--word-for-it .jl-quotes {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 48px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .jl-section--word-for-it .jl-quote {
    flex-basis: min(565.5px, 100%);
    width: min(565.5px, 100%);
    height: auto;
    min-height: 355px;
    scroll-snap-align: start;
  }
  .jl-wordquote__dots { position: static; width: auto; height: 44px; margin: 40px auto 0; }
  .jl-wordquote__arrow { top: auto; bottom: 47px; }
  .jl-wordquote__arrow--prev { left: 16px; }
  .jl-wordquote__arrow--next { left: auto; right: 16px; }
}

@media (max-width: 620px) {
  .jl-section--word-for-it .jl-stats { align-items: center; flex-direction: column; }
  .jl-section--word-for-it .jl-stat,
  .jl-section--word-for-it .jl-stat:nth-child(n) { min-width: 250px; text-align: center; }
  .jl-section--word-for-it .jl-quote,
  .jl-section--word-for-it .jl-quote:nth-child(2) { padding: 32px 24px; }
  .jl-section--word-for-it .jl-quote__text,
  .jl-section--word-for-it .jl-quote:nth-child(2) .jl-quote__text { width: 100%; height: auto; }
}

/* Fixed artboard mode reasserts the 1920px component after media queries. */
.jl-artboard-host .jl-section--word-for-it { height: 800px; padding: 0; border-radius: 90px; }
.jl-artboard-host .jl-section--word-for-it > .jl-wrap { width: 1920px; max-width: none; height: 800px; margin: 0 auto; padding: 0; }
.jl-artboard-host .jl-section--word-for-it .jl-section__head {
  position: absolute; width: 1920px; height: 0; margin: 0; text-align: left;
}
.jl-artboard-host .jl-section--word-for-it .jl-eyebrow {
  position: absolute; left: 848.09375px; top: 88.921875px; width: 224px; height: 19px; margin: 0; text-align: center; white-space: nowrap;
}
.jl-artboard-host .jl-section--word-for-it .jl-h2 {
  position: absolute; left: 615.65234375px; top: 124.921875px; width: 690.27655px; height: 58px; margin: 0;
  font-size: 48px; line-height: 58px; text-align: center; white-space: nowrap;
}
.jl-artboard-host .jl-section--word-for-it .jl-stats {
  position: absolute; left: 606px; top: 218.921875px; display: block; width: 739.65274px; height: 31px;
}
.jl-artboard-host .jl-section--word-for-it .jl-stat,
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(n) { position: absolute; top: 0; display: block; height: 31px; min-width: 0; text-align: left; }
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(1) { left: 0; width: 204px; }
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(2) { left: 284.921875px; width: 148.62552px; }
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(3) { left: 489.183594px; width: 250.46915px; }
.jl-artboard-host .jl-section--word-for-it .jl-stat__n { display: block; }
.jl-artboard-host .jl-section--word-for-it .jl-stat__c,
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(n) .jl-stat__c { position: absolute; top: 6.5px; display: block; margin-left: 0; }
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(1) .jl-stat__c { left: 59px; width: 145px; }
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(2) .jl-stat__c { left: 48.140625px; width: 100.4849px; }
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(3) .jl-stat__c { left: 107.238281px; width: 143.23087px; }
.jl-artboard-host .jl-section--word-for-it .jl-quotes {
  position: absolute; left: 383px; top: 302px; width: 1155px; height: 355px; margin-top: 0; overflow: hidden; scroll-snap-type: none;
}
.jl-artboard-host .jl-section--word-for-it .jl-quote { flex-basis: 565.5px; width: 565.5px; height: 355px; min-height: 0; padding: 41px 42px 40px 40px; }
.jl-artboard-host .jl-section--word-for-it .jl-quote:nth-child(2) { padding-right: 56px; }
.jl-artboard-host .jl-section--word-for-it .jl-quote__text { width: 483.5px; height: 120px; }
.jl-artboard-host .jl-section--word-for-it .jl-quote:nth-child(2) .jl-quote__text { width: 469.5px; height: 120px; }
.jl-artboard-host .jl-wordquote__dots { position: absolute; left: 938px; top: 717px; margin: 0; }
.jl-artboard-host .jl-wordquote__dots li,
.jl-artboard-host .jl-wordquote__dot { width: 8px; height: 8px; }
.jl-artboard-host .jl-wordquote__dots .jl-wordquote__dot-placeholder { display: flex; }
.jl-artboard-host .jl-wordquote__dot { background: rgba(0,0,0,.24); }
.jl-artboard-host .jl-wordquote__dot::before { display: none; }
.jl-artboard-host .jl-wordquote__dot[aria-current="true"] { background: #4801d4; }
.jl-artboard-host .jl-wordquote__arrow { top: 466px; bottom: auto; }
.jl-artboard-host .jl-wordquote__arrow { width: 40px; height: 40px; }
.jl-artboard-host .jl-wordquote__arrow--prev { left: 262px; }
.jl-artboard-host .jl-wordquote__arrow--next { left: 1618px; right: auto; }

/* ====================== GENERIC JOURNEY — FIGMA 633:9362 =============== */
/* The generic journey is a transparent 1920px stage. Its first 1913px hold
   the three product rows; a verified case study extends the stage by 747px.
   Route attributes, rather than optional proof siblings, own this geometry. */
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey {
  position: relative;
  width: 100%;
  height: 1915px;
  padding: 0;
  overflow: hidden;
  background: #fbfaff;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey > .jl-wrap {
  position: relative;
  width: 1920px;
  max-width: none;
  height: 1913px;
  margin: 0 auto;
  padding: 0;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey {
  position: relative;
  width: 1920px;
  height: 1913px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
@media (min-width: 1920px) {
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey:has(.jl-case) {
    height: 2662px;
    overflow: visible;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey:has(.jl-case) > .jl-wrap,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey:has(.jl-case) .jl-journey {
    height: 2660px;
  }
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey__deco {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 2708px;
  overflow: visible;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey__deco svg {
  display: block;
  max-width: none;
  overflow: visible;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-section__head {
  position: absolute;
  left: 568px;
  top: 103px;
  width: 764px;
  max-width: none;
  height: 62px;
  margin: 0;
  text-align: center;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-section__head .jl-h2 {
  width: 764px;
  height: 62px;
  font-size: 48px;
  font-weight: 700;
  line-height: 62px;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey__rows {
  position: absolute;
  inset: 0;
  display: block;
  width: 1920px;
  height: 1913px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row {
  position: absolute;
  display: block;
  gap: 0;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) {
  left: 381px;
  top: 288px;
  width: 1158px;
  height: 392px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) {
  left: 381px;
  top: 819px;
  width: 1158px;
  height: 473px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) {
  left: 382px;
  top: 1374px;
  width: 1157px;
  height: 474px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__text,
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__media {
  position: absolute;
  margin: 0;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__text {
  left: 0;
  top: 3px;
  display: block;
  width: 564px;
  height: 385px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__media {
  left: 713px;
  top: 0;
  width: 445px;
  height: 392px;
  overflow: hidden;
  border-radius: 12px;
  background: #e8dcfa;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__media img {
  width: 445px;
  max-width: none;
  height: 392px;
  border-radius: 12px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-eyebrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 564px;
  height: 19px;
  margin: 0;
  color: #4801d4;
  font-size: 12px;
  font-weight: 600;
  line-height: 18.6px;
  letter-spacing: 1.68px;
  white-space: nowrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-h3 {
  position: absolute;
  left: 0;
  top: 27px;
  width: 541px;
  height: 90px;
  color: #12063d;
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  letter-spacing: 0;
  text-wrap: wrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps {
  position: absolute;
  left: 0;
  top: 137px;
  display: flex;
  width: 564px;
  height: 162px;
  gap: 17px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li {
  position: relative;
  display: flex;
  flex: none;
  align-items: flex-start;
  width: 564px;
  margin: 0;
  padding: 0 0 17px;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid #d3c2e4;
  color: #57517a;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li:first-child {
  height: 54px;
  padding: 17px 0;
  border-top: 1px solid #d3c2e4;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li:nth-child(n+2) {
  height: 37px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li::before {
  position: static;
  flex: 0 0 14px;
  width: 14px;
  height: 19px;
  color: #4801d4;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__actions {
  position: absolute;
  left: 0;
  top: 329px;
  display: block;
  width: 168px;
  height: 56px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-btn {
  width: 168px;
  height: 56px;
  padding: 16px 27px;
  gap: 4px;
  border: 0;
  border-radius: 32px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-btn svg {
  width: 24px;
  height: 24px;
}

/* Keep the remaining journey blocks aligned to their approved hand-off points. */
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__media {
  left: 0;
  top: 0;
  width: 445px;
  height: 473px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__media img {
  width: 445px;
  max-width: none;
  height: 473px;
  border-radius: 12px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__text {
  left: 594px;
  top: 112px;
  display: block;
  width: 564px;
  height: 243px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-eyebrow {
  position: absolute;
  left: 0;
  top: 0;
  width: 564px;
  height: 19px;
  margin: 0;
  color: #4801d4;
  font-size: 12px;
  font-weight: 600;
  line-height: 18.6px;
  letter-spacing: 1.68px;
  white-space: nowrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-h3 {
  position: absolute;
  left: 0;
  top: 27px;
  width: 564px;
  height: 90px;
  color: #12063d;
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  letter-spacing: 0;
  text-wrap: wrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__text > p:not(.jl-eyebrow) {
  position: absolute;
  left: 0;
  top: 137px;
  width: 564px;
  height: 20px;
  color: #57517a;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__actions {
  position: absolute;
  left: 0;
  top: 187px;
  display: block;
  width: 238px;
  height: 56px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-btn {
  width: 238px;
  height: 56px;
  padding: 16px 27px;
  gap: 4px;
  border: 0;
  border-radius: 32px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__text {
  left: 0;
  top: 65.765625px;
  display: block;
  width: 564px;
  height: 488.46875px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-eyebrow {
  position: absolute;
  left: 0;
  top: -2px;
  width: 222.212524px;
  height: 14px;
  margin: 0;
  color: #4801d4;
  font-size: 12px;
  font-weight: 600;
  line-height: 18.6px;
  letter-spacing: 1.68px;
  white-space: nowrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-h3 {
  position: absolute;
  left: 0;
  top: 31.59375px;
  width: 518.394592px;
  height: 38px;
  color: #12063d;
  font-size: 32px;
  font-weight: 600;
  line-height: 49.6px;
  letter-spacing: -0.64px;
  white-space: nowrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-badge-pill {
  position: absolute;
  left: -1px;
  top: 97.234375px;
  display: flex;
  width: 341px;
  height: 62px;
  margin: 0;
  padding: 12px 20px;
  gap: 13px;
  border: 1px solid #dbd8e6;
  border-radius: 12px;
  background: #fff;
  color: #2e2177;
  font-size: 14px;
  font-weight: 600;
  line-height: 21.7px;
  white-space: nowrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-badge-pill img {
  flex: none;
  width: 34px;
  max-width: none;
  height: 38px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks {
  position: absolute;
  left: 0;
  top: 181.875px;
  display: block;
  width: 520px;
  height: 162.59px;
  margin: 0;
  padding: 0;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li {
  position: absolute;
  left: 0;
  display: block;
  width: 520px;
  margin: 0;
  padding: 0;
  border-top: 1px solid #dbd8e6;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(1) { top: 0; height: 53px; }
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(2) { top: 53px; height: 53px; }
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3) {
  top: 106px;
  height: 56.59px;
  border-bottom: 1px solid #dbd8e6;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks svg { display: none; }
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #fff;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::after {
  content: "✓";
  position: absolute;
  left: -1px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #0f6e56;
  font-family: var(--jl-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 20.15px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3)::before { top: 16.296875px; }
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3)::after { top: 15.296875px; }
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks span {
  position: absolute;
  left: 38px;
  top: 15.375px;
  height: 18px;
  color: #2e2177;
  font-size: 15px;
  font-weight: 400;
  line-height: 23.25px;
  white-space: nowrap;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3) span { top: 16.6796875px; }
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__actions {
  position: absolute;
  left: 0;
  top: 366.234375px;
  display: flex;
  width: 351px;
  height: 56px;
  gap: 20px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-btn {
  height: 56px;
  padding: 16px 27px;
  gap: 4px;
  border-radius: 32px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-btn:first-child {
  position: relative;
  top: .234375px;
  width: 178px;
  border: 0;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-btn:last-child {
  width: 153px;
  padding-inline: 26px;
  border: 1px solid #4801d4;
  background: #fff;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__media {
  left: 637px;
  top: 0;
  width: 520px;
  height: 474px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__media img {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  max-width: none;
  height: 474px;
  border-radius: 0;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case {
  position: absolute;
  left: 262px;
  top: 1913px;
  width: 1396px;
  height: 747px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__art {
  display: block;
  width: 1396px;
  max-width: none;
  height: 747px;
}
[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__content {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* The desktop case study is a composed Figma asset. Keep its real CTA aligned
   over the baked button so pointer and keyboard users still get a working
   control, and draw a visible focus ring from the non-transparent parent. */
@media (min-width: 1920px) {
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__cta {
    position: absolute;
    left: 572.625px;
    top: 629px;
    display: block;
    width: 250.75px;
    height: 56px;
    margin: 0;
    pointer-events: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__cta .jl-btn {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    pointer-events: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case:has(.jl-case__cta .jl-btn:focus-visible)::after {
    content: "";
    position: absolute;
    left: 572.625px;
    top: 629px;
    width: 250.75px;
    height: 56px;
    border-radius: 32px;
    outline: 3px solid #160fe6;
    outline-offset: 4px;
    pointer-events: none;
  }
}

/* The Figma file contains no responsive frame. The shipped layout still
   reflows below desktop, while artboard mode reasserts the exact stage below. */
@media (max-width: 1919px) {
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey {
    height: auto;
    padding: 64px 0;
    overflow: hidden;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey > .jl-wrap {
    width: 100%;
    max-width: calc(var(--jl-wide) + var(--jl-gutter) * 2);
    height: auto;
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey {
    width: 100%;
    height: auto;
    padding: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey__deco { display: none; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-section__head {
    position: static;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 0 auto 48px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-section__head .jl-h2 {
    width: auto;
    height: auto;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.2;
    white-space: normal;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey__rows {
    position: static;
    display: flex;
    width: 100%;
    height: auto;
    gap: 64px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) {
    position: static;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__text,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__media,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) .jl-row__text,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) .jl-row__media {
    position: static;
    width: auto;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__text,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__text {
    display: flex;
    gap: 16px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-eyebrow,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-h3,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__actions {
    position: static;
    width: 100%;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-h3 {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.25;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps {
    gap: 12px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li:first-child,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li:nth-child(n+2) {
    display: block;
    width: 100%;
    height: auto;
    padding: 12px 0 12px 34px;
    border-top: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li::before {
    position: absolute;
    left: 0;
    top: 12px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__actions { width: auto; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__text {
    display: flex;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-eyebrow,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-h3,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__text > p:not(.jl-eyebrow),
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__actions {
    position: static;
    width: 100%;
    height: auto;
    white-space: normal;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-h3 {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.25;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__actions { width: auto; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__text {
    display: flex;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-eyebrow,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-h3,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-badge-pill,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__actions {
    position: static;
    width: 100%;
    height: auto;
    white-space: normal;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-h3 {
    font-size: clamp(27px, 4vw, 32px);
    line-height: 1.3;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-badge-pill {
    width: fit-content;
    max-width: 100%;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks {
    display: flex;
    gap: 10px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(n) {
    position: relative;
    top: auto;
    display: flex;
    width: 100%;
    height: auto;
    min-height: 24px;
    gap: 0;
    align-items: flex-start;
    border: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::before,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::after,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3)::before,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3)::after {
    position: absolute;
    flex: none;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::before,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3)::before {
    left: 0;
    top: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::after,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3)::after {
    left: -1px;
    top: -1px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks span,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3) span {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: auto;
    margin-left: 38px;
    white-space: normal;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__actions {
    display: flex;
    width: auto;
    gap: 12px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__media img {
    position: static;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__media img,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) .jl-row__media img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 64px;
    padding: clamp(28px, 4vw, 56px);
    overflow: hidden;
    border-radius: 32px;
    background: var(--jl-lilac);
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__art { display: none; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__content {
    position: static;
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 860px) {
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) {
    grid-template-columns: 1fr;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row--flip .jl-row__text { order: 0; }
}

@media (max-width: 380px) {
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__actions {
    flex-direction: column;
    width: 100%;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-btn:first-child,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-btn:last-child {
    position: static;
    width: 100%;
  }
}

/* Fixed-canvas reassertion after the responsive journey rules. */
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey {
  height: 1915px;
  padding: 0;
  overflow: hidden;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey > .jl-wrap {
  width: 1920px;
  max-width: none;
  height: 1913px;
  margin: 0;
  padding: 0;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey {
  width: 1920px;
  height: 1913px;
  padding: 0;
  overflow: visible;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey:has(.jl-case) {
  height: 2662px;
  overflow: visible;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey:has(.jl-case) > .jl-wrap,
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey:has(.jl-case) .jl-journey {
  height: 2660px;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey__deco {
  display: block;
  width: 1920px;
  height: 2708px;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-section__head {
  position: absolute;
  left: 568px;
  top: 103px;
  width: 764px;
  max-width: none;
  height: 62px;
  margin: 0;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-section__head .jl-h2 {
  width: 764px;
  height: 62px;
  font-size: 48px;
  line-height: 62px;
  white-space: nowrap;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey__rows {
  position: absolute;
  display: block;
  width: 1920px;
  height: 1913px;
  gap: 0;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row,
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) {
  position: absolute;
  display: block;
  gap: 0;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) { left:381px; top:288px; width:1158px; height:392px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) { left:381px; top:819px; width:1158px; height:473px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) { left:382px; top:1374px; width:1157px; height:474px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__text,
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__media,
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) .jl-row__text,
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) .jl-row__media { position:absolute; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__text { left:0; top:3px; display:block; width:564px; height:385px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__media { left:713px; top:0; width:445px; height:392px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-eyebrow { position:absolute; left:0; top:0; width:564px; height:19px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-h3 { position:absolute; left:0; top:27px; width:541px; height:90px; font-size:36px; line-height:45px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps { position:absolute; left:0; top:137px; width:564px; height:162px; gap:17px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li { position:relative; display:flex; width:564px; padding:0 0 17px; gap:12px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li:first-child { height:54px; padding:17px 0; border-top:1px solid #d3c2e4; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li:nth-child(n+2) { height:37px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li::before { position:static; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__actions { position:absolute; left:0; top:329px; width:168px; height:56px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__media { left:0; top:0; width:445px; height:473px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__text { left:594px; top:112px; display:block; width:564px; height:243px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-eyebrow { position:absolute; left:0; top:0; width:564px; height:19px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-h3 { position:absolute; left:0; top:27px; width:564px; height:90px; font-size:36px; line-height:45px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__text > p:not(.jl-eyebrow) { position:absolute; left:0; top:137px; width:564px; height:20px; white-space:nowrap; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__actions { position:absolute; left:0; top:187px; width:238px; height:56px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__text { left:0; top:65.765625px; display:block; width:564px; height:488.46875px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-eyebrow { position:absolute; left:0; top:-2px; width:222.212524px; height:14px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-h3 { position:absolute; left:0; top:31.59375px; width:518.394592px; height:38px; font-size:32px; line-height:49.6px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-badge-pill { position:absolute; left:-1px; top:97.234375px; width:341px; height:62px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks { position:absolute; left:0; top:181.875px; display:block; width:520px; height:162.59px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li,
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(n) { position:absolute; display:block; width:520px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(1) { top:0; height:53px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(2) { top:53px; height:53px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3) { top:106px; height:56.59px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::before { position:absolute; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::after { position:absolute; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks span { position:absolute; height:18px; white-space:nowrap; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__actions { position:absolute; left:0; top:366.234375px; display:flex; width:351px; height:56px; gap:20px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__media { left:637px; top:0; width:520px; height:474px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__media img { position:absolute; left:0; top:0; width:520px; max-width:none; height:474px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case { position:absolute; left:262px; top:1913px; width:1396px; height:747px; margin:0; padding:0; overflow:visible; border-radius:0; background:transparent; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__art { display:block; width:1396px; max-width:none; height:747px; }
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__content { position:absolute; inset:0; opacity:0; pointer-events:none; }

/* ==================== LOVED BY — FIGMA 633:8613 ======================== */
/* The card carousel's first state is a 641px static Figma composition. The
   real testimonial HTML remains in the accessibility tree and becomes the
   visible, readable layout below desktop; the video card stays live at every
   size and is positioned from its own Figma nodes. */
.jl-section--loved-by {
  position: relative;
  width: 100%;
  height: 1125px;
  padding: 0;
  overflow: visible;
  background: var(--jl-page);
}
.jl-section--loved-by > .jl-loved-by__art {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  display: block;
  width: 1920px;
  max-width: none;
  height: 641px;
}
.jl-section--loved-by > .jl-wrap {
  position: relative;
  width: 1920px;
  max-width: none;
  height: 1125px;
  margin: 0 auto;
  padding: 0;
}
.jl-section--loved-by .jl-section__head,
.jl-section--loved-by > .jl-wrap > .jl-quotes {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.jl-section--loved-by .jl-videoband {
  position: absolute;
  left: 412px;
  top: 641px;
  display: block;
  width: 1096px;
  max-width: none;
  height: 386.13px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 20px;
  background: #2e2177;
}
.jl-section--loved-by .jl-videoband__art {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: block;
  width: 1096px;
  max-width: none;
  height: 387px;
  pointer-events: none;
}
.jl-section--loved-by .jl-videoband > div:first-child {
  position: absolute;
  left: 52px;
  top: 52px;
  width: 451.42px;
  height: 282.13px;
}
.jl-section--loved-by .jl-videoband .jl-video {
  width: 451.42px;
  height: 282.13px;
  border-radius: 14px;
}
.jl-section--loved-by .jl-videoband__copy {
  position: absolute;
  left: 547.421875px;
  top: 76.453125px;
  display: block;
  width: 466.092926px;
  height: 237px;
}
.jl-section--loved-by .jl-videoband__quote {
  position: absolute;
  left: 0;
  top: 0;
  width: 466.092926px;
  height: 27px;
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 34.1px;
  letter-spacing: -.44px;
  white-space: nowrap;
}
.jl-section--loved-by .jl-videoband__body {
  position: absolute;
  left: 0;
  top: 44px;
  width: 466.092926px;
  height: 70px;
  margin: 0;
  color: #dfc5fe;
  font-size: 16px;
  font-weight: 500;
  line-height: 23.25px;
}
.jl-section--loved-by .jl-videoband__who {
  position: absolute;
  left: 0;
  top: 131px;
  width: 466.092926px;
  height: 17px;
  margin: 0;
  color: #d1cbec;
  font-size: 16px;
  font-weight: 600;
  line-height: 20.93px;
  white-space: nowrap;
}
.jl-section--loved-by .jl-videoband__actions {
  position: absolute;
  left: 0;
  top: 181px;
  display: flex;
  width: 444px;
  height: 56px;
  margin: 0;
  gap: 12px;
}
.jl-section--loved-by .jl-videoband__actions .jl-btn {
  height: 56px;
  padding: 16px 27px;
  gap: 4px;
  border-radius: 32px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}
.jl-section--loved-by .jl-videoband__actions .jl-btn:first-child {
  width: 279px;
  border: 0;
}
.jl-section--loved-by .jl-videoband__actions .jl-btn:last-child {
  width: 153px;
  padding-inline: 26px;
  border: 1px solid #fff;
}

@media (max-width: 1919px) {
  .jl-section--loved-by {
    height: auto;
    padding: 104px 0;
    overflow: hidden;
  }
  .jl-section--loved-by > .jl-loved-by__art { display: none; }
  .jl-section--loved-by > .jl-wrap {
    position: relative;
    display: grid;
    width: 100%;
    max-width: calc(var(--jl-wide) + var(--jl-gutter) * 2);
    height: auto;
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
    grid-template-columns: minmax(0, 1fr);
  }
  .jl-section--loved-by .jl-section__head {
    position: static;
    grid-area: 1 / 1;
    opacity: 1;
    pointer-events: auto;
  }
  .jl-section--loved-by > .jl-wrap > .jl-quotes {
    position: static;
    grid-area: 2 / 1;
    opacity: 1;
    pointer-events: auto;
  }
  .jl-section--loved-by .jl-wordquote__dots { grid-area: 3 / 1; }
  .jl-section--loved-by .jl-wordquote__arrow {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-area: 2 / 1;
    align-self: center;
    margin-inline: 12px;
  }
  .jl-section--loved-by .jl-wordquote__arrow--prev { justify-self: start; }
  .jl-section--loved-by .jl-wordquote__arrow--next { justify-self: end; }
  .jl-section--loved-by > .jl-wrap > div[style="height:40px"] { display: none; }
  .jl-section--loved-by .jl-videoband {
    position: static;
    display: grid;
    width: 100%;
    max-width: 1096px;
    height: auto;
    min-height: 386.13px;
    margin: 40px auto 0;
    padding: 52px;
    grid-area: 4 / 1;
    grid-template-columns: 451.42px minmax(0, 1fr);
    gap: 44px;
    align-items: center;
  }
  .jl-section--loved-by .jl-videoband__art { display: none; }
  .jl-section--loved-by .jl-videoband > div:first-child,
  .jl-section--loved-by .jl-videoband__copy {
    position: static;
    width: auto;
    height: auto;
  }
  .jl-section--loved-by .jl-videoband .jl-video {
    width: 451.42px;
    max-width: 100%;
    height: 282.13px;
  }
  .jl-section--loved-by .jl-videoband__copy {
    display: flex;
    gap: 17px;
  }
  .jl-section--loved-by .jl-videoband__quote,
  .jl-section--loved-by .jl-videoband__body,
  .jl-section--loved-by .jl-videoband__who,
  .jl-section--loved-by .jl-videoband__actions {
    position: static;
    width: auto;
    height: auto;
    white-space: normal;
  }
  .jl-section--loved-by .jl-videoband__actions .jl-btn:first-child,
  .jl-section--loved-by .jl-videoband__actions .jl-btn:last-child { width: auto; }
}
@media (max-width: 900px) {
  .jl-section--loved-by > .jl-wrap > .jl-quotes {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .jl-section--loved-by .jl-quote {
    width: 100%;
    min-width: 100%;
    scroll-snap-align: start;
  }
  .jl-section--loved-by .jl-videoband {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .jl-section--loved-by .jl-videoband .jl-video {
    width: 100%;
    height: auto;
    aspect-ratio: 451.42 / 282.13;
  }
  .jl-section--loved-by .jl-videoband__actions { flex-wrap: wrap; }
}
@media (min-width: 901px) and (max-width: 1919px) {
  .jl-section--loved-by .jl-wordquote__arrow:disabled { display: none; }
}

/* Fixed-canvas reassertion after the responsive loved-by rules. */
.jl-artboard-host .jl-section--loved-by { height:1125px; padding:0; overflow:visible; }
.jl-artboard-host .jl-section--loved-by > .jl-loved-by__art { display:block; width:1920px; max-width:none; height:641px; }
.jl-artboard-host .jl-section--loved-by > .jl-wrap { position:relative; width:1920px; max-width:none; height:1125px; margin:0; padding:0; }
.jl-artboard-host .jl-section--loved-by .jl-section__head,
.jl-artboard-host .jl-section--loved-by > .jl-wrap > .jl-quotes { position:absolute; opacity:0; pointer-events:none; }
.jl-artboard-host .jl-section--loved-by .jl-videoband { position:absolute; left:412px; top:641px; display:block; width:1096px; max-width:none; height:386.13px; min-height:0; margin:0; padding:0; }
.jl-artboard-host .jl-section--loved-by .jl-videoband__art { position:absolute; left:0; top:0; z-index:3; display:block; width:1096px; max-width:none; height:387px; }
.jl-artboard-host .jl-section--loved-by .jl-videoband > div:first-child { position:absolute; left:52px; top:52px; width:451.42px; height:282.13px; }
.jl-artboard-host .jl-section--loved-by .jl-videoband .jl-video { width:451.42px; max-width:none; height:282.13px; aspect-ratio:auto; }
.jl-artboard-host .jl-section--loved-by .jl-videoband__copy { position:absolute; left:547.421875px; top:76.453125px; display:block; width:466.092926px; height:237px; }
.jl-artboard-host .jl-section--loved-by .jl-videoband__quote { position:absolute; left:0; top:0; width:466.092926px; height:27px; white-space:nowrap; }
.jl-artboard-host .jl-section--loved-by .jl-videoband__body { position:absolute; left:0; top:44px; width:466.092926px; height:70px; }
.jl-artboard-host .jl-section--loved-by .jl-videoband__who { position:absolute; left:0; top:131px; width:466.092926px; height:17px; white-space:nowrap; }
.jl-artboard-host .jl-section--loved-by .jl-videoband__actions { position:absolute; left:0; top:181px; width:444px; height:56px; flex-wrap:nowrap; gap:12px; }
.jl-artboard-host .jl-section--loved-by .jl-videoband__actions .jl-btn:first-child { width:279px; }
.jl-artboard-host .jl-section--loved-by .jl-videoband__actions .jl-btn:last-child { width:153px; }

/* ================= COMPARISON — FIGMA 633:9606 ========================= */
.jl-section--comparison {
  position: relative;
  width: 100%;
  height: 905px;
  padding: 0;
  overflow: visible;
  background: #fbfaff;
}
.jl-section--comparison > .jl-comparison__art {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  display: block;
  width: 1920px;
  max-width: none;
  height: 905px;
  pointer-events: none;
}
.jl-section--comparison > .jl-wrap {
  position: relative;
  width: 1920px;
  max-width: none;
  height: 905px;
  margin: 0 auto;
  padding: 0;
}
.jl-section--comparison .jl-compare {
  position: absolute;
  inset: 0;
  opacity: 0;
}
@media (min-width: 1920px) {
  .jl-section--comparison .jl-compare { pointer-events: none; }
  .jl-section--comparison .jl-compare__cta {
    position: absolute;
    left: 870px;
    top: 782px;
    display: block;
    width: 181px;
    height: 56px;
    margin: 0;
  }
  .jl-section--comparison .jl-compare__cta .jl-btn {
    width: 181px;
    height: 56px;
    padding: 0;
    pointer-events: auto;
  }
  .jl-section--comparison > .jl-wrap:has(.jl-compare__cta .jl-btn:hover)::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 870px;
    top: 782px;
    width: 181px;
    height: 56px;
    border-radius: 999px;
    background: rgb(0 0 0 / 12%);
    pointer-events: none;
  }
  .jl-section--comparison > .jl-wrap:has(.jl-compare__cta .jl-btn:focus-visible)::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 870px;
    top: 782px;
    width: 181px;
    height: 56px;
    border-radius: 999px;
    outline: 3px solid var(--jl-purple);
    outline-offset: 3px;
    pointer-events: none;
  }
}
@media (max-width: 1919px) {
  .jl-section--comparison {
    height: auto;
    padding: 104px 0;
    overflow: hidden;
  }
  .jl-section--comparison > .jl-comparison__art { display: none; }
  .jl-section--comparison > .jl-wrap {
    position: static;
    width: 100%;
    max-width: calc(var(--jl-wide) + var(--jl-gutter) * 2);
    height: auto;
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
  }
  .jl-section--comparison .jl-compare {
    position: static;
    opacity: 1;
  }
}

.jl-artboard-host .jl-section--comparison { height:905px; padding:0; overflow:visible; }
.jl-artboard-host .jl-section--comparison > .jl-comparison__art { display:block; width:1920px; max-width:none; height:905px; }
.jl-artboard-host .jl-section--comparison > .jl-wrap { position:relative; width:1920px; max-width:none; height:905px; margin:0; padding:0; }
.jl-artboard-host .jl-section--comparison .jl-compare { position:absolute; inset:0; opacity:0; }

/* Keep the comparison's 1096px content band on laptop screens instead of
   spending a third of the available width on inner padding. */
@media (min-width: 1200px) and (max-width: 1919px) {
  .jl-section--comparison .jl-compare {
    padding: 82.2px max(24px, calc((100% - 1096px) / 2)) 67px;
  }
  .jl-section--comparison .jl-section__head .jl-h2 {
    width: min(603px, 100%);
    max-width: none;
    font-size: 36px;
    font-weight: 700;
    line-height: 41.4px;
    letter-spacing: -.36px;
  }
  .jl-section--comparison table { table-layout: fixed; min-width: 0; }
  .jl-section--comparison thead th { padding-inline: 0; }
  .jl-section--comparison thead th:nth-child(1) { width: 29.8157%; }
  .jl-section--comparison thead th:nth-child(2) { width: 18.0182%; }
  .jl-section--comparison thead th:nth-child(3) { width: 19.9106%; }
  .jl-section--comparison thead th:nth-child(4) { width: 21.8011%; }
  .jl-section--comparison thead th:nth-child(5) { width: 10.4544%; }
  .jl-section--comparison tbody th,
  .jl-section--comparison tbody td { height: 84px; padding-block: 0; }
}

/* ================= FAQ — FIGMA 633:10110 =============================== */
.jl-section--faq-art {
  position: relative;
  width: 100%;
  height: 771px;
  padding: 0;
  overflow: visible;
  background: #fbfaff;
}
.jl-section--faq-art > .jl-faq__art {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  display: block;
  width: 1920px;
  max-width: none;
  height: 771px;
  pointer-events: none;
}
.jl-section--faq-art > .jl-wrap {
  position: relative;
  width: 1920px;
  max-width: none;
  height: 771px;
  margin: 0 auto;
  padding: 0;
}
.jl-section--faq-art .jl-section__head,
.jl-section--faq-art .jl-faq {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 1920px) {
  .jl-section--faq-art .jl-section__head {
    left: 612px;
    top: 100.2px;
    width: 696px;
    max-width: none;
    height: 65.5px;
    margin: 0;
    text-align: left;
  }
  .jl-section--faq-art .jl-section__head .jl-eyebrow {
    height: 18.6px;
    margin: 0;
    font-size: 12px;
    line-height: 18.6px;
    letter-spacing: 1.68px;
  }
  .jl-section--faq-art .jl-section__head .jl-h2 {
    height: 41.4px;
    margin-top: 5.5px;
    font-size: 36px;
    line-height: 41.4px;
    letter-spacing: -.36px;
    white-space: nowrap;
  }
  .jl-section--faq-art .jl-faq {
    left: 612px;
    top: 230.98px;
    width: 696px;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .jl-section--faq-art .jl-faq__item {
    min-height: 0;
    border: 0;
    box-shadow: inset 0 -1px #e3ddf5;
  }
  .jl-section--faq-art .jl-faq__item h3 { margin: 0; }
  .jl-section--faq-art .jl-faq__q {
    position: relative;
    align-items: flex-start;
    width: 696px;
    height: 76px;
    padding: 25.19px 0 0;
    font-size: 16px;
    line-height: 24.8px;
    pointer-events: auto;
  }
  .jl-section--faq-art .jl-faq__q[aria-expanded="true"] { height: 53px; }
  .jl-section--faq-art .jl-faq__sign {
    position: absolute;
    top: 22px;
    right: 0;
    width: 12px;
    height: 31px;
  }
  .jl-section--faq-art .jl-faq__sign::before { width: 12px; }
  .jl-section--faq-art .jl-faq__sign::after { height: 12px; }
  .jl-section--faq-art .jl-faq__a {
    width: 590.92px;
    max-width: none;
    min-height: 81.94px;
    padding: 13.23px 0 23.75px;
    color: #57517a;
    font-size: 14.5px;
    line-height: 22.48px;
  }
  .jl-section--faq-art:not(.is-interacted):has(.jl-faq__item:nth-child(1) .jl-faq__q:is(:hover, :focus-visible)) { --jl-faq-row-y: 230.98px; --jl-faq-row-h: 53px; }
  .jl-section--faq-art:not(.is-interacted):has(.jl-faq__item:nth-child(2) .jl-faq__q:is(:hover, :focus-visible)) { --jl-faq-row-y: 365.92px; --jl-faq-row-h: 76px; }
  .jl-section--faq-art:not(.is-interacted):has(.jl-faq__item:nth-child(3) .jl-faq__q:is(:hover, :focus-visible)) { --jl-faq-row-y: 441.92px; --jl-faq-row-h: 76px; }
  .jl-section--faq-art:not(.is-interacted):has(.jl-faq__item:nth-child(4) .jl-faq__q:is(:hover, :focus-visible)) { --jl-faq-row-y: 517.92px; --jl-faq-row-h: 76px; }
  .jl-section--faq-art:not(.is-interacted):has(.jl-faq__item:nth-child(5) .jl-faq__q:is(:hover, :focus-visible)) { --jl-faq-row-y: 593.92px; --jl-faq-row-h: 76px; }
  .jl-section--faq-art:not(.is-interacted):has(.jl-faq__q:hover) > .jl-wrap::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 612px;
    top: var(--jl-faq-row-y);
    width: 696px;
    height: var(--jl-faq-row-h);
    border-radius: 4px;
    background: rgb(75 15 224 / 4%);
    pointer-events: none;
  }
  .jl-section--faq-art:not(.is-interacted):has(.jl-faq__q:focus-visible) > .jl-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: 612px;
    top: var(--jl-faq-row-y);
    width: 696px;
    height: var(--jl-faq-row-h);
    border-radius: 4px;
    outline: 3px solid var(--jl-purple);
    outline-offset: 3px;
    pointer-events: none;
  }
  .jl-section--faq-art.is-interacted {
    height: auto;
    min-height: 771px;
    padding: 100.2px 0 101.08px;
    overflow: hidden;
  }
  .jl-section--faq-art.is-interacted > .jl-faq__art { display: none; }
  .jl-section--faq-art.is-interacted > .jl-wrap {
    position: relative;
    width: 760px;
    max-width: none;
    height: auto;
    margin: 0 auto;
    padding: 0 32px;
  }
  .jl-section--faq-art.is-interacted .jl-section__head {
    position: static;
    width: 696px;
    margin: 0 0 65.28px;
    opacity: 1;
    pointer-events: auto;
  }
  .jl-section--faq-art.is-interacted .jl-faq {
    position: static;
    width: 696px;
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 1919px) {
  .jl-section--faq-art {
    height: auto;
    padding: 104px 0;
    overflow: hidden;
  }
  .jl-section--faq-art > .jl-faq__art { display: none; }
  .jl-section--faq-art > .jl-wrap {
    position: static;
    width: 100%;
    max-width: calc(var(--jl-wide) + var(--jl-gutter) * 2);
    height: auto;
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
  }
  .jl-section--faq-art .jl-section__head,
  .jl-section--faq-art .jl-faq {
    position: static;
    opacity: 1;
    pointer-events: auto;
  }
}
.jl-artboard-host .jl-section--faq-art { height:771px; padding:0; overflow:visible; }
.jl-artboard-host .jl-section--faq-art > .jl-faq__art { display:block; width:1920px; max-width:none; height:771px; }
.jl-artboard-host .jl-section--faq-art > .jl-wrap { position:relative; width:1920px; max-width:none; height:771px; margin:0; padding:0; }
.jl-artboard-host .jl-section--faq-art .jl-section__head,
.jl-artboard-host .jl-section--faq-art .jl-faq { position:absolute; opacity:0; pointer-events:none; }

/* ================= CLOSING CTA — FIGMA 633:10131 ======================== */
.jl-ctaband--art {
  position: relative;
  z-index: 1;
  display: flow-root;
  width: 100%;
  height: 413.6300048828125px;
  min-height: 0;
  margin-bottom: -0.6300048828125px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}
.jl-ctaband--art > .jl-ctaband__art {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 1920px;
  max-width: none;
  height: 414px;
  translate: -50% 0;
  pointer-events: none;
}
.jl-ctaband--art > .jl-ctaband__photo,
.jl-ctaband--art > .jl-ctaband__deco { display: none; }
.jl-ctaband--art > .jl-wrap {
  position: relative;
  display: flow-root;
  width: 1920px;
  max-width: none;
  height: 414px;
  margin: 0 auto;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 1920px) {
  .jl-ctaband--art .jl-ctaband__actions {
    position: absolute;
    left: 873.08px;
    top: 250px;
    display: block;
    width: 173.84px;
    height: 51.25px;
    margin: 0;
  }
  .jl-ctaband--art .jl-ctaband__actions .jl-btn {
    width: 173.84px;
    height: 51.25px;
    padding: 0;
    pointer-events: auto;
  }
  .jl-ctaband--art:has(.jl-ctaband__actions .jl-btn:hover)::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: calc(50% - 86.92px);
    top: 250px;
    width: 173.84px;
    height: 51.25px;
    border-radius: 100px;
    background: rgb(0 0 0 / 10%);
    pointer-events: none;
  }
  .jl-ctaband--art:has(.jl-ctaband__actions .jl-btn:focus-visible)::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: calc(50% - 86.92px);
    top: 250px;
    width: 173.84px;
    height: 51.25px;
    border-radius: 100px;
    outline: 3px solid #fff;
    outline-offset: 3px;
    pointer-events: none;
  }
}
@media (max-width: 1919px) {
  .jl-ctaband--art {
    z-index: auto;
    height: auto;
    min-height: 0;
    margin-bottom: 0;
    padding: 104px 0;
    overflow: hidden;
    background: #4b0fe0;
    border-radius: 90px 90px 0 0;
  }
  .jl-ctaband--art > .jl-ctaband__art { display: none; }
  .jl-ctaband--art > .jl-ctaband__photo { display: block; }
  .jl-ctaband--art > .jl-wrap {
    position: relative;
    width: 100%;
    max-width: calc(var(--jl-wide) + var(--jl-gutter) * 2);
    height: auto;
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
    opacity: 1;
    pointer-events: auto;
  }
}
.jl-artboard-host .jl-ctaband--art { z-index:1; height:413.6300048828125px; min-height:0; margin-bottom:-0.6300048828125px; padding:0; overflow:visible; background:transparent; border-radius:0; }
.jl-artboard-host .jl-ctaband--art > .jl-ctaband__art { display:block; width:1920px; max-width:none; height:414px; }
.jl-artboard-host .jl-ctaband--art > .jl-ctaband__photo,
.jl-artboard-host .jl-ctaband--art > .jl-ctaband__deco { display:none; }
.jl-artboard-host .jl-ctaband--art > .jl-wrap { position:relative; width:1920px; max-width:none; height:414px; margin:0; padding:0; opacity:0; pointer-events:none; }

/* ================= FOOTER — FIGMA 633:8553 ============================== */
.jl-foot--art {
  position: relative;
  width: 100%;
  height: 429.29998779296875px;
  padding: 0;
  overflow: visible;
  background: #2e2177;
}
.jl-foot--art > .jl-foot__art {
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 1920px;
  max-width: none;
  height: 429px;
  translate: -50% 0;
  pointer-events: none;
}
.jl-foot--art > .jl-wrap {
  position: relative;
  width: 1920px;
  max-width: none;
  height: 429.29998779296875px;
  margin: 0 auto;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 1920px) {
  .jl-foot--art > .jl-wrap {
    opacity: 1;
    pointer-events: none;
  }
  .jl-foot--art .jl-foot__grid {
    position: absolute;
    inset: 0;
    display: block;
    width: 1920px;
    height: 429.3px;
  }
  .jl-foot--art .jl-foot__grid > div:first-child,
  .jl-foot--art .jl-foot__grid > div:nth-child(2) > h3,
  .jl-foot--art .jl-foot__news > h3,
  .jl-foot--art .jl-foot__news > p,
  .jl-foot--art .jl-foot__bar > p { opacity: 0; }
  .jl-foot--art .jl-foot__grid > div:nth-child(2),
  .jl-foot--art .jl-foot__news {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .jl-foot--art .jl-foot__list {
    position: absolute;
    inset: 0;
    display: block;
  }
  .jl-foot--art .jl-foot__list a,
  .jl-foot--art .jl-foot__bar nav a {
    position: absolute;
    display: block;
    min-width: 0;
    min-height: 0;
    color: transparent !important;
    text-decoration: none !important;
    background: transparent;
    pointer-events: auto;
  }
  .jl-foot--art .jl-foot__list a:focus-visible,
  .jl-foot--art .jl-foot__bar nav a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
  }
  .jl-foot--art .jl-foot__list a:first-child {
    left: 821.11px;
    top: 103.69px;
    width: 160px;
    height: 32px;
  }
  .jl-foot--art .jl-foot__list a:nth-child(2) {
    left: 821.11px;
    top: 136.15px;
    width: 160px;
    height: 32px;
  }
  .jl-foot--art .jl-foot__news form { position: static; }
  .jl-foot--art .jl-foot__news input {
    position: absolute;
    width: 320px;
    min-height: 0;
    height: 43px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid rgb(99 89 154);
    border-radius: 100px;
    background: rgb(62 50 130);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    opacity: 0;
    pointer-events: auto;
  }
  .jl-foot--art .jl-foot__news input:first-of-type {
    left: 1146.88px;
    top: 143.38px;
  }
  .jl-foot--art .jl-foot__news input:nth-of-type(2) {
    left: 1146.88px;
    top: 196.38px;
  }
  .jl-foot--art .jl-foot__news input:focus,
  .jl-foot--art .jl-foot__news input:not(:placeholder-shown) { opacity: 1; }
  .jl-foot--art .jl-foot__news input:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
  }
  .jl-foot--art .jl-foot__news input::placeholder { color: rgb(168 163 193); }
  .jl-foot--art .jl-foot__news button {
    position: absolute;
    left: 1146.88px;
    top: 249.38px;
    width: 320px;
    min-height: 0;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: transparent;
    font-size: 15px;
    font-weight: 600;
    pointer-events: auto;
  }
  .jl-foot--art .jl-foot__news button:hover,
  .jl-foot--art .jl-foot__news button:focus-visible {
    background: #a173fd;
    color: #fff;
    filter: none;
  }
  .jl-foot--art .jl-foot__news button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
  }
  .jl-foot--art .jl-foot__bar {
    position: absolute;
    left: 412px;
    top: 349.38px;
    display: block;
    width: 1096px;
    height: 47.92px;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
  }
  .jl-foot--art .jl-foot__bar nav {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }
  .jl-foot--art .jl-foot__bar nav a { top: 5px; height: 39px; }
  .jl-foot--art .jl-foot__bar nav a:nth-child(1) { left: 507.63px; width: 48.12px; }
  .jl-foot--art .jl-foot__bar nav a:nth-child(2) { left: 577.39px; width: 54.25px; }
  .jl-foot--art .jl-foot__bar nav a:nth-child(3) { left: 653.27px; width: 46.29px; }
  .jl-foot--art .jl-foot__bar nav a:nth-child(4) { left: 721.22px; width: 40.29px; }
  .jl-foot--art .jl-foot__bar nav a:nth-child(5) { left: 783.19px; width: 52px; }
  .jl-foot--art .jl-foot__bar nav a:nth-child(6) { left: 856.83px; width: 37.53px; }
  .jl-foot--art .jl-foot__bar nav a:nth-child(7) { left: 916.05px; width: 48.54px; }
  .jl-foot--art .jl-foot__bar nav a:nth-child(8) { left: 986.23px; width: 39.51px; }
  .jl-foot--art .jl-foot__bar nav a:nth-child(9) { left: 1047.42px; width: 48.93px; }
}
@media (max-width: 1919px) {
  .jl-foot--art {
    height: auto;
    padding: 76px 0 0;
    overflow: hidden;
  }
  .jl-foot--art > .jl-foot__art { display: none; }
  .jl-foot--art > .jl-wrap {
    position: static;
    width: 100%;
    max-width: calc(var(--jl-wide) + var(--jl-gutter) * 2);
    height: auto;
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
    opacity: 1;
    pointer-events: auto;
  }
}
.jl-artboard-host .jl-foot--art { height:429.29998779296875px; padding:0; overflow:visible; }
.jl-artboard-host .jl-foot--art > .jl-foot__art { display:block; width:1920px; max-width:none; height:429px; }
.jl-artboard-host .jl-foot--art > .jl-wrap { position:relative; width:1920px; max-width:none; height:429.29998779296875px; margin:0; padding:0; opacity:0; pointer-events:none; }

@media (max-width: 1919px) {
  .jl-site-header__selector,
  .jl-settext__filter select {
    min-height: 44px;
  }
  .jl-site-header__selector { height: 44px; }
  .jl-card__title a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
  .jl-marketing-card h3 a { min-height: 24px; }
}

/* ================================================= NATIVE DESKTOP ART ====
 * These sections were initially shipped as screenshot layers at the 1920px
 * review width. Keep the Figma geometry, but render the real headings, cards,
 * chart, controls and form fields. The responsive rules above remain the
 * source of truth below the fixed design viewport.
 */
@media (min-width: 1920px) {
  /* School case study (generic landing page). */
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case {
    overflow: hidden;
    border-radius: 90px;
    background: #f1edfb;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__content {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__head {
    position: absolute;
    left: 148px;
    top: 110px;
    width: 1098px;
    height: 72px;
    margin: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__head img {
    width: 58px;
    height: 58px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__head .jl-h3 {
    font-size: 30px;
    font-weight: 800;
    line-height: 46.5px;
    letter-spacing: -.6px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__head .jl-quote__role {
    margin-top: -5px;
    color: #1c1c1c;
    font-size: 16px;
    line-height: 22.48px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__grid {
    position: absolute;
    inset: 0;
    display: block;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__chart {
    position: absolute;
    left: 150px;
    top: 217px;
    width: 545px;
    height: 355px;
    padding: 28px;
    border-radius: 16px;
    background: #eae3fb;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__chart svg {
    height: 270px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__quotes {
    position: absolute;
    left: 751px;
    top: 268px;
    width: 497px;
    gap: 26px;
    color: #000;
    font-size: 17px;
    line-height: 28.05px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__quotes blockquote {
    margin: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__stats {
    position: absolute;
    left: 751px;
    top: 497px;
    display: grid;
    width: 497px;
    margin: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__stat {
    text-align: left;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__stat .jl-stat__n {
    font-size: 28px;
    line-height: 43.4px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__stat .jl-stat__c {
    margin: 0;
    color: #000;
    font-size: 13px;
    line-height: 20.15px;
  }

  /* Testimonial carousel and live video card. */
  .jl-section--loved-by > .jl-loved-by__art,
  .jl-section--loved-by .jl-videoband__art { display: none; }
  .jl-section--loved-by .jl-section__head {
    left: 412px;
    top: 105px;
    width: 1096px;
    max-width: none;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    text-align: center;
  }
  .jl-section--loved-by .jl-section__head .jl-eyebrow {
    font-size: 12px;
    line-height: 18.6px;
    letter-spacing: 1.68px;
  }
  .jl-section--loved-by .jl-section__head .jl-h2 {
    margin-top: 22px;
    font-size: 36px;
    line-height: 41.4px;
    letter-spacing: -.36px;
  }
  .jl-section--loved-by .jl-section__head .jl-rating { margin-top: 18px; }
  .jl-section--loved-by > .jl-wrap > .jl-quotes {
    left: 412px;
    top: 281px;
    display: grid;
    width: 1096px;
    grid-template-columns: 341.86px 336.93px 338.43px;
    gap: 33px;
    opacity: 1;
    pointer-events: auto;
  }
  .jl-section--loved-by .jl-quote {
    height: 270px;
    min-height: 270px;
    padding: 29px 27px;
    border-radius: 14px;
    gap: 24px;
  }
  .jl-section--loved-by .jl-quote:nth-child(2) { padding-inline: 25px; }
  .jl-section--loved-by .jl-quote__text {
    flex: 1 1 auto;
    min-height: 0;
    height: 138px;
    max-height: 138px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    color: #353138;
    font-size: 16px;
    font-weight: 500;
    line-height: 23.93px;
  }
  .jl-section--loved-by .jl-quote__who > span {
    min-width: 0;
    flex: 1 1 auto;
  }
  .jl-section--loved-by .jl-quote__name {
    display: block;
    overflow: hidden;
    color: #2e2177;
    font-size: 13px;
    line-height: 20.15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .jl-section--loved-by .jl-quote__role {
    display: block;
    overflow: hidden;
    color: #4b464f;
    font-size: 12px;
    line-height: 18.6px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Native comparison table on the full-width Figma lozenge. */
  .jl-section--comparison > .jl-comparison__art { display: none; }
  .jl-section--comparison .jl-compare {
    position: absolute;
    inset: 0;
    height: 905px;
    padding: 0;
    border-radius: 441px;
    opacity: 1;
    pointer-events: auto;
  }
  .jl-section--comparison .jl-section__head {
    position: absolute;
    left: 412px;
    top: 82.2px;
    width: 603px;
    margin: 0;
  }
  .jl-section--comparison .jl-section__head .jl-eyebrow {
    margin: 0;
    font-size: 12px;
    line-height: 18.6px;
    letter-spacing: 1.68px;
  }
  .jl-section--comparison .jl-section__head .jl-h2 {
    width: 603px;
    max-width: none;
    margin-top: 11.3px;
    font-size: 36px;
    font-weight: 700;
    line-height: 41.4px;
    letter-spacing: -.36px;
  }
  .jl-section--comparison .jl-compare__scroll {
    position: absolute;
    left: 412px;
    top: 228px;
    width: 1096px;
  }
  .jl-section--comparison .jl-compare:not(.jl-compare--single) table {
    width: 1096px;
    table-layout: fixed;
  }
  .jl-section--comparison thead th:nth-child(1) { width: 326.78px; }
  .jl-section--comparison thead th:nth-child(2) { width: 197.48px; }
  .jl-section--comparison thead th:nth-child(3) { width: 218.22px; }
  .jl-section--comparison thead th:nth-child(4) { width: 238.94px; }
  .jl-section--comparison thead th:nth-child(5) { width: 114.58px; }
  .jl-section--comparison thead th {
    position: relative;
    height: 94px;
    padding: 58px 0 17px;
    font-size: 14px;
    line-height: 18.6px;
    white-space: nowrap;
  }
  .jl-section--comparison .jl-compare__logo {
    position: absolute;
    left: 50%;
    top: 0;
    width: 59px;
    height: 46px;
    margin: 0;
    object-fit: contain;
    transform: translateX(-50%);
  }
  .jl-section--comparison thead th:nth-child(2) .jl-compare__logo { left: calc(50% - 8px); width: 57px; height: 45px; }
  .jl-section--comparison thead th:nth-child(3) .jl-compare__logo { top: 6.484px; width: 38.1335px; height: 33.0472px; }
  .jl-section--comparison thead th:nth-child(4) .jl-compare__logo { top: 11px; width: 32px; height: 32px; }
  .jl-section--comparison thead th:nth-child(5) .jl-compare__logo { top: 14.836px; width: 37.5912px; height: 28.3218px; }
  .jl-section--comparison tbody th,
  .jl-section--comparison tbody td {
    height: 84px;
    padding: 0 20px;
    line-height: 22.48px;
    border-bottom: 1px solid #e3ddf5;
  }
  .jl-section--comparison .jl-compare__cta { margin: 0; }

  /* The generic FAQ keeps the measured Figma positions but no image layer. */
  .jl-section--faq-art > .jl-faq__art { display: none; }
  .jl-section--faq-art .jl-section__head,
  .jl-section--faq-art .jl-faq {
    opacity: 1;
    pointer-events: auto;
  }

  /* Shared native footer, positioned to the 1096px Figma content band. */
  .jl-foot:not(.jl-foot--art) {
    min-height: 429.3px;
    padding: 0;
    overflow: visible;
  }
  .jl-foot:not(.jl-foot--art) > .jl-wrap {
    width: 1096px;
    max-width: none;
    min-height: 429.3px;
    margin: 0 auto;
    padding: 0;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__grid {
    display: grid;
    width: 1096px;
    min-height: 330px;
    grid-template-columns: 320px 89.11px 200px 125.77px 320px minmax(0, 1fr);
    align-items: start;
    gap: 0;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__grid > div:first-child {
    position: relative;
    width: 320px;
    margin-top: 67px;
    grid-column: 1;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__logo {
    width: 213px;
    height: 54.4606px;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__tag {
    margin-top: 45.69px;
    color: #c5bce8;
    font-size: 14.5px;
    line-height: 23.2px;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__grid > div:nth-child(2) {
    width: 200px;
    margin-top: 82.5px;
    grid-column: 3;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__news {
    width: 320px;
    margin-top: 82.5px;
    grid-column: 5;
  }
  .jl-foot:not(.jl-foot--art) h3 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1.12px;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__list { gap: 0; }
  .jl-foot:not(.jl-foot--art) .jl-foot__list a {
    min-height: 44px;
    color: #c5bce8;
    font-size: 14.5px;
    line-height: 22.48px;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__news > p {
    margin: -2px 0 12px !important;
    color: #c5bce8;
    font-size: 14px !important;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__news input:not([type="submit"]),
  .jl-foot:not(.jl-foot--art) .jl-foot__news input[type="submit"],
  .jl-foot:not(.jl-foot--art) .jl-foot__news button {
    width: 320px;
    height: 44px;
    min-height: 0;
    border-radius: 100px;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__news input:not([type="submit"]) {
    margin-bottom: 9px;
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    font-size: 14px;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__news input[type="submit"],
  .jl-foot:not(.jl-foot--art) .jl-foot__news button {
    background: #a173fd;
    font-size: 15px;
    font-weight: 600;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__bar {
    position: relative;
    display: flex;
    width: 1096px;
    min-height: 47.92px;
    margin: 19.38px 0 0;
    padding: 13px 0 0;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 24px;
    font-size: 13.5px;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__bar p { flex: 1 1 auto; }
  .jl-foot:not(.jl-foot--art) .jl-foot__bar nav {
    display: flex;
    flex: none;
    gap: 21px;
  }
  .jl-foot:not(.jl-foot--art) .jl-foot__bar nav a {
    min-width: 44px;
    min-height: 44px;
    color: #c5bce8;
    font-size: 13.5px;
    font-weight: 700;
  }
}

/* Artboard mode is a scaled 1920px native render, including all real content. */
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case {
  overflow: hidden;
  border-radius: 90px;
  background: #f1edfb;
}
.jl-artboard-host [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__content,
.jl-artboard-host .jl-section--loved-by .jl-section__head,
.jl-artboard-host .jl-section--loved-by > .jl-wrap > .jl-quotes,
.jl-artboard-host .jl-section--comparison .jl-compare,
.jl-artboard-host .jl-section--faq-art .jl-section__head,
.jl-artboard-host .jl-section--faq-art .jl-faq {
  opacity: 1;
  pointer-events: auto;
}
.jl-artboard-host .jl-section--loved-by > .jl-loved-by__art,
.jl-artboard-host .jl-section--loved-by .jl-videoband__art,
.jl-artboard-host .jl-section--comparison > .jl-comparison__art,
.jl-artboard-host .jl-section--faq-art > .jl-faq__art { display: none; }

/* Native testimonial carousel chrome at the authored 1920px review width. */
@media (min-width: 1920px) {
  .jl-wordquote__dots {
    left: 50%;
    top: 699px;
    width: auto;
    height: 44px;
    gap: 0;
    translate: -50% 0;
  }
  .jl-wordquote__dots li,
  .jl-wordquote__dot {
    width: 44px;
    height: 44px;
  }
  .jl-wordquote__dots .jl-wordquote__dot-placeholder { display: flex; }
  .jl-wordquote__dot { background: transparent; }
  .jl-wordquote__dot::before { display: block; }
  .jl-wordquote__dot[aria-current="true"] { background: transparent; }
  .jl-wordquote__dot[aria-current="true"]::before { background: #4801d4; }
  .jl-section--loved-by .jl-wordquote__dots {
    left: 50%;
    top: 568px;
  }
  .jl-section--loved-by .jl-wordquote__arrow {
    top: 413px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, .1);
  }
  .jl-section--loved-by .jl-wordquote__arrow--prev { left: 260px; }
  .jl-section--loved-by .jl-wordquote__arrow--next { left: 1616px; right: auto; }
}

/* Respect the visitor's OS-level motion setting across every live and
   artboard variant. The explicit loop rules stop perpetual movement; the
   blanket duration/scroll rules also cover hover and future components. */
@media (prefers-reduced-motion: reduce) {
  body.jl-page *,
  body.jl-page *::before,
  body.jl-page *::after {
    transition-duration: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  body.jl-page .jl-marquee__track,
  body.jl-page .jl-ribbon path,
  body.jl-page .jl-deco__v path,
  body.jl-page .jl-achievers__orbit {
    animation: none !important;
  }
  body.jl-page .jl-marquee__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    width: 100%;
    gap: 16px;
    transform: none !important;
  }
  body.jl-page .jl-marquee__slot {
    position: relative;
    display: flex;
    width: 100%;
    height: 88px;
  }
  body.jl-page .jl-marquee__slot[aria-hidden="true"] { display: none; }
  body.jl-page .jl-marquee__slot img {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 72px;
  }
}

/* ================================================= NATIVE GUIDE DETAIL ===
   Detail-only composition. These selectors intentionally sit after the
   shared marketing/artboard rules so the public PDP never depends on a
   flattened screenshot while retaining the shared commerce behaviours. */
body.jl-guide-single { background: #fbfaff; }
.jl-pdp-page {
  overflow: clip;
  background: #fbfaff;
  color: var(--jl-body);
}
.jl-pdp-page .jl-wrap {
  max-width: calc(1464px + var(--jl-gutter) * 2);
}
.jl-pdp-page .jl-h1,
.jl-pdp-page .jl-h2,
.jl-pdp-page .jl-h3 { color: #000; }
.jl-pdp-page .jl-eyebrow {
  margin-bottom: 10px;
  color: #7200e0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 1.96px;
}

/* Product summary. */
.jl-pdp-hero-section {
  position: relative;
  min-height: clamp(680px, 38.6458vw, 742px);
  overflow: clip;
  background: #fbfaff;
}
.jl-pdp-hero-section__orb {
  position: absolute;
  top: -180px;
  left: -200px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: #f1e6fc;
  opacity: .6;
  pointer-events: none;
}
.jl-pdp-page .jl-pdp__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, clamp(380px, 22.9167vw, 440px)) minmax(0, 1fr);
  gap: clamp(44px, 3.3334vw, 64px);
  padding: 56px 0;
  align-items: start;
}
.jl-pdp-page .jl-pdp__cover {
  width: clamp(380px, 22.9167vw, 440px);
  max-width: 100%;
  grid-column: 1;
  grid-row: 1;
}
.jl-pdp__cover-media {
  width: 100%;
  aspect-ratio: 11 / 14;
  overflow: hidden;
  border-radius: 0;
  background: #edeaf6;
  box-shadow: none;
}
.jl-pdp__cover-media > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  object-fit: cover;
}
.jl-pdp__cover-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 36px;
  place-items: center;
  color: #fff;
  font: 800 clamp(24px, 3vw, 38px)/1.12 Georgia, "Times New Roman", serif;
  text-align: center;
}
.jl-pdp-page .jl-pdp__peek,
.jl-pdp-page .jl-pdp__outline-peek {
  min-height: 54px;
  margin-top: 16px;
  border-width: 1.5px;
  background: transparent;
  font-size: 16px;
  font-weight: 800;
}
.jl-pdp-page .jl-pdp__peek:disabled,
.jl-pdp-page .jl-pdp__peek:disabled:hover {
  border-color: #b8b2c0;
  background: transparent;
  color: #7b7382;
  cursor: not-allowed;
  opacity: 1;
}
.jl-pdp-page .jl-pdp__info {
  display: flex;
  width: min(960px, 100%);
  max-width: 100%;
  padding-top: 4px;
  grid-column: 2;
  grid-row: 1;
  align-items: flex-start;
  gap: 0;
}
.jl-pdp-page .jl-pdp__crumbs {
  display: flex;
  max-width: 100%;
  padding: 0;
  gap: 8px;
  color: var(--jl-muted);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.55;
}
.jl-pdp-page .jl-pdp__crumbs a { color: var(--jl-muted); }
.jl-pdp-page .jl-pdp__crumbs [aria-current="page"] {
  overflow: hidden;
  color: #4801d4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jl-pdp-page .jl-pdp__info .jl-h1 {
  margin-top: 16px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.648889;
  letter-spacing: -1.68px;
}
.jl-pdp-page .jl-pdp__author {
  margin-top: 11px;
  color: #2e2177;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.45;
}
.jl-pdp-page .jl-pdp__info > .jl-rating {
  margin-top: 9px;
  color: #4801d4;
}
.jl-pdp-page .jl-pdp__lede {
  max-width: 640px;
  margin-top: 18px;
  color: #4b464f;
  font-size: 17px;
  line-height: 1.65;
}
.jl-pdp-page .jl-pdp__chips {
  display: flex;
  max-width: 960px;
  margin-top: 26px;
  flex-wrap: wrap;
  gap: 12px;
}
.jl-pdp-chip {
  display: inline-flex;
  min-height: 54px;
  padding: 11px 16px;
  align-items: center;
  gap: 10px;
  border: 1px solid #dbd8e6;
  border-radius: 14px;
  background: #fff;
  color: #000;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
}
.jl-pdp-chip__icon {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: #4801d4;
}
.jl-pdp-chip__icon--modules {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transform: rotate(90deg);
}
.jl-pdp-chip__icon--modules i {
  display: block;
  width: 8px;
  height: 28px;
  border-radius: 3px;
  background: #4801d4;
}
.jl-pdp-chip__icon--play svg { transform: none; }
.jl-pdp-chip__icon--lightning { color: #4801d4; }
.jl-pdp-page .jl-pdp__price {
  display: flex;
  max-width: 640px;
  margin-top: 30px;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: #000;
}
.jl-pdp-page .jl-pdp__price > p:first-child {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.24px;
}
.jl-pdp-page .jl-pdp__price strong { color: #000; }
.jl-pdp__price-note {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--jl-muted);
  font-size: 13.5px;
  font-weight: 700;
}
.jl-pdp__price-note b {
  color: #4801d4;
  text-transform: uppercase;
}
.jl-pdp-page .jl-pdp__actions {
  display: flex;
  width: min(640px, 100%);
  margin-top: 22px;
  flex-wrap: wrap;
  gap: 12px;
}
.jl-pdp-page .jl-pdp__actions > * {
  min-height: 54px;
  flex: 1 1 260px;
  font-size: 16px;
  font-weight: 700;
}

/* Related rail and detail-local product cards. */
.jl-pdp-related {
  padding: 84px 0;
  background: #f1e6fc;
}
.jl-pdp-related__head {
  display: flex;
  margin-bottom: 32px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.jl-pdp-related__head .jl-h2 {
  font-size: clamp(30px, 2.5vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.jl-pdp-related__browse {
  display: inline-flex;
  min-height: 44px;
  flex: none;
  align-items: center;
  gap: 8px;
  color: #4801d4;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}
.jl-pdp-related__browse:hover,
.jl-pdp-related__browse:focus-visible { text-decoration: underline; }
.jl-pdp-related__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  outline-offset: 8px;
}
.jl-pdp-card {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid #dbd8e6;
  border-radius: 18px;
  background: #fff;
}
.jl-pdp-card__media {
  position: relative;
  width: 100%;
  height: 196px;
  overflow: hidden;
  background: #e8dcfa;
}
.jl-pdp-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jl-pdp-card__fallback {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 24px;
  place-items: center;
  color: #fff;
  font: 700 20px/1.2 Georgia, "Times New Roman", serif;
  text-align: center;
}
.jl-pdp-card__states {
  position: absolute;
  top: 22px;
  left: 20px;
  display: flex;
  max-width: calc(100% - 24px);
  gap: 4px;
}
.jl-pdp-card__state {
  padding: 4px 9px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  color: #4801d4;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jl-pdp-card__state--nsw,
.jl-pdp-card__state--new-south-wales { color: #073ae2; }
.jl-pdp-card__state--vic,
.jl-pdp-card__state--victoria { color: #04611d; }
.jl-pdp-card__view {
  border: 0;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 0;
  background: rgba(255,255,255,.92);
  color: #4801d4;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  backdrop-filter: blur(4px);
}
.jl-pdp-card__view:hover,
.jl-pdp-card__view:focus-visible { background: #fff; text-decoration: underline; }
.jl-pdp-card__body {
  display: flex;
  min-height: 204px;
  padding: 15px 16px 16px;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 9px;
}
.jl-pdp-card__body h3 {
  display: -webkit-box;
  min-height: 44px;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.jl-pdp-card__body h3 a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #000;
  text-decoration: none;
}
.jl-pdp-card__body h3 a:hover,
.jl-pdp-card__body h3 a:focus-visible { color: #4801d4; text-decoration: underline; }
.jl-pdp-card__byline {
  min-height: 19px;
  color: var(--jl-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.jl-pdp-card__actions {
  display: grid;
  margin-top: auto;
  gap: 8px;
}
.jl-pdp-card__actions .jl-btn {
  min-height: 42px;
  padding: 8px 12px;
  font-size: 13.5px;
}

/* About: one coherent section with two deliberately mirrored rows. */
.jl-pdp-about {
  padding: 84px 0 96px;
  background: #fff;
}
.jl-pdp-about__head {
  max-width: 820px;
  margin-bottom: 44px;
}
.jl-pdp-about__head .jl-h2,
.jl-pdp-modules__head .jl-h2 {
  font-size: clamp(32px, 2.5vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.jl-pdp-about__rows {
  display: flex;
  flex-direction: column;
  gap: 58px;
}
.jl-pdp-about__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
  align-items: center;
  gap: clamp(64px, 8.4vw, 162px);
}
.jl-pdp-about__row--reverse {
  grid-template-columns: minmax(420px, 560px) minmax(0, 1fr);
}
.jl-pdp-about__row > .jl-pdp-about__copy {
  grid-column: 1;
  grid-row: 1;
}
.jl-pdp-about__row > .jl-pdp-about__media {
  grid-column: 2;
  grid-row: 1;
}
.jl-pdp-about__row--reverse > .jl-pdp-about__copy { grid-column: 2; }
.jl-pdp-about__row--reverse > .jl-pdp-about__media { grid-column: 1; }
.jl-pdp-about__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  color: #4b464f;
  font-size: 17px;
  line-height: 1.7;
}
.jl-pdp-about__copy .jl-h3 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.jl-pdp-about__checks {
  display: flex;
  width: 100%;
  margin: 2px 0 0;
  padding: 0;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}
.jl-pdp-about__checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #000;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.55;
}
.jl-pdp-about__checks li::before { content: none !important; }
.jl-pdp-about__checks li > span {
  display: grid;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  background: #4801d4;
  color: #fff;
}
.jl-pdp-about__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #f8f7fb;
  box-shadow: 0 20px 50px rgba(46,33,119,.14);
}
.jl-pdp-about__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.jl-pdp-about__media figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(46,33,119,.9);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  backdrop-filter: blur(5px);
}

/* Data-backed module inventory. */
.jl-pdp-modules {
  position: relative;
  z-index: 2;
  padding: 84px 0 70px;
  background: #fbfaff;
}
.jl-pdp-page .jl-pdp-modules__head {
  margin-bottom: 36px;
  flex-wrap: nowrap;
}
.jl-pdp-modules__head > :first-child { max-width: 720px; }
.jl-pdp-page .jl-modules__stats {
  display: grid;
  flex: none;
  grid-template-columns: repeat(4, minmax(0, 140px));
  gap: 14px;
}
.jl-pdp-page .jl-modules__stats .jl-stat {
  min-width: 140px;
  padding: 16px 22px;
  border-radius: 16px;
  background: #fff;
  text-align: left;
}
.jl-pdp-page .jl-modules__stats .jl-stat__n {
  color: #4801d4;
  font-size: 26px;
  line-height: 1;
}
.jl-pdp-page .jl-modules__stats .jl-stat__c {
  margin-top: 4px;
  color: var(--jl-muted);
  font-size: 13px;
  font-weight: 700;
}
.jl-pdp-page .jl-modules { gap: 12px; }
.jl-pdp-page .jl-module {
  border: 0;
  border-radius: 16px;
  box-shadow: none;
}
.jl-pdp-page .jl-module__q {
  min-height: 84px;
  padding: 20px 26px;
  gap: 22px;
}
.jl-pdp-page .jl-module__q:hover { background: #fdfbff; }
.jl-pdp-page .jl-module__q--static { cursor: default; }
.jl-pdp-page .jl-module__q--static:hover { background: none; }
.jl-pdp-page .jl-module__q:focus-visible { outline: 3px solid var(--jl-purple); outline-offset: 2px; }
.jl-pdp-page .jl-module__n {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 13px;
  background: #f1e6fc;
  color: #4801d4;
  font-size: 15px;
}
.jl-pdp-page .jl-module__n--2 { background: #ffe3d6; color: #b34a1f; }
.jl-pdp-page .jl-module__n--3 { background: #ffcac8; color: #5f11a3; }
.jl-pdp-page .jl-module__n--4 { background: #edeaf6; color: #2e2177; }
.jl-pdp-page .jl-module__t b {
  color: #000;
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.3;
}
.jl-pdp-page .jl-module__t span {
  display: block;
  margin-top: 3px;
  color: var(--jl-muted);
  font-size: 14.5px;
  line-height: 1.5;
}
.jl-pdp-page .jl-module__count {
  padding: 8px 15px;
  border-radius: 13px;
  color: #4801d4;
  font-size: 13px;
  font-weight: 800;
}
.jl-module__chevron {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  color: #4801d4;
  transition: transform .2s ease;
}
.jl-module__q[aria-expanded="true"] .jl-module__chevron { transform: rotate(180deg); }
.jl-pdp-page .jl-module__a {
  padding: 0 26px 22px 92px;
  color: #4b464f;
  font-size: 14.5px;
  line-height: 1.55;
}
.jl-pdp-page .jl-modules__more { margin-top: 18px; }
.jl-pdp-page .jl-modules__more .jl-btn {
  min-height: 50px;
  padding: 12px 28px;
  color: #4801d4;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(46,33,119,.07);
}
.jl-pdp-page .jl-modules__more [aria-expanded="true"] svg { transform: rotate(180deg); }

/* Reuse the JeddAI composition, whose 1920px stage spans y=-245 through 9.
   Translate that span into normal flow and scale every vector together so
   the animated strokes follow the fill without overlapping the module CTA. */
.jl.jl-copy .jl-pdp-modules:has(+ .jl-pdp-transition) { padding-bottom: 24px; }
.jl.jl-copy .jl-pdp-transition {
  height: auto;
  aspect-ratio: 1920 / 254;
  overflow: hidden;
  background: #fbfaff;
  pointer-events: none;
}
.jl.jl-copy .jl-pdp-transition .jl-deco {
  left: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  transform: none;
}
.jl-pdp-transition svg { max-width: none; height: auto; }
/* The long trail belongs behind JeddAI's feature panel, above this divider. */
.jl-pdp-transition .jl-transition-trail { display: none !important; }
.jl-pdp-transition .jl-transition-fill {
  left: -5.3125% !important;
  top: 12.204724409% !important;
  width: 128.385416667%;
}
.jl-pdp-transition .jl-transition-right {
  left: 57.65625% !important;
  top: 0 !important;
  width: 49.40109375%;
}
.jl-pdp-transition .jl-transition-left {
  left: -2.8125% !important;
  top: 22.834645669% !important;
  width: 58.020833333%;
}

/* Detail testimonial carousel + single-action video testimonial. */
.jl-pdp-testimonials {
  position: relative;
  z-index: 2;
  padding: 54px 0 98px;
  background: #f1e6fc;
}
.jl-pdp-testimonials__head {
  max-width: 760px;
  margin: 0 auto 52px;
  text-align: center;
}
.jl-pdp-testimonials__head .jl-h2 {
  color: #12063d;
  font-size: clamp(32px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: -.01em;
}
.jl-pdp-testimonials__head .jl-rating {
  margin-top: 22px;
  justify-content: center;
}
.jl-pdp-testimonials__head .jl-rating__text { flex: 0 1 auto; }
.jl-pdp-testimonials__carousel {
  position: relative;
  width: min(1096px, 100%);
  margin-inline: auto;
}
.jl-pdp-testimonials__track {
  display: flex;
  width: 100%;
  gap: 32px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline-offset: 6px;
}
.jl-pdp-testimonials__track::-webkit-scrollbar { display: none; }
.jl-pdp-testimonial {
  display: flex;
  min-width: 0;
  min-height: 246px;
  margin: 0;
  padding: 28px 26px;
  flex: 0 0 calc((100% - 64px) / 3);
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  scroll-snap-align: start;
  border: 1px solid #dbd8e6;
  border-radius: 14px;
  background: #fff;
}
.jl-pdp-testimonial blockquote {
  margin: 0;
  color: #353138;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.jl-pdp-testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jl-pdp-testimonial figcaption img {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  object-fit: contain;
}
.jl-pdp-testimonial figcaption span { min-width: 0; }
.jl-pdp-testimonial figcaption strong,
.jl-pdp-testimonial figcaption small { display: block; }
.jl-pdp-testimonial figcaption strong {
  color: #2e2177;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.jl-pdp-testimonial figcaption small {
  color: #4b464f;
  font-size: 12px;
  line-height: 1.45;
}
.jl-pdp-testimonials__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.1);
  color: #2e2177;
  cursor: pointer;
  transform: translateY(-50%);
}
.jl-pdp-testimonials__arrow:not(:disabled):hover,
.jl-pdp-testimonials__arrow:focus-visible { background: rgba(255,255,255,.8); }
.jl-pdp-testimonials__arrow:disabled,
.jl-pdp-testimonials__dots button:disabled { opacity: .42; cursor: default; }
.jl-pdp-testimonials__arrow:disabled { visibility: hidden; }
.jl-pdp-testimonials__arrow--prev { left: clamp(-104px, -6vw, -58px); }
.jl-pdp-testimonials__arrow--next { right: clamp(-104px, -6vw, -58px); }
.jl-pdp-testimonials__dots {
  display: flex;
  min-height: 44px;
  margin: 18px 0 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
}
.jl-pdp-testimonials__dots li { display: flex; flex: 0 0 44px; margin: 0; }
.jl-pdp-testimonials__dots li::before { content: none !important; }
.jl-pdp-testimonials__dots:has(button:disabled) { visibility: hidden; }
.jl-pdp-testimonials__dots button {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.jl-pdp-testimonials__dots button::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border-radius: 50%;
  background: rgba(46,33,119,.22);
}
.jl-pdp-testimonials__dots button[aria-current="true"]::before { background: #4801d4; }
.jl-pdp-video {
  display: grid;
  width: min(1096px, 100%);
  min-height: 386px;
  margin: 42px auto 0;
  padding: 52px;
  grid-template-columns: minmax(0, 451px) minmax(0, 1fr);
  align-items: center;
  gap: 46px;
  border-radius: 20px;
  background: #2e2177;
}
.jl-pdp-video__media .jl-video {
  width: 100%;
  aspect-ratio: 451 / 282;
  border-radius: 14px;
  background: #241a66;
}
.jl-pdp-video__media .jl-video__play {
  width: 60px;
  height: 60px;
  box-shadow: none;
}
.jl-pdp-video__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 17px;
  color: #dfc5fe;
  font-size: 16px;
  line-height: 1.45;
}
.jl-pdp-video__quote {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: -.02em;
}
.jl-pdp-video__who {
  color: #d1cbec;
  font-weight: 600;
}
.jl-pdp-video__copy .jl-btn { margin-top: 10px; }

/* Closing conversion bars. */
.jl-pdp-close {
  padding: 48px 0;
  background: #e2c6fd;
}
.jl-pdp-close__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.jl-pdp-close__inner > div { min-width: 0; }
.jl-pdp-close__inner .jl-h2 {
  color: #2e2177;
  font-size: clamp(32px, 2.7vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.jl-pdp-close__inner p {
  max-width: 760px;
  margin-top: 12px;
  color: #4b464f;
  font-size: 17px;
  line-height: 1.55;
}
.jl-pdp-close__actions { display: flex; align-items: center; gap: 14px; flex: none; }
.jl-pdp-close__actions .jl-btn {
  min-height: 56px;
  padding-inline: 30px;
  flex: none;
  border: 0;
  font-size: 17px;
}
.jl-pdp-close__actions .jl-btn--primary { padding-inline: 34px; }
.jl-pdp-close__actions .jl-btn--white { color: #4801d4; background: #fff; }
.jl-pdp-page .jl-ctaband--deep {
  min-height: 426px;
  padding: 116px 0 82px;
  border-radius: 0;
}
.jl-pdp-page .jl-ctaband--deep .jl-h2--display {
  color: #fff;
  font-size: clamp(38px, 3.2vw, 48px);
  font-weight: 800;
  line-height: 1.2;
}

/* Focus-safe sticky commerce bar. JavaScript removes inert only when shown. */
.jl-buybar[hidden] { display: none; }
html:has(body.jl-guide-single) {
  scroll-padding-bottom: calc(123px + env(safe-area-inset-bottom));
}
body.jl-guide-single :where(a, button, input, select, textarea, [tabindex]) {
  scroll-margin-bottom: calc(123px + env(safe-area-inset-bottom));
}
.jl-guide-single .jl-buybar {
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(810px, calc(100% - 32px));
  min-height: 91px;
  padding: 12px 28px;
  border: 1px solid rgba(95,79,128,.41);
  border-radius: 16px;
  box-shadow: 0 5px 2px rgba(95,57,134,.24), 0 18px 50px rgba(46,33,119,.12);
}
.jl-guide-single .jl-buybar__inner {
  width: 100%;
  max-width: none;
  padding: 0;
  flex-wrap: nowrap;
  gap: 24px;
}
.jl-guide-single .jl-buybar__who { flex: 1 1 auto; gap: 15px; }
.jl-guide-single .jl-buybar__who img {
  width: 51px;
  height: 65px;
  border-radius: 6px;
}
.jl-guide-single .jl-buybar__title {
  display: -webkit-box;
  overflow: hidden;
  color: #2e2177;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media (min-width: 901px) {
  .jl-guide-single .jl-buybar__title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.jl-guide-single .jl-buybar__actions {
  flex: none;
  flex-wrap: nowrap;
  gap: 14px;
}
.jl-guide-single .jl-buybar__actions .jl-btn {
  min-height: 56px;
  padding: 14px 31px;
  font-size: 17px;
}
.jl-guide-single .jl-buybar__actions .jl-btn--primary { padding-inline: 34px; }
.jl-guide-single .jl-buybar__actions .jl-btn--ghost { padding-inline: 31px; }

/* The detail frame is authored on a 1920px canvas. Keep its fixed artwork
   slots confined to wide screens; the existing fluid rules below continue to
   own laptop, tablet and phone layouts. */
@media (min-width: 1600px) {
  .jl-pdp-related__head .jl-h2 {
    font-size: 34px;
    line-height: 39.6px;
    letter-spacing: -.68px;
  }
  .jl-pdp-card__body {
    min-height: 204px;
    padding: 15px 16px 16px;
    gap: 9px;
  }
  .jl-pdp-card__body h3 { min-height: 44px; }

  .jl-pdp-about {
    min-height: 1089px;
    padding-bottom: 84px;
  }
  .jl-pdp-about__rows { gap: 44px; }
  .jl-pdp-about__row:first-child .jl-pdp-about__media { height: 400px; }
  .jl-pdp-about__row--reverse .jl-pdp-about__media { height: 360px; }
  .jl-pdp-about__media img {
    width: 660px;
    max-width: none;
    height: auto;
    object-fit: initial;
    transform: translate(-50px, -30px);
  }

  .jl-pdp-modules { min-height: 735px; }

  .jl-pdp-testimonials { padding: 98px 0 97.56px; }
  .jl-pdp-testimonials__head {
    margin-bottom: 42.96px;
  }
  .jl-pdp-testimonials__head .jl-eyebrow {
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 18.6px;
    letter-spacing: 1.68px;
  }
  .jl-pdp-testimonials__head .jl-rating { margin-top: 38.7px; }
  .jl-pdp-testimonials__track { gap: 33px; }
  .jl-pdp-testimonial:nth-child(1) {
    flex-basis: 341.86px;
    padding: 29px 27px;
  }
  .jl-pdp-testimonial:nth-child(2) {
    flex-basis: 336.93px;
    padding: 29px 25px;
  }
  .jl-pdp-testimonial:nth-child(3) {
    flex-basis: 338.43px;
    padding: 29px 27px;
    gap: 27px;
  }
  .jl-pdp-testimonial:nth-child(1) figcaption img {
    width: 42px;
    height: 44px;
    flex-basis: 42px;
  }
  .jl-pdp-testimonials__arrow {
    top: calc(50% - 4px);
    background: transparent;
  }
  .jl-pdp-testimonials__arrow::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: rgba(0,0,0,.1);
  }
  .jl-pdp-testimonials__arrow svg { position: relative; z-index: 1; }
  .jl-pdp-testimonials__arrow--prev { left: -152px; }
  .jl-pdp-testimonials__arrow--next { right: -192px; }
  .jl-pdp-testimonials__dots {
    min-height: 44px;
    margin-top: 6px;
  }
  .jl-pdp-testimonials__dots button {
    width: 44px;
    height: 44px;
  }
  .jl-pdp-video {
    min-height: 386.13px;
    margin-top: 29px;
    grid-template-columns: 451.42px 466.093px;
    gap: 44px;
  }

  .jl-pdp-close { min-height: 209px; }

  .jl-pdp-page .jl-ctaband--deep {
    height: 426px;
    min-height: 426px;
    padding: 0;
  }
  .jl-pdp-page .jl-ctaband--deep > .jl-wrap {
    position: relative;
    height: 100%;
  }
  .jl-pdp-page .jl-ctaband--deep .jl-h2--display {
    position: absolute;
    top: 94px;
    right: 0;
    left: 0;
    line-height: 1.2;
  }
  .jl-pdp-page .jl-ctaband--deep p {
    position: absolute;
    top: 229px;
    right: 0;
    left: 0;
    width: max-content;
    max-width: calc(100% - 40px);
    margin: 0 auto;
    white-space: nowrap;
  }
  .jl-pdp-page .jl-ctaband--deep .jl-ctaband__actions {
    position: absolute;
    top: 280px;
    right: 0;
    left: 0;
    margin: 0;
  }
  .jl-pdp-page .jl-ctaband--deep .jl-ctaband__actions .jl-btn {
    width: 291.17px;
    height: 56px;
    min-height: 56px;
    padding-inline: 28px;
    flex-wrap: nowrap;
    font-size: 17px;
    white-space: nowrap;
  }
}

@media (max-width: 1599px) {
  .jl-pdp-page .jl-pdp-modules__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 26px;
  }
  .jl-pdp-page .jl-modules__stats {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .jl-pdp-page .jl-modules__stats .jl-stat { min-width: 0; }
}

@media (max-width: 1199px) {
  .jl-pdp-page .jl-pdp__hero {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 44px;
  }
  .jl-pdp-page .jl-pdp__cover { width: 340px; }
  .jl-pdp-related__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jl-pdp-about__row,
  .jl-pdp-about__row--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    gap: clamp(48px, 6vw, 72px);
  }
  .jl-pdp-about__row--reverse { grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); }
  .jl-pdp-testimonials__carousel { width: calc(100% - 96px); }
  .jl-pdp-testimonials__arrow--prev { left: -54px; }
  .jl-pdp-testimonials__arrow--next { right: -54px; }
  .jl-pdp-testimonial { flex-basis: min(342px, 43vw); }
}

@media (max-width: 900px) {
  .jl-pdp-page .jl-pdp__hero {
    grid-template-columns: 1fr;
    padding-block: 44px 60px;
    gap: 42px;
  }
  .jl-pdp-page .jl-pdp__cover {
    width: min(380px, 100%);
    margin-inline: auto;
    grid-column: 1;
    grid-row: auto;
  }
  .jl-pdp-page .jl-pdp__info {
    width: 100%;
    grid-column: 1;
    grid-row: auto;
  }
  .jl-pdp-page .jl-pdp__info .jl-h1 {
    line-height: 1.25;
    letter-spacing: -.04em;
  }
  .jl-pdp-related,
  .jl-pdp-about,
  .jl-pdp-modules { padding-block: 64px; }
  .jl-pdp-about__row,
  .jl-pdp-about__row--reverse { grid-template-columns: 1fr; gap: 34px; }
  .jl-pdp-about__row > .jl-pdp-about__copy,
  .jl-pdp-about__row > .jl-pdp-about__media {
    grid-column: 1;
    grid-row: auto;
  }
  .jl-pdp-testimonials { padding-block: 48px 72px; }
  .jl-pdp-testimonials__carousel { width: 100%; }
  .jl-pdp-testimonial { flex-basis: min(342px, 78vw); }
  .jl-pdp-testimonials__arrow {
    top: calc(100% + 44px);
    transform: none;
  }
  .jl-pdp-testimonials__arrow--prev { left: calc(50% - 104px); }
  .jl-pdp-testimonials__arrow--next { right: calc(50% - 104px); }
  .jl-pdp-testimonials__dots { margin-top: 22px; }
  .jl-pdp-video {
    margin-top: 54px;
    padding: 34px;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .jl-pdp-video__media { width: min(520px, 100%); }
  .jl-pdp-close__inner { align-items: flex-start; flex-direction: column; gap: 26px; }
  .jl-pdp-close__actions { width: 100%; flex-wrap: wrap; }
  .jl-guide-single .jl-buybar { padding-inline: 18px; }
  .jl-guide-single .jl-buybar__title { font-size: 17px; }
  .jl-guide-single .jl-buybar__actions .jl-btn { padding-inline: 18px; font-size: 14px; }
}

@media (max-width: 680px) {
  html:has(body.jl-guide-single) {
    scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  body.jl-guide-single :where(a, button, input, select, textarea, [tabindex]) {
    scroll-margin-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .jl-pdp-hero-section__orb {
    top: -150px;
    left: -230px;
    width: 480px;
    height: 480px;
  }
  .jl-pdp-page .jl-pdp__info .jl-h1 { font-size: clamp(32px, 10vw, 40px); }
  .jl-pdp-page .jl-pdp__lede { font-size: 16px; }
  .jl-pdp-chip {
    min-height: 48px;
    padding: 9px 12px;
    font-size: 13.5px;
  }
  .jl-pdp-chip__icon { width: 24px; height: 24px; flex-basis: 24px; }
  .jl-pdp-chip__icon--modules i { width: 7px; height: 24px; }
  .jl-pdp-page .jl-pdp__price { display: block; }
  .jl-pdp__price-note { display: flex; margin-top: 7px; }
  .jl-pdp-page .jl-pdp__actions { display: grid; grid-template-columns: 1fr; }
  .jl-pdp-page .jl-pdp__actions > * { width: 100%; }
  .jl-pdp-page .jl-modules__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jl-pdp-related__head { align-items: flex-start; flex-direction: column; gap: 14px; }
  .jl-pdp-related__browse { align-self: flex-end; }
  .jl-pdp-related__track {
    display: grid;
    margin-right: calc(var(--jl-gutter) * -1);
    padding-right: var(--jl-gutter);
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 328px);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .jl-pdp-card { scroll-snap-align: start; }
  .jl-pdp-about__rows { gap: 50px; }
  .jl-pdp-about__copy { font-size: 16px; }
  .jl-pdp-page .jl-module__q {
    display: grid;
    padding: 16px;
    grid-template-columns: 44px minmax(0, 1fr) 32px;
    gap: 10px 14px;
  }
  .jl-pdp-page .jl-module__count {
    grid-column: 2;
    justify-self: start;
  }
  .jl-module__chevron { grid-column: 3; grid-row: 1; }
  .jl-pdp-page .jl-module__a { padding: 0 16px 18px 74px; }
  .jl-pdp-video { padding: 24px; }
  .jl-pdp-video__quote { font-size: 20px; }
  .jl-pdp-close { padding-block: 42px; }
  .jl-pdp-page .jl-ctaband--deep { min-height: 360px; padding-block: 88px 64px; }
  .jl-guide-single .jl-buybar {
    bottom: 0;
    width: 100%;
    min-height: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
  }
  .jl-guide-single .jl-buybar__inner {
    display: block;
  }
  .jl-guide-single .jl-buybar__who { display: none; }
  .jl-guide-single .jl-buybar__actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .jl-guide-single .jl-buybar__actions > :only-child { grid-column: 1 / -1; }
  .jl-guide-single .jl-buybar__actions .jl-btn {
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13px;
  }
}

@media (min-width: 480px) and (max-height: 480px) {
  html:has(body.jl-guide-single) {
    scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  body.jl-guide-single :where(a, button, input, select, textarea, [tabindex]) {
    scroll-margin-bottom: calc(80px + env(safe-area-inset-bottom));
  }
  .jl-guide-single .jl-buybar:not([hidden]) {
    display: block;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(810px, calc(100% - max(16px, env(safe-area-inset-left)) - max(16px, env(safe-area-inset-right))));
    min-height: 0;
    padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  }
  .jl-guide-single .jl-buybar__inner { gap: 10px; }
  .jl-guide-single .jl-buybar__who img { display: none; }
  .jl-guide-single .jl-buybar__title { font-size: 14px; -webkit-line-clamp: 1; }
  .jl-guide-single .jl-buybar__actions .jl-btn { min-height: 44px; padding-block: 8px; }
}

@media (max-width: 420px) {
  .jl-pdp-page .jl-pdp__hero { padding-top: 32px; }
  .jl-pdp-page .jl-pdp__crumbs { font-size: 12.5px; }
  .jl-pdp-page .jl-pdp__info .jl-h1 { margin-top: 12px; }
  .jl-pdp-page .jl-pdp__chips { gap: 8px; }
  .jl-pdp-chip { width: 100%; }
  .jl-pdp-related,
  .jl-pdp-about,
  .jl-pdp-modules { padding-block: 52px; }
  .jl-pdp-about__media figcaption {
    position: static;
    padding: 7px 10px;
    border-radius: 0;
    background: #2e2177;
    font-size: 11.5px;
    line-height: 1.3;
    backdrop-filter: none;
  }
  .jl-pdp-page .jl-modules__stats .jl-stat { padding: 14px 16px; }
  .jl-pdp-page .jl-module__t b { font-size: 16px; }
  .jl-pdp-page .jl-module__t span { font-size: 13.5px; }
  .jl-pdp-testimonial { flex-basis: calc(100vw - 48px); padding: 24px 20px; }
  .jl-pdp-testimonials__arrow--prev { left: calc(50% - 96px); }
  .jl-pdp-testimonials__arrow--next { right: calc(50% - 96px); }
  .jl-pdp-video { padding: 20px; }
  .jl-pdp-video__copy .jl-btn { width: 100%; }
  .jl-pdp-close__actions { display: grid; grid-template-columns: 1fr; }
  .jl-pdp-close__actions .jl-btn { width: 100%; }
  .jl-guide-single .jl-buybar__title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .jl-pdp-testimonials__track { scroll-behavior: auto; }
  .jl-module__chevron { transition: none; }
}

/* ========================================================================
   Route-aware fidelity and responsive shell corrections
   ===================================================================== */

/* Study-guide classroom feature panels use the full-bleed, rounded gradient
   surface drawn in Figma. The decorative SVG is a background layer so it is
   clipped by the 233px shell instead of bleeding into the next section. */
[data-jl-product="study-guides"] .jl-deco-anchor:has(+ .jl-section--platform-tabs) {
  display: none;
}
[data-jl-product="study-guides"] .jl-section--platform-tabs {
  overflow: hidden;
  border-radius: clamp(64px, 12.14vw, 233px);
  background-color: #fbfaff;
  background-image:
    url("../images/landing/deco/tsg-swoosh-features.svg"),
    url("../images/landing/deco/study-guides-features-gradient.svg");
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: cover, 100% 100%;
}

/* Every authored feature surface shares this 1158px desktop composition.
   Below desktop, the earlier grid rules remain the native reflow. */
@media (min-width: 1200px) {
  .jl-section--platform-tabs {
    position: relative;
    width: 100%;
    height: 899px;
    padding: 0;
  }
  .jl-section--platform-tabs > .jl-wrap {
    position: relative;
    width: 1158px;
    max-width: none;
    height: 899px;
    margin: 0 auto;
    padding: 0;
  }
  .jl-section--platform-tabs .jl-tabs__group {
    position: static;
    width: 1158px;
    height: 899px;
  }
  .jl-section--platform-tabs .jl-section__head {
    position: absolute;
    left: 131px;
    top: 111px;
    width: 897px;
    max-width: none;
    height: 42px;
    margin: 0;
  }
  .jl-section--platform-tabs .jl-section__head .jl-h2 {
    width: 897px;
    height: 42px;
    font-size: 36px;
    line-height: 41.4px;
    letter-spacing: -.36px;
    white-space: nowrap;
  }
  .jl-section--platform-tabs .jl-tabs__layout {
    position: absolute;
    left: 0;
    top: 234px;
    display: block;
    width: 1158px;
    height: 451px;
  }
  .jl-section--platform-tabs .jl-tabs__list {
    position: absolute;
    left: 0;
    top: 33px;
    width: 326px;
    height: 317px;
    gap: 6px;
  }
  .jl-section--platform-tabs .jl-tab {
    position: relative;
    width: 323px;
    height: 49px;
    padding: 11px 20px;
    border-radius: 8px;
    box-shadow: none;
  }
  .jl-section--platform-tabs .jl-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 3px;
    height: 27px;
    border-radius: 999px;
    background: #e1e0e8;
  }
  .jl-section--platform-tabs .jl-tab[aria-selected="true"],
  .jl-section--platform-tabs .jl-tab--static-featured {
    height: 97px;
    background: #f1e6fc;
    box-shadow: none;
  }
  .jl-section--platform-tabs .jl-tab[aria-selected="true"]::before,
  .jl-section--platform-tabs .jl-tab--static-featured::before {
    width: 4px;
    height: 75px;
    background: #2e2177;
  }
  .jl-section--platform-tabs .jl-tab__title {
    display: block;
    width: 283px;
    height: 27px;
    color: #706b77;
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
  }
  .jl-section--platform-tabs .jl-tab[aria-selected="true"] .jl-tab__title,
  .jl-section--platform-tabs .jl-tab--static-featured .jl-tab__title { color: #2e2177; }
  .jl-section--platform-tabs .jl-tab__body {
    display: none;
    width: 283px;
    height: 40px;
    margin-top: 8px;
    color: #4d4952;
    font-size: 16px;
    line-height: 20px;
  }
  .jl-section--platform-tabs .jl-tab[aria-selected="true"] .jl-tab__body,
  .jl-section--platform-tabs .jl-tab--static-featured .jl-tab__body { display: block; }
  .jl-section--platform-tabs .jl-tabs__panel {
    position: absolute;
    left: 356px;
    top: 0;
    width: 802px;
    max-width: none;
    height: 451px;
    border: 1px solid #e8dcfa;
    border-radius: 12px;
    background: #e8dcfa;
    box-shadow: none;
  }
  .jl-section--platform-tabs .jl-tabs__panel img {
    display: block;
    width: 802px;
    max-width: none;
    height: 451px;
    object-fit: cover;
  }
  .jl-section--platform-tabs .jl-tabs__cta {
    position: absolute;
    left: 489px;
    top: 745px;
    width: 181px;
    height: 56px;
    margin: 0;
  }
  .jl-section--platform-tabs .jl-tabs__cta .jl-btn {
    height: 56px;
    white-space: nowrap;
  }
  [data-jl-product]:not([data-jl-product="generic"]) .jl-section--platform-tabs .jl-tabs__cta {
    left: 50%;
    width: max-content;
    max-width: 100%;
    transform: translateX(-50%);
  }
  [data-jl-product="study-guides"] .jl-section--platform-tabs {
    background-position: -26px 141px, center;
    background-size: 2171px 951px, 100% 100%;
  }
}

/* Study-guide testimonial frames use a rounded lavender slab. The JeddAI
   frames intentionally remain on their lighter page ground. */
[data-jl-product="study-guides"] .jl-section--loved-by {
  overflow: hidden;
  border-radius: clamp(40px, 4.69vw, 90px);
  background-color: #f1e6fc;
}

/* Teacher Study Guides and all three JeddAI frames use the same
   full-bleed journey geometry, with different authored top offsets and
   background treatments. */
@media (min-width: 1200px) {
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-section--journey,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-section--journey {
    width: 100%;
    padding: 0;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-section--journey > .jl-wrap,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-section--journey > .jl-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-journey,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-journey {
    width: 100%;
    min-height: 0;
    padding-inline: 0;
    padding-bottom: 118px;
    border-radius: 90px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-journey {
    height: 2034px;
    padding-top: 224px;
    background: linear-gradient(to bottom, rgba(241, 230, 252, 0) 0%, #f1e6fc 25.962%);
  }
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-journey {
    height: 1913px;
    padding-top: 103px;
    background: #f1e6fc;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-journey > .jl-section__head,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-journey > .jl-section__head {
    width: 764px;
    max-width: none;
    height: 62px;
    margin: 0 auto 123px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-journey > .jl-section__head .jl-h2,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-journey > .jl-section__head .jl-h2 {
    font-size: 48px;
    line-height: 62px;
    white-space: nowrap;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-journey__rows,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-journey__rows {
    display: flex;
    width: 1158px;
    margin: 0 auto;
    gap: 84px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row {
    position: relative;
    display: block;
    width: 1158px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row:nth-child(1),
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row:nth-child(1) { height: 392px; }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row:nth-child(2),
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row:nth-child(2) { top: 55px; height: 473px; }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row:nth-child(3),
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row:nth-child(3) { top: 53px; height: 474px; }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row__text,
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row__media,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row__text,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row__media { position: absolute; }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row:nth-child(1) .jl-row__text,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row:nth-child(1) .jl-row__text {
    left: 0;
    top: 3px;
    width: 564px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row:nth-child(1) .jl-row__media,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row:nth-child(1) .jl-row__media {
    left: 713px;
    top: 0;
    width: 445px;
    height: 392px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row:nth-child(2) .jl-row__media,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row:nth-child(2) .jl-row__media {
    left: 0;
    top: 0;
    width: 445px;
    height: 473px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row:nth-child(2) .jl-row__text,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row:nth-child(2) .jl-row__text {
    left: 594px;
    top: 112px;
    width: 564px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row:nth-child(3) .jl-row__text,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row:nth-child(3) .jl-row__text {
    left: 0;
    top: 66px;
    width: 564px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row:nth-child(3) .jl-row__media,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row:nth-child(3) .jl-row__media {
    left: 637px;
    top: 0;
    width: 520px;
    height: 474px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-row__media img,
  :is([data-jl-persona="teacher"], [data-jl-persona="student"], [data-jl-persona="school"])[data-jl-product="jeddai"] .jl-row__media img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
  }

  /* Exact inner journey geometry shared by these four desktop frames. */
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row__text {
    display: block;
    margin: 0;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row .jl-btn {
    gap: 4px;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-row__text {
    height: 385px;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-eyebrow,
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(2) .jl-eyebrow {
    position: absolute;
    left: 0;
    top: 0;
    width: 564px;
    height: 19px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 18.6px;
    letter-spacing: 1.68px;
    white-space: nowrap;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-h3,
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(2) .jl-h3 {
    position: absolute;
    left: 0;
    top: 27px;
    height: 90px;
    margin: 0;
    color: #12063d;
    font-size: 36px;
    font-weight: 600;
    line-height: 45px;
    letter-spacing: 0;
    text-wrap: wrap;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-h3 { width: 541px; }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(2) .jl-h3 { width: 564px; }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-steps {
    position: absolute;
    left: 0;
    top: 137px;
    display: flex;
    width: 564px;
    height: 162px;
    margin: 0;
    gap: 17px;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-steps li {
    position: relative;
    display: flex;
    flex: none;
    align-items: flex-start;
    width: 564px;
    margin: 0;
    padding: 0 0 17px;
    gap: 12px;
    border: 0;
    border-bottom: 1px solid #d3c2e4;
    color: #57517a;
    font-size: 16px;
    line-height: 20px;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-steps li:first-child {
    height: 54px;
    padding: 17px 0;
    border-top: 1px solid #d3c2e4;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-steps li:nth-child(n+2) { height: 37px; }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-steps li::before {
    position: static;
    flex: 0 0 14px;
    width: 14px;
    height: 19px;
    font-size: 16px;
    line-height: normal;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-row__actions {
    position: absolute;
    left: 0;
    top: 329px;
    display: block;
    width: 168px;
    height: 56px;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(1) .jl-btn {
    width: 168px;
    height: 56px;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(2) .jl-row__text { height: 243px; }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(2) .jl-row__text > p:not(.jl-eyebrow) {
    position: absolute;
    left: 0;
    top: 137px;
    width: 564px;
    height: 20px;
    margin: 0;
    color: #57517a;
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(2) .jl-row__actions {
    position: absolute;
    left: 0;
    top: 187px;
    display: block;
    width: 238px;
    height: 56px;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(2) .jl-btn {
    width: 238px;
    height: 56px;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-row__text { height: 423px; }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-eyebrow {
    position: absolute;
    left: 0;
    top: -2px;
    width: 223px;
    height: 19px;
    margin: 0;
    font-size: 12px;
    line-height: 18.6px;
    white-space: nowrap;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-h3 {
    position: absolute;
    left: 0;
    top: 31.59375px;
    width: 519px;
    height: 50px;
    margin: 0;
    font-size: 32px;
    line-height: 49.6px;
    letter-spacing: -.64px;
    white-space: nowrap;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-badge-pill {
    position: absolute;
    left: -1px;
    top: 97.234375px;
    width: 341px;
    height: 62px;
    margin: 0;
    padding: 12px 20px;
    gap: 13px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 21.7px;
    white-space: nowrap;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-badge-pill img {
    flex: none;
    width: 34px;
    height: 38px;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-checks {
    position: absolute;
    left: 0;
    top: 181.875px;
    display: block;
    width: 520px;
    height: 162.59px;
    margin: 0;
    padding: 0;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-checks li {
    position: absolute;
    left: 0;
    display: block;
    width: 520px;
    margin: 0;
    padding: 0;
    border-top: 1px solid #dbd8e6;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(1) { top: 0; height: 53px; }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(2) { top: 53px; height: 53px; }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3) {
    top: 106px;
    height: 56.59px;
    border-bottom: 1px solid #dbd8e6;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-checks span {
    position: absolute;
    left: 38px;
    top: 15.375px;
    height: 24px;
    font-size: 15px;
    line-height: 23.25px;
    white-space: nowrap;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-row__actions {
    position: absolute;
    left: 0;
    top: 366.234375px;
    display: flex;
    width: 351px;
    height: 56px;
    gap: 20px;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-btn {
    height: 56px;
    padding: 16px 27px;
  }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-btn:first-child { width: 178px; }
  :is(
    [data-jl-persona="teacher"][data-jl-product="study-guides"],
    [data-jl-persona="teacher"][data-jl-product="jeddai"],
    [data-jl-persona="student"][data-jl-product="jeddai"],
    [data-jl-persona="school"][data-jl-product="jeddai"]
  ) .jl-section--journey .jl-row:nth-child(3) .jl-btn:last-child {
    width: 153px;
    padding-inline: 26px;
  }
}

@media (min-width: 1920px) {
  .jl-section--loved-by .jl-rating {
    justify-content: center;
    flex-wrap: nowrap;
  }
  .jl-section--loved-by .jl-rating__text { flex: 0 1 auto; }
  .jl-section--loved-by .jl-quote__who > span,
  .jl-section--loved-by .jl-quote__name,
  .jl-section--loved-by .jl-quote__role { display: block; }
  .jl-section--loved-by .jl-quote__who br { display: none; }
  .jl-section--loved-by .jl-quote__who img {
    width: 48px;
    height: 48px;
  }
}

/* Match the deliberate two-line closing headlines instead of allowing them
   to stretch across the entire viewport. */
[data-jl-product="study-guides"] .jl-ctaband .jl-h2--display,
[data-jl-persona="student"][data-jl-product="jeddai"] .jl-ctaband .jl-h2--display,
[data-jl-persona="school"][data-jl-product="jeddai"] .jl-ctaband .jl-h2--display {
  max-width: 520px;
  margin-inline: auto;
}
@media (min-width: 1200px) {
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-hero--student-jeddai {
    padding-bottom: 155.1875px;
  }
  [data-jl-product="jeddai"] .jl-settext {
    margin-top: 9px;
    background: #f1e6fc;
  }
  [data-jl-product="jeddai"] .jl-settext__tree {
    mix-blend-mode: darken;
  }
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-section--word-for-it {
    background: #fbfaff;
  }
  [data-jl-product="study-guides"] .jl-ctaband,
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-ctaband,
  [data-jl-persona="school"][data-jl-product="jeddai"] .jl-ctaband {
    box-sizing: border-box;
    min-height: 414px;
  }
}

/* Student JeddAI uses the 343px carousel lozenge and native closing-band
   geometry from the 1920px source frame. The live copy and controls stay
   interactive; only their measured desktop positions are fixed here. */
@media (min-width: 1800px) {
  [data-jl-product="jeddai"] .jl-settext {
    border-radius: 343px;
  }
  [data-jl-product="jeddai"] .jl-settext .jl-section__head .jl-eyebrow {
    font-size: 14px;
    font-weight: 800;
    line-height: 17px;
    letter-spacing: 1.96px;
  }
  [data-jl-product="jeddai"] .jl-settext .jl-section__head .jl-h2 {
    font-size: 46px;
    font-weight: 800;
    line-height: 55px;
    letter-spacing: -.92px;
  }
}

@media (min-width: 1800px) and (max-width: 1919px) {
  .jl-settext > .jl-wrap {
    left: 50%;
    translate: -50% 0;
  }
}

@media (min-width: 1920px) {
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-ctaband {
    width: 100%;
    height: 413.63px;
    min-height: 0;
    margin-top: .96875px;
    margin-bottom: -1.01px;
    padding: 0;
    overflow: hidden;
    border-radius: 90px 90px 0 0;
    background: #4b0fe0;
  }
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-ctaband__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-ctaband > .jl-wrap {
    position: relative;
    width: 1920px;
    max-width: none;
    height: 413.63px;
    margin: 0 auto;
    padding: 0;
  }
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-ctaband .jl-eyebrow {
    position: absolute;
    left: 0;
    top: 99.2px;
    width: 1920px;
    max-width: none;
    height: 18.6px;
    margin: 0;
    font-size: 12px;
    line-height: 18.6px;
    letter-spacing: 1.68px;
    text-align: center;
  }
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-ctaband .jl-h2--display {
    position: absolute;
    left: 677px;
    top: 118.1px;
    width: 566px;
    max-width: none;
    height: 117.8px;
    margin: 0;
    font-size: 38px;
    line-height: 58.9px;
    letter-spacing: -.38px;
  }
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-ctaband__actions {
    position: absolute;
    left: 873.08px;
    top: 262.38px;
    display: block;
    width: 173.84px;
    height: 51.25px;
    margin: 0;
  }
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-ctaband__actions .jl-btn {
    width: 173.84px;
    height: 51.25px;
    min-height: 0;
    padding: 0;
    font-size: 15px;
    line-height: 23.25px;
  }
}

/* Figma groups these three path trims with the achiever orbit on one
   1.603332-second alternate timeline. Later, route-specific declarations
   override the generic two-second decorative loop. */
@media (prefers-reduced-motion: no-preference) {
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-motion-sj-journey path[pathLength] {
    animation: jl-motion-sj-journey 1.603332s linear infinite alternate;
  }
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-motion-sj-mid-right path[pathLength] {
    animation: jl-motion-sj-mid-right 1.603332s linear infinite alternate;
  }
  [data-jl-persona="student"][data-jl-product="jeddai"] .jl-motion-sj-mid-left path[pathLength] {
    animation: jl-motion-sj-mid-left 1.603332s linear infinite alternate;
  }
}
@keyframes jl-motion-sj-journey {
  0% {
    animation-timing-function: cubic-bezier(.528, 0, .609, .765);
    stroke-dasharray: 0 1;
    visibility: hidden;
  }
  100% { stroke-dasharray: .9367 1; visibility: visible; }
}
@keyframes jl-motion-sj-mid-right {
  0%, 50.021% { stroke-dasharray: 0 1; visibility: hidden; }
  50.021% { animation-timing-function: cubic-bezier(.42, 0, .581, .997); }
  100% { stroke-dasharray: 1 1; visibility: visible; }
}
@keyframes jl-motion-sj-mid-left {
  0% {
    animation-timing-function: cubic-bezier(.5, 0, .5, 1);
    stroke-dasharray: 0 1;
    stroke-dashoffset: -1;
    visibility: hidden;
  }
  50.083%, 100% {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
    visibility: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-jl-persona="student"][data-jl-product="jeddai"] :is(
    .jl-motion-sj-journey,
    .jl-motion-sj-mid-right,
    .jl-motion-sj-mid-left
  ) path[pathLength] {
    animation: none;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
    visibility: visible;
  }
}

/* Tablet layouts retain the compact Figma control treatment while exposing
   a full 44px hit area for every small interactive control. Desktop geometry
   is untouched, and the existing phone-specific reflow remains authoritative
   at 620px and below. */
@media (min-width: 621px) and (max-width: 860px) {
  .jl-filters__clear,
  .jl-frow,
  .jl-fgroup__more summary,
  .jl-sort select,
  .jl-sort__submit,
  .jl-card--catalogue .jl-card__preview,
  .jl-card--catalogue .jl-card__actions .jl-btn,
  .jl-suggestion__course-preview,
  .jl-suggestion__course-bundle,
  .jl-suggestion__bundle,
  .jl-suggestion__single,
  .jl-pdp-card__view,
  .jl-pdp-card__actions .jl-btn {
    min-height: 44px;
  }

  .jl-filters__clear {
    display: inline-flex;
    align-items: center;
    padding-block: 8px;
  }

  .jl-sort select { height: 44px; }

  .jl-pager,
  .jl-pager__list a,
  .jl-pager__list span {
    min-height: 44px;
  }
  .jl-pager__list a,
  .jl-pager__list span {
    min-width: 44px;
    height: 44px;
    border-radius: 22px;
  }

  .jl-guide-rail__arrow,
  .jl-modal__close {
    width: 44px;
    height: 44px;
  }
  .jl-guide-rail__arrow,
  .jl-modal__close { border-radius: 22px; }

  .jl-marketing-card__preview {
    height: 44px;
    min-height: 44px;
  }
  .jl-marketing-card__actions { gap: 4px; }
  .jl-marketing-card__actions .jl-btn {
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
    border-radius: 22px;
  }

  .jl-modal__update {
    width: auto;
    height: 44px;
    min-height: 44px;
    padding-inline: 14px;
  }
}

/* Phone and tablet layouts are touch-first. Preserve the compact visual
   treatment inside each control, but never make its interactive box smaller
   than 44px in either dimension. These rules live after the PDP/card-specific
   definitions so later component geometry cannot silently undo them. */
@media (max-width: 860px) {
  .jl-marketing-card__preview,
  .jl-marketing-card__actions .jl-btn,
  .jl-card--catalogue .jl-card__preview,
  .jl-card--catalogue .jl-card__actions .jl-btn,
  .jl-pdp-card__view,
  .jl-pdp-card__actions .jl-btn,
  .jl-syl__tab {
    min-height: 44px;
  }

  .jl-marketing-card__preview { height: 44px; }
  .jl-marketing-card__actions .jl-btn {
    height: 44px;
    flex-basis: 44px;
  }
  .jl-marketing-card__actions {
    height: 96px;
    flex-basis: 96px;
    gap: 4px;
  }

  .jl-arrow,
  .jl-pdp-testimonials__arrow {
    width: 44px;
    height: 44px;
  }

  .jl-pdp-testimonials__dots li,
  .jl-pdp-testimonials__dots button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}

/* Landscape tablets and large touch displays can select the desktop card
   layout, but they still need touch-sized controls. Pointer capability is the
   authoritative signal; the width range also covers hybrid tablets whose
   browser does not expose a coarse primary pointer consistently. */
@media (min-width: 861px) and (max-width: 1200px), (hover: none), (pointer: coarse), (any-pointer: coarse) {
  .jl-native-select,
  .jl-sort select,
  .jl-sort__submit,
  .jl-marketing-card__preview,
  .jl-marketing-card__actions .jl-btn,
  .jl-card--catalogue .jl-card__preview,
  .jl-card--catalogue .jl-card__actions .jl-btn,
  .jl-pdp-card__view,
  .jl-pdp-card__actions .jl-btn,
  .jl-suggestion__course-preview,
  .jl-suggestion__course-bundle,
  .jl-suggestion__bundle,
  .jl-suggestion__single,
  .jl-modal__update {
    min-height: 44px;
  }

  .jl-site-header__nav > ul > .jl-site-header__nav-item > a {
    min-height: 44px;
  }

  .jl-marketing-card__actions { gap: 4px; }

  .jl-modal__update {
    height: 44px;
    padding-inline: 14px;
  }

  .jl-guide-rail__arrow,
  .jl-arrow,
  .jl-pdp-testimonials__arrow {
    width: 44px;
    height: 44px;
  }

  .jl-pdp-testimonials__dots li,
  .jl-pdp-testimonials__dots button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}

/* Reassert the exact 1920 route geometry after the shared responsive tail. */
@media (min-width: 1920px) {
  main[data-jl-catalogue] .jl-cat__body {
    /* The Figma tail is 20px results gap + 44px pager + 116px clear space.
       Card rows remain content-driven so live titles/actions are never clipped. */
    padding-bottom: 116px;
  }

  /* The catalogue export clips the shared footer; render the complete frame.
     Validation and error copy can still grow it beyond the design minimum. */
  main[data-jl-catalogue] + .jl-foot:not(.jl-foot--art),
  main[data-jl-catalogue] + .jl-foot:not(.jl-foot--art) > .jl-wrap {
    min-height: 429.3px;
  }
  main[data-jl-catalogue] + .jl-foot:not(.jl-foot--art) .jl-foot__grid {
    min-height: 330px;
  }

  :is(.jl-hero--teacher-jeddai, .jl-hero--school-jeddai) {
    padding: 109px 0 80px;
  }
  :is(
    .jl-hero--teacher-study-guides,
    .jl-hero--student-study-guides,
    .jl-hero--school-study-guides
  ) {
    padding: 74px 0 44px;
  }
  .jl-section--faq-compact { padding: 0; }
  [data-jl-product="study-guides"] .jl-ctaband .jl-h2--display {
    max-width: none;
  }

  [data-jl-product="study-guides"] .jl-section--syllabus {
    padding-bottom: 130.78px;
  }

  [data-jl-persona="teacher"][data-jl-product="jeddai"]
  .jl-section--platform-tabs {
    margin-top: -65px;
    margin-bottom: 62px;
  }
  [data-jl-persona="teacher"][data-jl-product="jeddai"] .jl-settext {
    margin-top: 0;
  }
  [data-jl-persona="teacher"][data-jl-product="jeddai"] .jl-ctaband {
    margin-top: .97px;
  }

  [data-jl-persona="school"][data-jl-product="jeddai"] .jl-section--pullquote {
    height: 494px;
  }
  [data-jl-persona="school"][data-jl-product="jeddai"] .jl-section--platform-tabs {
    height: 921px;
  }
  [data-jl-persona="school"][data-jl-product="jeddai"] .jl-section--loved-by {
    margin-top: -22px;
  }
  [data-jl-persona="school"][data-jl-product="jeddai"] .jl-ctaband {
    min-height: 0;
    margin-top: 1px;
  }

  :is(
    [data-jl-persona="teacher"],
    [data-jl-persona="school"]
  )[data-jl-product="study-guides"] .jl-marquee--captioned {
    height: 499px;
  }
  [data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-section--journey {
    margin-top: -200.7px;
  }
  [data-jl-persona="school"][data-jl-product="study-guides"] .jl-section--faq-compact {
    margin-top: -19.703px;
  }
}

/* ===================== CONTENT-AWAITING-APPROVAL STATES ================ */
/* These blocks preserve the intended proof-section geometry while content is
   being approved. They intentionally contain no logos, names, quotes, stars,
   ratings or numbers that a visitor could mistake for published evidence. */
.jl-proof-pending__eyebrow {
  margin: 0 0 10px;
  color: var(--jl-purple);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.jl-proof-pending__body {
  max-width: 560px;
  margin: 14px auto 0;
  color: #625d75;
  font-size: 15px;
  line-height: 1.55;
  text-align: center;
}

.jl-marquee--pending .jl-marquee__label {
  margin-bottom: 24px;
  color: #12063d;
}
.jl-marquee--pending .jl-marquee__viewport {
  padding-block: 12px;
}
.jl-marquee--pending .jl-marquee__track,
.jl-hero--centre > .jl-marquee--pending .jl-marquee__track {
  width: 100%;
  justify-content: center;
  gap: clamp(10px, 1.35vw, 26px);
  animation: none !important;
  transform: none !important;
}
.jl-marquee--pending .jl-marquee__slot,
.jl-hero--centre > .jl-marquee--pending .jl-marquee__slot {
  display: flex;
  width: clamp(94px, 8.75vw, 167.857px);
  overflow: visible;
}
.jl-proof-pending__crest {
  position: relative;
  display: block;
  width: 66px;
  height: 76px;
  border: 2px solid rgba(72, 1, 212, .18);
  border-radius: 17px 17px 28px 28px;
  background: linear-gradient(145deg, #f8f4ff 0%, #eee4fb 100%);
  box-shadow: 0 9px 24px rgba(72, 1, 212, .08);
}
.jl-proof-pending__crest::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(72, 1, 212, .13);
  translate: -50% 0;
}
.jl-proof-pending__crest::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 17px;
  left: 12px;
  height: 7px;
  border-radius: 999px;
  background: rgba(72, 1, 212, .1);
  box-shadow: 0 12px 0 rgba(72, 1, 212, .07);
}
.jl-marquee--pending .jl-marquee__slot:nth-child(3n + 2) .jl-proof-pending__crest {
  border-color: rgba(0, 166, 184, .2);
  background: linear-gradient(145deg, #f2fcfd 0%, #daf4f7 100%);
}
.jl-marquee--pending .jl-marquee__slot:nth-child(3n) .jl-proof-pending__crest {
  border-color: rgba(224, 105, 62, .18);
  background: linear-gradient(145deg, #fff8f3 0%, #f9eadf 100%);
}
.jl-hero--centre > .jl-marquee--pending .jl-proof-pending__eyebrow,
.jl-hero--centre > .jl-marquee--pending .jl-proof-pending__body {
  display: none;
}
.jl-hero--centre > .jl-marquee--pending .jl-marquee__label {
  margin-bottom: 48px;
}

.jl-pullquote__pending {
  display: flex;
  width: 100%;
  min-height: 248px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.jl-pullquote--pending .jl-pullquote__track {
  overflow: visible;
  scroll-snap-type: none;
}
.jl-pullquote--pending .jl-pullquote__slide {
  height: 100%;
}
.jl-section--pullquote .jl-pullquote__pending-title {
  width: 100%;
  height: auto;
  overflow: visible;
  color: #12063d;
  font-size: clamp(24px, 2.2vw, 38px);
  font-weight: 700;
  line-height: 1.2;
}
.jl-pullquote--pending .jl-proof-pending__body {
  margin-top: 14px;
}

.jl-stats--pending .jl-stat__n {
  opacity: .45;
}
.jl-stats--pending .jl-stat__c {
  color: #706a80;
}
.jl-quote--pending {
  min-height: 280px;
  border: 1px dashed rgba(72, 1, 212, .24);
  background: linear-gradient(145deg, #fff 0%, #fbf9ff 100%);
}
.jl-proof-pending__badge {
  align-self: flex-start;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid rgba(72, 1, 212, .14);
  border-radius: 999px;
  background: #f3ecff;
  color: #4801d4;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.jl-quote--pending .jl-quote__text {
  color: #4e4963;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}
.jl-quote--pending .jl-quote__who {
  display: flex;
  margin-top: auto;
}
.jl-proof-pending__avatar {
  position: relative;
  display: block;
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  overflow: hidden;
  border-radius: 50%;
  background: #eee8f7;
}
.jl-proof-pending__avatar::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d3c5e7;
  translate: -50% 0;
}
.jl-proof-pending__avatar::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 31px;
  height: 28px;
  border-radius: 50% 50% 0 0;
  background: #d3c5e7;
  translate: -50% 0;
}
.jl-section--word-for-it .jl-quote--pending {
  border: 1px dashed rgba(72, 1, 212, .24);
}
.jl-quote__placeholder-meta {
  display: flex;
  margin-top: auto;
  align-items: center;
  gap: 12px;
  color: #514b67;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.jl-quote__placeholder-meta small {
  color: #777085;
  font-size: 12px;
  font-weight: 400;
}

/* Each Figma dot represents a complete visible card set, rather than one
   individual card. The authored reviews occupy page one; later pages retain
   honest, non-attributed placeholders until more reviews are approved. */
.jl-section--word-for-it .jl-quotes,
.jl-section--loved-by > .jl-wrap > .jl-quotes {
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.jl-section--word-for-it .jl-quote-page {
  height: 355px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.jl-section--word-for-it .jl-quote-page .jl-quote {
  width: auto;
  min-width: 0;
  flex-basis: auto;
}
.jl-section--loved-by .jl-quote-page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* The rating is real launch content again; keep it in the heading flow at
   every width, rather than inheriting the desktop absolute text offsets. */
.jl-section--loved-by .jl-section__head .jl-rating {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 18px auto 0;
}
.jl-section--loved-by .jl-rating__stars,
.jl-section--loved-by .jl-rating__text {
  position: static;
  width: auto;
  height: auto;
  flex: 0 1 auto;
  line-height: 1.55;
}
.jl-case__chart-caption {
  margin: 0 0 24px;
  color: #57517a;
  font-size: 12px;
  line-height: 18.6px;
  letter-spacing: .96px;
  text-align: left;
  text-transform: uppercase;
}
.jl-case__design-chart {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 1920px) {
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__chart svg.jl-case__design-chart {
    height: 255px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__quotes {
    top: 227px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__stats {
    top: 464px;
  }
}
.jl-pdp-testimonials__track { gap: 0; }
.jl-pdp-testimonial-page {
  display: grid;
  width: 100%;
  min-width: 0;
  flex: 0 0 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.jl-pdp-testimonial-page .jl-pdp-testimonial {
  width: auto;
  min-width: 0;
  flex-basis: auto;
}
.jl-pdp-testimonial--pending {
  border-style: dashed;
  border-color: rgba(72, 1, 212, .24);
  background: linear-gradient(145deg, #fff 0%, #fbf9ff 100%);
}
.jl-pdp-testimonial--pending > p:not(.jl-proof-pending__badge) {
  margin: 0;
  color: #4e4963;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
}

@media (min-width: 1920px) {
  .jl-section--loved-by > .jl-wrap > .jl-quotes {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .jl-section--loved-by .jl-quote-page {
    height: 270px;
    grid-template-columns: 341.86px 336.93px 338.43px;
    gap: 33px;
  }
  .jl-section--word-for-it .jl-quote-page .jl-quote {
    width: 565.5px;
  }
  .jl-pdp-testimonial-page {
    grid-template-columns: 341.86px 336.93px 338.43px;
    gap: 33px;
  }
}

@media (max-width: 1199px) {
  .jl-pdp-testimonial-page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1919px) {
  .jl-section--loved-by .jl-wordquote__arrow {
    grid-area: 3 / 1;
    align-self: center;
    margin-inline: 0;
  }
  .jl-section--loved-by .jl-wordquote__arrow--prev { justify-self: start; }
  .jl-section--loved-by .jl-wordquote__arrow--next { justify-self: end; }
}

@media (max-width: 900px) {
  .jl-section--word-for-it .jl-quote-page,
  .jl-section--loved-by .jl-quote-page {
    height: auto;
    grid-template-columns: 1fr;
  }
  .jl-section--word-for-it .jl-quote-page .jl-quote,
  .jl-section--loved-by .jl-quote-page .jl-quote {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 700px) {
  .jl-pdp-testimonial-page { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .jl-marquee--pending .jl-marquee__viewport {
    overflow: visible;
  }
  .jl-marquee--pending .jl-marquee__track,
  .jl-hero--centre > .jl-marquee--pending .jl-marquee__track {
    width: 100%;
    flex-wrap: wrap;
  }
  .jl-marquee--pending .jl-marquee__slot,
  .jl-hero--centre > .jl-marquee--pending .jl-marquee__slot {
    width: clamp(78px, 23vw, 118px);
    height: 86px;
  }
  .jl-marquee--pending.jl-marquee--captioned .jl-marquee__slot {
    height: 96px;
  }
  .jl-hero--centre > .jl-marquee--pending .jl-proof-pending__eyebrow,
  .jl-hero--centre > .jl-marquee--pending .jl-proof-pending__body {
    display: block;
  }
  .jl-hero--centre > .jl-marquee--pending .jl-marquee__label {
    margin-bottom: 24px;
  }
  .jl-pullquote__pending {
    min-height: 190px;
  }
  .jl-quote--pending {
    min-height: 260px;
  }
}

@media (max-width: 420px) {
  .jl-proof-pending__crest {
    width: 54px;
    height: 64px;
  }
  .jl-marquee--pending .jl-marquee__slot,
  .jl-hero--centre > .jl-marquee--pending .jl-marquee__slot {
    width: calc(33.333% - 8px);
  }
  .jl-section--pullquote .jl-pullquote__pending-title {
    font-size: 22px;
  }
}

/* Approved 2026–27 copy expands beyond the original short-copy artboards.
   Only copy-bearing geometry is released; artwork, tokens and controls remain. */
.jl-copy-regions { display: flex; gap: 8px; margin: 0 0 24px; }
.jl-copy-regions a { padding: 10px 24px; border: 1px solid #d9cbed; border-radius: 999px; color: #4801d4; font-weight: 700; text-decoration: none; }
.jl-copy-regions a[aria-current] { color: #fff; background: #4801d4; }
.jl-hero__trust { margin: 24px 0 0; font-size: 16px; line-height: 1.6; }
.jl-copy-feature { position: relative; border: 0; border-radius: 8px; padding: 0 20px; }
.jl-copy-feature::before { content: ""; position: absolute; left: 0; top: 11px; bottom: 11px; width: 3px; border-radius: 999px; background: #e1e0e8; }
.jl-copy-feature[open] { background: #f1e6fc; }
.jl-copy-feature[open]::before { width: 4px; background: #2e2177; }
.jl-copy-feature summary { cursor: pointer; padding: 11px 0; min-height: 49px; color: #706b77; font-size: 20px; font-weight: 700; line-height: 27px; list-style: none; }
.jl-copy-feature summary::-webkit-details-marker { display: none; }
.jl-copy-feature[open] summary { color: #2e2177; }
.jl-copy-feature p { margin: -3px 0 0; padding: 0 0 11px; color: #4d4952; font-size: 16px; line-height: 20px; }
.jl-copy-feature summary:focus-visible { outline: 3px solid #4801d4; outline-offset: 4px; border-radius: 4px; }
.jl.jl-copy .jl-section--platform-tabs { height: auto !important; padding: clamp(48px, 6vw, 100px) 0; margin-block: 0 40px; }
.jl.jl-copy .jl-section--platform-tabs > .jl-wrap { width: min(1158px, calc(100% - 48px)); max-width: 100%; height: auto; }
.jl.jl-copy .jl-section--platform-tabs :is(.jl-tabs__group, .jl-section__head, .jl-section__head .jl-h2, .jl-tabs__layout, .jl-tabs__list, .jl-tabs__panel, .jl-tabs__cta) {
  position: relative; inset: auto; width: 100%; height: auto; max-width: 100%; transform: none; white-space: normal;
}
.jl.jl-copy .jl-section--platform-tabs .jl-section__head { margin: 0 auto 48px; text-align: center; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__layout { display: grid; grid-template-columns: minmax(240px, 326fr) minmax(0, 802fr); gap: 30px; align-items: start; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__list { display: grid; gap: 6px; margin: 33px 0 0; padding: 0; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__panel img { width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__cta { margin: 40px auto 0; text-align: center; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__cta .jl-btn { white-space: normal; height: auto; min-height: 56px; }
.jl-curriculum-subjects { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; padding: 0; margin: 40px 0; list-style: none; }
.jl-curriculum-subjects li { display: flex; align-items: center; gap: 16px; padding: 28px; border: 1px solid #e8dcfa; border-radius: 20px; background: #f5f0ff; color: #2e2177; font-size: 20px; font-weight: 700; line-height: 1.4; }
.jl-curriculum-subjects li:nth-child(3n+2) { background: #e7f8f6; }
.jl-curriculum-subjects li:nth-child(3n) { background: #fff7d9; }
.jl-curriculum-subjects svg { flex-shrink: 0; }
.jl.jl-copy .jl-hero :is(.jl-h1, .jl-sub, .jl-hero__row, .jl-hero__col) { height: auto; min-height: 0; }
.jl.jl-copy .jl-hero:not(.jl-hero--centre) { height: auto; }
.jl.jl-copy :is(.jl-quote-page, .jl-quote, .jl-pdp-testimonial, .jl-pullquote__front, .jl-pullquote__track, .jl-pullquote__slide, .jl-section--comparison) { height: auto !important; }
.jl.jl-copy :is(.jl-quote__text, .jl-quote__who, .jl-quote__name, .jl-quote__role, .jl-pullquote__text, .jl-pdp-testimonial blockquote) { position: static; width: auto; height: auto; max-height: none; overflow: visible; -webkit-line-clamp: unset; white-space: normal; }
.jl.jl-copy .jl-quote { display: flex; flex-direction: column; gap: 24px; padding: 32px; }
.jl.jl-copy .jl-quote__who { margin-top: auto; }
.jl.jl-copy .jl-pullquote__slide { padding-block: 40px; }
.jl.jl-copy .jl-pullquote__slide figure { margin: 0; }
.jl.jl-copy .jl-pdp__social-proof { font-size: 15px; line-height: 1.6; margin: 20px 0; color: #514365; }
.jl.jl-copy :is(.jl-pdp-about__head, .jl-pdp-about__head .jl-h2, .jl-pdp-modules__head, .jl-pdp-testimonials__head, .jl-pdp-video__copy, .jl-pdp-close__inner) { height: auto; max-height: none; }
.jl.jl-copy .jl-pdp-testimonial blockquote { flex: 1; }
.jl.jl-copy .jl-pdp-video__copy .jl-btn { margin: 12px 8px 0 0; }
.jl.jl-copy .jl-module__a ul { padding: 12px 0 12px 24px; }
.jl.jl-copy .jl-module__a li { margin-bottom: 10px; }
@media (max-width: 900px) {
  .jl.jl-copy .jl-section--platform-tabs .jl-tabs__layout { grid-template-columns: 1fr; }
  .jl-curriculum-subjects { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .jl-curriculum-subjects li { font-size: 17px; padding: 20px; }
}
@media (max-width: 480px) {
  .jl-curriculum-subjects { grid-template-columns: 1fr; }
  .jl.jl-copy .jl-quote { padding: 24px; }
}

/* Use the established flowing section layout at large widths as well:
   the approved copy deck no longer fits the original fixed-height artboards. */
@media (min-width: 1920px) {
  .jl-section--word-for-it {
    height: auto;
    padding: 64px 0;
    border-radius: 40px;
  }
  .jl-section--word-for-it > .jl-wrap {
    width: calc(100% - 48px);
    max-width: 1155px;
    height: auto;
    margin: 0 auto;
  }
  .jl-section--word-for-it .jl-section__head {
    position: static;
    width: 100%;
    height: auto;
    margin: 0 0 40px;
    text-align: center;
  }
  .jl-section--word-for-it .jl-eyebrow,
  .jl-section--word-for-it .jl-h2 {
    position: static;
    width: auto;
    height: auto;
    margin-inline: auto;
    text-align: center;
    white-space: normal;
  }
  .jl-section--word-for-it .jl-eyebrow { margin-bottom: 12px; }
  .jl-section--word-for-it .jl-h2 { font-size: clamp(30px, 5vw, 48px); line-height: 1.2; }
  .jl-section--word-for-it .jl-stats {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    height: auto;
    gap: 24px 48px;
  }
  .jl-section--word-for-it .jl-stat,
  .jl-section--word-for-it .jl-stat:nth-child(n) {
    position: relative;
    left: auto;
    width: auto;
    min-width: 148px;
  }
  .jl-section--word-for-it .jl-stat__c,
  .jl-section--word-for-it .jl-stat:nth-child(n) .jl-stat__c {
    position: static;
    display: inline;
    margin-left: 8px;
  }
  .jl-section--word-for-it .jl-stat__n { display: inline; }
  .jl-section--word-for-it .jl-quotes {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 48px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .jl-section--word-for-it .jl-quote {
    flex-basis: min(565.5px, 100%);
    width: min(565.5px, 100%);
    height: auto;
    min-height: 355px;
    scroll-snap-align: start;
  }
  .jl-wordquote__dots { position: static; width: auto; height: 44px; margin: 40px auto 0; }
  .jl-wordquote__arrow { top: auto; bottom: 47px; }
  .jl-wordquote__arrow--prev { left: 16px; }
  .jl-wordquote__arrow--next { left: auto; right: 16px; }
}
@media (min-width: 1920px) {
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey {
    height: auto;
    padding: 64px 0;
    overflow: hidden;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey > .jl-wrap {
    width: 100%;
    max-width: calc(var(--jl-wide) + var(--jl-gutter) * 2);
    height: auto;
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey {
    width: 100%;
    height: auto;
    padding: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey__deco { display: none; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-section__head {
    position: static;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 0 auto 48px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-section__head .jl-h2 {
    width: auto;
    height: auto;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.2;
    white-space: normal;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-journey__rows {
    position: static;
    display: flex;
    width: 100%;
    height: auto;
    gap: 64px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) {
    position: static;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__text,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__media,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) .jl-row__text,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) .jl-row__media {
    position: static;
    width: auto;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__text,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__text {
    display: flex;
    gap: 16px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-eyebrow,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-h3,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__actions {
    position: static;
    width: 100%;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-h3 {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.25;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps {
    gap: 12px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li:first-child,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li:nth-child(n+2) {
    display: block;
    width: 100%;
    height: auto;
    padding: 12px 0 12px 34px;
    border-top: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-steps li::before {
    position: absolute;
    left: 0;
    top: 12px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(1) .jl-row__actions { width: auto; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__text {
    display: flex;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-eyebrow,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-h3,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__text > p:not(.jl-eyebrow),
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__actions {
    position: static;
    width: 100%;
    height: auto;
    white-space: normal;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-h3 {
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1.25;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(2) .jl-row__actions { width: auto; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__text {
    display: flex;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-eyebrow,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-h3,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-badge-pill,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__actions {
    position: static;
    width: 100%;
    height: auto;
    white-space: normal;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-h3 {
    font-size: clamp(27px, 4vw, 32px);
    line-height: 1.3;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-badge-pill {
    width: fit-content;
    max-width: 100%;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks {
    display: flex;
    gap: 10px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(n) {
    position: relative;
    top: auto;
    display: flex;
    width: 100%;
    height: auto;
    min-height: 24px;
    gap: 0;
    align-items: flex-start;
    border: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::before,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::after,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3)::before,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3)::after {
    position: absolute;
    flex: none;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::before,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3)::before {
    left: 0;
    top: 0;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li::after,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3)::after {
    left: -1px;
    top: -1px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks span,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-checks li:nth-child(3) span {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: auto;
    margin-left: 38px;
    white-space: normal;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__actions {
    display: flex;
    width: auto;
    gap: 12px;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(3) .jl-row__media img {
    position: static;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row__media img,
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) .jl-row__media img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 64px;
    padding: clamp(28px, 4vw, 56px);
    overflow: hidden;
    border-radius: 32px;
    background: var(--jl-lilac);
  }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__art { display: none; }
  [data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case__content {
    position: static;
    opacity: 1;
    pointer-events: auto;
  }
}
@media (min-width: 1920px) {
  .jl-section--loved-by {
    height: auto;
    padding: 104px 0;
    overflow: hidden;
  }
  .jl-section--loved-by > .jl-loved-by__art { display: none; }
  .jl-section--loved-by > .jl-wrap {
    position: relative;
    display: grid;
    width: 100%;
    max-width: calc(var(--jl-wide) + var(--jl-gutter) * 2);
    height: auto;
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
    grid-template-columns: minmax(0, 1fr);
  }
  .jl-section--loved-by .jl-section__head {
    position: static;
    grid-area: 1 / 1;
    opacity: 1;
    pointer-events: auto;
  }
  .jl-section--loved-by > .jl-wrap > .jl-quotes {
    position: static;
    grid-area: 2 / 1;
    opacity: 1;
    pointer-events: auto;
  }
  .jl-section--loved-by .jl-wordquote__dots { grid-area: 3 / 1; }
  .jl-section--loved-by .jl-wordquote__arrow {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-area: 2 / 1;
    align-self: center;
    margin-inline: 12px;
  }
  .jl-section--loved-by .jl-wordquote__arrow--prev { justify-self: start; }
  .jl-section--loved-by .jl-wordquote__arrow--next { justify-self: end; }
  .jl-section--loved-by > .jl-wrap > div[style="height:40px"] { display: none; }
  .jl-section--loved-by .jl-videoband {
    position: static;
    display: grid;
    width: 100%;
    max-width: 1096px;
    height: auto;
    min-height: 386.13px;
    margin: 40px auto 0;
    padding: 52px;
    grid-area: 4 / 1;
    grid-template-columns: 451.42px minmax(0, 1fr);
    gap: 44px;
    align-items: center;
  }
  .jl-section--loved-by .jl-videoband__art { display: none; }
  .jl-section--loved-by .jl-videoband > div:first-child,
  .jl-section--loved-by .jl-videoband__copy {
    position: static;
    width: auto;
    height: auto;
  }
  .jl-section--loved-by .jl-videoband .jl-video {
    width: 451.42px;
    max-width: 100%;
    height: 282.13px;
  }
  .jl-section--loved-by .jl-videoband__copy {
    display: flex;
    gap: 17px;
  }
  .jl-section--loved-by .jl-videoband__quote,
  .jl-section--loved-by .jl-videoband__body,
  .jl-section--loved-by .jl-videoband__who,
  .jl-section--loved-by .jl-videoband__actions {
    position: static;
    width: auto;
    height: auto;
    white-space: normal;
  }
  .jl-section--loved-by .jl-videoband__actions .jl-btn:first-child,
  .jl-section--loved-by .jl-videoband__actions .jl-btn:last-child { width: auto; }
}
@media (min-width: 1920px) {
  .jl-section--comparison {
    height: auto;
    padding: 104px 0;
    overflow: hidden;
  }
  .jl-section--comparison > .jl-comparison__art { display: none; }
  .jl-section--comparison > .jl-wrap {
    position: static;
    width: 100%;
    max-width: calc(var(--jl-wide) + var(--jl-gutter) * 2);
    height: auto;
    margin-inline: auto;
    padding-inline: var(--jl-gutter);
  }
  .jl-section--comparison .jl-compare {
    position: static;
    opacity: 1;
  }
}

.jl.jl-copy .jl-section--comparison { padding: 72px 0; }
.jl.jl-copy .jl-section--comparison > .jl-wrap { position: relative; width: min(1158px, calc(100% - 48px)); max-width: 100%; height: auto; padding: 0; }
.jl.jl-copy .jl-section--comparison :is(.jl-compare, .jl-section__head, .jl-compare__scroll, .jl-compare__cta) { position: static; inset: auto; width: 100%; height: auto; transform: none; }
.jl.jl-copy .jl-section--comparison .jl-compare { padding: 48px 24px; border-radius: 48px; }
.jl.jl-copy .jl-section--comparison .jl-section__head { margin: 0 0 40px; }
.jl.jl-copy .jl-section--comparison .jl-h2 { width: auto; max-width: 800px; height: auto; }
.jl.jl-copy .jl-section--comparison table { width: 100%; }
.jl.jl-copy .jl-section--comparison .jl-compare__cta { display: flex; margin: 32px 0 0; }
.jl.jl-copy .jl-section--comparison .jl-compare__cta .jl-btn { width: auto; height: auto; min-height: 56px; padding: 16px 28px; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__cta .jl-btn { width: auto; padding: 16px 28px; }
.jl.jl-copy .jl-section--loved-by > .jl-wrap { display: grid; grid-template-columns: minmax(0,1fr); width: min(1158px, calc(100% - 48px)); max-width: 100%; height: auto; padding: 0; }
.jl.jl-copy .jl-section--loved-by .jl-section__head { position: static; width: 100%; height: auto; margin: 0 0 36px; grid-area: 1 / 1; }
.jl.jl-copy .jl-section--loved-by .jl-section__head .jl-h2 { width: auto; height: auto; white-space: normal; }
.jl.jl-copy .jl-section--loved-by .jl-stats { grid-area: 2 / 1; margin: 0 0 32px; }
.jl.jl-copy .jl-section--loved-by > .jl-wrap > .jl-quotes { position: static; width: 100%; height: auto; grid-area: 3 / 1; }
.jl.jl-copy .jl-section--loved-by .jl-quote-page { grid-template-columns: repeat(3,minmax(0,1fr)); }
.jl.jl-copy .jl-section--loved-by .jl-wordquote__dots { position: static; grid-area: 4 / 1; margin: 24px auto; }
.jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow { position: relative; inset: auto; grid-area: 4 / 1; align-self: center; transform: none; }
.jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow--prev { justify-self: start; }
.jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow--next { justify-self: end; }
.jl.jl-copy .jl-section--loved-by .jl-videoband { grid-area: 5 / 1; margin-top: 16px; }
.jl.jl-copy .jl-section--loved-by > .jl-wrap > div[style] { display: none; }
@media (max-width: 900px) {
  .jl.jl-copy .jl-section--loved-by .jl-quote-page { grid-template-columns: 1fr; }
  .jl.jl-copy .jl-section--comparison .jl-compare { padding: 32px 0; border-radius: 24px; }
}
.jl.jl-copy .jl-hero__col > * { flex-shrink: 0; }
.jl.jl-copy .jl-section--journey :is(.jl-h2, .jl-h3) { white-space: normal; height: auto; max-width: 100%; }
.jl.jl-copy .jl-section--journey .jl-row__actions .jl-btn { width: auto; min-height: 56px; height: auto; padding: 16px 24px; white-space: normal; }
.jl.jl-copy .jl-ctaband { height: auto; min-height: 414px; }
.jl.jl-copy .jl-ctaband > .jl-wrap { height: auto; min-height: 414px; padding-block: 64px; }
.jl.jl-copy .jl-ctaband :is(.jl-h2, .jl-h2 + p, .jl-ctaband__actions) { position: relative; inset: auto; height: auto; width: auto; max-width: 100%; translate: none; transform: none; white-space: normal; }
.jl.jl-copy .jl-ctaband .jl-h2 { max-width: 880px; margin: 0 auto 24px; }
.jl.jl-copy .jl-ctaband .jl-h2 + p { max-width: 1000px; margin: 0 auto; }
.jl.jl-copy .jl-ctaband .jl-ctaband__actions { margin: 24px auto 0; }
@media (max-width: 1199px) {
  .jl.jl-copy .jl-hero:not(.jl-hero--centre) .jl-hero__col { flex: 0 1 auto; }
}
.jl.jl-copy .jl-section--journey { height: auto !important; padding-block: 80px; }
.jl.jl-copy .jl-section--journey > .jl-wrap { width: min(1158px, calc(100% - 48px)); max-width: 100%; height: auto !important; margin-inline: auto; padding: 0; }
.jl.jl-copy .jl-section--journey :is(.jl-journey, .jl-section__head, .jl-journey__rows, .jl-row, .jl-row__text, .jl-row__media, .jl-row__text > *) { position: static !important; inset: auto; width: 100% !important; height: auto !important; white-space: normal !important; }
.jl.jl-copy .jl-section--journey .jl-section__head { margin: 0 auto 56px; }
.jl.jl-copy .jl-section--journey :is(.jl-h2, .jl-h3) { height: auto !important; white-space: normal !important; }
.jl.jl-copy .jl-section--journey .jl-journey__rows { display: grid; gap: 72px; }
.jl.jl-copy .jl-section--journey .jl-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px; align-items: center; }
.jl.jl-copy .jl-section--journey .jl-row__text { display: flex; flex-direction: column; gap: 20px; }
.jl.jl-copy .jl-section--journey .jl-row__text > * { margin-block: 0; }
.jl.jl-copy .jl-section--journey .jl-row__media img { width: 100%; height: auto; }
.jl.jl-copy .jl-section--journey .jl-row__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.jl.jl-copy .jl-section--journey .jl-row__actions .jl-btn { width: auto !important; height: auto !important; min-height: 56px; }
.jl.jl-copy .jl-section--journey .jl-journey { position: relative !important; isolation: isolate; padding: 0; background: transparent; border-radius: 0; overflow: visible; }
.jl.jl-copy:not([data-jl-persona="generic"]) .jl-section--journey { position: relative; background: #f1e6fc; border-radius: clamp(32px, 4.6875vw, 90px); overflow: hidden; }
.jl.jl-copy[data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-section--journey { background: linear-gradient(to bottom, rgba(241, 230, 252, 0) 0%, #f1e6fc 25.962%); }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row .jl-steps li { width: 100%; height: auto; min-height: 0; }
.jl.jl-copy:not([data-jl-persona="generic"])[data-jl-product] .jl-section--journey .jl-row:nth-child(3) .jl-checks { display: flex; flex-direction: column; gap: 0; }
.jl.jl-copy:not([data-jl-persona="generic"])[data-jl-product] .jl-section--journey .jl-row:nth-child(3) .jl-checks li { position: relative; inset: auto; display: flex; align-items: flex-start; gap: 14px; width: 100%; height: auto; min-height: 53px; padding: 14px 0; }
.jl.jl-copy:not([data-jl-persona="generic"])[data-jl-product] .jl-section--journey .jl-checks svg { width: 24px; height: 24px; margin: 0; padding: 6px; border-radius: 12px; color: #0f6e56; background: #fff; }
.jl.jl-copy:not([data-jl-persona="generic"])[data-jl-product] .jl-section--journey .jl-row:nth-child(3) .jl-checks span { position: static; flex: 1; min-width: 0; width: auto; height: auto; white-space: normal; }
.jl.jl-copy .jl-cat__hero .jl-h1 { height: auto; line-height: 1.2; }
@media (max-width: 900px) {
  .jl.jl-copy .jl-section--journey .jl-row { grid-template-columns: 1fr; gap: 32px; }
  .jl.jl-copy .jl-section--journey .jl-row__text { order: 0; }
  .jl.jl-copy .jl-section--journey .jl-row__media { order: 1; }
}

/* Figma alignment with live copy. Preserve authored component widths and
   spacing, but keep text in flow: no screenshot layers or clipped reviews. */
@media (min-width: 1800px) {
  .jl.jl-copy[data-jl-product="study-guides"] .jl-hero > .jl-mid {
    width: 1579.3px;
    max-width: none;
    margin-left: calc(50% - 732px);
    margin-right: 0;
    padding-inline: 0;
  }
  .jl.jl-copy[data-jl-product="study-guides"] .jl-hero__row { gap: 74px; }
  .jl.jl-copy[data-jl-product="study-guides"] .jl-hero__media { flex-basis: 864.3px; }
  .jl.jl-copy[data-jl-product="study-guides"] .jl-hero .jl-video { width: 864.3px; height: 486.168px; }
}
.jl.jl-copy [data-jl-pq-track] { align-items: flex-start; height: var(--jl-pq-height, auto) !important; overflow-y: hidden; }
.jl.jl-copy .jl-section--pullquote { height: auto; padding: 48px 0 100px; }
.jl.jl-copy .jl-section--pullquote > .jl-wrap { height: auto; }
.jl.jl-copy .jl-section--pullquote .jl-pullquote { height: auto; }
.jl.jl-copy .jl-section--pullquote .jl-pullquote__front {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 66.65625px 157px 7.34375px 120px;
  gap: 6px;
}
.jl.jl-copy .jl-section--pullquote .jl-pullquote__track {
  position: relative;
  inset: auto;
  width: min(753px, 100%);
  margin: 0;
  transform: none;
}
.jl.jl-copy .jl-section--pullquote .jl-pullquote__slide { padding: 0; }
.jl.jl-copy .jl-section--pullquote .jl-pullquote__who { height: auto; min-height: 64px; max-width: 100%; }
.jl.jl-copy .jl-section--pullquote :is(.jl-pullquote__name, .jl-pullquote__role) { white-space: normal; }
.jl.jl-copy :is(.jl-pullquote__dots, .jl-wordquote__dots) {
  position: relative;
  inset: auto;
  display: flex;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  height: 44px;
  margin-inline: auto;
  transform: none;
  translate: none;
}
.jl.jl-copy .jl-section--pullquote .jl-pullquote__dots { margin-block: 0; }
.jl.jl-copy .jl-section--pullquote .jl-pullquote__slab { height: calc(100% - 10px); }

/* Review cards keep Figma's internal padding and prose column. Longer live
   quotes increase only the active page height; controls stay outside copy. */
.jl.jl-copy .jl-section--loved-by > .jl-wrap { width: min(1096px, calc(100% - 48px)); }
.jl.jl-copy .jl-section--loved-by .jl-quote-page { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 33px; }
.jl.jl-copy .jl-section--loved-by .jl-quote { padding: 29px 27px; border-radius: 14px; min-height: 270px; }
.jl.jl-copy .jl-section--loved-by .jl-quote:nth-child(2) { padding-inline: 25px; }
@media (min-width: 1920px) {
  .jl.jl-copy .jl-section--loved-by .jl-quote-page { grid-template-columns: 341.86px 336.93px 338.43px; }
}
.jl.jl-copy .jl-section--loved-by .jl-quote__who { min-width: 0; }
.jl.jl-copy .jl-section--loved-by .jl-quote__who > span { flex: 1; min-width: 0; }
.jl.jl-copy .jl-section--loved-by .jl-quote__role { display: block; }
.jl.jl-copy .jl-section--word-for-it { border-radius: clamp(32px, 4.6875vw, 90px); padding-block: 98px 64px; }
.jl.jl-copy .jl-section--word-for-it .jl-quote { padding: 41px 42px 40px 40px; }
.jl.jl-copy .jl-section--word-for-it .jl-quote:nth-child(2) { padding-right: 56px; }
.jl.jl-copy .jl-section--word-for-it .jl-quote__text { width: 100%; max-width: 100%; min-width: 0; }
.jl.jl-copy .jl-section--word-for-it .jl-wordquote__dots { margin-block: 40px 0; }
.jl.jl-copy .jl-section--comparison {
  padding: 91.5px 0 100px;
  border-radius: clamp(32px, 22.96875vw, 441px);
  background: #f1edfb;
}
.jl.jl-copy .jl-section--comparison > .jl-wrap { width: min(1096px, calc(100% - 48px)); }
.jl.jl-copy .jl-section--comparison .jl-compare { padding: 0; border-radius: 0; background: transparent; }
.jl.jl-copy .jl-section--comparison .jl-section__head { margin-bottom: 40px; }
@media (max-width: 900px) {
  .jl.jl-copy .jl-section--comparison { padding-block: 64px; border-radius: 32px; }
}
@media (min-width: 1500px) {
  .jl.jl-copy .jl-section--word-for-it .jl-wordquote__arrow { top: 50%; bottom: auto; transform: translateY(-50%); }
  .jl.jl-copy .jl-section--word-for-it .jl-wordquote__arrow--prev { left: -121px; }
  .jl.jl-copy .jl-section--word-for-it .jl-wordquote__arrow--next { right: -121px; }
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow { grid-area: 3 / 1; }
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow--prev { margin-left: -150px; }
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow--next { margin-right: -150px; }
}
@media (max-width: 1199px) {
  .jl.jl-copy .jl-section--pullquote .jl-pullquote__front { padding: 40px 64px 24px; }
}
@media (max-width: 900px) {
  .jl.jl-copy .jl-section--loved-by .jl-quote-page { grid-template-columns: 1fr; }
  .jl.jl-copy .jl-section--word-for-it .jl-quote,
  .jl.jl-copy .jl-section--word-for-it .jl-quote:nth-child(2) { padding: 24px; }
  .jl.jl-copy .jl-section--word-for-it { padding-top: 64px; }
}
@media (max-width: 600px) {
  .jl.jl-copy .jl-section--pullquote { padding: 40px 0; }
  .jl.jl-copy .jl-section--pullquote .jl-pullquote__front { padding: 32px 24px 76px; gap: 20px; }
  .jl.jl-copy .jl-section--pullquote .jl-pullquote__arrow { top: auto; bottom: 20px; transform: none; translate: none; }
}
.jl.jl-copy .jl-section--platform-tabs > .jl-wrap { padding: 0; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__panel {
  aspect-ratio: 802 / 451;
  border: 1px solid #e8dcfa;
  border-radius: 12px;
  background: #e8dcfa;
  box-shadow: none;
}
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__panel img { display: block; height: 100%; object-fit: cover; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__cta { margin-top: 80px; }

/* The final CTA is one centered stack on every route. Reset both forms of
   translation used by the original fixed-canvas catalogue / guide rules. */
.jl.jl-copy .jl-ctaband > .jl-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.jl.jl-copy .jl-ctaband .jl-ctaband__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.jl.jl-copy .jl-ctaband .jl-ctaband__actions .jl-btn {
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 56px;
  padding: 16px 27px;
  white-space: normal;
}
.jl.jl-copy .jl-pdp-page .jl-ctaband--deep { padding: 0; }
.jl.jl-copy .jl-pdp-page .jl-ctaband--deep > .jl-wrap { min-height: 426px; }
.jl.jl-copy .jl-pdp-page .jl-ctaband--deep .jl-h2 { max-width: 520px; }

/* Keep the live school case study inside its own panel. In the old cascade,
   its children were still absolute after the panel switched to normal flow. */
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case {
  position: relative;
  inset: auto;
  width: min(1396px, calc(100vw - 48px));
  height: auto;
  margin: 64px 0 0 50%;
  padding: 100px clamp(32px, 7.8125vw, 150px) 62px;
  transform: translateX(-50%);
  border-radius: 90px;
  background: #f1edfb;
  overflow: hidden;
}
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__content {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: minmax(0, 545fr) minmax(0, 497fr);
  column-gap: 56px;
  width: 100%;
  height: auto;
  opacity: 1;
  pointer-events: auto;
}
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] :is(.jl-case__head, .jl-case__grid, .jl-case__chart, .jl-case__quotes, .jl-case__stats, .jl-case__cta) {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  transform: none;
  translate: none;
}
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__head {
  grid-column: 1 / -1;
  gap: 14px;
  margin: 0 0 44px;
  min-height: 72px;
}
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__head img { width: 58px; height: 58px; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__head .jl-h3 {
  margin: 0;
  color: #000;
  font-size: 30px;
  font-weight: 800;
  line-height: 46.5px;
  letter-spacing: -.6px;
}
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__head .jl-quote__role {
  margin: 0;
  color: #1c1c1c;
  font-size: 16px;
  line-height: 22.48px;
}
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__grid { display: contents; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__chart {
  grid-area: 2 / 1 / 4 / 2;
  align-self: start;
  padding: 28px;
  border-radius: 16px;
  background: #eae3fb;
}
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__chart-caption { margin-bottom: 18px; color: #000; letter-spacing: .72px; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__chart svg.jl-case__design-chart { width: 100%; height: auto; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__quotes {
  grid-area: 2 / 2;
  gap: 26px;
  padding-top: 10px;
  color: #000;
  font-size: 17px;
  line-height: 28.05px;
}
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__quotes blockquote { margin: 0; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__stats {
  display: grid;
  grid-area: 3 / 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0 0;
}
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__stat { text-align: left; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__stat .jl-stat__n { margin: 0; font-size: 28px; line-height: 43.4px; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__stat .jl-stat__c { margin: 0; color: #000; font-size: 13px; line-height: 20.15px; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__cta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin: 56px 0 0;
}
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__cta .jl-btn { width: auto; height: auto; min-height: 56px; padding: 16px 27px; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case:has(.jl-case__cta .jl-btn:focus-visible)::after { content: none; }

@media (min-width: 1200px) {
  .jl.jl-copy .jl-section--journey { padding-top: 103px; }
  .jl.jl-copy[data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-section--journey { padding-top: 224px; }
  .jl.jl-copy:not([data-jl-persona="generic"]) .jl-journey__deco { inset: -103px auto auto calc(50% - 960px); width: 1920px; z-index: -1; }
  .jl.jl-copy[data-jl-persona="teacher"][data-jl-product="study-guides"] .jl-journey__deco { top: -224px; }
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-journey { position: relative !important; isolation: isolate; }
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-journey__deco {
    display: block;
    inset: -103px auto auto calc(50% - 960px);
    width: 1920px;
    height: 2708px;
    z-index: -1;
  }
  .jl.jl-copy .jl-section--journey .jl-section__head { margin-bottom: 123px; }
  .jl.jl-copy .jl-section--journey .jl-journey__rows { gap: 139px; }
  .jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row { grid-template-columns: minmax(0, 564fr) minmax(0, 445fr); gap: 149px; min-height: 392px; }
  .jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(2) { grid-template-columns: minmax(0, 445fr) minmax(0, 564fr); min-height: 473px; }
  .jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(3) { grid-template-columns: minmax(0, 564fr) minmax(0, 520fr); gap: 74px; min-height: 474px; margin-top: -57px; }
  .jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row__text { gap: 30px; }
  .jl.jl-copy .jl-section--journey .jl-row .jl-row__media img { display: block; }
}
@media (max-width: 900px) {
  .jl.jl-copy .jl-section--platform-tabs .jl-tabs__list { margin-top: 0; }
  .jl.jl-copy .jl-section--platform-tabs .jl-tabs__cta { margin-top: 32px; }
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case {
    width: 100%;
    margin: 48px 0 0;
    padding: 32px 24px;
    border-radius: 32px;
    transform: none;
  }
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__content { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] :is(.jl-case__head, .jl-case__chart, .jl-case__quotes, .jl-case__stats, .jl-case__cta) { grid-area: auto; margin: 0; }
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__head { align-items: flex-start; }
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__head .jl-h3 { font-size: 24px; line-height: 1.3; }
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__head .jl-quote__role { margin-top: 8px; font-size: 14px; }
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__chart { padding: 20px; }
}
@media (max-width: 480px) {
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__head { flex-direction: column; }
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-case__stats { grid-template-columns: 1fr; gap: 16px; }
}

/* ======================================================================
   STAGING FIX PASS — 2026-09-08
   Corrections raised on the first staging review of the rebuilt landing
   pages. Appended last on purpose: these rules resolve against every
   earlier layer (artboard, route-aware and approved-copy) and use the
   .jl.jl-copy scope so they win without rewriting the older cascade.
   ====================================================================== */

/* --- page chrome ------------------------------------------------------ */
/* The theme reserves 94px under <body> for a booking bar that landing pages
   never render; it appeared as a white band below the footer. */
body.jl-page,
body.jl-page.has-booking-bar { padding-bottom: 0 !important; }

/* --- decorative layers sit behind content ------------------------------ */
.jl.jl-copy .jl-deco-anchor,
.jl.jl-copy .jl-deco { z-index: 0; }
.jl.jl-copy .jl-section,
.jl.jl-copy .jl-settext,
.jl.jl-copy .jl-marquee,
.jl.jl-copy .jl-guide-rail,
.jl.jl-copy .jl-achievers,
.jl.jl-copy .jl-ctaband { position: relative; z-index: 1; }
.jl.jl-copy .jl-hero { z-index: 2; }
.jl.jl-copy .jl-section--platform-tabs { z-index: 3; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__cta { position: relative; z-index: 2; }

/* --- site header: hamburger + stacked "double" menu -------------------- */
.jl-site-header__mobile > summary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid var(--jl-purple);
  border-radius: 50%;
  background: #fff;
}
.jl-site-header__burger { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.jl-site-header__burger i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--jl-purple);
  transition: transform .18s ease, opacity .18s ease;
}
.jl-site-header__mobile[open] > summary .jl-site-header__burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jl-site-header__mobile[open] > summary .jl-site-header__burger i:nth-child(2) { opacity: 0; }
.jl-site-header__mobile[open] > summary .jl-site-header__burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.jl-site-header__menu-word {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 460px) {
  .jl-site-header__mobile > summary { width: 44px; height: 44px; min-height: 44px; padding: 0; }
}

/* Laptops and small desktops keep the full menu on every page. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .jl-site-header__inner { padding-inline: 24px; gap: 18px; }
  .jl-site-header__brand { width: 190px; flex-basis: 190px; }
  .jl-site-header__brand img,
  .jl-site-header__brand svg { width: 100%; height: auto; }
  .jl-site-header__nav,
  .jl-site-header__tools { display: flex; }
  .jl-site-header__nav { flex: 1 1 auto; }
  .jl-site-header__nav ul { gap: 16px; }
  .jl-site-header__nav a { font-size: 17px; }
  .jl-site-header__tools { flex: none; margin-left: 0; gap: 14px; }
  .jl-site-header__actions { gap: 10px; }
  .jl-site-header__action { height: 44px; min-height: 44px; padding: 9px 16px; font-size: 16px; }
  .jl-site-header--generic .jl-site-header__inner,
  .jl-site-header--detail .jl-site-header__inner { gap: 18px; }
  .jl-site-header--generic .jl-site-header__nav,
  .jl-site-header--detail .jl-site-header__nav { flex: 1 1 auto; }
  .jl-site-header__mobile { display: none; }
  /* A cart link makes the single row 50px too wide at 1024 (catalogue, pricing,
     the old subject listings, cart): compact the row and keep the cart to its
     icon and count instead of overlapping the navigation. */
  .jl-site-header:has(.jl-site-header__cart) .jl-site-header__brand { width: 160px; flex-basis: 160px; }
  .jl-site-header:has(.jl-site-header__cart) .jl-site-header__inner { gap: 14px; }
  .jl-site-header:has(.jl-site-header__cart) .jl-site-header__nav ul { gap: 12px; }
  .jl-site-header:has(.jl-site-header__cart) .jl-site-header__nav a { font-size: 16px; }
  .jl-site-header:has(.jl-site-header__cart) .jl-site-header__tools { gap: 10px; }
  .jl-site-header:has(.jl-site-header__cart) .jl-site-header__actions { gap: 8px; }
  .jl-site-header:has(.jl-site-header__cart) .jl-site-header__action { padding: 9px 12px; font-size: 15px; }
  .jl-site-header:has(.jl-site-header__cart) .jl-site-header__cart > span { display: none; }
}
/* Every header carrying a preference selector stacks the primary navigation on a
   second strip, exactly as the 1512px Figma laptop frame draws it. The range is
   open-ended on purpose: at 1920 the single row does not fit either once both
   pills are present (measured on /pricing/: the row overflows 439px and the cart
   lands at x=2359 on a 1920 viewport), and a rule that released the two-strip
   layout at 1920 would flip the whole header between two different compositions
   across one pixel. */
@media (min-width: 1024px) {
  .jl-site-header--dense { height: auto; }
  .jl-site-header--dense .jl-site-header__inner {
    flex-wrap: wrap;
    height: auto;
    padding: 20px clamp(24px, 4vw, 72px) 0;
    gap: 0 clamp(14px, 2vw, 30px);
  }
  .jl-site-header--dense .jl-site-header__brand { order: 1; }
  .jl-site-header--dense .jl-site-header__tools {
    order: 2;
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    gap: clamp(14px, 2vw, 28px);
  }
  .jl-site-header--dense .jl-site-header__selectors { gap: 8px; }
  .jl-site-header--dense .jl-site-header__nav {
    order: 3;
    display: block;
    flex: 1 0 100%;
    margin: 20px calc(-1 * clamp(24px, 4vw, 72px)) 0;
    padding: 11px 0;
    border-top: 1px solid #ebe9f2;
    border-bottom: 1px solid #ebe9f2;
    background: #f8f8fb;
  }
  .jl-site-header--dense .jl-site-header__nav ul { justify-content: center; gap: clamp(36px, 6vw, 88px); }
  .jl-site-header--dense .jl-site-header__mobile { display: none; }
  .jl-site-header--dense .jl-site-header__submenu { top: calc(100% + 12px); }
}
@media (min-width: 1024px) and (max-width: 1400px) {
  .jl-site-header--dense .jl-site-header__action { height: 44px; min-height: 44px; padding: 9px 16px; font-size: 16px; }
  .jl-site-header--dense .jl-site-header__selector { height: 40px; font-size: 16px; }
  .jl-site-header--dense .jl-site-header__preference-select { max-width: 120px; }
}
@media (max-width: 1023px) {
  .jl-site-header__nav,
  .jl-site-header__tools { display: none !important; }
  .jl-site-header__mobile { display: block !important; }
}

/* --- crest marquee: one continuous loop -------------------------------- */
/* Two identical passes travel exactly one pass width (-50%); the slot gap
   lives on the slot itself so both halves measure the same. Speed matches
   the design's 347px / 7.965s pacing whatever the number of crests. */
.jl.jl-copy .jl-marquee__track {
  gap: 0;
  animation: jl-marquee-loop calc(var(--jl-marquee-n, 9) * 4.45s) linear infinite;
}
.jl.jl-copy .jl-marquee__slot { margin-right: 26px; }
@keyframes jl-marquee-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.jl.jl-copy .jl-marquee__toggle { top: auto; bottom: -34px; right: 50%; translate: 50% 0; width: 32px; height: 32px; opacity: .8; }
.jl.jl-copy .jl-marquee__toggle::before { width: 9px; height: 11px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px); }
.jl.jl-copy .jl-marquee__viewport { padding-bottom: 12px; }
@media (prefers-reduced-motion: reduce) {
  .jl.jl-copy .jl-marquee__track { animation: none; }
  .jl.jl-copy .jl-marquee__slot { margin-right: 0; }
}

/* --- carousels: arrows centred on the cards, tight dots ---------------- */
.jl.jl-copy .jl-pullquote__dots,
.jl.jl-copy .jl-wordquote__dots { gap: 0; height: 24px; margin-block: 4px 0; }
.jl.jl-copy .jl-pullquote__dots li,
.jl.jl-copy .jl-wordquote__dots li { width: 12px; height: 24px; }
.jl.jl-copy .jl-pullquote__dot,
.jl.jl-copy .jl-wordquote__dot { width: 12px; height: 24px; }
.jl.jl-copy .jl-pullquote__dot::before,
.jl.jl-copy .jl-wordquote__dot::before { width: 8px; height: 8px; }
.jl.jl-copy .jl-section--pullquote .jl-pullquote__front { padding-bottom: 28px; }
@media (min-width: 601px) {
  .jl.jl-copy .jl-section--pullquote .jl-pullquote__arrow {
    top: 50% !important;
    bottom: auto !important;
    translate: 0 -50% !important;
    transform: none !important;
  }
  .jl.jl-copy .jl-section--pullquote .jl-pullquote__arrow--prev { left: clamp(12px, 7.3vw, 140px); right: auto; }
  .jl.jl-copy .jl-section--pullquote .jl-pullquote__arrow--next { right: clamp(12px, 7.3vw, 140px); left: auto; }
}
/* Review pages keep the tallest page's height so the section never resizes
   while sliding (landing.js measures the max across every slide). */
.jl.jl-copy [data-jl-pq-track] { align-items: flex-start; }
.jl.jl-copy .jl-section--word-for-it .jl-quote-page,
.jl.jl-copy .jl-section--loved-by .jl-quote-page { align-items: stretch; }
.jl.jl-copy .jl-section--word-for-it .jl-wordquote__dots { margin-block: 32px 0; }
.jl.jl-copy .jl-section--loved-by .jl-wordquote__dots { margin: 24px auto 8px; }
@media (min-width: 901px) and (max-width: 1499px) {
  .jl.jl-copy .jl-section--word-for-it .jl-wordquote__arrow,
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow { top: 50%; bottom: auto; transform: translateY(-50%); }
}

/* Student reviewers without a photo get an initials avatar instead of a gap. */
.jl-quote__initials,
.jl-pullquote__initials {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--jl-lilac, #f1e6fc);
  color: var(--jl-purple, #4801d4);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}
.jl-pullquote__initials { width: 62px; height: 62px; font-size: 20px; }
.jl-quote__initials[data-tone="2"], .jl-pullquote__initials[data-tone="2"] { background: #e6f5ff; color: #1e6fb3; }
.jl-quote__initials[data-tone="3"], .jl-pullquote__initials[data-tone="3"] { background: #fff3d6; color: #9a5b00; }
.jl-quote__initials[data-tone="4"], .jl-pullquote__initials[data-tone="4"] { background: #e3f7ef; color: #0f6e56; }

/* --- feature tabs: media centred beside the list ----------------------- */
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__layout { align-items: center; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__list { margin-top: 0; align-self: center; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__panel { align-self: center; }
.jl.jl-copy .jl-section--platform-tabs .jl-tab,
.jl.jl-copy .jl-section--platform-tabs .jl-tab[aria-selected="true"] { width: 100%; height: auto; min-height: 49px; }
.jl.jl-copy .jl-section--platform-tabs .jl-tab__title,
.jl.jl-copy .jl-section--platform-tabs .jl-tab__body { width: auto; height: auto; }
.jl.jl-copy .jl-section--platform-tabs .jl-tab[aria-selected="true"] { background: #f1e6fc; }
.jl.jl-copy .jl-section--platform-tabs .jl-tab::before { top: 11px; bottom: 11px; height: auto; }
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__panel img { object-fit: cover; height: 100%; }

/* --- comparison table on smaller screens ------------------------------- */
@media (max-width: 1240px) {
  .jl.jl-copy .jl-section--comparison { border-radius: 48px; padding: 72px 0; }
  .jl.jl-copy .jl-section--comparison > .jl-wrap { width: min(1158px, calc(100% - 32px)); }
  .jl.jl-copy .jl-section--comparison .jl-compare { padding: 32px 12px; border-radius: 28px; }
  .jl.jl-copy .jl-section--comparison .jl-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jl.jl-copy .jl-section--comparison table { min-width: 760px; }
}
@media (max-width: 900px) {
  .jl.jl-copy .jl-section--comparison { border-radius: 32px; padding: 56px 0; }
  .jl.jl-copy .jl-section--comparison .jl-compare { padding: 24px 0; }
}

/* --- closing band + footer --------------------------------------------- */
.jl.jl-copy .jl-ctaband { margin-bottom: 0; }
.jl.jl-copy .jl-ctaband__photo {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
.jl.jl-copy .jl-foot,
.jl.jl-copy .jl-foot--art { margin-top: 0; }
@media (max-width: 1919px) {
  .jl.jl-copy .jl-foot,
  .jl.jl-copy .jl-foot--art { padding: 72px 0 0; }
  .jl.jl-copy .jl-foot__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, 1fr);
    gap: 40px clamp(32px, 5vw, 96px);
    align-items: start;
  }
  .jl.jl-copy .jl-foot__logo { width: 213px; height: auto; margin: 0 0 30px; }
  .jl.jl-copy .jl-foot__tag { margin: 0; max-width: 34ch; color: #c5bce8; font-size: 14.5px; line-height: 23.2px; }
  .jl.jl-copy .jl-foot h3 { margin: 4px 0 16px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 1.12px; line-height: 21.7px; }
  .jl.jl-copy .jl-foot__list { gap: 4px; }
  .jl.jl-copy .jl-foot__list a { min-height: 32px; color: #c5bce8; font-size: 14.5px; line-height: 22.48px; }
  .jl.jl-copy .jl-foot__news > p { margin: 0 0 14px !important; color: #c5bce8; font-size: 14px; line-height: 21.7px; }
  .jl.jl-copy .jl-foot__news form,
  .jl.jl-copy .jl-foot__newsletter-form .gform_wrapper { width: 100%; max-width: 320px; margin: 0; }
  .jl.jl-copy .jl-foot__newsletter-form .gform_fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; }
  .jl.jl-copy .jl-foot__newsletter-form .gfield { grid-column: 1 / -1 !important; width: 100%; margin: 0; padding: 0; }
  .jl.jl-copy .jl-foot__newsletter-form .ginput_container { width: 100%; }
  .jl.jl-copy .jl-foot__newsletter-form input:not([type="hidden"]):not([type="submit"]) {
    width: 100% !important;
    height: 43px;
    min-height: 43px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 100px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font: 400 14px/1.2 var(--jl-font);
    box-shadow: none;
  }
  .jl.jl-copy .jl-foot__newsletter-form input::placeholder { color: rgba(255, 255, 255, .55); }
  .jl.jl-copy .jl-foot__newsletter-form .gform_footer { margin: 10px 0 0; padding: 0; }
  .jl.jl-copy .jl-foot__newsletter-form .gform_footer button,
  .jl.jl-copy .jl-foot__newsletter-form .gform_footer input[type="submit"],
  .jl.jl-copy .jl-foot__news button {
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 100px;
    background: #a173fd;
    color: #fff;
    font: 600 15px/1 var(--jl-font) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer;
  }
  .jl.jl-copy .jl-foot__newsletter-form .gform_footer button:hover,
  .jl.jl-copy .jl-foot__newsletter-form .gform_footer input[type="submit"]:hover { background: #b28cff; filter: none; }
  .jl.jl-copy .jl-foot__bar {
    margin-top: 56px;
    padding: 20px 0 28px;
    align-items: center;
    color: #c5bce8;
    font-size: 13.5px;
    line-height: 20.93px;
  }
  .jl.jl-copy .jl-foot__bar p { margin: 0; }
  .jl.jl-copy .jl-foot__bar nav { gap: 22px; }
  .jl.jl-copy .jl-foot__bar nav a { min-height: 0; color: #c5bce8; font-size: 13.5px; font-weight: 700; }
}
@media (max-width: 860px) {
  .jl.jl-copy .jl-foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .jl.jl-copy .jl-foot__news form,
  .jl.jl-copy .jl-foot__newsletter-form .gform_wrapper { max-width: 420px; }
}

/* --- persona chooser modals -------------------------------------------- */
.jl-modal.jl-pm { padding: 20px; place-items: center; overflow-y: auto; }
.jl-modal.jl-pm .jl-modal__box.jl-pm__box {
  position: relative;
  display: block;
  width: min(720px, 100%);
  max-height: none;
  padding: 30px 28px 32px;
  border-radius: 20px;
  overflow: visible;
  text-align: center;
  box-shadow: 0 24px 64px rgba(15, 15, 35, .22);
}
.jl-modal.jl-pm .jl-modal__box.jl-pm__box--selfid { width: min(1040px, 100%); padding: 28px 24px 36px; }
.jl-pm__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b6b78;
  cursor: pointer;
}
.jl-pm__close:hover,
.jl-pm__close:focus-visible { background: #f2f2f5; color: #111; }
.jl-pm__icon img { display: block; width: 120px; height: 120px; margin: 0 auto 18px; object-fit: contain; }
.jl-pm__heading { max-width: 32ch; margin: 0 auto 30px; color: #111; font-size: 24px; font-weight: 800; line-height: 1.3; }
.jl-pm__options { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; }
.jl-pm__options > li { margin: 0; padding: 0; list-style: none; }
.jl-pm__options > li::before { content: none !important; display: none !important; }
.jl-pm__cta {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background: #f4f0ff;
  color: #111;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.jl-pm__cta:hover,
.jl-pm__cta:focus-visible { background: #ebe2ff; border-color: #6b21ff; color: #111; outline: none; }
.jl-pm__cta-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; }
.jl-pm__cta-icon img { display: block; width: 80px; height: 80px; object-fit: contain; }
.jl-pm__cta-body { flex: 1 1 auto; min-width: 0; }
.jl-pm__cta strong { display: block; margin-bottom: 6px; color: #111; font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.jl-pm__cta-body > span { display: block; color: #6b6b78; font-size: 15px; font-weight: 500; line-height: 1.45; }
.jl-pm__cta--essay { background: #e6f5ff; }
.jl-pm__cta--essay:hover,
.jl-pm__cta--essay:focus-visible { background: #cfedff; border-color: #1e9be9; }
.jl-pm__cta--study { background: #f1eaff; }
.jl-pm__cta--study:hover,
.jl-pm__cta--study:focus-visible { background: #e0d2ff; border-color: #6b21ff; }
.jl-pm__divider { display: flex; justify-content: center; padding: 2px 0; color: #b1b1bd; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.jl-pm__footer { margin: 24px 0 0; color: #6b6b78; font-size: 14px; text-align: center; }
.jl-pm__footer a { color: #6b21ff; font-weight: 600; text-decoration: none; }
.jl-pm__footer a:hover { text-decoration: underline; }
.jl-pm--schoolleader .jl-pm__options { gap: 12px; }
.jl-pm--schoolleader .jl-pm__cta { gap: 20px; padding: 20px 26px; border: 1.5px solid #e6e6ec; border-radius: 14px; background: #fff; }
.jl-pm--schoolleader .jl-pm__cta:hover,
.jl-pm--schoolleader .jl-pm__cta:focus-visible { background: #fff; border-color: #6b21ff; box-shadow: 0 6px 20px rgba(107, 33, 255, .1); }
.jl-pm--schoolleader .jl-pm__cta-icon,
.jl-pm--schoolleader .jl-pm__cta-icon img { width: 40px; height: 40px; }
.jl-pm--schoolleader .jl-pm__cta strong { margin-bottom: 0; font-size: 17px; }
.jl-pm--schoolleader .jl-pm__icon img { width: 150px; height: auto; max-height: 120px; }
.jl-pm__grid { justify-content: center; gap: 24px; max-width: 100%; margin: 0 auto; }
.jl-pm__grid .jl-persona { width: 205px; height: 232px; }
.jl-pm__grid .jl-persona > img { width: 199px; height: 154px; }
.jl-pm__grid .jl-persona__label { top: 160px; }
.jl-pm__grid .jl-persona__arrow { top: 196px; }
@media (max-width: 760px) {
  .jl-modal.jl-pm { padding: 12px; place-items: center; backdrop-filter: blur(4px); }
  .jl-modal.jl-pm .jl-modal__box.jl-pm__box { width: 100%; min-height: 0; padding: 26px 18px 28px; border-radius: 20px; }
  .jl-pm__heading { margin-bottom: 22px; font-size: 21px; }
  .jl-pm__cta { gap: 16px; padding: 16px 18px; }
  .jl-pm__cta-icon,
  .jl-pm__cta-icon img { width: 60px; height: 60px; }
  .jl-pm__cta strong { font-size: 18px; }
  .jl-pm__grid { gap: 14px; }
  .jl-pm__grid > li { flex: 0 1 calc(50% - 7px); min-width: 0; max-width: 205px; }
  .jl-pm__grid .jl-persona { width: 100%; }
  .jl-pm__grid .jl-persona > img { width: 100%; height: auto; aspect-ratio: 199 / 154; object-fit: contain; }
  .jl-pm__grid .jl-persona__label { font-size: clamp(15px, 4vw, 20px); }
}

/* --- curriculum browser ("feedback that knows your curriculum") --------- */
.jl.jl-copy .jl-settext,
.jl.jl-copy .jl-settext > .jl-wrap { height: auto !important; min-height: 0; }
.jl.jl-copy .jl-settext { padding: clamp(64px, 6vw, 96px) 0 clamp(56px, 5vw, 80px); }
.jl.jl-copy .jl-settext__filters {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: auto;
  height: auto;
  margin: 28px auto 56px;
  translate: none;
}
.jl.jl-copy .jl-settext__filter { display: block; }
.jl.jl-copy .jl-settext__filter[hidden] { display: none; }
.jl.jl-copy .jl-settext__filter select {
  width: auto !important;
  min-width: 0;
  max-width: none;
  height: 40px;
  min-height: 40px;
  padding: 10px 34px 10px 14px;
  border: 1px solid #a29cb6;
  border-radius: 46px;
  background: #fff;
  color: #000;
  font: 700 14px/17px var(--jl-font);
  box-shadow: none;
}
.jl.jl-copy .jl-settext__filter::after { right: 14px; width: 6px; height: 6px; border-color: #000; border-width: 1.5px; translate: 0 -65%; }
.jl.jl-copy .jl-settext__submit { display: none !important; }
.jl.jl-copy .jl-settext__carousel { position: relative; left: auto; top: auto; width: 100%; height: auto; }
.jl.jl-copy .jl-settext__track { position: relative; left: auto; top: auto; width: auto; height: auto; overflow-x: auto; }
.jl.jl-copy .jl-settext__subject[hidden] { display: none; }
.jl.jl-copy .jl-settext__arrow { top: 50%; translate: 0 -50%; width: 44px; height: 44px; }
.jl.jl-copy .jl-settext__arrow--prev { left: clamp(8px, 4vw, 120px); }
.jl.jl-copy .jl-settext__arrow--next { right: clamp(8px, 4vw, 120px); left: auto; }
.jl.jl-copy .jl-settext__dots { position: static; display: flex; justify-content: center; gap: 4px; width: auto; height: auto; margin: 28px 0 0; }
.jl.jl-copy .jl-settext__cta { position: static; width: auto; height: auto; margin: 34px 0 0; }
.jl.jl-copy .jl-settext__empty { margin: 8px 0 24px; text-align: center; color: var(--jl-muted); font-size: 16px; }
.jl.jl-copy .jl-settext__book--task .jl-settext__book-fallback { justify-content: flex-start; padding-top: 12px; background: linear-gradient(165deg, #fff 0%, #f1e6fc 100%); }
.jl.jl-copy .jl-settext__book--task .jl-settext__book-title { padding: 0 9px; font-family: var(--jl-font); font-size: 11px; font-weight: 800; line-height: 1.25; color: #2e2177; }
.jl.jl-copy .jl-settext__book--task .jl-settext__book-author { margin: 6px 9px 0; padding-top: 5px; border-top-color: rgba(46, 33, 119, .25); font-family: var(--jl-font); font-size: 8px; line-height: 1.3; color: #57517a; }
@media (min-width: 1800px) {
  .jl.jl-copy .jl-settext { border-radius: 343px; }
  .jl.jl-copy .jl-settext > .jl-wrap { width: min(1920px, 100%); }
  .jl.jl-copy .jl-settext .jl-section__head { position: static; width: auto; max-width: 1105px; margin: 0 auto; }
  .jl.jl-copy .jl-settext__track { padding: 0 max(0px, calc((100% - 1394px) / 2)); }
  .jl.jl-copy .jl-settext__arrow--prev { left: 172px; }
  .jl.jl-copy .jl-settext__arrow--next { right: 172px; left: auto; }
  .jl.jl-copy .jl-settext__owl { left: -78px; bottom: -7px; }
  .jl.jl-copy .jl-settext__tree { top: 0; right: -93px; }
}
@media (max-width: 760px) {
  .jl.jl-copy .jl-settext__filters { margin: 16px auto 36px; gap: 8px; }
  .jl.jl-copy .jl-settext__filter select { font-size: 13px; }
}

/* --- study-guide rails + curriculum panel ------------------------------ */
.jl.jl-copy .jl-guide-rail--popular { height: auto; padding: 96px 0 24px; }
.jl.jl-copy .jl-guide-rail--skills { height: auto; margin-top: 24px; padding: 40px 0 24px; }
@media (min-width: 1410px) {
  .jl.jl-copy .jl-guide-rail__track { height: auto; overflow-x: auto; scrollbar-width: none; }
}
.jl.jl-copy .jl-section--syllabus { padding-top: 72px; }
.jl.jl-copy .jl-syl__bundle { gap: 8px; }
.jl.jl-copy .jl-syl__bundle img { width: 22px; height: 24px; transform: rotate(180deg); }
.jl.jl-copy .jl-syl__card .jl-btn.jl-syl__bundle { padding: 9px 16px 9px 14px; border-radius: 22px; font-size: 16px; font-weight: 700; }

/* --- bundle builder cascade -------------------------------------------- */
.jl-opt[hidden] { display: none !important; }
.jl-stepper__empty { margin: 0; color: var(--jl-muted); font-size: 14px; line-height: 1.4; text-align: center; }
.jl-stepper__empty[hidden] { display: none; }

/* --- staging review, pass 2 -------------------------------------------- */
/* Review carousels: arrows beside the cards on laptops, not on top of them. */
@media (min-width: 901px) and (max-width: 1499px) {
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap,
  .jl.jl-copy .jl-section--loved-by > .jl-wrap { width: min(1158px, calc(100% - 140px)); }
  .jl.jl-copy .jl-section--word-for-it .jl-wordquote__arrow {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .jl.jl-copy .jl-section--word-for-it .jl-wordquote__arrow--prev { left: max(12px, calc(50% - 632px)); right: auto; }
  .jl.jl-copy .jl-section--word-for-it .jl-wordquote__arrow--next { right: max(12px, calc(50% - 632px)); left: auto; }
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow {
    grid-area: 3 / 1;
    align-self: center;
    margin-inline: 0;
    transform: none;
  }
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow--prev { margin-left: -58px; }
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow--next { margin-right: -58px; }
}
.jl.jl-copy .jl-section--loved-by .jl-section__head { max-width: none; margin-inline: auto; text-align: center; }
.jl.jl-copy .jl-section--loved-by .jl-section__head .jl-h2 { margin-inline: auto; }
.jl.jl-copy .jl-quote__who > .jl-quote__initials,
.jl.jl-copy .jl-pullquote__who > .jl-pullquote__initials { flex: 0 0 40px; width: 40px; height: 40px; }
.jl.jl-copy .jl-pullquote__who > .jl-pullquote__initials { flex-basis: 62px; width: 62px; height: 62px; }

/* Footer newsletter: the legacy theme sizes Gravity fields at half width. */
.jl.jl-copy .jl-foot__newsletter-form .gform_fields { grid-template-columns: minmax(0, 1fr) !important; }
.jl.jl-copy .jl-foot__newsletter-form .gfield,
.jl.jl-copy .jl-foot__newsletter-form .ginput_container { width: 100% !important; max-width: none !important; float: none; }

/* Dense header between 1024 and 1200px: keep brand and tools on one row. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .jl-site-header--dense .jl-site-header__brand { width: 170px; flex: 0 0 170px; }
  .jl-site-header--dense .jl-site-header__tools { flex: 1 1 auto; min-width: 0; gap: 12px; }
  .jl-site-header--dense .jl-site-header__selectors { min-width: 0; gap: 6px; }
  .jl-site-header--dense .jl-site-header__selector { height: 40px; padding: 5px 8px; font-size: 15px; }
  .jl-site-header--dense .jl-site-header__preference-select { max-width: 96px; }
  .jl-site-header--dense .jl-site-header__actions { gap: 8px; }
  .jl-site-header--dense .jl-site-header__action { height: 42px; min-height: 42px; padding: 8px 13px; font-size: 15px; }
  .jl-site-header--dense .jl-site-header__action--text { padding-inline: 4px; }
}
/* Icon-to-text spacing inside the Location and Subject pills. */
.jl-site-header__selector .jl-site-header__location-icon { margin-right: 10px; }
.jl-site-header__selector--subject > img:first-child { margin-right: 8px; }

/* Comparison: soften the lozenge before the heading meets the corner curve. */
@media (min-width: 1241px) and (max-width: 1500px) {
  .jl.jl-copy .jl-section--comparison { border-radius: 120px; }
}

/* Curriculum browser on lilac pages: the lilac card tone disappears, so it becomes white. */
[data-jl-persona="student"][data-jl-product="jeddai"] .jl-settext__subject--lilac,
[data-jl-persona="school"][data-jl-product="jeddai"] .jl-settext__subject--lilac { background: #fff; }
.jl.jl-copy .jl-settext__dots { flex-wrap: wrap; max-width: 320px; margin-inline: auto; }

/* Student JeddAI: tighter hero rhythm and the design's scattered achiever orbit on laptops. */
@media (min-width: 1200px) and (max-width: 1919px) {
  .jl.jl-copy .jl-hero--student-jeddai,
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-hero--student-jeddai { padding-bottom: 96px; }
  .jl.jl-copy .jl-header-jeddai-student .jl-achievers__inner,
  .jl.jl-copy .jl-header-study-guides-student .jl-achievers__inner { padding-block: 56px; }
  .jl.jl-copy .jl-header-jeddai-student .jl-achievers__orbit,
  .jl.jl-copy .jl-header-study-guides-student .jl-achievers__orbit {
    position: relative;
    display: block;
    width: 675.523px;
    max-width: none;
    height: 733.08px;
    margin: -48px 0 -56px auto;
    zoom: .7;
  }
  .jl.jl-copy .jl-header-jeddai-student .jl-achievers__orbit::before,
  .jl.jl-copy .jl-header-study-guides-student .jl-achievers__orbit::before {
    width: 695px;
    aspect-ratio: 695 / 434;
    left: 50%;
    top: calc(50% - 3.54px);
  }
  .jl.jl-copy .jl-header-jeddai-student .jl-achiever,
  .jl.jl-copy .jl-header-study-guides-student .jl-achiever { position: absolute; transform: none; }
  .jl.jl-copy .jl-header-jeddai-student .jl-achiever:nth-child(1),
  .jl.jl-copy .jl-header-study-guides-student .jl-achiever:nth-child(1) { left: 202.92px; top: 292.2px; }
  .jl.jl-copy .jl-header-jeddai-student .jl-achiever:nth-child(2),
  .jl.jl-copy .jl-header-study-guides-student .jl-achiever:nth-child(2) { left: 355.91px; top: 292.2px; }
  .jl.jl-copy .jl-header-jeddai-student .jl-achiever:nth-child(3),
  .jl.jl-copy .jl-header-study-guides-student .jl-achiever:nth-child(3) { left: 500.47px; top: 428.73px; }
  .jl.jl-copy .jl-header-jeddai-student .jl-achiever:nth-child(4),
  .jl.jl-copy .jl-header-study-guides-student .jl-achiever:nth-child(4) { left: 278.98px; top: 483.18px; }
  .jl.jl-copy .jl-header-jeddai-student .jl-achiever:nth-child(5),
  .jl.jl-copy .jl-header-study-guides-student .jl-achiever:nth-child(5) { left: 58.78px; top: 415.77px; }
  .jl.jl-copy .jl-header-jeddai-student .jl-achiever:nth-child(6),
  .jl.jl-copy .jl-header-study-guides-student .jl-achiever:nth-child(6) { left: 58.78px; top: 168.55px; }
  .jl.jl-copy .jl-header-jeddai-student .jl-achiever:nth-child(7),
  .jl.jl-copy .jl-header-study-guides-student .jl-achiever:nth-child(7) { left: 278.99px; top: 108.05px; }
  .jl.jl-copy .jl-header-jeddai-student .jl-achiever:nth-child(8),
  .jl.jl-copy .jl-header-study-guides-student .jl-achiever:nth-child(8) { left: 500.51px; top: 155.59px; }
}

/* Curriculum panel heading breathing room. */
.jl.jl-copy .jl-syl__section-title { margin-bottom: 32px; }

/* --- staging review, pass 3 -------------------------------------------- */
/* Feature tabs: the homepage artboard fixes the tab body at 283×40, which
   clips the real per-point copy. Let every persona's tabs size to content. */
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--platform-tabs .jl-tab,
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--platform-tabs .jl-tab[aria-selected="true"],
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--platform-tabs .jl-tab--static-featured { width: 100%; height: auto; min-height: 49px; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--platform-tabs .jl-tab__title { width: auto; height: auto; min-height: 0; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--platform-tabs .jl-tab__body,
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--platform-tabs .jl-tab[aria-selected="true"] .jl-tab__body,
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--platform-tabs .jl-tab--static-featured .jl-tab__body { width: auto; max-width: 100%; height: auto; min-height: 0; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--platform-tabs .jl-tab[aria-selected="true"]::before,
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--platform-tabs .jl-tab--static-featured::before { top: 11px; bottom: 11px; height: auto; }

/* Review carousels on laptops: arrows sit beside the cards, never on them.
   "Word for it" arrows are absolute inside .jl-wrap; "Loved by" arrows share
   the cards' grid row (row 3 in the copy layer) and hang outside its edges. */
@media (min-width: 901px) and (max-width: 1499px) {
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap { position: relative; }
  .jl.jl-copy .jl-section--word-for-it .jl-wordquote__arrow--prev { left: -58px; right: auto; }
  .jl.jl-copy .jl-section--word-for-it .jl-wordquote__arrow--next { right: -58px; left: auto; }
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow { grid-area: 3 / 1; align-self: center; margin-inline: 0; transform: none; }
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow--prev { justify-self: start; margin-left: -58px; }
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow--next { justify-self: end; margin-right: -58px; }
}
@media (min-width: 1500px) {
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow { grid-area: 3 / 1; align-self: center; }
}
/* Every card on a review page fills the reserved slide height. */
.jl.jl-copy .jl-quotes[data-jl-pq-track] { align-items: stretch; }
.jl.jl-copy .jl-quotes[data-jl-pq-track] > .jl-quote-page { height: auto; min-height: 100%; align-items: stretch; }
.jl.jl-copy .jl-quotes[data-jl-pq-track] > .jl-quote-page > .jl-quote { height: auto; }
/* Initials avatar keeps its circle: the "who" row's text span rule (> span
   { flex: 1 }) was also catching the badge. */
.jl.jl-copy .jl-quote__who > span.jl-quote__initials,
.jl.jl-copy .jl-section--loved-by .jl-quote__who > span.jl-quote__initials,
.jl.jl-copy .jl-section--word-for-it .jl-quote__who > span.jl-quote__initials { flex: 0 0 40px; width: 40px; min-width: 40px; height: 40px; }
.jl.jl-copy .jl-section--loved-by .jl-quote__who img { width: 40px; height: 40px; }

/* Curriculum browser pills hug their selected label (JS sizes them); the
   widest option no longer dictates the pill width. */
.jl.jl-copy .jl-settext__filter select { max-width: min(320px, calc(100vw - 40px)); text-overflow: ellipsis; }
/* On lilac pages the first card is white, so its chips need the lilac tint. */
[data-jl-persona="student"][data-jl-product="jeddai"] .jl-settext__subject--lilac .jl-settext__chips span,
[data-jl-persona="school"][data-jl-product="jeddai"] .jl-settext__subject--lilac .jl-settext__chips span { background: #f1e6fc; }

/* Student pages, laptop widths: the design's scattered achiever orbit.
   (.jl-header-* classes live on <body>, so they must precede .jl.jl-copy.) */
@media (min-width: 1200px) and (max-width: 1919px) {
  .jl-header-jeddai-student .jl.jl-copy .jl-achievers__inner,
  .jl-header-study-guides-student .jl.jl-copy .jl-achievers__inner { padding-block: 56px; align-items: center; }
  .jl-header-jeddai-student .jl.jl-copy .jl-achievers__orbit,
  .jl-header-study-guides-student .jl.jl-copy .jl-achievers__orbit {
    position: relative;
    display: block;
    width: 675.523px;
    max-width: none;
    height: 733.08px;
    margin: -48px 0 -56px auto;
    zoom: .7;
  }
  .jl-header-study-guides-student .jl.jl-copy .jl-achievers--reverse .jl-achievers__orbit { margin-left: 0; margin-right: auto; }
  .jl-header-jeddai-student .jl.jl-copy .jl-achievers__orbit::before,
  .jl-header-study-guides-student .jl.jl-copy .jl-achievers__orbit::before {
    width: 695px;
    aspect-ratio: 695 / 434;
    left: 50%;
    top: calc(50% - 3.54px);
  }
  .jl-header-jeddai-student .jl.jl-copy .jl-achiever,
  .jl-header-study-guides-student .jl.jl-copy .jl-achiever { position: absolute; transform: none; }
  .jl-header-jeddai-student .jl.jl-copy .jl-achiever:nth-child(1),
  .jl-header-study-guides-student .jl.jl-copy .jl-achiever:nth-child(1) { left: 202.92px; top: 292.2px; }
  .jl-header-jeddai-student .jl.jl-copy .jl-achiever:nth-child(2),
  .jl-header-study-guides-student .jl.jl-copy .jl-achiever:nth-child(2) { left: 355.91px; top: 292.2px; }
  .jl-header-jeddai-student .jl.jl-copy .jl-achiever:nth-child(3),
  .jl-header-study-guides-student .jl.jl-copy .jl-achiever:nth-child(3) { left: 500.47px; top: 428.73px; }
  .jl-header-jeddai-student .jl.jl-copy .jl-achiever:nth-child(4),
  .jl-header-study-guides-student .jl.jl-copy .jl-achiever:nth-child(4) { left: 278.98px; top: 483.18px; }
  .jl-header-jeddai-student .jl.jl-copy .jl-achiever:nth-child(5),
  .jl-header-study-guides-student .jl.jl-copy .jl-achiever:nth-child(5) { left: 58.78px; top: 415.77px; }
  .jl-header-jeddai-student .jl.jl-copy .jl-achiever:nth-child(6),
  .jl-header-study-guides-student .jl.jl-copy .jl-achiever:nth-child(6) { left: 58.78px; top: 168.55px; }
  .jl-header-jeddai-student .jl.jl-copy .jl-achiever:nth-child(7),
  .jl-header-study-guides-student .jl.jl-copy .jl-achiever:nth-child(7) { left: 278.99px; top: 108.05px; }
  .jl-header-jeddai-student .jl.jl-copy .jl-achiever:nth-child(8),
  .jl-header-study-guides-student .jl.jl-copy .jl-achiever:nth-child(8) { left: 500.51px; top: 155.59px; }
}
/* "Loved by" arrows are grid items, so the absolute-era top offset must not
   push them down the row. */
@media (min-width: 901px) {
  .jl.jl-copy .jl-section--loved-by .jl-wordquote__arrow { top: auto; bottom: auto; left: auto; right: auto; }
}
/* Student review initials keep their circle inside the "Word for it" band,
   whose artboard rule turns every who-row span into a block. */
.jl.jl-copy .jl-section--word-for-it .jl-quote__who > span.jl-quote__initials,
.jl.jl-copy .jl-section--loved-by .jl-quote__who > span.jl-quote__initials { display: inline-grid; place-items: center; }
/* Homepage hero marquee: with 43 crests the Figma per-slot offsets keyed on
   nth-child(9n + k) no longer line up with their crests, so every crest is
   centred in its slot; the strip fades with a mask instead of painting
   page-colour boxes over the hero artwork. */
.jl.jl-copy .jl-hero--centre > .jl-marquee .jl-marquee__slot,
.jl.jl-copy .jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 2) { display: flex; width: 167.857px; }
.jl.jl-copy .jl-hero--centre > .jl-marquee .jl-marquee__slot img { position: static; left: auto; top: auto; }
.jl.jl-copy .jl-marquee__viewport::before,
.jl.jl-copy .jl-marquee__viewport::after { display: none; }
.jl.jl-copy .jl-marquee__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* Student JeddAI header: one selector plus two actions still overflow a
   1024–1199px row (the "Try it" button fell off the right edge), so it takes
   the same two-strip layout as the dense staff headers at those widths. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .jl-site-header--jeddai-student:not(.jl-site-header--logged-in) { height: auto; }
  .jl-site-header--jeddai-student:not(.jl-site-header--logged-in) .jl-site-header__inner { flex-wrap: wrap; height: auto; padding: 20px clamp(24px, 4vw, 72px) 0; gap: 0 clamp(14px, 2vw, 30px); }
  .jl-site-header--jeddai-student:not(.jl-site-header--logged-in) .jl-site-header__brand { order: 1; }
  .jl-site-header--jeddai-student:not(.jl-site-header--logged-in) .jl-site-header__tools { order: 2; display: flex; flex: 1 1 auto; justify-content: flex-end; margin-left: auto; gap: clamp(14px, 2vw, 28px); }
  .jl-site-header--jeddai-student:not(.jl-site-header--logged-in) .jl-site-header__nav { order: 3; display: block; flex: 1 0 100%; margin: 20px calc(-1 * clamp(24px, 4vw, 72px)) 0; padding: 11px 0; border-top: 1px solid #ebe9f2; border-bottom: 1px solid #ebe9f2; background: #f8f8fb; }
  .jl-site-header--jeddai-student:not(.jl-site-header--logged-in) .jl-site-header__nav ul { justify-content: center; gap: clamp(36px, 6vw, 88px); }
  .jl-site-header--jeddai-student:not(.jl-site-header--logged-in) .jl-site-header__mobile { display: none; }
  .jl-site-header--jeddai-student:not(.jl-site-header--logged-in) .jl-site-header__submenu { top: calc(100% + 12px); }
}

/* --- Figma fidelity pass (design frames vs staging at 1920) ------------- */
/* FAQ: the frame left-aligns the eyebrow and heading above the 760px column. */
.jl.jl-copy .jl-section--faq .jl-section__head { max-width: 760px; margin-inline: auto; text-align: left; }
.jl.jl-copy .jl-section--faq .jl-section__head .jl-h2,
.jl.jl-copy .jl-section--faq .jl-section__head .jl-eyebrow { margin-inline: 0; text-align: left; }
/* Feature tabs after the hero quote lozenge: the frame leaves ~135px between
   the lozenge and the heading and ~60px between the CTA and the next band. */
@media (min-width: 901px) {
  .jl.jl-copy .jl-section--pullquote + .jl-section--platform-tabs { padding-top: 35px; padding-bottom: 22px; }
}
/* Footer newsletter: Gravity's flex layout stretched the field rows apart;
   the frame stacks Name, Email and Subscribe 10px apart. */
.jl.jl-copy .jl-foot__newsletter-form .gform_fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 10px !important;
  min-height: 0 !important;
  height: auto !important;
}
.jl.jl-copy .jl-foot__newsletter-form .gfield { height: auto !important; min-height: 0 !important; }
.jl.jl-copy .jl-foot__newsletter-form .gfield_label,
.jl.jl-copy .jl-foot__newsletter-form .gfield > label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
/* Gravity's theme adds a 30px top margin to every field with a rule that
   outranks the copy layer; the frame stacks the newsletter rows 10px apart. */
.jl.jl-copy .jl-foot__newsletter-form .gfield { margin: 0 !important; }
.jl.jl-copy .jl-foot__newsletter-form .gform_footer { margin: 10px 0 0 !important; padding: 0 !important; }

/* --- staging review, second round ---------------------------------------- */
/* Journey rows: the frame shows the whole product screenshot inside its
   lilac plate; the artboard cropped the left edge away. */
.jl.jl-copy .jl-section--journey .jl-row__media { overflow: visible; }
.jl.jl-copy .jl-section--journey .jl-row__media img,
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) .jl-row__media img { width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.jl-marking-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jl-marking-tools img:last-child { grid-column: 1 / -1; }
.jl.jl-copy .jl-section--journey .jl-row .jl-row__media .jl-marking-tools img { display: block; border-radius: 0; }
/* Feature tabs: the media plate matches the list's height when the list is
   the taller column, and the list centres beside a taller plate. */
@media (min-width: 901px) {
  .jl.jl-copy .jl-section--platform-tabs .jl-tabs__layout { align-items: center; }
  .jl.jl-copy .jl-section--platform-tabs .jl-tabs__panel { align-self: stretch; display: flex; }
  .jl.jl-copy .jl-section--platform-tabs .jl-tabs__panel img { flex: 1 1 auto; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
}
/* Hero quote lozenge: each slide centres in the reserved height instead of
   sitting at the top with the spare space below the dots. */
.jl.jl-copy .jl-pullquote__track { align-items: stretch; }
.jl.jl-copy .jl-pullquote__slide { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: 100%; }
/* Curriculum cards on lilac pages keep a lilac tone that stays visible
   against the section (the frame's identical fill vanished on screen). */
[data-jl-persona="teacher"][data-jl-product="jeddai"] .jl-settext__subject--lilac,
[data-jl-persona="student"][data-jl-product="jeddai"] .jl-settext__subject--lilac,
[data-jl-persona="school"][data-jl-product="jeddai"] .jl-settext__subject--lilac { background: #e7d8fb; }
[data-jl-persona="teacher"][data-jl-product="jeddai"] .jl-settext__subject--lilac .jl-settext__chips span,
[data-jl-persona="student"][data-jl-product="jeddai"] .jl-settext__subject--lilac .jl-settext__chips span,
[data-jl-persona="school"][data-jl-product="jeddai"] .jl-settext__subject--lilac .jl-settext__chips span { background: #fff; }
/* Marquee pause control: a small, quiet button at the strip's right edge,
   outside the masked viewport so it never overlaps a crest. */
.jl.jl-copy .jl-marquee > .jl-wrap { position: relative; }
.jl.jl-copy .jl-marquee__toggle { top: auto; bottom: 6px; right: 8px; translate: none; width: 26px; height: 26px; opacity: .45; border-color: rgba(72, 1, 212, .18); box-shadow: none; }
.jl.jl-copy .jl-marquee__toggle:hover,
.jl.jl-copy .jl-marquee__toggle:focus-visible { opacity: 1; }
.jl.jl-copy .jl-marquee__toggle::before { width: 8px; height: 10px; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px); }
.jl.jl-copy .jl-marquee__toggle[aria-pressed="true"]::before { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; background: transparent; }
/* Secondary buttons on the purple CTA bands read white on every page (the
   artboard only styled the teacher JeddAI band; elsewhere the ghost button
   was purple on purple). */
.jl.jl-copy .jl-ctaband .jl-btn--ghost { border-color: #fff; background: transparent; color: #fff; }
.jl.jl-copy .jl-ctaband .jl-btn--ghost:hover,
.jl.jl-copy .jl-ctaband .jl-btn--ghost:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }
.jl.jl-copy .jl-ctaband .jl-btn--ghost:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Non-home pages keep the full menu on tablets as well: the laptop frame's
   two-strip layout, compacted, instead of collapsing to a hamburger. */
@media (min-width: 768px) and (max-width: 1023px) {
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) { height: auto; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__inner { flex-wrap: wrap; height: auto; padding: 14px 20px 0; gap: 0 12px; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__brand { order: 1; width: 140px; flex: 0 0 140px; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__tools { order: 2; display: flex !important; flex: 1 1 auto; min-width: 0; justify-content: flex-end; align-items: center; margin-left: auto; gap: 10px; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__selectors { display: flex; min-width: 0; gap: 6px; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__selector { height: 36px; padding: 4px 8px; font-size: 14px; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__preference-select { max-width: 88px; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__actions { display: flex; gap: 6px; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__action { height: 38px; min-height: 38px; padding: 6px 11px; font-size: 14px; white-space: nowrap; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__action--text { padding-inline: 4px; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__nav { order: 3; display: block !important; flex: 1 0 100%; margin: 14px -20px 0; padding: 9px 0; border-top: 1px solid #ebe9f2; border-bottom: 1px solid #ebe9f2; background: #f8f8fb; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__nav ul { display: flex; justify-content: center; gap: clamp(20px, 4vw, 40px); }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__nav a { font-size: 15px; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__mobile { display: none !important; }
  .jl-site-header:not(.jl-site-header--home):not(.jl-site-header--logged-in) .jl-site-header__submenu { top: calc(100% + 10px); }
}

/* Logged-in landing pages use the production fixed masthead. Their new
   content has no header reservation, unlike the legacy page templates. */
body.jl-page.logged-in { padding-top: var(--jl-legacy-header-h, 122px); }
body.jl-page.logged-in .site-header { background-color: #301B72; }
@media (max-width: 1219px) {
  body.jl-page.logged-in { --jl-legacy-header-h: 90px; }
}
@media (max-width: 499px) {
  body.jl-page.logged-in { --jl-legacy-header-h: 75px; }
}

/* --- rebuilt header on legacy templates -------------------------------- */
/* Pricing, cart and checkout, FAQ, contact, Learn, the policies and the old
   persona shells were laid out under the theme's fixed masthead: every hero
   and page title already reserves that space, so the shared header keeps the
   fixed model there instead of pushing those pages down a second time. */
body.jl-header-only .jl-site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; }
body.jl-header-only.admin-bar .jl-site-header { top: 32px; }
@media (max-width: 782px) {
  body.jl-header-only.admin-bar .jl-site-header { top: 46px; }
}
/* The dialogs printed after the page body carry the landing tokens but no
   surface of their own, and never the `jl` root class: the release canary
   reads each route's persona/product off the single element that has it. */
.jl-chrome-modals { display: contents; }

/* ======================================================================
   Staging review, pass 6. Four defects the user reported on 2026-09-09.
   ====================================================================== */

/* --- feature tabs: a point's copy can never sit over the next point ----- */
/* The artboard layer draws every row at its Figma height. Any copy edit, any
   narrower column and any font fallback then pushed the open point's body out
   of its box and over the title below it. Rows are content-sized here, with
   the Figma heights kept as minimums. */
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__list,
.jl-section--platform-tabs .jl-tabs__list { grid-auto-rows: min-content; height: auto; }
.jl.jl-copy .jl-section--platform-tabs .jl-tab,
.jl.jl-copy .jl-section--platform-tabs .jl-tab[aria-selected="true"],
.jl.jl-copy .jl-section--platform-tabs .jl-tab--static,
.jl.jl-copy .jl-section--platform-tabs .jl-tab--static-featured,
.jl.jl-copy .jl-section--platform-tabs .jl-copy-feature { height: auto; overflow: visible; }
.jl.jl-copy .jl-section--platform-tabs .jl-tab__title,
.jl.jl-copy .jl-section--platform-tabs .jl-tab__body,
.jl.jl-copy .jl-section--platform-tabs .jl-copy-feature > p { height: auto; }
/* The open point owns the space its copy needs before the next row starts. */
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__list > li { min-width: 0; }

/* --- review carousel arrows sit on the cards' centre line --------------- */
/* The arrows were absolutely positioned at 50% of the whole band, which
   includes the heading and the stats row above the cards, so they rode 76px
   high. Placing them in the cards' grid row centres them on the card itself,
   exactly as the "Loved by" band already does. */
@media (min-width: 901px) {
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  /* Every block is placed by hand: an explicitly placed arrow would otherwise
     take the cards' row and push the cards down one. */
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-section__head { grid-area: 1 / 1; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-stats { grid-area: 2 / 1; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-quotes { grid-area: 3 / 1; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-wordquote__dots { grid-area: 4 / 1; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-wordquote__arrow {
    position: relative;
    inset: auto;
    top: auto;
    bottom: auto;
    transform: none;
    align-self: center;
    grid-area: 3 / 1;
  }
  /* A band without the stats row moves every block up one. */
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap:not(:has(> .jl-stats)) > .jl-quotes,
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap:not(:has(> .jl-stats)) > .jl-wordquote__arrow { grid-area: 2 / 1; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap:not(:has(> .jl-stats)) > .jl-wordquote__dots { grid-area: 3 / 1; }
  /* The cards carry a 48px top margin, and a grid row is sized to an item's
     margin box: leaving it there centred the arrows 24px above the cards. The
     same gap is kept, moved onto the block above. */
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-quotes { margin-top: 0; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-stats { margin-bottom: 48px; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap:not(:has(> .jl-stats)) > .jl-section__head { margin-bottom: 48px; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-wordquote__arrow--prev { justify-self: start; margin-left: -58px; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-wordquote__arrow--next { justify-self: end; margin-right: -58px; }
}
@media (min-width: 901px) and (max-width: 1299px) {
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-wordquote__arrow--prev { margin-left: -12px; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-wordquote__arrow--next { margin-right: -12px; }
}

/* --- school crests: the rail carries the density the design shows -------- */
/* The slot is the 1920 artboard's 167.857px. On a 1440 laptop that leaves the
   rail with seven crests where the frame shows eleven, and the 10% edge fade
   ghosted two of those. Scale the slot with the viewport and fade only the
   last few pixels. */
@media (max-width: 1919px) {
  .jl.jl-copy .jl-marquee__viewport {
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 3%, #000 97%, rgba(0,0,0,0));
    mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 3%, #000 97%, rgba(0,0,0,0));
  }
  /* The artboard gave slot 2 of every nine its own 169px width, and that
     nth-child selector carries one more class than the plain slot rule: without
     naming it here, every ninth crest stayed 35px wider than its neighbours. */
  .jl.jl-copy .jl-marquee__slot,
  .jl.jl-copy .jl-hero--centre > .jl-marquee .jl-marquee__slot,
  .jl.jl-copy .jl-hero--centre > .jl-marquee .jl-marquee__slot:nth-child(9n + 2) { width: clamp(96px, 9.2vw, 167.857px); }
  /* Each crest carries its drawn size as an inline style, which outranks any
     stylesheet height: without object-fit a 160x75 lockup in a 132px slot came
     out 132x75, squashed 17%. object-fit scales it inside the slot instead. */
  .jl.jl-copy .jl-marquee__slot img { max-width: 100%; height: auto; object-fit: contain; }
}

/* ======================================================================
   Staging review, pass 7 - the mobile rhythm of the crest rail and the
   proof metrics, plus the journey markers above.
   ====================================================================== */

/* --- crest rail: mobile vertical rhythm -------------------------------- */
/* Below the 1200px artboard breakpoint the band spent 96px above the trust
   line and 10px below it, from two rules that never meet. `.jl p` outranks
   `.jl-marquee__label`'s own bottom margin, so outside the >=1200px persona
   block the line had no margin at all; and the rhythm layer's flat
   `.jl-marquee { padding-block: 44px }` lands on top of the hero's 52px
   trailing padding. The homepage is the one page already reading correctly at
   72px / 40px, so its numbers become everyone's. Capped at 1180px, not 1199px:
   the homepage rail keeps the artboard's `top: 706px` offset and fixed 188px
   height until its own responsive block releases them at 1180, so between 1181
   and 1199 this padding and margin stacked on top of that offset and dropped
   the rail 52px, its trust line 72px, and every section below it 52px. The
   persona block starts at 1200, but the artboard runs 19px further. */
@media (max-width: 1180px) {
  .jl.jl-copy .jl-marquee:not(.jl-marquee--pending) { padding-top: 20px; }
  .jl.jl-copy .jl-marquee:not(.jl-marquee--pending) .jl-marquee__label { margin-bottom: 30px; }
  /* The homepage rail is the hero's last child and leads with margin, not
     padding, so its margin absorbs the 8px trimmed above and the band still
     opens 72px under the persona grid. */
  .jl.jl-copy .jl-hero--centre > .jl-marquee:not(.jl-marquee--pending) { margin-top: 52px; }
}
/* A captioned slot is fixed at the artboard's 134px but holds 156-240px once
   the caption wraps in a mobile-width slot, and a centred column splits that
   overflow both ways: the tallest crests finished 34px ABOVE the trust line and
   no two crest tops agreed. Owning its content height and stretching to the
   track puts every crest on one top edge. Reduced motion is left alone - there
   the track is a grid with its own 88px slot height, which this would outrank. */
/* Same 1180px edge as the block above, so the two halves of this fix can never
   disagree about which pages are in responsive mode. */
@media (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
  .jl.jl-copy .jl-marquee--captioned:not(.jl-marquee--pending) .jl-marquee__track { align-items: stretch; }
  .jl.jl-copy .jl-marquee--captioned:not(.jl-marquee--pending) .jl-marquee__slot { height: auto; justify-content: flex-start; }
}

/* --- school crests on phones: a ribbon, not three crests in a field ----- */
/* The clamp above is written in vw and on a phone it pins to its 96px floor
   (9.2vw is only 36px at 390), while the 26px gap the artboard drew for a
   167.857px slot does not shrink at all - so the gap wins and two or three
   crests reach the screen, marooned. Below the tablet breakpoint size the slot
   AND the gap off the viewport, so the rail holds about four crests at any
   phone width. At 767px both land within 1.5px of the values above, so the
   768px boundary stays seamless. Captioned rails keep the wider slot on
   purpose: their captions already run past it, and a tighter pitch would
   overlap them. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .jl.jl-copy .jl-marquee:not(.jl-marquee--captioned) .jl-marquee__slot,
  .jl.jl-copy .jl-hero--centre > .jl-marquee:not(.jl-marquee--captioned) .jl-marquee__slot,
  .jl.jl-copy .jl-hero--centre > .jl-marquee:not(.jl-marquee--captioned) .jl-marquee__slot:nth-child(9n + 2) { width: clamp(64px, 19vw, 96px); }
  .jl.jl-copy .jl-marquee:not(.jl-marquee--captioned) .jl-marquee__slot { margin-right: clamp(10px, 3.2vw, 26px); }
}

/* --- the three metrics become three horizontal cards on phones --------- */
/* The <=620px layer only undid the artboard's absolute geometry. It left the
   number and its caption as two inline runs with nothing bounding them, so the
   metrics read as loose centred lines floating on the lilac band. Give each
   metric the surface the review cards in this same band already carry so the
   row reads as content rather than as stray text. A flex row keeps the number
   and its caption on one line and still lets the caption wrap on a 320px
   phone. The stat rules carry :nth-child(n) because the layers above already
   do: matching their weight and sitting last is what wins here. */
@media (max-width: 620px) {
  .jl-section--word-for-it > .jl-wrap > .jl-stats {
    align-items: stretch;
    gap: 12px;
  }
  .jl-section--word-for-it .jl-stat,
  .jl-section--word-for-it .jl-stat:nth-child(n) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 10px;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 16px 20px;
    border-radius: 24px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #dbd8e6, 0 4px 11.2px rgba(119,111,151,.16);
    text-align: center;
  }
  /* The artboard gives every caption its own Figma width by index and an
     inline box ignored it. A flex item does not: without this reset "lessons
     completed" wraps and that card stands 15px taller than its neighbours. */
  .jl-section--word-for-it .jl-stat__c,
  .jl-section--word-for-it .jl-stat:nth-child(n) .jl-stat__c {
    width: auto;
    height: auto;
    margin-left: 0;
    white-space: normal;
  }
}
/* Fixed artboard mode reasserts the 1920px component after media queries; the
   phone card surface is no part of that transcription. */
.jl-artboard-host .jl-section--word-for-it .jl-stat,
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(n) {
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.jl-artboard-host .jl-section--word-for-it .jl-stat__c,
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(n) .jl-stat__c {
  height: 18px;
  white-space: nowrap;
}
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(1) .jl-stat__c { width: 145px; }
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(2) .jl-stat__c { width: 100.4849px; }
.jl-artboard-host .jl-section--word-for-it .jl-stat:nth-child(3) .jl-stat__c { width: 143.23087px; }

/* --- in-section decorative stages sit behind content, at every width ----
   The earlier pass lowered only the between-section stages, and it did so by
   out-ranking their siblings (.jl-deco 0 vs .jl-section 1), not by going behind
   anything. The stages nested INSIDE a section have no sibling to lose to:
   .jl-hero__deco, .jl-journey__deco and .jl-ctaband__deco are position:absolute
   with no z-index, which paints them in the positioned layer - above every
   in-flow sibling. That stayed invisible only while each host kept its content
   wrapper position:relative; the copy layer forces .jl-journey's children to
   position:static, so below 1200px (where the artboard's own z-index:-1 stops
   applying) the journey swoosh crossed in front of the row artwork and, at
   phone width, in front of the headings.
   z-index:0 cannot fix this - 0 and auto share one paint level, above in-flow
   content. Only a negative z-index drops a positioned layer below it, and every
   host here already establishes a stacking context (.jl-hero z-index:2,
   .jl-journey isolation:isolate, .jl-ctaband z-index:1) so -1 stays above the
   host's own background and cannot fall behind the page. */
.jl.jl-copy .jl-hero__deco,
.jl.jl-copy .jl-journey__deco,
.jl.jl-copy .jl-ctaband__deco { z-index: -1; }

/* --- curriculum browser: the card the visitor picked stays identifiable -----
   Picking a humanities subject now opens the whole faculty, so the card they
   actually chose has to keep reading as theirs with seven siblings around it -
   especially on /teachers/jeddai/, where the site header carries the subject
   preference and the section's own Subject pill is hidden, leaving the ring and
   the opening scroll position as the only cues.
   A ::before ring, not `outline`: outline-offset only follows a border radius in
   Safari 16.4+, and an inset box-shadow would paint UNDER the card's decorative
   ::after (z-index 0). This pseudo-element sits at z-index 2, above both that
   deco and the content, and border-radius: inherit picks up the card's 36px with
   no magic number. aria-current="true" is already the house convention for the
   current item in a carousel. */
.jl.jl-copy .jl-settext__subject[aria-current="true"]::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 3px solid var(--jl-purple);
  border-radius: inherit;
  pointer-events: none;
}

/* The copy layer shrank the dot BUTTON to 12x24 to tighten the Figma rhythm,
   which took the touch target down with it - the base design gave these buttons
   a 44x44 box and drew the 8px dot with a centred ::before.
   Restore the vertical reach with an overlay rather than by resizing the button:
   growing the button to 44px would make the target an ELLIPSE, because
   border-radius clips hit-testing, and would stretch the keyboard focus ring
   into a 12x44 pill. A transparent ::after inflated 10px above and below gives a
   true 12x44 rectangle, leaves the button's own box and its focus ring exactly
   as authored, and changes no layout at all.
   Left/right stay at 0 on purpose: the dots tile a contiguous strip with gap: 0,
   so horizontal inflation would overlap the neighbouring dot's target. */
.jl.jl-copy .jl-pullquote__dot::after,
.jl.jl-copy .jl-wordquote__dot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}

/* --- the shared preference pills on a legacy fixed header ---------------- */
/* Pricing, cart, FAQ, contact, Learn, the policies and the blog render the
   header fixed (see `body.jl-header-only` above) over page tops that reserve
   exactly the 90px the header used to be. From 1024px up that is precisely what
   they reserve - measured 90px on every one of them - so a header carrying the
   pills reclaims the difference and each page keeps the clearance it has now.
   Below 1024 this rule stays off on purpose: the tablet block above has made
   this header 122px and taller since it shipped, so `headerH - 90` there would
   add 32px no page ever reserved, on /cart/ and /checkout/ too, which carry no
   pills and change in no other way.
   `--jl-header-h` is published by landing.js from the header's measured box; the
   band fallbacks below are the measured heights, so the first paint is already
   correct and nothing shifts when the script runs. */
@media (min-width: 1024px) {
  body.jl-header-only { padding-top: calc(max(0px, var(--jl-header-h, 90px) - 90px)); }
}
/* Between 768 and 1023 the reservation is not 90px: the tablet block above has
   made this header 122px since it shipped, and every page top here was laid out
   under that. Same formula, that baseline - so a header that did not change
   (/faq/, /cart/, /checkout/ at 122px) gets exactly 0 and does not move, while
   /pricing/, which grows to 170px once the pills join its cart, reclaims the
   48px difference instead of putting its H1 30px behind the header. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.jl-header-only { padding-top: calc(max(0px, var(--jl-header-h, 122px) - 122px)); }
  body.jl-header-only:has(.jl-site-header--dense .jl-site-header__cart) { --jl-header-h: 170px; }
}
@media (min-width: 1024px) and (max-width: 1400px) {
  body.jl-header-only:has(.jl-site-header--dense) { --jl-header-h: 158px; }
  body.jl-header-only:has(.jl-site-header--dense .jl-site-header__cart) { --jl-header-h: 172px; }
  body.jl-header-only:has(.jl-site-header--dense.jl-site-header--logged-in .jl-site-header__cart) { --jl-header-h: 234px; }
}
@media (min-width: 1401px) {
  body.jl-header-only:has(.jl-site-header--dense) { --jl-header-h: 138px; }
}

/* The two-strip layout keeps the artboard's 120px margin at and above the design
   width. Its own inline padding is clamp(24px, 4vw, 72px), drawn for the laptop
   frames it was written for; carried past 1919 unchanged it pins at 72px and
   seats the logo at x=72 on a 1920 viewport, while the homepage, the catalogue
   and the cart keep theirs at x=120 - so the logo and the whole action cluster
   would jump 48px on every navigation at the design width. The nav strip's
   negative margin follows the padding so the grey band still bleeds to the
   inner's edges. */
@media (min-width: 1920px) {
  .jl-site-header--dense .jl-site-header__inner { padding-inline: 120px; }
  .jl-site-header--dense .jl-site-header__nav { margin-inline: -120px; }
}

/* The single-row generic header (the homepage, plus cart and checkout, the
   pages that do not carry the pills) keeps the artboard's literal composition
   from 1800px up: brand, nav and actions at the 342px column gap the 1920 frame
   was measured with. That gap only fits the frame's copy. With today's four nav
   items and "Try it, it's free" the row is 1797px wide inside a 1680px content
   box, so it ends at x=1917 on a 1920 viewport (3px from the edge, and past it
   the moment a scrollbar, a side panel or a zoom step takes a few pixels) and
   overflows the document by up to 117px between 1800 and 1916: the stretched
   navbar with a horizontal scrollbar seen on 1080p monitors. On cart and
   checkout the header is fixed, so nothing scrolled and the Cart button was
   simply cut off at those widths. Expressing the same geometry as space-between
   keeps brand and actions on the 120px margins and lets the gap absorb the
   copy, so the row can never leave the viewport. The two-strip headers
   (`--dense`) keep their own layout. */
@media (min-width: 1800px) {
  .jl-site-header--generic:not(.jl-site-header--dense) .jl-site-header__inner,
  .jl-site-header--detail:not(.jl-site-header--dense) .jl-site-header__inner {
    justify-content: space-between;
    gap: 30px;
  }
}

/* Applied feedback: shared spacing, proof, and compact curriculum cards. */
.jl-site-header [data-jl-australian-preference][hidden] { display: none !important; }
.jl.jl-copy .jl-section__head > .jl-eyebrow { margin-bottom: 20px; }
.jl.jl-copy .jl-section--pullquote { padding-bottom: 80px; }
.jl.jl-copy .jl-section--pullquote .jl-pullquote__front { padding-inline: clamp(60px, 8vw, 157px); align-items: center; }
.jl.jl-copy .jl-section--pullquote .jl-pullquote__track { margin-inline: auto; text-align: center; }
.jl.jl-copy :is(.jl-pullquote__who, .jl-quote__who) img[src*="/crest-st-philips.png"] { object-fit: cover; object-position: left center; }
.jl.jl-copy .jl-videoband { align-items: center; }
.jl.jl-copy .jl-videoband__copy { align-self: center; }
.jl.jl-copy .jl-videoband__quote { font-weight: 700; }
.jl.jl-copy .jl-videoband__body { line-height: 1.55; }
.jl.jl-copy .jl-videoband__actions { margin-top: 23px; gap: 22px; }
.jl.jl-copy .jl-videoband__actions .jl-btn--alt { color: #fff; background: transparent; border: 1px solid #e6d9ff; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(n) .jl-row__text > p:not(.jl-eyebrow) { line-height: 1.55; }
.jl.jl-copy[data-jl-persona="generic"] .jl-section--journey { padding-bottom: 48px; }
.jl.jl-copy[data-jl-persona="generic"] .jl-section--loved-by { padding-top: 62px; }
.jl.jl-copy .jl-section--journey .jl-section__head { margin-bottom: 38px; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(n) .jl-row__text { gap: 0; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(n) .jl-row__text > .jl-eyebrow { margin-bottom: 40px; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(n) .jl-row__text > .jl-h3 { margin-bottom: 40px; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(n) .jl-row__actions { margin-top: 24px; }
.jl.jl-copy .jl-steps li::before { content: counter(jl-step) "."; direction: ltr; unicode-bidi: isolate; }
.jl.jl-copy .jl-section--faq .jl-section__head { margin-bottom: 30px; }
.jl.jl-copy .jl-faq__a { max-width: none; padding-right: 40px; }
/* Pointer hover pauses the logos; the keyboard pause control is exposed on focus. */
.jl.jl-copy .jl-marquee__toggle:not(:focus-visible) { width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.jl.jl-copy .jl-marquee:focus-within .jl-marquee__track { animation-play-state: paused; }
.jl.jl-copy .jl-settext { isolation: isolate; }
.jl.jl-copy .jl-settext > .jl-wrap { position: relative; z-index: 1; }
.jl.jl-copy .jl-settext__owl { z-index: 0; width: clamp(100px, 13vw, 230px); left: 0; bottom: 0; }
.jl.jl-copy .jl-settext__tree { z-index: 0; width: clamp(190px, 28vw, 460px); top: 16%; right: -5%; }
.jl.jl-copy .jl-settext__track { gap: 24px; padding-inline: max(32px, calc((100% - 1180px) / 2)); }
.jl.jl-copy .jl-settext__subject { flex-basis: 440px; min-height: 300px; height: 300px; padding: 20px 24px; gap: 12px; border-radius: 26px; }
.jl.jl-copy .jl-settext__subject h3 { font-size: 22px; line-height: 1.2; min-height: 27px; }
.jl.jl-copy .jl-settext__chips { gap: 5px; min-height: 46px; align-content: flex-start; }
.jl.jl-copy .jl-settext__chips span { padding: 5px 9px; min-height: 26px; font-size: 11px; line-height: 16px; white-space: normal; border-radius: 14px; }
.jl.jl-copy .jl-settext__books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; height: 128px; }
.jl.jl-copy .jl-settext__book { width: 100%; height: 128px; margin: 0; border-radius: 7px; box-shadow: none; }
.jl.jl-copy .jl-settext__book img { display: block; height: 80px; object-fit: cover; }
.jl.jl-copy .jl-settext__book-caption { display: flex; align-items: center; flex: 1; margin: 0; padding: 4px 6px; font: 700 10px/1.2 var(--jl-font); color: #17123e; background: #fff; }
.jl.jl-copy .jl-settext__more { position: static; margin-top: auto; font-size: 16px; line-height: 22px; }
.jl.jl-copy .jl-settext__arrow { display: grid; z-index: 5; top: 150px; width: 44px; height: 44px; background: #fff; box-shadow: 0 2px 12px #2e21771a; }
.jl.jl-copy .jl-settext__arrow--prev { left: 12px; }
.jl.jl-copy .jl-settext__arrow--next { right: 12px; }
.jl.jl-copy .jl-settext__cta { margin-top: 68px; }
/* Match desktop page steps to card starts. Center snapping can jump past a
   partially visible card when two cards fit between the track's insets. */
@media (min-width: 768px) {
  .jl.jl-copy .jl-settext__track { scroll-padding-inline: max(32px, calc((100% - 1180px) / 2)); }
  .jl.jl-copy .jl-settext__subject { scroll-snap-align: start; }
}
@media (min-width: 1500px) {
  .jl.jl-copy .jl-section--journey .jl-section__head { margin-bottom: 80px; }
}
@media (max-width: 767px) {
  .jl.jl-copy .jl-section--pullquote .jl-pullquote__front { padding-inline: 28px; }
  .jl.jl-copy .jl-settext__subject { flex-basis: min(440px, calc(100vw - 64px)); height: 320px; min-height: 320px; padding: 20px; }
  .jl.jl-copy .jl-settext__subject h3 { min-height: 52px; }
  .jl.jl-copy .jl-settext__chips { min-height: 52px; }
  .jl.jl-copy .jl-settext__track { gap: 16px; padding-inline: 32px; }
  .jl.jl-copy .jl-settext__arrow { top: 160px; }
  .jl.jl-copy .jl-settext__arrow--prev { left: -18px; }
  .jl.jl-copy .jl-settext__arrow--next { right: -18px; }
  .jl.jl-copy .jl-faq__a { padding-right: 20px; }
}

.jl.jl-copy .jl-compare__yes svg { stroke-width: 2.25; }
.jl.jl-copy .jl-compare__no { display: inline-block; transform: scaleY(1.1); }
.jl.jl-copy .jl-settext__book { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.jl.jl-copy .jl-settext__book img { flex: 0 0 80px; min-height: 0; object-position: center; }
.jl.jl-copy .jl-settext__book-caption { min-height: 48px; box-sizing: border-box; overflow-wrap: anywhere; }
.jl.jl-copy .jl-settext__topic-art { display: block; width: 100%; height: 80px; flex: 0 0 80px; color: #492480; background: #eadffd; }
.jl.jl-copy .jl-settext__topic-art--1 { color: #086666; background: #cef3ed; }
.jl.jl-copy .jl-settext__topic-art--2 { color: #784518; background: #fff1c0; }
.jl.jl-copy .jl-settext__topic-art--3 { color: #48509d; background: #dfe5ff; }
.jl.jl-copy .jl-quote__stars { color: #f2b800; font-size: 20px; letter-spacing: 2px; margin: 0 0 16px; }

.jl.jl-copy .jl-settext__owl, .jl.jl-copy .jl-settext__tree { height: auto; object-fit: contain; }

/* Two resource columns preserve readable captions on narrow screens. */
@media (max-width: 767px) {
  .jl.jl-copy .jl-settext__subject { height: 450px; min-height: 450px; }
  .jl.jl-copy .jl-settext__books { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 232px; flex-shrink: 0; }
  .jl.jl-copy .jl-settext__book { height: 112px; }
  .jl.jl-copy .jl-settext__book img, .jl.jl-copy .jl-settext__topic-art { height: 64px; flex-basis: 64px; }
  .jl.jl-copy .jl-settext__arrow { top: 225px; }
}

/* Student feedback: preserve the Figma's full-width, overlapping ellipses and
   contributor orbit while allowing the approved copy to determine its height. */
.jl.jl-copy[data-jl-persona="student"] .jl-achievers { padding-bottom: 24px; }
@media (min-width: 1200px) {
  .jl.jl-copy[data-jl-persona="student"] .jl-achievers { padding-bottom: 0; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achievers { height: auto; padding: 0; overflow: clip; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achievers > .jl-wrap { width: 100%; max-width: none; height: auto; padding: 0; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achievers__inner {
    display: grid;
    grid-template-columns: minmax(0, 445px) minmax(0, 675px);
    align-items: center;
    gap: clamp(24px, 6.35vw, 122px);
    width: 100%;
    height: auto;
    min-height: 625px;
    padding: 32px max(24px, calc(50% - 663px)) 32px max(48px, calc(50% - 579px));
    border-radius: 0;
    overflow: visible;
    background:
      radial-gradient(ellipse 38.1% 56% at 63.4% 44.1%, var(--jl-lilac) 99.4%, transparent 100%),
      radial-gradient(ellipse 35% 52% at 23.6% 43.2%, var(--jl-lilac) 99.4%, transparent 100%);
  }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achievers__copy { position: relative; inset: auto; width: auto; transform: translateY(-26px); }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achievers__orbit {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    max-width: 675px;
    height: auto;
    aspect-ratio: 675 / 550;
    margin: 0;
    zoom: 1;
  }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achievers__orbit::before { width: 103%; top: 50%; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achiever { position: absolute; transform: none; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achiever img { width: clamp(82px, 7.22vw, 104px); height: clamp(82px, 7.22vw, 104px); }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achiever:nth-child(1) { left: 30.06%; top: 33.49%; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achiever:nth-child(2) { left: 52.73%; top: 33.49%; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achiever:nth-child(3) { left: 74.14%; top: 58.31%; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achiever:nth-child(4) { left: 41.33%; top: 68.21%; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achiever:nth-child(5) { left: 8.71%; top: 55.96%; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achiever:nth-child(6) { left: 8.71%; top: 11%; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achiever:nth-child(7) { left: 41.33%; top: 0; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achiever:nth-child(8) { left: 74.15%; top: 8.64%; }
  .jl.jl-copy[data-jl-persona="student"] .jl-achievers ~ .jl-section--platform-tabs { padding-top: 96px; }
}

/* Only closing panels labelled GET STARTED use the requested shorter spacing.
   Content remains in flow so long headings and stacked mobile actions can grow. */
.jl.jl-copy .jl-ctaband--get-started { min-height: 340px; padding-block: 56px; }
.jl.jl-copy .jl-ctaband--get-started > .jl-wrap { min-height: 400px; padding-block: 52px; }
.jl.jl-copy .jl-ctaband--get-started > .jl-wrap > .jl-eyebrow {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 0 16px;
  transform: none;
  translate: none;
}
.jl.jl-copy .jl-ctaband--get-started > .jl-wrap > .jl-h2 { width: 100%; max-width: 880px; margin: 0 auto; }
.jl.jl-copy .jl-ctaband--students .jl-ctaband__photo { opacity: .32; filter: brightness(.9); mix-blend-mode: normal; }
@media (min-width: 1920px) {
  .jl.jl-copy .jl-ctaband--get-started { padding-block: 0; }
  .jl.jl-copy .jl-ctaband--get-started > .jl-wrap { min-height: 340px; }
}
@media (max-width: 900px) {
  .jl.jl-copy .jl-ctaband--students .jl-ctaband__photo { object-position: 22% center; }
}

/* Mobile review controls share a row below the cards, clear of attribution. */
@media (max-width: 900px) {
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-wordquote__dots,
  .jl.jl-copy .jl-section--loved-by > .jl-wrap > .jl-wordquote__dots { height: 44px; align-items: center; }
  .jl.jl-copy .jl-section--word-for-it > .jl-wrap > .jl-wordquote__arrow { top: auto; bottom: 0; transform: none; }
  /* Loved-by controls occupy a grid row; align arrows to its dots' content
     box, after the shared 32px clearance below the testimonial cards. */
  .jl.jl-copy .jl-section--loved-by > .jl-wrap > .jl-wordquote__dots { margin-block: 32px 0; }
  .jl.jl-copy .jl-section--loved-by > .jl-wrap > .jl-wordquote__arrow { align-self: end; }
}

/* ======================================================================= */
/* September 2026 feedback, round B (Google Doc tabs 1B-4B + Study Guides) */
/* ======================================================================= */

/* Section label -> headline reads ~32px on the journey rows, matching the band
   heads (20px box gap; the rows carried 40px). The certification pill gets
   equal room: 20px under its heading, 6px above a checklist whose first row
   adds 14px of its own padding. The journey heading sits closer to the top
   of its band, and the case study keeps the same 62px above its heading as
   below its CTA. */
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(n) .jl-row__text > .jl-eyebrow { margin-bottom: 20px; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(n) .jl-row__text > .jl-h3:has(+ .jl-badge-pill) { margin-bottom: 20px; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(n) .jl-row__text > .jl-badge-pill { margin-bottom: 6px; }
/* The homepage checklist rows carry no padding of their own, so the pill keeps the full 20px there. */
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-row:nth-child(n) .jl-row__text > .jl-badge-pill { margin-bottom: 20px; }
/* School features heading reads as two sentences on two lines (3B). */
.jl.jl-copy[data-jl-persona="school"][data-jl-product="jeddai"] .jl-section--platform-tabs .jl-section__head .jl-h2 { max-width: 30ch; margin-inline: auto; }
.jl.jl-copy .jl-section--journey { padding-top: 48px; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-case { padding-top: 62px; }

/* Homepage: the frame leaves ~130px between the feature CTA and the
   "Teachers and students love Jeddle" band; the page left 62px. The student
   page gets a little more air between its feature CTA and the carousel. */
@media (min-width: 901px) {
  .jl.jl-copy[data-jl-persona="generic"] .jl-section--pullquote + .jl-section--platform-tabs { padding-bottom: 92px; }
}
.jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-section--platform-tabs { padding-bottom: calc(clamp(48px, 6vw, 92px) + 24px); }

/* Every persona hero headline sits 24px closer to the nav, and the teacher
   hero's school-trial link a little closer to the email CTA. */
.jl.jl-copy :is(.jl-hero--teacher-jeddai, .jl-hero--school-jeddai, .jl-hero--student-jeddai, .jl-hero--teacher-study-guides, .jl-hero--student-study-guides, .jl-hero--school-study-guides) > .jl-mid { margin-top: -24px; }
.jl.jl-copy .jl-hero--teacher-jeddai .jl-hero__col > .jl-textlink { margin-top: -12px; }

/* Feature-to-carousel transition: the two-tone line (lavender left, pale
   yellow right) draws once and stays on the teacher and student pages. The
   generic decorative loop hid it for 40% of every cycle and the student
   alternate loop for half of it, so the yellow half was rarely on screen. */
@media (prefers-reduced-motion: no-preference) {
  .jl.jl-copy[data-jl-product="jeddai"] :is(.jl-motion-sj-mid-right, .jl-motion-sj-mid-left) path[pathLength] { animation: jl-line-draw-once 1.4s ease-out 1 forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .jl.jl-copy[data-jl-product="jeddai"] :is(.jl-motion-sj-mid-right, .jl-motion-sj-mid-left) path[pathLength] { animation: none; stroke-dasharray: 1 1; stroke-dashoffset: 0; visibility: visible; }
}
@keyframes jl-line-draw-once {
  from { stroke-dasharray: 0 1; stroke-dashoffset: 0; visibility: visible; }
  to   { stroke-dasharray: 1 1; stroke-dashoffset: 0; visibility: visible; }
}
/* Student achievers: the lilac ellipses were taller than the band and were
   clipped flat along its top edge; keep them inside it. */
.jl.jl-copy[data-jl-persona="student"][data-jl-product="jeddai"] .jl-achievers .jl-achievers__inner {
  background:
    radial-gradient(ellipse 38.1% 47% at 63.4% 50%, var(--jl-lilac) 99.4%, transparent 100%),
    radial-gradient(ellipse 35% 45% at 23.6% 50%, var(--jl-lilac) 99.4%, transparent 100%);
}

/* Study-guide pages: the pre-footer CTA band uses the JeddAI pages' 56px band
   and 52px inner padding instead of 104/64, and the crest rail's caption sits
   48px under the hero like the homepage trust line. */
.jl.jl-copy[data-jl-product="study-guides"] .jl-ctaband { height: auto; min-height: 340px; padding-block: 56px; }
.jl.jl-copy[data-jl-product="study-guides"] .jl-ctaband > .jl-wrap { height: auto; padding-block: 52px; }
@media (min-width: 1920px) {
  .jl.jl-copy[data-jl-product="study-guides"] .jl-ctaband { padding-block: 0; }
}
.jl.jl-copy[data-jl-persona][data-jl-product="study-guides"] .jl-hero { padding-bottom: 48px; }
.jl.jl-copy[data-jl-product="study-guides"] .jl-marquee { padding-top: 0; }

/* Catalogue: the search field's focus is the shell's ring, not a second
   rectangle; the bundle burst stays on screen down to tablets; the "%" sits
   inside the discount badge. */
.jl .jl-search #jl-q:focus, .jl .jl-search #jl-q:focus-visible { outline: none !important; }
.jl-search:focus-within { box-shadow: 0 0 0 3px rgba(72, 1, 212, .35), 0 10px 13px rgba(119, 111, 151, .14); }
@media (max-width: 860px) { .jl-burst { display: block; right: -330px; opacity: .6; transform: scale(.52); } }
@media (max-width: 640px) { .jl-burst { display: none; } }

/* "Save 60%" badge inside the bundle CTAs (catalogue cards, detail page). */
.jl-btn__badge { display: inline-flex; align-items: center; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: #9b6bff; color: #fff; font-size: .72em; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.jl-btn--block .jl-btn__badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin-left: 0; }
.jl-btn--block:has(> .jl-btn__badge) { position: relative; padding-right: 96px; }
.jl-btn[aria-pressed="true"] .jl-btn__badge { display: none; }

/* Detail page: breadcrumb baseline, tighter title/author and proof/lede,
   stats bubbles beside the heading, video-band buttons on one line. */
.jl-pdp-page .jl-pdp__crumbs { display: flex; align-items: baseline; gap: 8px; }
.jl-pdp-page #jl-pdp-title { line-height: 1.05; margin-bottom: 0; }
.jl-pdp-page .jl-pdp__author { margin-top: 2px; }
.jl-pdp-page .jl-pdp__info > .jl-pdp__social-proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 0; }
.jl-pdp-page .jl-pdp__info > .jl-pdp__social-proof + .jl-pdp__lede { margin-top: 24px; }
.jl-pdp-page .jl-pdp-modules__head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
/* The heading block must leave room for the three 150px stat bubbles beside it on a 1267px row. */
.jl-pdp-page .jl-pdp-modules__head > :first-child { flex: 1 1 320px; min-width: 0; max-width: 640px; }
/* Below 1600px an earlier rule stretches the bubbles to the full row; from 1100px up the three
   150px bubbles fit beside the capped heading, so they keep their own width there. */
@media (min-width: 1100px) {
  .jl-pdp-page .jl-pdp-modules__head > .jl-modules__stats { width: auto; }
}
.jl-pdp-page .jl-modules__stats { grid-template-columns: repeat(3, minmax(0, 150px)); }
.jl-pdp-page .jl-videoband__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.jl-pdp-page .jl-videoband__actions .jl-btn--on-deep { background: transparent; border: 1px solid rgba(255, 255, 255, .75); color: #fff; }
.jl-pdp-page .jl-videoband__actions .jl-btn--on-deep:hover,
.jl-pdp-page .jl-videoband__actions .jl-btn--on-deep:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }

/* Bundle popup: no divider between the count and its label (one stays before
   the price), and the step heading clears the State/Year/Subject pill labels,
   which overlap the column tops by design. */
.jl-modal__tally [data-jl-bundle-count-label]::before { display: none; }
.jl-modal .jl-modal__box .jl-modal__body .jl-modal__section-title { margin-bottom: 32px; }
.jl-modal__fineprint { margin: 4px 0 0; font-size: .75rem; line-height: 1.35; color: var(--jl-muted); }

/* September 2026 feedback, round C ------------------------------------------
   The Safer Technologies 4 Schools pill filled the whole 564px text column
   (and the 341px artboard box) - it now hugs its icon and label. The content
   keeps its exact position, padding and size; only the box shrinks. */
/* The journey reset above forces `width: 100% !important` on every `.jl-row__text > *`, and the
   column flexbox stretches its children, so both need overriding here. */
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--journey .jl-row:nth-child(n) .jl-row__text > .jl-badge-pill { width: fit-content !important; max-width: 100%; align-self: flex-start; }
/* The "Save 60%" badge is absolutely positioned inside the block bundle button, and the
   96px reserve above (`.jl-btn--block:has(> .jl-btn__badge)`, specificity 0,2,0) lost to
   `.jl-card--catalogue .jl-card__actions .jl-btn { padding: 9px 14px }` (0,3,0), so the centred
   label ran under the badge. Reserve the badge's width (~4.5em) plus its inset and a gap, at
   every card font size. */
.jl-card .jl-card__actions .jl-btn--block:has(> .jl-btn__badge),
.jl-marketing-card .jl-btn--block:has(> .jl-btn__badge),
.jl-btn--block:has(> .jl-btn__badge) { padding-right: 6.4em; }
/* Every "Add to bundle" variant has an explicit in-bundle look, so no variant can fall back to a
   transparent/white box after the builder closes: cards and marketing cards go deep ink, the
   detail page's white-outlined button on the dark band stays outlined with a white tick. */
.jl-btn--primary[data-jl-bundle-add][aria-pressed="true"],
.jl-card.is-in-bundle .jl-btn--bundle,
.jl-marketing-card.is-in-bundle .jl-btn--bundle { background: #2e2177; color: #fff; border-color: #2e2177; }
.jl-btn--primary[data-jl-bundle-add][aria-pressed="true"]:hover,
.jl-btn--primary[data-jl-bundle-add][aria-pressed="true"]:focus-visible,
.jl-card.is-in-bundle .jl-btn--bundle:hover,
.jl-card.is-in-bundle .jl-btn--bundle:focus-visible { background: #241a5e; color: #fff; }
.jl-btn--ghost.jl-btn--on-deep[data-jl-bundle-add][aria-pressed="true"] { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }

/* The starburst tracks the right edge below the 1920px artboard width so its
   centred message stays clear of the main copy and inside the viewport. */
@media (min-width: 1501px) and (max-width: 1919px) {
  .jl-burst { left: auto; right: -190px; transform: scale(.9); transform-origin: center; }
}
@media (max-width: 1500px) { .jl-burst { right: -203px; } }
@media (max-width: 1180px) { .jl-burst { right: -226px; } }
@media (min-width: 1024px) and (max-width: 1100px) {
  .jl-burst { right: -240px; transform: scale(.56); }
}
@media (min-width: 1181px) and (max-width: 1250px) {
  .jl-burst { right: -213px; transform: scale(.74); }
}
/* Under 1024px the hero copy runs the full width, so the badge has no corner to sit in:
   the message would either be cut again or land on the subhead (measured: it overlapped
   the subhead at 900 and 768). Keep the star and its "%" as decoration and drop the
   message there - the same claim is on every card button and in the bundle bar. */
@media (max-width: 1023px) {
  .jl-burst { right: -310px; }
  .jl-burst__copy { display: none; }
  .jl-burst__content { transform: translate(-50%, -50%) rotate(var(--jl-burst-copy-angle)); }
}
@media (max-width: 860px) { .jl-burst { right: -330px; } }

/* September feedback, round C: shared rhythm with content kept in flow. */
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey { padding-top: 72px; }
.jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-section__head { margin-bottom: 49.4px; }
.jl.jl-copy[data-jl-persona][data-jl-product] .jl-section--platform-tabs .jl-section__head .jl-h2 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.29;
  letter-spacing: 0;
}
.jl.jl-copy[data-jl-product="jeddai"] .jl-section--platform-tabs {
  padding-bottom: calc(clamp(48px, 6vw, 92px) + 24px);
  margin-bottom: 40px;
}
.jl.jl-copy[data-jl-product="jeddai"] .jl-settext { margin-top: 9px; background: #f1e6fc; }
@media (max-width: 767px) {
  .jl.jl-copy[data-jl-product="jeddai"] .jl-settext__tree { display: none; }
}
.jl.jl-copy :is(.jl-hero--teacher-jeddai, .jl-hero--school-jeddai, .jl-hero--teacher-study-guides, .jl-hero--school-study-guides) .jl-hero__deco svg:first-child { left: -380px !important; top: -240px !important; }
.jl.jl-copy .jl-hero--student-study-guides .jl-hero__deco svg:first-child { left: -380px !important; top: -240px !important; }
.jl.jl-copy .jl-hero--student-study-guides .jl-hero__usps { gap: 16px; }
.jl.jl-copy .jl-hero--student-study-guides .jl-hero__usps li { gap: 6px; white-space: nowrap; }
.jl.jl-copy .jl-hero--student-study-guides .jl-hero__usps img { width: 28px; height: 28px; }
/* The student hero flows into the achievers without stacking two section
   paddings or retaining empty space below the responsive video. */
.jl.jl-copy[data-jl-persona="student"][data-jl-product="study-guides"] .jl-hero { min-height: 0; }
.jl.jl-copy[data-jl-persona="student"][data-jl-product="study-guides"] .jl-hero + .jl-achievers { padding-top: 0; }
.jl.jl-copy[data-jl-persona="student"][data-jl-product="study-guides"] .jl-hero + .jl-achievers .jl-achievers__inner { padding-top: 0; }
@media (min-width: 1200px) {
  .jl.jl-copy .jl-hero--student-study-guides { padding-top: 74px; }
  .jl.jl-copy .jl-hero--student-study-guides .jl-hero__usps { flex-wrap: nowrap; justify-content: space-between; width: 100%; }
  .jl.jl-copy .jl-hero--student-study-guides .jl-hero__usps li { font-size: clamp(12px, 1.05vw, 16px); letter-spacing: -.3px; }
}
@media (min-width: 1920px) {
  .jl.jl-copy .jl-hero--student-study-guides { padding-top: 38px; }
}
@media (max-width: 1199px) {
  .jl.jl-copy .jl-hero--student-study-guides { padding-top: 24px; }
  .jl.jl-copy .jl-hero--student-study-guides > .jl-mid { margin-top: 0; }
  .jl.jl-copy[data-jl-persona="student"][data-jl-product="study-guides"] .jl-hero__media { flex: none; }
  .jl.jl-copy :is(.jl-hero--teacher-jeddai, .jl-hero--school-jeddai, .jl-hero--teacher-study-guides, .jl-hero--school-study-guides) .jl-hero__deco svg:first-child,
  .jl.jl-copy .jl-hero--student-study-guides .jl-hero__deco svg:first-child { left: -510px !important; top: -330px !important; }
}

/* Catalogue artwork stays in the outer gutters, clear of copy and controls. */
.jl-cat__hero-stage { --jl-catalogue-copy-half: 311px; }
.jl-cat__hero .jl-covers { right: calc(50% + var(--jl-catalogue-copy-half) + 28px); overflow: clip; }
.jl-cat__hero .jl-cover--contemporary { left: auto; right: 48px; }
.jl-card__cover-link { display: grid; place-items: center; position: absolute; inset: 0; color: inherit; }
.jl-card__cover-link:focus-visible { outline: 3px solid var(--jl-purple); outline-offset: -4px; border-radius: inherit; }
.jl-card__cover-link > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jl-card__badge { pointer-events: none; }
@media (max-width: 1180px) {
  .jl-cat__hero-stage { --jl-catalogue-copy-half: 290px; }
}

@media (min-width: 1500px) {
  .jl.jl-copy[data-jl-persona="generic"][data-jl-product="generic"] .jl-section--journey .jl-section__head { margin-bottom: 104px; }
}

/* A shorter preference row leaves flex space; the wordmark keeps its brand size. */
.jl-site-header__brand > :is(img, svg) { width: 213px; max-width: 100%; height: auto; max-height: 54px; }

/* Study Guides: Figma's 1920px canvas leaves 154px between the feature panel
   and reviews. Scale the vectors and that space together so the review fill
   meets the complete wave instead of cutting across its curved top. */
.jl.jl-copy[data-jl-product="study-guides"] .jl-section--platform-tabs { margin-bottom: 0; background-color: transparent; }
.jl.jl-copy .jl-study-guides-transition { height: auto; aspect-ratio: 1920 / 154; }
.jl.jl-copy .jl-study-guides-transition .jl-deco { left: 0; width: 100%; max-width: none; height: 100%; transform: none; }
.jl-study-guides-transition svg { max-width: none; height: auto; }
.jl-study-guides-transition .jl-study-guides-wave { left: -9.427083333%; top: -33.766233766%; width: 121.314404762%; }
/* The exported stroke bounds include 3px beyond the Figma vector origin. */
.jl-study-guides-transition .jl-study-guides-wave-left { left: 5.482177734%; top: -15.584415584%; width: 43.541666667%; }
.jl-study-guides-transition .jl-study-guides-wave-right { left: 47.604166667%; top: -65.584415584%; width: 49.40109375%; }
.jl.jl-copy .jl-study-guides-transition + .jl-section { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
/* The following journey overlaps this card's whitespace on wide screens;
   keep its transparent section box from intercepting the catalogue CTA. */
.jl.jl-copy[data-jl-product="study-guides"] .jl-section--syllabus { z-index: 2; }

/* Keep the completed closing stroke below the panel, including when copy
   increases its height. The student page's approved placement is shared. */
.jl.jl-copy[data-jl-product="study-guides"] .jl-ctaband__deco svg:first-child { top: calc(100% - 240px) !important; }
/* Keep the upper arc in its Figma corner as the viewport narrows. */
.jl.jl-copy[data-jl-product="study-guides"] .jl-ctaband__deco svg:last-child { width: min(547.392px, 28.51vw); height: auto; right: max(-122.7px, -6.390625vw) !important; top: max(-63.63px, -3.3140625vw) !important; }
.jl.jl-copy[data-jl-product="study-guides"] .jl-ctaband .jl-h2--display { max-width: 880px; }
@media (max-width: 900px) {
  .jl.jl-copy[data-jl-product="study-guides"] .jl-ctaband__deco svg:first-child { top: calc(100% - 140px) !important; }
}
/* Exact two-second path timelines from Figma 633:12377/12378 and
   633:12385/12386; the school and student frames use the same tracks. */
@media (prefers-reduced-motion: no-preference) {
  .jl.jl-copy .jl-study-guides-wave-left path[pathLength] { stroke-dashoffset: 0; animation: jl-study-guides-wave-left-draw 2s linear infinite; }
  .jl.jl-copy .jl-study-guides-wave-right path[pathLength] { stroke-dashoffset: 0; animation: jl-study-guides-wave-right-draw 2s linear infinite; }
  .jl.jl-copy[data-jl-product="study-guides"] .jl-ctaband__deco svg:first-child path[pathLength] { stroke-dashoffset: 0; animation: jl-study-guides-closing-left-draw 2s linear infinite; }
  .jl.jl-copy[data-jl-product="study-guides"] .jl-ctaband__deco svg:last-child path[pathLength] { stroke-dashoffset: 0; animation: jl-study-guides-closing-right-draw 2s linear infinite; }
}
@keyframes jl-study-guides-wave-left-draw {
  0% { animation-timing-function: ease-in-out; stroke-dasharray: 0 1; visibility: hidden; }
  40.15%, 100% { stroke-dasharray: 1 1; visibility: visible; }
}
@keyframes jl-study-guides-wave-right-draw {
  0% { stroke-dasharray: 0 1; visibility: hidden; }
  40.1% { animation-timing-function: ease-in-out; stroke-dasharray: 0 1; visibility: hidden; }
  80.25%, 100% { stroke-dasharray: 1 1; visibility: visible; }
}
@keyframes jl-study-guides-closing-left-draw {
  0% { stroke-dasharray: 0 1; visibility: hidden; }
  19.808% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); stroke-dasharray: 0 1; visibility: hidden; }
  80.25%, 100% { stroke-dasharray: 1 1; visibility: visible; }
}
@keyframes jl-study-guides-closing-right-draw {
  0% { animation-timing-function: cubic-bezier(.5, 0, .5, 1); stroke-dasharray: 0 1; visibility: hidden; }
  40.15%, 100% { stroke-dasharray: 1 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .jl.jl-copy .jl-study-guides-transition path[pathLength],
  .jl.jl-copy[data-jl-product="study-guides"] .jl-ctaband__deco path[pathLength] { animation: none; stroke-dasharray: 1 1; stroke-dashoffset: 0; visibility: visible; }
}

/* Feature demos keep their full 1080p frame instead of stretching or cropping
   to the capability list's height. Hidden panels must also stay out of grid. */
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__panel--video {
  align-self: center; display: block; height: auto; aspect-ratio: 16 / 9;
}
.jl.jl-copy .jl-section--platform-tabs .jl-tabs__panel[hidden] { display: none; }
.jl-tabs__panel--video .jl-video { border-radius: 0; }
.jl-tabs__panel--video .jl-video__sound { display: none; }