/** Shopify CDN: Minification failed

Line 1740:25 Unexpected "}"

**/
/* ============================================================
   jt5se-lp.css — JrTrack 5 SE October PDP refresh (MW-960)
   ------------------------------------------------------------
   Source: the static JT5 SE lander (index.html) — BOTH <style> blocks,
   verbatim, in the original order:
     1. lander body styles
     2. hero styles (JT5SE HERO:CSS:START .. END, the ".jh" rules)

   SCOPING (mirrors #jt5r2-root / #btso-root in the school-fi port):
   every selector is prefixed with :is(#jt5se-lp, .jt5se-lp), so nothing
   leaks into the theme header / footer. Every jt5se-lp-* section wrapper
   carries .jt5se-lp (schema "class"), and #jt5se-lp also works if a
   template wraps the sections in a single root element. The prefix has the
   specificity of an id, which is what lets these rules outrank theme rules
   on bare elements (blockquote, cite, b, small, ...).
     * ":root" token overrides   -> the scope root
     * "html" / "body" rules     -> html:has(.jt5se-lp) / body:has(.jt5se-lp)
                                    (only active on pages using these sections)
     * "*" resets                -> scoped descendants only
   Host-header / page-chrome hooks (MainContent padding, sticky header-inline,
   header shadow via data-jh-past, body:has(.sbar) bottom padding) are
   page-scoped. Do not edit cosmo-nav / header theme files.
   Class names and IDs the JS depends on are unchanged.
   ============================================================ */

/* ===== 1. Lander body styles ===== */
/* Brand direction update: no more beige backgrounds. White is the default,
   #f7f7f7 neutral gray for alternate surfaces. Overrides the token defaults. */
:is(#jt5se-lp,.jt5se-lp) {
  --bg-1: #ffffff;
  --bg-2: #f7f7f7;
  --bg-3: #efefef;
}

/* ---------- Base & shared ---------- */
:is(#jt5se-lp,.jt5se-lp) * { margin: 0; padding: 0; box-sizing: border-box; }
html:has(.jt5se-lp) { scroll-behavior: smooth; }
body:has(.jt5se-lp) { background: #ffffff; }

/* Clip horizontal bleed on lander sections. */
:is(#jt5se-lp, .jt5se-lp) {
  overflow-x: clip;
}

/* Theme #body { overflow-x: hidden } becomes a non-scrolling scrollport and
   cancels position:sticky while <html> scrolls. Use clip instead — it still
   kills horizontal bleed but does NOT create a scroll container, so Cosmo
   sticky can pin (verified against homepage sticky settings). */
body#body:has(.jt5se-lp),
html:has(.jt5se-lp) {
  overflow-x: clip;
  overflow-y: visible;
}

/* Theme adds 50px #MainContent padding — remove on this lander. */
body:has(.jt5se-lp) #MainContent {
  padding-top: 0 !important;
  background-color: #f7f7f7;
}

/* Pin the header SECTION (child of tall .t4s-website-wrapper). .site-header
   alone is nested in short parents, so sticky has no runway — no header
   file edits, page CSS only. */
body:has(.jt5se-lp) #shopify-section-header-inline {
  position: sticky;
  top: 0;
  z-index: 99;
  overflow: visible;
}

/* This lander is not a dark full-bleed hero — keep the Cosmo bar solid white
   (dark ink) from the start, same scrolled look as the homepage. */
body:has(.jt5se-lp) #cosmo-nav .site-header {
  --fg: #12151C;
  --pill: rgba(18, 21, 28, 0.055);
  background: #fff;
  border-bottom-color: rgba(18, 21, 28, 0.10);
}
body:has(.jt5se-lp) #cosmo-nav .site-header .logo-white { opacity: 0; }
body:has(.jt5se-lp) #cosmo-nav .site-header .logo-dark { opacity: 1; }

/* ------------------------------------------------------------------
   Storefront hardening. Inherited values lose to ANY direct theme rule
   on a bare element, whatever its specificity, so anything we were
   relying on inheriting has to be declared outright here. Scoped to
   #btso-root by the GemPages builder, which outranks the theme.
   Reproduced with a Dawn-style `blockquote{background}` +
   `small,b,cite{font-family:Georgia}` in /tmp/gp-test/btso-hostile.html.
   ------------------------------------------------------------------ */
:is(#jt5se-lp,.jt5se-lp) blockquote,
:is(#jt5se-lp,.jt5se-lp) figure,
:is(#jt5se-lp,.jt5se-lp) dl,
:is(#jt5se-lp,.jt5se-lp) dd,
:is(#jt5se-lp,.jt5se-lp) dt,
:is(#jt5se-lp,.jt5se-lp) fieldset {
  margin: 0; padding: 0; background: none; border: 0;
  border-radius: 0; box-shadow: none; quotes: none; font-style: normal;
}
:is(#jt5se-lp,.jt5se-lp) blockquote::before,
:is(#jt5se-lp,.jt5se-lp) blockquote::after,
:is(#jt5se-lp,.jt5se-lp) q::before,
:is(#jt5se-lp,.jt5se-lp) q::after { content: none; }
/* Bare-element font rules in the theme beat inheritance, so name every text
   element we use rather than relying on the cascade reaching them. */
:is(#jt5se-lp,.jt5se-lp) p,
:is(#jt5se-lp,.jt5se-lp) span,
:is(#jt5se-lp,.jt5se-lp) div,
:is(#jt5se-lp,.jt5se-lp) a,
:is(#jt5se-lp,.jt5se-lp) li,
:is(#jt5se-lp,.jt5se-lp) dt,
:is(#jt5se-lp,.jt5se-lp) dd,
:is(#jt5se-lp,.jt5se-lp) label,
:is(#jt5se-lp,.jt5se-lp) cite,
:is(#jt5se-lp,.jt5se-lp) small,
:is(#jt5se-lp,.jt5se-lp) b,
:is(#jt5se-lp,.jt5se-lp) strong,
:is(#jt5se-lp,.jt5se-lp) em,
:is(#jt5se-lp,.jt5se-lp) i,
:is(#jt5se-lp,.jt5se-lp) var,
:is(#jt5se-lp,.jt5se-lp) abbr,
:is(#jt5se-lp,.jt5se-lp) figcaption,
:is(#jt5se-lp,.jt5se-lp) button,
:is(#jt5se-lp,.jt5se-lp) input,
:is(#jt5se-lp,.jt5se-lp) select,
:is(#jt5se-lp,.jt5se-lp) textarea,
:is(#jt5se-lp,.jt5se-lp) th,
:is(#jt5se-lp,.jt5se-lp) td,
:is(#jt5se-lp,.jt5se-lp) h1,
:is(#jt5se-lp,.jt5se-lp) h2,
:is(#jt5se-lp,.jt5se-lp) h3,
:is(#jt5se-lp,.jt5se-lp) h4,
:is(#jt5se-lp,.jt5se-lp) h5,
:is(#jt5se-lp,.jt5se-lp) h6 {
  font-family: inherit;
}
:is(#jt5se-lp,.jt5se-lp) cite,
:is(#jt5se-lp,.jt5se-lp) address { font-style: normal; }
/* The theme prepends its own dash to <cite>, which doubled ours. */
:is(#jt5se-lp,.jt5se-lp) cite::before,
:is(#jt5se-lp,.jt5se-lp) cite::after { content: none; } /* clip (not hidden): contains bleed without creating a scroll container that would break position:sticky (wipe section) when scoped to #jt5r2-root */
:is(#jt5se-lp,.jt5se-lp) img,
:is(#jt5se-lp,.jt5se-lp) video { display: block; max-width: 100%; }
:is(#jt5se-lp,.jt5se-lp) button { font-family: var(--font-sans); cursor: pointer; }
:is(#jt5se-lp,.jt5se-lp) .wrap { width: min(1440px, 92vw); margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .wrap-tight { width: min(1080px, 92vw); margin: 0 auto; }

:is(#jt5se-lp,.jt5se-lp) section { position: relative; }

:is(#jt5se-lp,.jt5se-lp) .eyebrow { display: block; margin-bottom: var(--space-4); }
:is(#jt5se-lp,.jt5se-lp) .eyebrow.on-dark { color: var(--cosmo-haze); }

:is(#jt5se-lp,.jt5se-lp) h1,
:is(#jt5se-lp,.jt5se-lp) h2 { text-wrap: balance; }
:is(#jt5se-lp,.jt5se-lp) .h-display {
  font-weight: var(--fw-heavy);
  font-size: clamp(44px, 6.5vw, 92px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
:is(#jt5se-lp,.jt5se-lp) .h-xl { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.08; letter-spacing: var(--tracking-display); font-weight: var(--fw-heavy); }
:is(#jt5se-lp,.jt5se-lp) .h-lg { font-size: clamp(28px, 3.2vw, 44px); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: var(--fw-heavy); }
:is(#jt5se-lp,.jt5se-lp) .h-md { font-size: clamp(20px, 2vw, 26px); line-height: var(--lh-snug); font-weight: var(--fw-heavy); }

:is(#jt5se-lp,.jt5se-lp) .lede { max-width: 56ch; }
:is(#jt5se-lp,.jt5se-lp) .on-dark,
:is(#jt5se-lp,.jt5se-lp) .on-dark p,
:is(#jt5se-lp,.jt5se-lp) .on-dark h2,
:is(#jt5se-lp,.jt5se-lp) .on-dark h3 { color: var(--fg-on-dark); }

/* Pill buttons */
:is(#jt5se-lp,.jt5se-lp) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: var(--radius-pill);
  font-size: var(--fs-body); font-weight: var(--fw-heavy);
  text-decoration: none; border: none;
  transition: background var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
  will-change: transform;
}
:is(#jt5se-lp,.jt5se-lp) .btn:hover { text-decoration: none; transform: translateY(-1px); }
:is(#jt5se-lp,.jt5se-lp) .btn-primary { background: var(--cta-bg); color: var(--cta-fg); }
:is(#jt5se-lp,.jt5se-lp) .btn-primary:hover { background: var(--cta-bg-hover); box-shadow: 0 10px 28px -10px rgba(0, 104, 255, 0.55); }
:is(#jt5se-lp,.jt5se-lp) .btn-ghost { background: #fff; color: #10131a; }
:is(#jt5se-lp,.jt5se-lp) .btn-ghost:hover { background: var(--bg-3); }
:is(#jt5se-lp,.jt5se-lp) .btn-outline-dark { background: transparent; color: var(--fg-1); box-shadow: inset 0 0 0 1.5px var(--border-2); }
:is(#jt5se-lp,.jt5se-lp) .btn-outline-dark:hover { box-shadow: inset 0 0 0 1.5px var(--border-strong); }
:is(#jt5se-lp,.jt5se-lp) .btn-sm { padding: 11px 22px; font-size: var(--fs-body-sm); }
/* Added for the offer hero: light outline on the navy stage, plus a large size. */
:is(#jt5se-lp,.jt5se-lp) .btn-outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5); }
:is(#jt5se-lp,.jt5se-lp) .btn-outline-light:hover { box-shadow: inset 0 0 0 1.5px #fff; background: rgba(255,255,255,0.08); }
:is(#jt5se-lp,.jt5se-lp) .btn-lg { padding: 19px 40px; font-size: var(--fs-body-lg); }

/* Round arrow buttons (carousels, stepper) */
:is(#jt5se-lp,.jt5se-lp) .arrow-btn {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); border: 1px solid var(--border-1);
  color: #10131a; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), opacity var(--dur-base);
}
:is(#jt5se-lp,.jt5se-lp) .arrow-btn:hover { background: #fff; transform: scale(1.05); }
:is(#jt5se-lp,.jt5se-lp) .arrow-btn:disabled { opacity: 0.35; cursor: default; transform: none; }
:is(#jt5se-lp,.jt5se-lp) .arrow-btn svg { width: 22px; height: 22px; }
:is(#jt5se-lp,.jt5se-lp) .arrow-btn.dark { background: rgba(5, 43, 93, 0.85); color: #fff; border-color: transparent; }
:is(#jt5se-lp,.jt5se-lp) .arrow-btn.dark:hover { background: var(--cosmo-orbit); }
/* School-Fi carousel arrows: solid navy so they pop on the light grey section */
:is(#jt5se-lp,.jt5se-lp) .closer .arrow-btn { background: var(--cosmo-orbit); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(5, 20, 40, 0.3); }
:is(#jt5se-lp,.jt5se-lp) .closer .arrow-btn:hover { background: var(--cosmo-pulse); }

/* Scroll reveal */
:is(#jt5se-lp,.jt5se-lp) .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-entry), transform 0.9s var(--ease-entry); }
:is(#jt5se-lp,.jt5se-lp) .reveal.in { opacity: 1; transform: none; }
:is(#jt5se-lp,.jt5se-lp) .reveal-d1 { transition-delay: 0.08s; }
:is(#jt5se-lp,.jt5se-lp) .reveal-d2 { transition-delay: 0.16s; }
:is(#jt5se-lp,.jt5se-lp) .reveal-d3 { transition-delay: 0.24s; }

/* ---------- 00 Promo bar ---------- */
:is(#jt5se-lp,.jt5se-lp) .promo {
  background: var(--cosmo-orbit); color: var(--fg-on-dark);
  text-align: center; font-size: var(--fs-body-sm);
  padding: 11px 16px; position: relative; z-index: 60;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(#jt5se-lp,.jt5se-lp) .promo strong { color: var(--cosmo-haze); font-weight: var(--fw-heavy); }
/* Offer bar additions: pulsing dot + live countdown */
:is(#jt5se-lp,.jt5se-lp) .promo { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 70; }
:is(#jt5se-lp,.jt5se-lp) .promo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cosmo-haze); animation: pulse-dot 2.2s var(--ease-standard) infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
:is(#jt5se-lp,.jt5se-lp) .promo-clock { font-variant-numeric: tabular-nums; font-weight: var(--fw-heavy); color: #fff; }
/* Flex items default to min-width:auto, so the long offer string refused to
   wrap and bled off both edges on phones. */
:is(#jt5se-lp,.jt5se-lp) .promo > span { min-width: 0; }
@media (max-width: 600px) { :is(#jt5se-lp,.jt5se-lp) .promo { font-size: var(--fs-caption); gap: 6px; padding: 9px 12px; } }

/* ---------- 01 Nav ---------- */
:is(#jt5se-lp,.jt5se-lp) .nav {
  position: sticky; top: 0; z-index: 50;
  margin-bottom: -76px; /* hero tucks underneath */
  height: 76px; display: flex; align-items: center;
  transition: background 0.35s var(--ease-standard), box-shadow 0.35s var(--ease-standard);
}
:is(#jt5se-lp,.jt5se-lp) .nav-inner { width: min(1440px, 94vw); margin: 0 auto; display: flex; align-items: center; gap: 40px; }
:is(#jt5se-lp,.jt5se-lp) .nav-logo { position: relative; height: 26px; width: 132px; flex: 0 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .nav-logo img { position: absolute; inset: 0; height: 26px; width: auto; transition: opacity 0.3s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .nav-logo .logo-dark { opacity: 0; }
:is(#jt5se-lp,.jt5se-lp) .nav-links { display: flex; gap: 32px; margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .nav-links a {
  color: rgba(255,255,255,0.92); font-size: 15px; font-weight: var(--fw-regular);
  text-decoration: none; transition: color 0.3s var(--ease-standard), opacity var(--dur-fast);
}
:is(#jt5se-lp,.jt5se-lp) .nav-links a:hover { opacity: 0.7; text-decoration: none; }
:is(#jt5se-lp,.jt5se-lp) .nav-cta { flex: 0 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .nav .btn-nav {
  padding: 11px 22px; border-radius: var(--radius-pill); font-size: 14px; font-weight: var(--fw-heavy);
  background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  text-decoration: none; display: inline-block;
  transition: background 0.3s var(--ease-standard), color 0.3s var(--ease-standard), border-color 0.3s;
}
:is(#jt5se-lp,.jt5se-lp) .btn-nav:hover { background: rgba(255,255,255,0.28); text-decoration: none; }
:is(#jt5se-lp,.jt5se-lp) .nav.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07); }
:is(#jt5se-lp,.jt5se-lp) .nav.scrolled .logo-white { opacity: 0; }
:is(#jt5se-lp,.jt5se-lp) .nav.scrolled .logo-dark { opacity: 1; }
:is(#jt5se-lp,.jt5se-lp) .nav.scrolled .nav-links a { color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .nav.scrolled .btn-nav { background: var(--cta-bg); color: #fff; border-color: transparent; }
:is(#jt5se-lp,.jt5se-lp) .nav.scrolled .btn-nav:hover { background: var(--cta-bg-hover); }

/* ============================================================
   02 OFFER HERO — split panel: navy copy card on the left with a rounded
   inner edge, light product stage on the right. The nav is a normal light
   bar above it now rather than an overlay, so neither panel fights it.
   ============================================================ */
:is(#jt5se-lp,.jt5se-lp) .ohero { position: relative; background: #fff; }
:is(#jt5se-lp,.jt5se-lp) .ohero-split {
  display: grid; grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
  align-items: stretch; min-height: clamp(480px, 68vh, 660px);
}
:is(#jt5se-lp,.jt5se-lp) .ohero-panel {
  position: relative;
  background:
    radial-gradient(120% 120% at 12% 8%, rgba(0, 104, 255, 0.30) 0%, rgba(5, 43, 93, 0) 62%),
    linear-gradient(158deg, #0A3A78 0%, #062F63 46%, #041F3E 100%);
  border-radius: 0 clamp(24px, 3vw, 44px) clamp(24px, 3vw, 44px) 0;
  display: flex; align-items: center;
  padding: clamp(40px, 6vh, 76px) clamp(28px, 4vw, 68px);
  padding-left: max(clamp(28px, 4vw, 68px), calc((100vw - min(1440px, 92vw)) / 2));
}
:is(#jt5se-lp,.jt5se-lp) .ohero-copy { color: #fff; width: 100%; max-width: 560px; margin-left: auto; }

:is(#jt5se-lp,.jt5se-lp) .ohero-eyebrow {
  display: block; font-size: clamp(12px, 1.05vw, 15px); font-weight: var(--fw-heavy);
  letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.88);
  margin-bottom: clamp(16px, 2.4vh, 26px);
}
:is(#jt5se-lp,.jt5se-lp) .ohero-eyebrow i { font-style: normal; color: rgba(255,255,255,0.42); margin: 0 6px; }

:is(#jt5se-lp,.jt5se-lp) .ohero-h1 {
  color: #fff; font-weight: var(--fw-heavy);
  font-size: clamp(38px, 4.6vw, 68px); line-height: 1.02;
  letter-spacing: var(--tracking-display); text-wrap: balance; max-width: 12ch;
}
:is(#jt5se-lp,.jt5se-lp) .ohero-h1 em { font-style: normal; color: var(--cosmo-haze); }

:is(#jt5se-lp,.jt5se-lp) .ohero-sub {
  margin-top: clamp(16px, 2.4vh, 26px); font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5; color: rgba(255,255,255,0.86); max-width: 40ch; font-weight: var(--fw-light);
}
:is(#jt5se-lp,.jt5se-lp) .ohero-cta {
  margin-top: clamp(22px, 3.2vh, 36px);
  padding: 18px clamp(26px, 2.6vw, 42px); font-size: clamp(16px, 1.35vw, 19px);
}
:is(#jt5se-lp,.jt5se-lp) .ohero-cta i { font-style: normal; opacity: 0.5; margin: 0 4px; }



/* Light product stage */
:is(#jt5se-lp,.jt5se-lp) .ohero-art {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 4vh, 56px) clamp(16px, 3vw, 52px);
}
:is(#jt5se-lp,.jt5se-lp) .ohero-product {
  width: 100%; height: auto;
  max-height: clamp(300px, 52vh, 520px); object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(10, 30, 60, 0.20));
}

/* Free-gift seal. Red is deliberately outside the Cosmo palette so it reads
   as a gold seal on the seam between the two hero panels. */
:is(#jt5se-lp,.jt5se-lp) .gift-badge {
  /* Straddles the seam between the navy panel and the light stage: anchored to
     the panel's right edge and pulled half its own width past it. */
  position: absolute; z-index: 4; top: 50%; right: 0;
  transform: translate(50%, -50%) rotate(-8deg);
  width: clamp(132px, 12.6vw, 194px); aspect-ratio: 1;
  display: grid; place-items: center;
  filter: drop-shadow(0 16px 30px rgba(10, 30, 60, 0.28));
}
:is(#jt5se-lp,.jt5se-lp) .gift-badge svg { grid-area: 1 / 1; width: 100%; height: 100%; }
:is(#jt5se-lp,.jt5se-lp) .gift-badge svg circle { fill: var(--cosmo-haze); }
:is(#jt5se-lp,.jt5se-lp) .gift-badge-text {
  grid-area: 1 / 1; width: 82%; text-align: center; color: #fff; line-height: 0.95;
  font-size: clamp(30px, 3.1vw, 46px); font-weight: var(--fw-heavy);
  letter-spacing: -0.03em;
}
:is(#jt5se-lp,.jt5se-lp) .gift-badge-text i { display: block; font-style: normal; font-size: 0.42em; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 3px; opacity: 0.85; }
:is(#jt5se-lp,.jt5se-lp) .gift-badge-text em { display: block; font-style: normal; font-size: 0.32em; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 5px; opacity: 0.85; line-height: 1.15; }

/* Terms line under a CTA. Lost in an earlier hero-CSS rewrite, which left it
   inheriting body colour on navy — that was the "low contrast, runs to the
   right" problem. Explicit colour and a hard width cap. */
:is(#jt5se-lp,.jt5se-lp) .cta-disclosure {
  margin-top: 12px; font-size: var(--fs-caption); line-height: 1.5;
  color: rgba(255,255,255,0.82); max-width: 42ch;
}
:is(#jt5se-lp,.jt5se-lp) .cta-disclosure a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Nav override: the split hero has a light right half, so a transparent
   overlay nav with white links would vanish over it. Light bar by default. */
:is(#jt5se-lp,.jt5se-lp) .nav { margin-bottom: 0; background: #fff; }
:is(#jt5se-lp,.jt5se-lp) .nav .logo-white { opacity: 0; }
:is(#jt5se-lp,.jt5se-lp) .nav .logo-dark { opacity: 1; }
:is(#jt5se-lp,.jt5se-lp) .nav .nav-links a { color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .nav .btn-nav { background: var(--cta-bg); color: #fff; border-color: transparent; }
:is(#jt5se-lp,.jt5se-lp) .nav .btn-nav:hover { background: var(--cta-bg-hover); color: #fff; }
:is(#jt5se-lp,.jt5se-lp) .nav.scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }


/* ============================================================
   BOSS DESIGN — new top-of-page sections (Aug 2026 mockup).
   Everything the lander had before now lives below these.
   ============================================================ */

/* --- gold announcement bar (replaces the navy one) --- */
:is(#jt5se-lp,.jt5se-lp) .gbar { background: var(--cosmo-haze); color: #4A3A1C; text-align: center; padding: 11px 16px; }
:is(#jt5se-lp,.jt5se-lp) .gbar span { font-size: var(--fs-body-sm); font-weight: var(--fw-heavy); letter-spacing: 0.1em; text-transform: uppercase; }

/* --- thin offer strip under the Cosmo nav --- */
/* Sits below the sticky Cosmo header (not on top of it). JS toggles .is-on
   once the trusted-numbers section reaches the top of the viewport. */
:is(#jt5se-lp,.jt5se-lp) .ostrip { background: var(--bg-1); border-bottom: 1px solid var(--border-1);
  position: fixed; top: 70px; left: 0; right: 0; z-index: 40;
  transform: translateY(calc(-100% - 70px)); pointer-events: none;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .ostrip.is-on { transform: none; pointer-events: auto; }
:is(#jt5se-lp,.jt5se-lp) .ostrip.stuck { box-shadow: 0 6px 20px rgba(5,43,93,0.10); }
:is(#jt5se-lp,.jt5se-lp) .ostrip-in { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); padding: 14px 0; flex-wrap: wrap; }
:is(#jt5se-lp,.jt5se-lp) .ostrip-logo { flex: 0 0 auto; margin-right: auto; display: block; }
:is(#jt5se-lp,.jt5se-lp) .ostrip-logo img { height: 24px; width: auto; display: block; }
:is(#jt5se-lp,.jt5se-lp) .ostrip-free { color: var(--cosmo-spark); font-weight: var(--fw-heavy); font-size: var(--fs-body); }
:is(#jt5se-lp,.jt5se-lp) .ostrip-price { text-align: right; line-height: 1.15; }
:is(#jt5se-lp,.jt5se-lp) .ostrip-price b { display: block; font-size: var(--fs-body-sm); font-weight: var(--fw-heavy); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .ostrip-price small { font-size: 11px; color: var(--fg-2); }
/* struck-through was-price, wherever the offer prints one */
:is(#jt5se-lp,.jt5se-lp) .skit-line s,
:is(#jt5se-lp,.jt5se-lp) .skit-list .is-price s { color: var(--fg-3); font-weight: var(--fw-regular); margin-right: 4px; }

/* --- hero --- */
:is(#jt5se-lp,.jt5se-lp) .dhero { background: var(--bg-2); padding: clamp(40px, 6vh, 84px) 0 clamp(40px, 6vh, 84px); }
/* min-height makes the hero own the fold; the art column carries the extra
   size so the space fills with product rather than blank background. */
:is(#jt5se-lp,.jt5se-lp) .dhero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; min-height: min(74vh, 800px); }
/* Two lines, not three: this variant's headline is longer than the other
   landers' so the cap comes down to fit the copy column. */
:is(#jt5se-lp,.jt5se-lp) .dhero h1 { font-size: clamp(36px, 5.2vw, 70px); line-height: 1.02; letter-spacing: var(--tracking-display); color: var(--fg-1); max-width: 14ch; }
:is(#jt5se-lp,.jt5se-lp) .dhero h1 em { font-style: normal; color: var(--cosmo-haze); }
:is(#jt5se-lp,.jt5se-lp) .dhero-sub { margin-top: var(--space-5); font-size: clamp(16px, 1.4vw, 19px); color: var(--fg-2); max-width: 34ch; line-height: 1.5; }
:is(#jt5se-lp,.jt5se-lp) .dhero-sub b { color: var(--fg-1); font-weight: var(--fw-heavy); }
:is(#jt5se-lp,.jt5se-lp) .dhero .btn { margin-top: clamp(22px, 3vh, 34px); }
:is(#jt5se-lp,.jt5se-lp) .dhero-art { position: relative; }
:is(#jt5se-lp,.jt5se-lp) .dhero-art img { width: 100%; height: auto; display: block; }
:is(#jt5se-lp,.jt5se-lp) .dhero-seal {
  position: absolute; top: 0; right: 4%; width: clamp(88px, 8.6vw, 124px); aspect-ratio: 1;
  border-radius: 50%; background: var(--cosmo-haze); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 14px 30px -12px rgba(150,110,30,0.5);
}
:is(#jt5se-lp,.jt5se-lp) .dhero-seal b { font-size: clamp(15px, 1.4vw, 20px); font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
:is(#jt5se-lp,.jt5se-lp) .dhero-seal span { font-size: clamp(10px, 0.9vw, 13px); letter-spacing: 0.02em; }

/* --- navy icon feature bar --- */
:is(#jt5se-lp,.jt5se-lp) .fbar { background: var(--cosmo-orbit); padding: clamp(46px, 7vh, 82px) 0; }
:is(#jt5se-lp,.jt5se-lp) .fbar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.6vw, 28px); }
:is(#jt5se-lp,.jt5se-lp) .fbar-item { text-align: center; color: var(--fg-on-dark); }
:is(#jt5se-lp,.jt5se-lp) .fbar-item svg { width: clamp(32px, 2.9vw, 42px); height: clamp(32px, 2.9vw, 42px); margin: 0 auto 16px; display: block; color: #fff; }
:is(#jt5se-lp,.jt5se-lp) .fbar-item p { color: rgba(255,255,255,0.92); font-size: clamp(14px, 1.2vw, 18px); line-height: 1.35; }

/* --- starter kit block --- */
:is(#jt5se-lp,.jt5se-lp) .skit { background: var(--bg-2); padding: clamp(56px, 8vh, 104px) 0; }
:is(#jt5se-lp,.jt5se-lp) .skit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
/* --- starter-kit gallery --- */
:is(#jt5se-lp,.jt5se-lp) .skit-gallery { display: grid; gap: clamp(10px, 1.2vw, 14px); }
:is(#jt5se-lp,.jt5se-lp) .skit-photo { position: relative; background: #EFEBE4; border-radius: var(--radius-xl); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* The seven feature graphics are square and match the section background, so
   they fill the frame edge to edge. Only the cut-out product shot gets inset,
   which is what .is-pad carries. */
:is(#jt5se-lp,.jt5se-lp) .skit-photo img { width: 100%; height: 100%; object-fit: contain; transition: opacity var(--dur-base) var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .skit-photo.is-pad img { padding: 6%; }
:is(#jt5se-lp,.jt5se-lp) .skit-photo.is-swapping img { opacity: 0; }
:is(#jt5se-lp,.jt5se-lp) .sg-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,0.92); box-shadow: var(--shadow-sm);
  color: var(--fg-1); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--dur-base) var(--ease-standard);
}
:is(#jt5se-lp,.jt5se-lp) .sg-nav:hover { background: #fff; }
:is(#jt5se-lp,.jt5se-lp) .sg-nav svg { width: 19px; height: 19px; }
:is(#jt5se-lp,.jt5se-lp) .sg-nav.prev { left: 12px; }
:is(#jt5se-lp,.jt5se-lp) .sg-nav.next { right: 12px; }
:is(#jt5se-lp,.jt5se-lp) .sg-strip {
  display: flex; gap: clamp(6px, 0.8vw, 10px); overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
}
:is(#jt5se-lp,.jt5se-lp) .sg-strip::-webkit-scrollbar { display: none; }
:is(#jt5se-lp,.jt5se-lp) .sg-thumb {
  flex: 0 0 auto; width: clamp(50px, 5.4vw, 62px); aspect-ratio: 1; padding: 0;
  background: #EFEBE4; border: 2px solid transparent; border-radius: 10px;
  overflow: hidden; cursor: pointer; scroll-snap-align: start;
  transition: border-color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
  opacity: 0.72;
}
:is(#jt5se-lp,.jt5se-lp) .sg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
:is(#jt5se-lp,.jt5se-lp) .sg-thumb:hover { opacity: 1; }
:is(#jt5se-lp,.jt5se-lp) .sg-thumb.is-active { border-color: var(--cosmo-haze); opacity: 1; }
:is(#jt5se-lp,.jt5se-lp) .skit-trust { display: flex; gap: clamp(14px, 2vw, 30px); margin-top: 20px; flex-wrap: wrap; }
:is(#jt5se-lp,.jt5se-lp) .skit-trust span { display: flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--fg-2); }
:is(#jt5se-lp,.jt5se-lp) .skit-trust svg { width: 15px; height: 15px; color: var(--cosmo-spark); }
:is(#jt5se-lp,.jt5se-lp) .skit-chip { display: inline-block; background: var(--cosmo-orbit); color: #fff; font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; padding: 8px 18px; border-radius: var(--radius-pill); }
:is(#jt5se-lp,.jt5se-lp) .skit-rate { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
:is(#jt5se-lp,.jt5se-lp) .skit-rate .stars { display: inline-flex; gap: 2px; color: var(--cosmo-spark); }
:is(#jt5se-lp,.jt5se-lp) .skit-rate .stars svg { width: 15px; height: 15px; }
:is(#jt5se-lp,.jt5se-lp) .skit-rate small { color: var(--fg-2); font-size: var(--fs-body-sm); }
:is(#jt5se-lp,.jt5se-lp) .skit h2 { font-size: clamp(30px, 3.6vw, 50px); letter-spacing: var(--tracking-display); }
:is(#jt5se-lp,.jt5se-lp) .skit-line { margin-top: 8px; font-size: clamp(14px, 1.25vw, 18px); color: var(--fg-1); font-weight: var(--fw-heavy); }
:is(#jt5se-lp,.jt5se-lp) .skit-card { margin-top: clamp(18px, 2.4vh, 26px); background: #fff; border-radius: var(--radius-lg); padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow-sm); }
:is(#jt5se-lp,.jt5se-lp) .skit-card > p { font-size: var(--fs-body-sm); color: var(--fg-1); margin-bottom: 16px; }
:is(#jt5se-lp,.jt5se-lp) .skit-list { list-style: none; display: grid; gap: 11px; }
:is(#jt5se-lp,.jt5se-lp) .skit-list li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body-sm); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .skit-list svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--cosmo-pulse); }
:is(#jt5se-lp,.jt5se-lp) .skit-list .inc { margin-left: auto; background: #E3F6E2; color: #1B6B3A; font-size: 10px; font-weight: var(--fw-heavy); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; flex: 0 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .skit-cta { margin-top: clamp(22px, 3vh, 32px); text-align: center; }
:is(#jt5se-lp,.jt5se-lp) .skit .skit-cta { text-align: left; }
:is(#jt5se-lp,.jt5se-lp) .skit .acc-grid { grid-template-columns: 1fr; margin-top: clamp(18px, 2.6vh, 28px); }

/* --- accordion row --- */
:is(#jt5se-lp,.jt5se-lp) .acc { background: var(--bg-2); padding: 0 0 clamp(48px, 7vh, 88px); }
:is(#jt5se-lp,.jt5se-lp) .acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); align-items: start; }
:is(#jt5se-lp,.jt5se-lp) .acc-item { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
:is(#jt5se-lp,.jt5se-lp) .acc-q { width: 100%; background: none; border: none; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(18px, 2.2vw, 26px); font-size: clamp(15px, 1.3vw, 18px); font-weight: var(--fw-heavy); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .acc-q i { font-style: normal; font-size: 22px; color: var(--fg-3); line-height: 1; transition: transform var(--dur-base) var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .acc-item.open .acc-q i { transform: rotate(45deg); }
:is(#jt5se-lp,.jt5se-lp) .acc-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .acc-a p,
:is(#jt5se-lp,.jt5se-lp) .acc-a ul { padding: 0 clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 26px); font-size: var(--fs-body-sm); color: var(--fg-2); }
:is(#jt5se-lp,.jt5se-lp) .acc-a ul { list-style: none; display: grid; gap: 7px; }
:is(#jt5se-lp,.jt5se-lp) .acc-a li::before { content: "· "; color: var(--cosmo-spark); }

:is(#jt5se-lp,.jt5se-lp) .split { background: var(--bg-2); padding: clamp(56px, 8vh, 104px) 0; }
:is(#jt5se-lp,.jt5se-lp) .split-head { text-align: center; max-width: 46ch; margin: 0 auto clamp(26px, 3.6vh, 40px); }
:is(#jt5se-lp,.jt5se-lp) .split-card { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); padding: clamp(22px, 3vw, 44px); max-width: 780px; margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .split-rows { display: grid; }
:is(#jt5se-lp,.jt5se-lp) .split-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: clamp(16px, 2.2vh, 24px) 0; border-bottom: 1px solid var(--border-1); }
:is(#jt5se-lp,.jt5se-lp) .split-row:first-child { padding-top: 0; }
:is(#jt5se-lp,.jt5se-lp) .split-row-main { display: flex; align-items: baseline; gap: clamp(14px, 2vw, 24px); }
:is(#jt5se-lp,.jt5se-lp) .split-amt { font-size: clamp(30px, 3.4vw, 44px); font-weight: var(--fw-heavy); color: var(--cosmo-orbit);
  letter-spacing: var(--tracking-display); flex: 0 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .split-amt small { font-size: 0.42em; font-weight: var(--fw-regular); color: var(--fg-3); margin-left: 2px; }
:is(#jt5se-lp,.jt5se-lp) .split-what { display: block; font-size: clamp(14px, 1.2vw, 16px); color: var(--fg-2); line-height: 1.45; }
:is(#jt5se-lp,.jt5se-lp) .split-what b { display: block; font-size: clamp(16px, 1.4vw, 19px); font-weight: var(--fw-heavy); color: var(--fg-1); margin-bottom: 3px; }
:is(#jt5se-lp,.jt5se-lp) .split-term { flex: 0 0 auto; font-size: var(--fs-caption); font-weight: var(--fw-heavy); color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; padding-top: 6px; }
:is(#jt5se-lp,.jt5se-lp) .split-total { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 44px);
  padding: clamp(22px, 3vh, 32px) 0 clamp(18px, 2.4vh, 26px); }
:is(#jt5se-lp,.jt5se-lp) .split-tot-col { text-align: center; }
:is(#jt5se-lp,.jt5se-lp) .split-tot-lab { display: block; font-size: var(--fs-caption); font-weight: var(--fw-heavy); color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
:is(#jt5se-lp,.jt5se-lp) .split-tot-num { font-size: clamp(34px, 4.4vw, 58px); font-weight: var(--fw-heavy); color: var(--fg-1);
  letter-spacing: var(--tracking-display); line-height: 1; }
:is(#jt5se-lp,.jt5se-lp) .split-tot-num small { font-size: 0.36em; font-weight: var(--fw-regular); color: var(--fg-3); }
:is(#jt5se-lp,.jt5se-lp) .split-tot-col.is-after .split-tot-num { color: #1B6B3A; }
:is(#jt5se-lp,.jt5se-lp) .split-arrow { color: var(--cosmo-haze); flex: 0 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .split-arrow svg { width: clamp(26px, 3vw, 40px); height: clamp(26px, 3vw, 40px); display: block; }
:is(#jt5se-lp,.jt5se-lp) .split-incl { list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, 2vw, 30px); padding-top: clamp(16px, 2.2vh, 22px); border-top: 1px solid var(--border-1); }
:is(#jt5se-lp,.jt5se-lp) .split-incl li { display: flex; align-items: center; gap: 7px; font-size: var(--fs-body-sm); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .split-incl svg { width: 16px; height: 16px; color: #1B6B3A; flex: 0 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .sv { border-top: 1px solid var(--border-1); padding-top: clamp(18px, 2.4vh, 24px); margin-bottom: clamp(18px, 2.4vh, 24px); }
:is(#jt5se-lp,.jt5se-lp) .sv-lab { display: block; text-align: center; font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
:is(#jt5se-lp,.jt5se-lp) .sv-rows { display: grid; gap: 2px; max-width: 460px; margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .sv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: var(--fs-body-sm); color: var(--fg-2); padding: 5px 0; }
:is(#jt5se-lp,.jt5se-lp) .sv-row b { font-weight: var(--fw-regular); color: var(--fg-2); font-variant-numeric: tabular-nums; }
:is(#jt5se-lp,.jt5se-lp) .sv-row.is-sum { border-top: 1px solid var(--border-1); margin-top: 6px; padding-top: 10px; color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .sv-row.is-sum b { font-weight: var(--fw-heavy); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .sv-row.is-ours { color: var(--cosmo-orbit); }
:is(#jt5se-lp,.jt5se-lp) .sv-row.is-ours b { font-weight: var(--fw-heavy); color: var(--cosmo-orbit); }
:is(#jt5se-lp,.jt5se-lp) .sv-save { display: flex; align-items: baseline; justify-content: center; gap: 10px;
  max-width: 460px; margin: 12px auto 0; padding-top: 12px; border-top: 2px solid var(--cosmo-orbit); }
:is(#jt5se-lp,.jt5se-lp) .sv-save span { font-size: var(--fs-body-sm); font-weight: var(--fw-heavy); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .sv-save b { font-size: clamp(22px, 2.4vw, 30px); font-weight: var(--fw-heavy); color: #1B6B3A; letter-spacing: var(--tracking-display); }
:is(#jt5se-lp,.jt5se-lp) .skit-list .inc.is-price { background: #E8EEFF; color: var(--cosmo-orbit); }
:is(#jt5se-lp,.jt5se-lp) .split-cta { display: block; text-align: center; margin: clamp(20px, 2.8vh, 28px) auto 0; max-width: 420px; }
@media (max-width: 700px) {
  :is(#jt5se-lp,.jt5se-lp) .split-row { flex-direction: column; gap: 8px; }
  :is(#jt5se-lp,.jt5se-lp) .split-term { padding-top: 0; }
  :is(#jt5se-lp,.jt5se-lp) .split-row-main { gap: 14px; }
  :is(#jt5se-lp,.jt5se-lp) .split-total { gap: 14px; }
  :is(#jt5se-lp,.jt5se-lp) .split-arrow { transform: rotate(90deg); }
  :is(#jt5se-lp,.jt5se-lp) .split-cta { max-width: 100%; }
}

/* --- photo strip --- */
/* padding, not margin: a margin here would show the white page background
   as a band between two grey sections. */
:is(#jt5se-lp,.jt5se-lp) .pstrip { display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bg-2); padding-top: clamp(30px, 5vh, 68px); }
:is(#jt5se-lp,.jt5se-lp) .pstrip img { width: 100%; height: clamp(150px, 17vw, 250px); object-fit: cover; display: block; }

/* --- trusted by parents --- */
:is(#jt5se-lp,.jt5se-lp) .tparents { background: var(--bg-2); padding: clamp(64px, 9vh, 120px) 0; text-align: center;
  min-height: min(80vh, 900px); display: flex; flex-direction: column; justify-content: center; }
:is(#jt5se-lp,.jt5se-lp) .tparents h2 { font-size: clamp(34px, 4.4vw, 62px); margin-bottom: clamp(36px, 5.5vh, 62px); }
:is(#jt5se-lp,.jt5se-lp) .tp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.4vw, 60px); max-width: 1180px; margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .tp-q .stars { display: inline-flex; gap: 3px; color: var(--cosmo-spark); margin-bottom: 16px; }
:is(#jt5se-lp,.jt5se-lp) .tp-q .stars svg { width: 19px; height: 19px; }
:is(#jt5se-lp,.jt5se-lp) .tp-q p { font-size: clamp(17px, 1.45vw, 22px); font-style: italic; color: var(--fg-1); line-height: 1.5; }
:is(#jt5se-lp,.jt5se-lp) .tp-q cite { display: block; margin-top: 16px; font-style: normal; font-size: clamp(14px, 1.2vw, 17px); font-weight: var(--fw-heavy); color: var(--fg-2); }
:is(#jt5se-lp,.jt5se-lp) .tp-rates { display: flex; align-items: center; justify-content: center; gap: clamp(26px, 3.6vw, 58px); margin: clamp(36px, 5vh, 56px) 0 0; flex-wrap: wrap; }
:is(#jt5se-lp,.jt5se-lp) .tp-rate { text-align: left; }
:is(#jt5se-lp,.jt5se-lp) .tp-rate .lab { font-size: clamp(11px, 0.95vw, 13px); font-weight: var(--fw-heavy); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
:is(#jt5se-lp,.jt5se-lp) .tp-rate .row { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
:is(#jt5se-lp,.jt5se-lp) .tp-rate b { font-size: clamp(19px, 1.7vw, 26px); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .tp-rate .stars { display: inline-flex; gap: 1px; color: var(--cosmo-spark); }
:is(#jt5se-lp,.jt5se-lp) .tp-rate .stars svg { width: 16px; height: 16px; }
:is(#jt5se-lp,.jt5se-lp) .tp-rate small { display: block; font-size: clamp(12px, 1vw, 14px); color: var(--fg-3); margin-top: 4px; }
:is(#jt5se-lp,.jt5se-lp) .tp-sep { width: 1px; align-self: stretch; background: var(--border-1); }

/* --- navy essential band --- */
:is(#jt5se-lp,.jt5se-lp) .eband { background: var(--cosmo-orbit); padding: clamp(44px, 6vh, 76px) 0; }
:is(#jt5se-lp,.jt5se-lp) .eband-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 60px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .eband .eyebrow { color: var(--cosmo-haze); }
:is(#jt5se-lp,.jt5se-lp) .eband h2 { color: #fff; font-size: clamp(24px, 2.6vw, 36px); max-width: 16ch; }
:is(#jt5se-lp,.jt5se-lp) .eband p { color: rgba(255,255,255,0.78); font-size: var(--fs-body-sm); margin-top: 10px; max-width: 40ch; }
:is(#jt5se-lp,.jt5se-lp) .eband-cta { text-align: center; }
:is(#jt5se-lp,.jt5se-lp) .eband-cta small { display: block; margin-top: 12px; color: rgba(255,255,255,0.6); font-size: 11px; line-height: 1.5; max-width: 30ch; }

/* --- made for the mission --- */
:is(#jt5se-lp,.jt5se-lp) .mission { background: var(--bg-2); padding: clamp(78px, 11vh, 150px) 0; }
:is(#jt5se-lp,.jt5se-lp) .mission-head { text-align: center; max-width: 46ch; margin: 0 auto clamp(28px, 4vh, 44px); }
:is(#jt5se-lp,.jt5se-lp) .mission-head h2 { font-size: clamp(28px, 3.4vw, 46px); }
:is(#jt5se-lp,.jt5se-lp) .mission-head p { margin-top: 14px; font-size: clamp(16px, 1.5vw, 21px); color: var(--fg-2); }
/* The centre art is portrait now, so the side columns can breathe and the
   art column narrows: height, not width, is what fills the gap. */
:is(#jt5se-lp,.jt5se-lp) .mission-grid { display: grid; grid-template-columns: 1fr minmax(0, 1.05fr) 1fr; gap: clamp(16px, 2.6vw, 46px); align-items: center; min-height: min(72vh, 760px); }
:is(#jt5se-lp,.jt5se-lp) .mission-col { display: grid; gap: clamp(38px, 7vh, 92px); align-content: center; }
:is(#jt5se-lp,.jt5se-lp) .mission-col.left { text-align: right; justify-items: end; }
:is(#jt5se-lp,.jt5se-lp) .mfeat svg { width: clamp(30px, 2.4vw, 36px); height: clamp(30px, 2.4vw, 36px); color: var(--cosmo-haze); margin-bottom: 12px; }
:is(#jt5se-lp,.jt5se-lp) .mfeat h3 { font-size: clamp(15px, 1.35vw, 19px); line-height: 1.25; max-width: 14ch; }
:is(#jt5se-lp,.jt5se-lp) .mission-art img { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .mission-head { }

/* --- gps tracking --- */
:is(#jt5se-lp,.jt5se-lp) .gtrack { background: var(--bg-1); padding: clamp(56px, 8vh, 104px) 0; }
:is(#jt5se-lp,.jt5se-lp) .gtrack-grid,
:is(#jt5se-lp,.jt5se-lp) .dsafety-grid { grid-auto-rows: 700px; align-items: stretch; }
:is(#jt5se-lp,.jt5se-lp) .gtrack-grid > *:not(.gtrack-art),
:is(#jt5se-lp,.jt5se-lp) .dsafety-grid > *:not(.dsafety-art) { align-self: center; }
:is(#jt5se-lp,.jt5se-lp) .gtrack-art,
:is(#jt5se-lp,.jt5se-lp) .dsafety-art { height: 100%; }
:is(#jt5se-lp,.jt5se-lp) .gtrack-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 70px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .gtrack-art { background: var(--bg-2); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 48px); display: flex; align-items: center; justify-content: center; }
:is(#jt5se-lp,.jt5se-lp) .gtrack-art img { width: auto; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
:is(#jt5se-lp,.jt5se-lp) .gtrack h2 { font-size: clamp(26px, 3vw, 42px); margin-top: 6px; }
:is(#jt5se-lp,.jt5se-lp) .gtrack > .wrap > .gtrack-grid p.lede { margin-top: 14px; }
:is(#jt5se-lp,.jt5se-lp) .gtrack-list { list-style: none; margin-top: clamp(22px, 3vh, 32px); display: grid; gap: 14px; }
:is(#jt5se-lp,.jt5se-lp) .gtrack-list li { display: flex; align-items: center; gap: 11px; font-size: var(--fs-body-sm); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .gtrack-list svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cosmo-spark); }

/* --- safety --- */
:is(#jt5se-lp,.jt5se-lp) .dsafety { background: var(--bg-2); padding: clamp(56px, 8vh, 104px) 0; }
:is(#jt5se-lp,.jt5se-lp) .dsafety-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 70px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .dsafety h2 { font-size: clamp(26px, 3vw, 42px); margin-top: 6px; }
:is(#jt5se-lp,.jt5se-lp) .dsafety-list { list-style: none; margin-top: clamp(22px, 3vh, 32px); display: grid; gap: 14px; }
:is(#jt5se-lp,.jt5se-lp) .dsafety-list li { display: flex; align-items: center; gap: 11px; font-size: var(--fs-body-sm); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .dsafety-list svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--cosmo-spark); }
:is(#jt5se-lp,.jt5se-lp) .dsafety-art { background: #fff; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; padding: clamp(20px, 3vw, 44px); }
:is(#jt5se-lp,.jt5se-lp) .dsafety-art img { width: auto; max-width: 78%; height: 100%; max-height: 100%; object-fit: contain; }

/* ---------- responsive for the new sections ---------- */
@media (max-width: 1000px) {
  :is(#jt5se-lp,.jt5se-lp) .dhero-grid { grid-template-columns: 1fr; gap: clamp(20px, 3vh, 34px); text-align: center; min-height: 0; }
  :is(#jt5se-lp,.jt5se-lp) .dhero h1,
:is(#jt5se-lp,.jt5se-lp) .dhero-sub { max-width: 100%; margin-inline: auto; }
  :is(#jt5se-lp,.jt5se-lp) .dhero-art { order: -1; max-width: 520px; margin: 0 auto; }
  :is(#jt5se-lp,.jt5se-lp) .dhero-seal { right: 0; width: clamp(78px, 20vw, 104px); }
  :is(#jt5se-lp,.jt5se-lp) .fbar-grid { grid-template-columns: repeat(3, 1fr); gap: 26px 12px; }
  :is(#jt5se-lp,.jt5se-lp) .skit-grid,
:is(#jt5se-lp,.jt5se-lp) .gtrack-grid,
:is(#jt5se-lp,.jt5se-lp) .dsafety-grid,
:is(#jt5se-lp,.jt5se-lp) .eband-grid { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .eband-cta { text-align: left; }
  :is(#jt5se-lp,.jt5se-lp) .eband-cta small { max-width: 100%; }
  :is(#jt5se-lp,.jt5se-lp) .tp-grid { grid-template-columns: 1fr; gap: 28px; max-width: 480px; }
  :is(#jt5se-lp,.jt5se-lp) .pstrip { grid-template-columns: repeat(3, 1fr); }
  :is(#jt5se-lp,.jt5se-lp) .pstrip img:nth-child(n+4) { display: none; }
  :is(#jt5se-lp,.jt5se-lp) .acc-grid { grid-template-columns: 1fr; }
  /* The three-column diagram has no phone equivalent, so the layout changes
     shape: the watch becomes a header image and the six features become a
     two-up card grid. display:contents dissolves the two side columns so all
     six land in one grid instead of two ragged stacks. */
  :is(#jt5se-lp,.jt5se-lp) .mission-grid { grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; align-items: stretch; }
  :is(#jt5se-lp,.jt5se-lp) .mission-col { display: contents; }
  :is(#jt5se-lp,.jt5se-lp) .mission-col,
:is(#jt5se-lp,.jt5se-lp) .mission-col.left { text-align: center; }
  :is(#jt5se-lp,.jt5se-lp) .mfeat { background: #fff; border-radius: var(--radius-lg); padding: 20px 14px 22px;
           display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
  :is(#jt5se-lp,.jt5se-lp) .mfeat svg { margin-bottom: 12px; }
  :is(#jt5se-lp,.jt5se-lp) .mfeat h3 { max-width: none; font-size: clamp(14px, 3.6vw, 17px); }
  :is(#jt5se-lp,.jt5se-lp) .gtrack-grid,
:is(#jt5se-lp,.jt5se-lp) .dsafety-grid { grid-auto-rows: auto; }
  :is(#jt5se-lp,.jt5se-lp) .gtrack-art,
:is(#jt5se-lp,.jt5se-lp) .dsafety-art { height: auto; }
  :is(#jt5se-lp,.jt5se-lp) .dsafety-art img { width: 78%; max-width: 78%; height: auto; }
  :is(#jt5se-lp,.jt5se-lp) .tparents { min-height: 0; display: block; }
  :is(#jt5se-lp,.jt5se-lp) .gtrack-art img { max-height: none; width: 100%; max-width: 272px; }
  :is(#jt5se-lp,.jt5se-lp) .mission-art { order: -1; grid-column: 1 / -1; max-width: 300px; margin: 0 auto clamp(10px, 2vh, 20px); }
}
@media (max-width: 600px) {
  :is(#jt5se-lp,.jt5se-lp) .fbar-grid { grid-template-columns: repeat(2, 1fr); }
  :is(#jt5se-lp,.jt5se-lp) .pstrip { grid-template-columns: repeat(2, 1fr); }
  :is(#jt5se-lp,.jt5se-lp) .pstrip img:nth-child(n+3) { display: none; }
  /* three trust marks, one line: tighten until they fit rather than wrap */
  :is(#jt5se-lp,.jt5se-lp) .skit-trust { flex-wrap: nowrap; gap: 10px; justify-content: space-between; }
  :is(#jt5se-lp,.jt5se-lp) .skit-trust span { font-size: 12px; gap: 5px; white-space: nowrap; }
  :is(#jt5se-lp,.jt5se-lp) .skit-trust svg { width: 13px; height: 13px; }
  /* Sticky on a phone, so the bar has to stay slim: one row, and the
     "Free for 30 days" chip goes, since the headline right beneath it
     already says exactly that. */
  :is(#jt5se-lp,.jt5se-lp) .ostrip-in { flex-wrap: nowrap; gap: 10px; padding: 10px 0; }
  :is(#jt5se-lp,.jt5se-lp) .ostrip-free { display: none; }
  :is(#jt5se-lp,.jt5se-lp) .ostrip-logo img { height: 20px; }
  :is(#jt5se-lp,.jt5se-lp) .ostrip-in .btn { width: auto; flex: 0 0 auto; padding-left: 16px; padding-right: 16px; }
  :is(#jt5se-lp,.jt5se-lp) .ostrip-price { text-align: right; }
  :is(#jt5se-lp,.jt5se-lp) .dhero .btn,
:is(#jt5se-lp,.jt5se-lp) .skit-cta .btn,
:is(#jt5se-lp,.jt5se-lp) .eband-cta .btn { width: 100%; }
}

/* ============================================================
   LOCK-IN COMPARISON. A real <table> rather than a grid: it is
   tabular data, and screen readers need the row/column headers.
   On a phone it scrolls sideways inside its own wrapper instead
   of squashing, so the numbers stay readable.
   ============================================================ */
:is(#jt5se-lp,.jt5se-lp) .cmp { background: var(--bg-1); padding: clamp(64px, 9vh, 120px) 0; }
:is(#jt5se-lp,.jt5se-lp) .cmp-head { max-width: 58ch; margin: 0 auto clamp(30px, 4.5vh, 48px); text-align: center; }
:is(#jt5se-lp,.jt5se-lp) .cmp-head .lede { margin-top: var(--space-4); }
:is(#jt5se-lp,.jt5se-lp) .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
:is(#jt5se-lp,.jt5se-lp) .cmp-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 470px; background: #fff;
  border: 1px solid var(--border-1); border-radius: var(--radius-lg); overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .cmp-table th,
:is(#jt5se-lp,.jt5se-lp) .cmp-table td { text-align: left; padding: clamp(14px, 1.8vw, 20px) clamp(12px, 1.6vw, 22px);
  border-bottom: 1px solid var(--border-1); vertical-align: middle; font-size: clamp(14px, 1.2vw, 17px); }
:is(#jt5se-lp,.jt5se-lp) .cmp-table thead th { background: var(--bg-2); font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
:is(#jt5se-lp,.jt5se-lp) .cmp-table tbody th { font-weight: var(--fw-heavy); color: var(--fg-1); white-space: nowrap; }
:is(#jt5se-lp,.jt5se-lp) .cmp-table tbody th span { display: block; font-weight: var(--fw-regular); font-size: var(--fs-caption); color: var(--fg-3); }
:is(#jt5se-lp,.jt5se-lp) .cmp-table tbody tr:last-child th,
:is(#jt5se-lp,.jt5se-lp) .cmp-table tbody tr:last-child td { border-bottom: 0; }
:is(#jt5se-lp,.jt5se-lp) .cmp-table td b { display: block; font-weight: var(--fw-heavy); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .cmp-table td span { display: block; font-size: var(--fs-caption); color: var(--fg-3); margin-top: 2px; }
:is(#jt5se-lp,.jt5se-lp) .cmp-table tr.is-us th,
:is(#jt5se-lp,.jt5se-lp) .cmp-table tr.is-us td { background: #F4F8FF; }
:is(#jt5se-lp,.jt5se-lp) .cmp-table tr.is-us th b { color: var(--cosmo-orbit); }
:is(#jt5se-lp,.jt5se-lp) .cmp-table .good { color: #1B6B3A; font-weight: var(--fw-heavy); }
:is(#jt5se-lp,.jt5se-lp) .cmp-table .bad { color: var(--fg-2); }
:is(#jt5se-lp,.jt5se-lp) .cmp-table .good svg,
:is(#jt5se-lp,.jt5se-lp) .cmp-table .bad svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 8px; }
:is(#jt5se-lp,.jt5se-lp) .sr-only { 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: 700px) {
  :is(#jt5se-lp,.jt5se-lp) .cmp-head { text-align: left; }
}

/* ============================================================
   AS SEEN IN — logo marquee. The set is written twice in the markup (second
   copy aria-hidden) so the loop needs no JS.
   ============================================================ */
:is(#jt5se-lp,.jt5se-lp) .press { background: var(--bg-2); padding: clamp(34px, 4.6vh, 58px) 0; overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .press-label {
  text-align: center; font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--fg-3); margin-bottom: clamp(16px, 2.2vh, 26px);
}
:is(#jt5se-lp,.jt5se-lp) .press-viewport {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* GemPages injects `.gps-… .[&_*]:gp-max-w-full * { max-width: 100% }`, which
   caps every descendant of the block at the container width. That is not a
   specificity fight our #btso-root prefix can win: max-width clamps the used
   width whatever `width` says. Capped at 1366px the track could not hold its
   sets, and .press-set (flex: 0 1 auto, so shrinkable) collapsed 420px below
   its content, spilling one set across the next. Hence all three overrides. */
:is(#jt5se-lp,.jt5se-lp) .press-viewport,
:is(#jt5se-lp,.jt5se-lp) .press-track,
:is(#jt5se-lp,.jt5se-lp) .press-set { max-width: none !important; }
:is(#jt5se-lp,.jt5se-lp) .press-track { display: flex; width: max-content !important; animation: press-run 57s linear infinite; }
:is(#jt5se-lp,.jt5se-lp) .press-set { flex: 0 0 auto !important; }
:is(#jt5se-lp,.jt5se-lp) .press-set { display: flex; align-items: center; gap: clamp(38px, 5vw, 72px); padding-right: clamp(38px, 5vw, 72px); }
/* Optical sizing, not geometric. A shared box with object-fit made the long
   wordmarks (CNET 4.4:1, Parents 4:1) fill the full width and read far bigger
   than the compact marks, so each logo gets its own height tuned by eye and
   its width follows. Every size property is !important because the theme
   ships `img{max-width:100%;height:auto}`, which was collapsing them into
   each other on the live page. */
:is(#jt5se-lp,.jt5se-lp) .press-logo {
  flex: 0 0 auto !important;
  width: calc(var(--lw) + clamp(16px, 1.7vw, 26px)) !important;
  height: clamp(44px, 4.2vw, 60px) !important;
  overflow: hidden !important;
  display: flex !important; align-items: center; justify-content: center;
  transition: opacity var(--dur-base) var(--ease-standard);
}
:is(#jt5se-lp,.jt5se-lp) .press-logo img {
  height: var(--lh) !important; width: auto !important;
  max-width: 100% !important; min-width: 0 !important;
  object-fit: contain !important; display: block !important;
  /* brightness(0) flattens each mark to solid black whatever its own colours
     are; the opacity then lifts it to a single soft grey on the light bar. */
  filter: brightness(0); opacity: 0.55;
}
:is(#jt5se-lp,.jt5se-lp) .press-logo[data-l="safewise"] { --lh: clamp(27px, 2.6vw, 36px); --lw: clamp(130px, 12.5vw, 173px); }
:is(#jt5se-lp,.jt5se-lp) .press-logo[data-l="inc-5000"] { --lh: clamp(26px, 2.5vw, 35px); --lw: clamp(43px, 4.1vw, 57px); }
:is(#jt5se-lp,.jt5se-lp) .press-logo[data-l="nyt"] { --lh: clamp(18px, 1.7vw, 24px); --lw: clamp(129px, 12.2vw, 172px); }
:is(#jt5se-lp,.jt5se-lp) .press-logo[data-l="pcmag"] { --lh: clamp(38px, 3.6vw, 50px); --lw: clamp(22px, 2.1vw, 29px); }
:is(#jt5se-lp,.jt5se-lp) .press-logo[data-l="cnet"] { --lh: clamp(21px, 2vw, 28px); --lw: clamp(93px, 8.9vw, 124px); }
:is(#jt5se-lp,.jt5se-lp) .press-logo[data-l="gma"] { --lh: clamp(32px, 3vw, 42px); --lw: clamp(40px, 3.8vw, 53px); }
:is(#jt5se-lp,.jt5se-lp) .press-logo[data-l="parents-com"] { --lh: clamp(22px, 2.2vw, 30px); --lw: clamp(88px, 8.8vw, 120px); }
:is(#jt5se-lp,.jt5se-lp) .press-logo[data-l="fatherly"] { --lh: clamp(21px, 2vw, 28px); --lw: clamp(73px, 6.9vw, 97px); }
:is(#jt5se-lp,.jt5se-lp) .press-logo[data-l="toms-guide"] { --lh: clamp(21px, 2vw, 28px); --lw: clamp(118px, 11.2vw, 157px); }
@keyframes press-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { :is(#jt5se-lp,.jt5se-lp) .press-track { animation: none; } }

/* ============================================================
   TRUSTED BAR + BENEFIT CIRCLES
   Gold stat pill over three ringed portraits.
   ============================================================ */
:is(#jt5se-lp,.jt5se-lp) .trusted { padding: clamp(56px, 8vh, 96px) 0 clamp(72px, 10vh, 120px); background: var(--bg-2); }
/* Extra air below the blue bar before the count, and a tighter hand-off into
   the three circles that follow. */
:is(#jt5se-lp,.jt5se-lp) .trusted.tnum { padding: clamp(84px, 12vh, 150px) 0 clamp(20px, 3vh, 36px); }
:is(#jt5se-lp,.jt5se-lp) .trusted-bar {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1.8vw, 26px); flex-wrap: wrap;
  margin: 0 auto; text-align: center;
}
:is(#jt5se-lp,.jt5se-lp) .trusted-faces { display: flex; flex: 0 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .trusted-faces img {
  width: clamp(50px, 4.4vw, 62px); height: clamp(50px, 4.4vw, 62px);
  border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-2);
  margin-left: -12px;
}
:is(#jt5se-lp,.jt5se-lp) .trusted-faces img:first-child { margin-left: 0; }
:is(#jt5se-lp,.jt5se-lp) .trusted-num {
  font-size: clamp(28px, 3.4vw, 46px); font-weight: var(--fw-heavy); color: var(--cosmo-orbit);
  letter-spacing: var(--tracking-display); line-height: 1; flex: 0 0 auto;
}
:is(#jt5se-lp,.jt5se-lp) .trusted-rule { width: 1px; height: 1.6em; background: var(--border-2); flex: 0 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .trusted-say { color: var(--fg-1); font-size: clamp(14px, 1.2vw, 18px); font-weight: var(--fw-regular); line-height: 1.35; max-width: 38ch; text-align: left; }

:is(#jt5se-lp,.jt5se-lp) .trio-circles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.4vw, 56px); }
:is(#jt5se-lp,.jt5se-lp) .tcirc { text-align: center; }
:is(#jt5se-lp,.jt5se-lp) .tcirc-img {
  width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto clamp(20px, 3vh, 32px);
  border-radius: var(--radius-lg); overflow: hidden; background: #fff;
}
:is(#jt5se-lp,.jt5se-lp) .tcirc-img img { width: 100%; height: 100%; object-fit: cover; }
:is(#jt5se-lp,.jt5se-lp) .tcirc h3 { font-size: clamp(19px, 1.8vw, 26px); margin-bottom: 12px; }
:is(#jt5se-lp,.jt5se-lp) .tcirc p { font-size: clamp(15px, 1.25vw, 17px); max-width: 34ch; margin: 0 auto; }

/* ============================================================
   PROTECT WHAT MATTERS — three white cards, copy above the image.
   ============================================================ */
:is(#jt5se-lp,.jt5se-lp) .protect { padding: clamp(72px, 10vh, 130px) 0 clamp(80px, 11vh, 140px); background: var(--bg-2); }
:is(#jt5se-lp,.jt5se-lp) .protect-head { text-align: center; margin-bottom: clamp(38px, 5.5vh, 64px); }
:is(#jt5se-lp,.jt5se-lp) .protect-head h2 { max-width: 16ch; margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .protect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 28px); }
:is(#jt5se-lp,.jt5se-lp) .pcard {
  background: #fff; border-radius: var(--radius-xl);
  padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
:is(#jt5se-lp,.jt5se-lp) .pcard-eyebrow {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--cosmo-spark); margin-bottom: 10px;
}
:is(#jt5se-lp,.jt5se-lp) .pcard h3 { font-size: clamp(22px, 2vw, 30px); margin-bottom: 10px; }
:is(#jt5se-lp,.jt5se-lp) .pcard p { font-size: clamp(15px, 1.2vw, 17px); }
:is(#jt5se-lp,.jt5se-lp) .pcard-img {
  margin-top: clamp(22px, 3vh, 34px); border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--bg-3);
}
:is(#jt5se-lp,.jt5se-lp) .pcard-img img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1000px) {
  /* the count sits directly under the blue bar on a phone, so it needs less
     air on both sides than it does on a wide screen */
  :is(#jt5se-lp,.jt5se-lp) .trusted.tnum { padding: clamp(40px, 5.5vh, 60px) 0 clamp(12px, 1.8vh, 20px); }
  :is(#jt5se-lp,.jt5se-lp) .trusted:not(.tnum) { padding-top: clamp(34px, 5vh, 56px); }
  :is(#jt5se-lp,.jt5se-lp) .trio-circles { grid-template-columns: 1fr; gap: clamp(34px, 5vh, 52px); }
  :is(#jt5se-lp,.jt5se-lp) .tcirc-img { width: min(74%, 300px); }
  :is(#jt5se-lp,.jt5se-lp) .protect-grid { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .pcard-img { aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
  /* The pill can't hold a number, a rule and a sentence side by side on a
     phone, so it becomes a centred stack with the rule as a divider. */
  :is(#jt5se-lp,.jt5se-lp) .trusted-bar {
    flex-direction: column; text-align: center; gap: 12px;
    border-radius: var(--radius-xl); padding: 24px 22px;
  }
  :is(#jt5se-lp,.jt5se-lp) .trusted-rule { width: 56px; height: 1px; align-self: center; }
  :is(#jt5se-lp,.jt5se-lp) .trusted-say { max-width: 30ch; font-size: 15px; text-align: center; margin-inline: auto; }
  :is(#jt5se-lp,.jt5se-lp) .trusted-num { font-size: clamp(38px, 13vw, 54px); }
}

/* ============================================================
   OFFER MECHANICS SECTIONS (Everyday Dose pattern, Cosmo styling)
   How it works -> repeat CTA -> risk reversal.
   All reuse the existing tokens, radii and reveal system on purpose.
   ============================================================ */

/* --- How it works: four plain steps --- */
:is(#jt5se-lp,.jt5se-lp) .hiw { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .hiw-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(38px, 5.5vh, 60px); }
:is(#jt5se-lp,.jt5se-lp) .hiw-head p { margin-top: var(--space-4); }
:is(#jt5se-lp,.jt5se-lp) .hiw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 24px); }
:is(#jt5se-lp,.jt5se-lp) .hiw-card { background: var(--bg-2); border-radius: var(--radius-lg); padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; position: relative; }
:is(#jt5se-lp,.jt5se-lp) .hiw-card.accent { background: var(--cosmo-orbit); }
:is(#jt5se-lp,.jt5se-lp) .hiw-card.accent .hiw-when,
:is(#jt5se-lp,.jt5se-lp) .hiw-card.accent h3,
:is(#jt5se-lp,.jt5se-lp) .hiw-card.accent p { color: #fff; }
:is(#jt5se-lp,.jt5se-lp) .hiw-card.accent .hiw-when { color: var(--cosmo-haze); }
:is(#jt5se-lp,.jt5se-lp) .hiw-when { font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cosmo-spark); margin-bottom: 12px; }
:is(#jt5se-lp,.jt5se-lp) .hiw-card h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
:is(#jt5se-lp,.jt5se-lp) .hiw-card p { font-size: var(--fs-body-sm); }
:is(#jt5se-lp,.jt5se-lp) .hiw-amt { margin-top: auto; padding-top: 16px; font-size: clamp(20px, 2vw, 26px); font-weight: var(--fw-heavy); color: var(--fg-1); letter-spacing: var(--tracking-tight); }
:is(#jt5se-lp,.jt5se-lp) .hiw-card.accent .hiw-amt { color: #fff; }

/* --- Repeatable offer module (the CTA block that restates the economics) --- */
:is(#jt5se-lp,.jt5se-lp) .offer-mod { margin-top: clamp(48px, 7vh, 96px); padding: clamp(64px, 9vh, 110px) 0; background: var(--cosmo-orbit); }
:is(#jt5se-lp,.jt5se-lp) .offer-mod-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(24px, 3vw, 52px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .offer-mod h2 { color: #fff; max-width: 20ch; }
:is(#jt5se-lp,.jt5se-lp) .offer-mod .lede { color: rgba(255,255,255,0.8); margin-top: var(--space-4); }
:is(#jt5se-lp,.jt5se-lp) .offer-mod-cta { justify-self: end; text-align: left; max-width: 360px; }
@media (max-width: 900px) { :is(#jt5se-lp,.jt5se-lp) .offer-mod-card { grid-template-columns: 1fr; } }

/* --- Cost reframe / comparison --- */

/* --- Risk reversal --- */
:is(#jt5se-lp,.jt5se-lp) .riskrev { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .riskrev-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(34px, 4.5vw, 76px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .riskrev-photo { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
:is(#jt5se-lp,.jt5se-lp) .riskrev-photo img { width: 100%; height: 100%; object-fit: cover; }
:is(#jt5se-lp,.jt5se-lp) .riskrev-list { list-style: none; margin-top: clamp(24px, 3.4vh, 34px); display: grid; gap: 2px; }
:is(#jt5se-lp,.jt5se-lp) .riskrev-list li { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--border-1); font-size: clamp(15px, 1.3vw, 17px); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .riskrev-list li::before {
  content: ""; position: absolute; left: 2px; top: 17px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cosmo-pulse) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>") center/12px no-repeat;
}

@media (max-width: 1080px) {
  :is(#jt5se-lp,.jt5se-lp) .riskrev-grid { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .hiw-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  :is(#jt5se-lp,.jt5se-lp) .hiw-grid { grid-template-columns: 1fr; }
}

/* ---------- Offer close (countdown) ---------- */
:is(#jt5se-lp,.jt5se-lp) .close-offer { padding: clamp(92px, 13vh, 160px) 0; background: linear-gradient(168deg, #06336d 0%, #052B5D 52%, #03203f 100%); text-align: center; position: relative; overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .close-offer::before { content: ""; position: absolute; width: 60vw; aspect-ratio: 1; top: -22%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(227,191,133,0.24) 0%, rgba(227,191,133,0) 65%); }
:is(#jt5se-lp,.jt5se-lp) .close-inner { position: relative; z-index: 2; }
:is(#jt5se-lp,.jt5se-lp) .close-offer h2 { color: #fff; max-width: 18ch; margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .close-offer .lede { color: rgba(255,255,255,0.82); margin: var(--space-5) auto 0; }
:is(#jt5se-lp,.jt5se-lp) .countdown { display: flex; gap: clamp(10px, 1.4vw, 18px); justify-content: center; margin-top: clamp(32px, 4.4vh, 46px); }
:is(#jt5se-lp,.jt5se-lp) .cd-unit { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-md); padding: 14px clamp(14px, 1.8vw, 24px); min-width: 82px; }
:is(#jt5se-lp,.jt5se-lp) .cd-num { font-size: clamp(26px, 2.8vw, 38px); font-weight: var(--fw-heavy); color: #fff; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: var(--tracking-tight); }
:is(#jt5se-lp,.jt5se-lp) .cd-lab { font-size: 10px; font-weight: var(--fw-heavy); letter-spacing: 0.13em; text-transform: uppercase; color: var(--cosmo-haze); margin-top: 7px; }
:is(#jt5se-lp,.jt5se-lp) .close-cta { margin-top: clamp(32px, 4.4vh, 44px); }
:is(#jt5se-lp,.jt5se-lp) .close-fine { margin-top: 20px; font-size: var(--fs-caption); color: rgba(255,255,255,0.55); max-width: 60ch; margin-inline: auto; }

@media (max-width: 1080px) {
  /* Stacked: art on the light surface first, navy copy panel beneath it with
     the rounding moved to its top edge so the seam still reads as one card. */
  :is(#jt5se-lp,.jt5se-lp) .ohero-split { grid-template-columns: 1fr; min-height: 0; }
  :is(#jt5se-lp,.jt5se-lp) .ohero-art { order: 1; padding: clamp(18px, 3vh, 32px) 5vw clamp(6px, 1.5vh, 16px); }
  :is(#jt5se-lp,.jt5se-lp) .ohero-panel {
    order: 2;
    border-radius: clamp(24px, 5vw, 40px) clamp(24px, 5vw, 40px) 0 0;
    padding: clamp(30px, 4.5vh, 52px) 5vw clamp(34px, 5vh, 56px);
  }
  :is(#jt5se-lp,.jt5se-lp) .ohero-copy { max-width: 100%; margin-left: 0; }
  :is(#jt5se-lp,.jt5se-lp) .ohero-h1 { max-width: 16ch; }
  :is(#jt5se-lp,.jt5se-lp) .ohero-sub { max-width: 46ch; }
  :is(#jt5se-lp,.jt5se-lp) .gift-badge { top: 0; right: 7%; transform: translate(0, -50%) rotate(-8deg); width: clamp(86px, 23vw, 116px); }
  :is(#jt5se-lp,.jt5se-lp) .ohero-product { max-height: clamp(210px, 58vw, 340px); }
}
@media (max-width: 760px) {
  :is(#jt5se-lp,.jt5se-lp) .countdown { flex-wrap: wrap; }
  :is(#jt5se-lp,.jt5se-lp) .cd-unit { min-width: 68px; padding: 12px 14px; }
}
@media (max-width: 900px) {
  /* The build-and-buy configurator is a desktop experience: pinned art, a
     scroll-linked column, a wide two-pane layout. On a phone it fights touch
     scrolling and reads as broken, so it is dropped and the CTA band below
     sends people to the standalone customizer instead. */
  /* That CTA band is now the mobile conversion point, so centre it. */
  :is(#jt5se-lp,.jt5se-lp) .offer-mod-card { text-align: center; justify-items: center; }
  :is(#jt5se-lp,.jt5se-lp) .offer-mod h2,
:is(#jt5se-lp,.jt5se-lp) .offer-mod .lede { margin-left: auto; margin-right: auto; }
  :is(#jt5se-lp,.jt5se-lp) .offer-mod-cta { justify-self: center; text-align: center; max-width: 100%; width: 100%; }
  :is(#jt5se-lp,.jt5se-lp) .offer-mod .btn { width: 100%; }
}

@media (max-width: 700px) {
  /* The promo bar repeats the headline and the countdown; on a phone it is
     two wrapped lines of noise above the fold. Desktop keeps it. */
  :is(#jt5se-lp,.jt5se-lp) .promo { display: none; }
  :is(#jt5se-lp,.jt5se-lp) .ohero-eyebrow { font-size: 11px; letter-spacing: 0.11em; }
  :is(#jt5se-lp,.jt5se-lp) .ohero-cta { width: 100%; }
}

/* ---------- 03 Colorways ---------- */
:is(#jt5se-lp,.jt5se-lp) .colorways { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-1); text-align: center; }
:is(#jt5se-lp,.jt5se-lp) .cw-stage {
  width: min(620px, 82vw); margin: clamp(28px, 4vh, 48px) auto 0;
  aspect-ratio: 5 / 4; border-radius: var(--radius-xl);
  background: var(--bg-2); overflow: hidden; position: relative;
}
:is(#jt5se-lp,.jt5se-lp) .cw-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 4%;
  transition: opacity 0.28s var(--ease-standard);
}
:is(#jt5se-lp,.jt5se-lp) .cw-swatches { display: flex; justify-content: center; gap: 16px; margin-top: var(--space-6); }
:is(#jt5se-lp,.jt5se-lp) .cw-swatch {
  width: 44px; height: 44px; border-radius: 50%;
  border: none; outline: 3px solid transparent; outline-offset: 3px;
  transition: outline-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
:is(#jt5se-lp,.jt5se-lp) .cw-swatch:hover { transform: scale(1.1); }
:is(#jt5se-lp,.jt5se-lp) .cw-swatch.active { outline-color: var(--cosmo-hearth-deep); }
:is(#jt5se-lp,.jt5se-lp) .cw-name { margin-top: var(--space-5); font-size: var(--fs-h4); font-weight: var(--fw-heavy); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .cw-band { margin-top: 6px; font-size: var(--fs-body-sm); color: var(--fg-2); min-height: 22px; }
:is(#jt5se-lp,.jt5se-lp) .cw-band .included { color: #1a7a19; font-weight: var(--fw-heavy); }
:is(#jt5se-lp,.jt5se-lp) .cw-band .upsell { color: var(--cosmo-spark); font-weight: var(--fw-heavy); }

/* ---------- 04 Adventure trio ---------- */
:is(#jt5se-lp,.jt5se-lp) .adventure { padding: clamp(80px, 11vh, 140px) 0 clamp(72px, 10vh, 120px); background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .adventure-bar { text-align: center; margin-bottom: clamp(44px, 7vh, 84px); }
:is(#jt5se-lp,.jt5se-lp) .adventure-bar h2 { max-width: 22ch; margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 24px); }
:is(#jt5se-lp,.jt5se-lp) .trio-card { text-decoration: none; }
:is(#jt5se-lp,.jt5se-lp) .trio-media { aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .trio-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-entry); }
:is(#jt5se-lp,.jt5se-lp) .trio-card:hover .trio-media img { transform: scale(1.045); }
:is(#jt5se-lp,.jt5se-lp) .trio-caption { padding: 18px 6px 0; }
:is(#jt5se-lp,.jt5se-lp) .trio-caption h3 { font-size: var(--fs-h4); margin-bottom: 4px; }
:is(#jt5se-lp,.jt5se-lp) .trio-caption p { font-size: var(--fs-body-sm); }

/* ---------- 05 + 12 Full-bleed statements ---------- */
:is(#jt5se-lp,.jt5se-lp) .bleed { height: 100svh; min-height: 560px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
:is(#jt5se-lp,.jt5se-lp) .bleed-media { position: absolute; inset: 0; }
:is(#jt5se-lp,.jt5se-lp) .bleed-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 2.6s var(--ease-entry); }
:is(#jt5se-lp,.jt5se-lp) .bleed.in .bleed-media img { transform: scale(1); }
:is(#jt5se-lp,.jt5se-lp) .bleed::after { content: ""; position: absolute; inset: 0; background: rgba(8, 18, 34, 0.28); }
:is(#jt5se-lp,.jt5se-lp) .bleed-text { position: relative; z-index: 2; color: #fff; padding: 0 6vw; }
:is(#jt5se-lp,.jt5se-lp) .bleed-text .eyebrow { color: var(--cosmo-haze); }
:is(#jt5se-lp,.jt5se-lp) .bleed-text h2 { color: #fff; font-size: clamp(36px, 5vw, 76px); letter-spacing: var(--tracking-display); line-height: 1.06; max-width: 18ch; margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .bleed-text p { margin-top: var(--space-4); color: rgba(255,255,255,0.85); font-size: clamp(15px, 1.3vw, 18px); }
/* Corner variant: massive headline anchored bottom-left */
:is(#jt5se-lp,.jt5se-lp) .bleed-corner { align-items: flex-end; justify-content: flex-start; text-align: left; }
:is(#jt5se-lp,.jt5se-lp) .bleed-corner::after { background: linear-gradient(to top, rgba(8,18,34,0.62) 0%, rgba(8,18,34,0.12) 42%, rgba(8,18,34,0) 72%); }
:is(#jt5se-lp,.jt5se-lp) .bleed-corner .bleed-text { padding: 0 6vw clamp(36px, 7vh, 92px) clamp(24px, 5vw, 84px); }
:is(#jt5se-lp,.jt5se-lp) .bleed-corner .bleed-text h2 { font-size: clamp(60px, 12vw, 184px); max-width: none; margin: 0; line-height: 0.92; }

/* ---------- School-Fi brief sections (03s-07s) ---------- */
:is(#jt5se-lp,.jt5se-lp) .bleed-problem::after { background: rgba(8, 18, 34, 0.46); }
:is(#jt5se-lp,.jt5se-lp) .bleed-problem .bleed-text h2 { max-width: none; }
:is(#jt5se-lp,.jt5se-lp) .bleed-problem .bleed-text p { max-width: 58ch; margin-left: auto; margin-right: auto; }
:is(#jt5se-lp,.jt5se-lp) .bleed-problem .eyebrow { font-size: clamp(15px, 1.5vw, 19px); }
/* Reframe onto the girl's wrist watch: pan down/right and zoom in slightly */
:is(#jt5se-lp,.jt5se-lp) .bleed-problem .bleed-media img { object-position: 63% 64%; transform: scale(1.16); }
:is(#jt5se-lp,.jt5se-lp) .bleed-problem.bleed.in .bleed-media img { transform: scale(1.09); }

:is(#jt5se-lp,.jt5se-lp) .sfsetup { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .sfsetup-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .sfsetup-copy .lede { margin-top: var(--space-4); }
:is(#jt5se-lp,.jt5se-lp) .sfsteps { list-style: none; margin-top: clamp(28px, 4vh, 44px); }
:is(#jt5se-lp,.jt5se-lp) .sfsteps li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--border-2); align-items: baseline; }
:is(#jt5se-lp,.jt5se-lp) .sfsteps .step-num { color: var(--cosmo-spark); font-weight: var(--fw-heavy); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); flex: 0 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .sfsteps h3 { font-size: var(--fs-h4); margin-bottom: 4px; }
:is(#jt5se-lp,.jt5se-lp) .sfsteps p { color: var(--fg-2); font-size: var(--fs-body-sm); max-width: 46ch; }
:is(#jt5se-lp,.jt5se-lp) .sfsetup-media { position: relative; display: flex; align-items: center; justify-content: center; }
/* Static app render for the School-Fi setup section. The PNG already contains the
   device bezel, so no .sf-phone frame (that frame's black backing was showing as a
   bar wherever the scaled iframe didn't perfectly fill it). */
:is(#jt5se-lp,.jt5se-lp) .sf-shot { width: min(360px, 82vw); height: auto; display: block; flex: 0 0 auto;
  filter: drop-shadow(0 30px 40px rgba(20,15,8,0.28)) drop-shadow(0 60px 90px rgba(20,15,8,0.22)); }

/* The embedded app is authored for a 393x812 viewport. Resizing the iframe would
   re-flow it at a narrower width (cramped text, wrong proportions), so instead we
   keep the iframe at its native size and SCALE it to fit — same trick as
   .tryapp-phone. The scale factor is set in JS (fitAppPhones) on load + resize. */
:is(#jt5se-lp,.jt5se-lp) .sf-phone { width: min(360px, 82vw); aspect-ratio: 393 / 812; border-radius: 50px; overflow: hidden; background: #000; flex: 0 0 auto;
  box-shadow: 0 0 0 11px #1b1b1d, 0 0 0 12.5px #3d3d40, 0 30px 40px -24px rgba(20,15,8,0.42), 0 60px 120px -30px rgba(20,15,8,0.6); }
/* The scale is baked into CSS so the phone is NEVER broken if the JS is slow,
   blocked, or errors (an unscaled 393px iframe would overflow the 360px frame and
   get clipped). JS then refines it to the exact container width. */
:is(#jt5se-lp,.jt5se-lp) .sf-phone iframe { width: 393px; height: 812px; border: 0; display: block; transform-origin: top left; transform: scale(0.9160); }
/* Deliberately conservative on small screens: the container is 82vw so the exact
   scale varies by device. Under-scaling leaves a small gap (harmless); over-scaling
   clips the app. JS corrects it to the exact width. */
@media (max-width: 460px) { :is(#jt5se-lp,.jt5se-lp) .sf-phone iframe { transform: scale(0.78); } }
/* Playful "interactive!" call-out pointing at the live phone */
:is(#jt5se-lp,.jt5se-lp) .sf-annotate { position: absolute; top: 6%; left: calc(50% + min(180px, 41vw) + 46px); transform: rotate(7deg); display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; z-index: 6; }
:is(#jt5se-lp,.jt5se-lp) .sf-annotate-text { font-family: "Bradley Hand", "Marker Felt", "Chalkboard SE", "Comic Sans MS", cursive; font-weight: 700; font-size: clamp(21px, 1.9vw, 29px); color: var(--cosmo-spark); white-space: nowrap; }
:is(#jt5se-lp,.jt5se-lp) .sf-annotate-arrow { width: 66px; height: 46px; color: var(--cosmo-spark); margin-top: 3px; }
@media (max-width: 1200px) { :is(#jt5se-lp,.jt5se-lp) .sf-annotate { display: none; } }

:is(#jt5se-lp,.jt5se-lp) .parents { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-2); }
:is(#jt5se-lp,.jt5se-lp) .parents-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .parents-photo { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 4.4; }
:is(#jt5se-lp,.jt5se-lp) .parents-photo img { width: 100%; height: 100%; object-fit: cover; }
:is(#jt5se-lp,.jt5se-lp) .check-list { list-style: none; margin-top: clamp(24px, 3.5vh, 36px); }
:is(#jt5se-lp,.jt5se-lp) .check-list li { position: relative; padding: 16px 0 16px 42px; border-top: 1px solid var(--border-2); font-size: clamp(15px, 1.35vw, 18px); }
:is(#jt5se-lp,.jt5se-lp) .check-list li::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 25px; height: 25px; background-size: contain; background-repeat: no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="%230068FF"/><path d="M7 12.4l3.3 3.3L17 9.1" stroke="white" stroke-width="2.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

:is(#jt5se-lp,.jt5se-lp) .schools { padding: clamp(88px, 12vh, 150px) 0 clamp(72px, 10vh, 120px); background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .schools-inner { width: min(1440px, 92vw); margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .schools h2 { max-width: 22ch; }
:is(#jt5se-lp,.jt5se-lp) .schools .lede { margin-top: var(--space-4); max-width: 60ch; }
:is(#jt5se-lp,.jt5se-lp) .schools-img { margin-top: clamp(34px, 5vh, 60px); }
:is(#jt5se-lp,.jt5se-lp) .schools-img img { width: 100%; height: auto; aspect-ratio: 2.15 / 1; object-fit: cover; object-position: center; border-radius: var(--radius-xl); display: block; }

:is(#jt5se-lp,.jt5se-lp) .compat { padding: clamp(72px, 10vh, 120px) 0; background: var(--gradient-orbit); color: var(--fg-on-dark); text-align: center; }
:is(#jt5se-lp,.jt5se-lp) .compat h2 { color: #fff; }
:is(#jt5se-lp,.jt5se-lp) .compat .lede { color: rgba(255, 255, 255, 0.85); margin: var(--space-4) auto 0; max-width: 52ch; }
:is(#jt5se-lp,.jt5se-lp) .compat .btn { margin-top: var(--space-6); }

/* ---------- 06 Benefits band ---------- */
:is(#jt5se-lp,.jt5se-lp) .band { background: var(--bg-2); padding: clamp(62px, 10.4vh, 130px) 0; }
:is(#jt5se-lp,.jt5se-lp) .band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 88px); }
:is(#jt5se-lp,.jt5se-lp) .band-col h3 { font-size: clamp(21px, 2.1vw, 30px); letter-spacing: var(--tracking-tight); margin-bottom: 12px; color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .band-col p { color: var(--fg-2); font-size: clamp(15px, 1.2vw, 17px); max-width: 46ch; }

/* ---------- 07 Video wipe ---------- */
:is(#jt5se-lp,.jt5se-lp) .wipe-track { height: 300vh; }
/* Height must be the LARGEST viewport height: on mobile the URL bar collapses as
   you scroll, so a 100svh stage leaves a white gap at the bottom. lvh always
   covers, and unlike dvh it never resizes mid-scroll (which caused the shake). */
:is(#jt5se-lp,.jt5se-lp) .wipe-stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: #0a0f16; }
:is(#jt5se-lp,.jt5se-lp) .wipe-layer { position: absolute; inset: 0; transform: translateZ(0); backface-visibility: hidden; }
:is(#jt5se-lp,.jt5se-lp) .wipe-layer video { width: 100%; height: 100%; object-fit: cover; }
/* First clip has ~3% black bars baked top and bottom; zoom past them */
:is(#jt5se-lp,.jt5se-lp) .wipe-a video { transform: scale(1.09); }
:is(#jt5se-lp,.jt5se-lp) .wipe-b { clip-path: inset(0 100% 0 0); will-change: clip-path; }
:is(#jt5se-lp,.jt5se-lp) .wipe-caption {
  position: absolute; left: max(4vw, 32px); bottom: clamp(48px, 8vh, 96px); z-index: 3; color: #fff; max-width: 520px;
}
:is(#jt5se-lp,.jt5se-lp) .wipe-caption .cap { position: absolute; left: 0; bottom: 0; width: max-content; max-width: min(520px, 86vw); opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .wipe-caption .cap.active { opacity: 1; transform: none; }
:is(#jt5se-lp,.jt5se-lp) .wipe-caption .eyebrow { color: var(--cosmo-haze); margin-bottom: 8px; }
:is(#jt5se-lp,.jt5se-lp) .wipe-caption h3 { color: #fff; font-size: clamp(30px, 3.8vw, 56px); letter-spacing: var(--tracking-tight); }
:is(#jt5se-lp,.jt5se-lp) .wipe-scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(5,15,30,0) 55%, rgba(5,15,30,0.5) 100%); pointer-events: none; }

/* ---------- 08 50/50 split ---------- */
/* GPS triple: gray cards on a white section (matches the phone-features cards),
   whole phone shown, centered, at a modest size */
:is(#jt5se-lp,.jt5se-lp) .gtrio { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .gtrio-head { margin: 0 0 clamp(40px, 6vh, 64px); text-align: left; }
:is(#jt5se-lp,.jt5se-lp) .gtrio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); align-items: stretch; }
:is(#jt5se-lp,.jt5se-lp) .gtrio-card { background: var(--bg-2); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-lg); padding: 30px 28px 28px; overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .gtrio-card h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
:is(#jt5se-lp,.jt5se-lp) .gtrio-card > p { font-size: var(--fs-body-sm); min-height: 42px; }
:is(#jt5se-lp,.jt5se-lp) .gtrio-media { margin-top: 16px; height: clamp(420px, 42vw, 540px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .gtrio-media img { height: 90%; width: auto; max-width: none; flex: none; display: block; }

/* ---------- 09 Walkthrough stepper ---------- */
:is(#jt5se-lp,.jt5se-lp) .stepper { height: 92svh; min-height: 600px; overflow: hidden; background: #fff; }
:is(#jt5se-lp,.jt5se-lp) .step-frames { position: absolute; inset: 0; }
:is(#jt5se-lp,.jt5se-lp) .step-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s var(--ease-standard); display: flex; align-items: center; justify-content: center; }
:is(#jt5se-lp,.jt5se-lp) .step-frame.active { opacity: 1; }
:is(#jt5se-lp,.jt5se-lp) .step-frame img { height: min(74vh, 900px); width: auto; max-width: 88vw; object-fit: contain; }
:is(#jt5se-lp,.jt5se-lp) .step-hud {
  position: absolute; left: max(4vw, 32px); bottom: clamp(40px, 7vh, 80px); z-index: 3; max-width: min(560px, 52vw);
}
:is(#jt5se-lp,.jt5se-lp) .step-hud .count { font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-eyebrow); color: var(--cosmo-spark); margin-bottom: 10px; display: block; }
:is(#jt5se-lp,.jt5se-lp) .step-cap-stack { position: relative; min-height: 92px; }
:is(#jt5se-lp,.jt5se-lp) .step-cap { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease-standard), transform 0.5s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .step-cap.active { opacity: 1; transform: none; }
:is(#jt5se-lp,.jt5se-lp) .step-cap h3 { font-size: clamp(20px, 2vw, 30px); letter-spacing: var(--tracking-tight); white-space: nowrap; }
:is(#jt5se-lp,.jt5se-lp) .step-cap p { font-size: var(--fs-body-sm); margin-top: 6px; white-space: nowrap; }
:is(#jt5se-lp,.jt5se-lp) .step-controls { position: absolute; right: max(4vw, 32px); bottom: clamp(40px, 7vh, 80px); z-index: 3; display: flex; gap: 12px; align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .step-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; display: flex; gap: 8px; z-index: 3; }
:is(#jt5se-lp,.jt5se-lp) .step-dots span { width: 26px; height: 3px; border-radius: 2px; background: rgba(16, 19, 26, 0.16); transition: background 0.3s; }
:is(#jt5se-lp,.jt5se-lp) .step-dots span.active { background: #10131a; }

/* ---------- 10 Closer look carousel ---------- */
:is(#jt5se-lp,.jt5se-lp) .closer { padding: clamp(56px, 7vh, 84px) 0 clamp(84px, 11vh, 132px); background: var(--bg-2); overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .closer-head { width: min(1440px, 92vw); margin: 0 auto clamp(24px, 3.5vh, 40px); }
:is(#jt5se-lp,.jt5se-lp) .closer-head p { max-width: 52ch; }
/* School-Fi feature headline: light "featuring" lead-in, big gradient wordmark */
:is(#jt5se-lp,.jt5se-lp) .schoolfi-lead {
  display: block;
  font-size: clamp(18px, 1.8vw, 26px);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-2);
  margin-bottom: 4px;
}
:is(#jt5se-lp,.jt5se-lp) .schoolfi {
  display: block;
  width: fit-content;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  font-weight: var(--fw-heavy);
  color: var(--cosmo-pulse); /* fallback if background-clip: text is unsupported */
  background: linear-gradient(94deg, var(--cosmo-orbit) 4%, var(--cosmo-pulse) 58%, #4d9eff 94%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.06em;
}
:is(#jt5se-lp,.jt5se-lp) .schoolfi-tm { font-size: 0.34em; font-weight: var(--fw-regular); vertical-align: baseline; position: relative; top: -1.4em; -webkit-text-fill-color: var(--cosmo-pulse); color: var(--cosmo-pulse); background: none; }
:is(#jt5se-lp,.jt5se-lp) .schoolfi-tag { margin-top: var(--space-4); font-size: clamp(16px, 1.35vw, 19px); max-width: 64ch !important; }
:is(#jt5se-lp,.jt5se-lp) .peek-viewport { position: relative; padding-bottom: clamp(32px, 7vh, 60px); }
:is(#jt5se-lp,.jt5se-lp) .peek-track { display: flex; gap: clamp(16px, 2vw, 28px); will-change: transform; transition: transform 0.75s var(--ease-entry); }
:is(#jt5se-lp,.jt5se-lp) .peek-slide {
  /* Width capped by viewport height so header + slide + captions fit one screen */
  flex: 0 0 var(--peek-w, min(58vw, 74vh));
  aspect-ratio: 16 / 10.5; border-radius: var(--radius-xl); overflow: hidden;
  background: #fff; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s var(--ease-standard);
  opacity: 0.45;
}
:is(#jt5se-lp,.jt5se-lp) .peek-slide.active { opacity: 1; }
:is(#jt5se-lp,.jt5se-lp) .peek-slide img { height: 88%; width: auto; max-width: 92%; object-fit: contain; }
:is(#jt5se-lp,.jt5se-lp) .peek-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Full-bleed photo slide (no phone overlay): override the default contained-image sizing */
:is(#jt5se-lp,.jt5se-lp) .peek-slide.peek-full img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
/* Story slides: photo fills the box, iPhone overlaps the right third and sticks out */
:is(#jt5se-lp,.jt5se-lp) .peek-slide.peek-story { overflow: visible; background: transparent; display: block; position: relative; }
:is(#jt5se-lp,.jt5se-lp) .peek-story .peek-photo { width: 100%; aspect-ratio: 16 / 10.5; border-radius: var(--radius-xl); overflow: hidden; background: #fff; }
:is(#jt5se-lp,.jt5se-lp) .peek-story .peek-photo img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; display: block; }
:is(#jt5se-lp,.jt5se-lp) .peek-story .peek-phone { position: absolute; right: -14%; bottom: -12%; height: 108%; width: auto; max-width: none; filter: drop-shadow(-12px 26px 46px rgba(0,0,0,0.34)); pointer-events: none; z-index: 2; }
:is(#jt5se-lp,.jt5se-lp) .peek-slide { position: relative; }
:is(#jt5se-lp,.jt5se-lp) .peek-slide.active { z-index: 4; }
:is(#jt5se-lp,.jt5se-lp) .peek-hud { width: min(1440px, 92vw); margin: clamp(14px, 2.5vh, 24px) auto 0; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .peek-cap-stack { display: grid; align-items: start; }
:is(#jt5se-lp,.jt5se-lp) .peek-cap { grid-area: 1 / 1; width: 100%; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.45s var(--ease-standard), transform 0.45s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .peek-cap.active { opacity: 1; transform: none; pointer-events: auto; }
:is(#jt5se-lp,.jt5se-lp) .peek-cap .num { color: var(--cosmo-spark); font-weight: var(--fw-heavy); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); display: block; margin-bottom: 4px; }
:is(#jt5se-lp,.jt5se-lp) .peek-cap p { color: var(--fg-1); font-size: clamp(15px, 1.3vw, 18px); max-width: 60ch; }
:is(#jt5se-lp,.jt5se-lp) .peek-arrows { display: flex; gap: 12px; }
:is(#jt5se-lp,.jt5se-lp) .peek-progress { width: min(1440px, 92vw); margin: 14px auto 0; display: flex; gap: 6px; }
:is(#jt5se-lp,.jt5se-lp) .peek-progress button { flex: 1; height: 3px; border-radius: 2px; border: none; padding: 0; background: rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .peek-progress button .fill { position: absolute; inset: 0; background: #10131a; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .peek-progress button.done .fill { transform: scaleX(1); }
:is(#jt5se-lp,.jt5se-lp) .peek-progress button.active .fill { transform: scaleX(1); transition-duration: 0.75s; }

/* ---------- 11 Stats ---------- */
:is(#jt5se-lp,.jt5se-lp) .stats { padding: clamp(40px, 6vh, 72px) 0 clamp(88px, 12vh, 150px); background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .stats-head { max-width: 62ch; margin-bottom: clamp(40px, 6vh, 64px); }
:is(#jt5se-lp,.jt5se-lp) .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); }
:is(#jt5se-lp,.jt5se-lp) .stat { border-top: 1px solid var(--border-1); padding-top: 22px; }
:is(#jt5se-lp,.jt5se-lp) .stat .big { font-size: clamp(48px, 5.6vw, 96px); font-weight: var(--fw-heavy); letter-spacing: -0.04em; line-height: 1; color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .stat .big .unit { font-size: 0.42em; font-weight: var(--fw-light); color: var(--cosmo-spark); margin-left: 4px; letter-spacing: 0; }
:is(#jt5se-lp,.jt5se-lp) .stat p { margin-top: 10px; font-size: var(--fs-body-sm); max-width: 24ch; }
:is(#jt5se-lp,.jt5se-lp) .stats-foot { margin-top: clamp(28px, 4vh, 44px); font-size: var(--fs-caption); color: var(--fg-3); }

/* ---------- 13 Phone features ---------- */
:is(#jt5se-lp,.jt5se-lp) .phone-feats { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-1); overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .pf-head { width: min(1440px, 92vw); margin: 0 auto clamp(36px, 5vh, 56px); }
:is(#jt5se-lp,.jt5se-lp) .pf-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 20px); width: min(1440px, 92vw); margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .pf-card {
  border-radius: var(--radius-lg); background: var(--bg-2);
  padding: 30px 26px 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
:is(#jt5se-lp,.jt5se-lp) .pf-card h3 { font-size: var(--fs-h4); }
:is(#jt5se-lp,.jt5se-lp) .pf-card > p { font-size: var(--fs-body-sm); min-height: 66px; }
/* App renders have the iPhone frame and transparency baked in: crop the side
   margins and let the phone run past the card bottom, R2 style */
:is(#jt5se-lp,.jt5se-lp) .pf-card .shot { margin: 6px auto 0; width: 100%; height: clamp(280px, 22vw, 360px); overflow: hidden; display: flex; align-items: flex-start; justify-content: center; }
:is(#jt5se-lp,.jt5se-lp) .pf-card .shot img { width: 162%; max-width: none; flex: none; transform: translateY(6%); }
@media (max-width: 900px) { :is(#jt5se-lp,.jt5se-lp) .pf-rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { :is(#jt5se-lp,.jt5se-lp) .pf-rail { grid-template-columns: 1fr; } }

/* ---------- 15 HaloGPS dark ---------- */
:is(#jt5se-lp,.jt5se-lp) .gps { background: var(--gradient-orbit); padding: clamp(96px, 13vh, 160px) 0; color: var(--fg-on-dark); overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .gps-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .gps-copy h2 { color: #fff; }
:is(#jt5se-lp,.jt5se-lp) .gps-copy .lede { color: rgba(253, 249, 240, 0.85); margin-top: var(--space-4); }
:is(#jt5se-lp,.jt5se-lp) .gps-callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(28px, 4vh, 44px); }
:is(#jt5se-lp,.jt5se-lp) .gps-callout { border: 1px solid rgba(253, 249, 240, 0.18); border-radius: var(--radius-md); padding: 22px; background: rgba(253, 249, 240, 0.04); }
:is(#jt5se-lp,.jt5se-lp) .gps-callout h4 { color: var(--cosmo-haze); font-size: var(--fs-body); margin-bottom: 6px; }
:is(#jt5se-lp,.jt5se-lp) .gps-callout p { color: rgba(253, 249, 240, 0.78); font-size: var(--fs-body-sm); }
:is(#jt5se-lp,.jt5se-lp) .gps-phone { position: relative; display: flex; justify-content: center; }
:is(#jt5se-lp,.jt5se-lp) .gps-phone img { width: min(720px, 118%); max-width: none; position: relative; z-index: 2; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45)); }
:is(#jt5se-lp,.jt5se-lp) .ping { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; border: 2px solid rgba(227, 191, 133, 0.5); border-radius: 50%; animation: pingRing 7s ease-out infinite; }
:is(#jt5se-lp,.jt5se-lp) .ping:nth-child(2) { animation-delay: 2.3s; }
:is(#jt5se-lp,.jt5se-lp) .ping:nth-child(3) { animation-delay: 4.6s; }
@keyframes pingRing { 0% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(6); opacity: 0; } }
:is(#jt5se-lp,.jt5se-lp) .gps-more { margin-top: clamp(40px, 6vh, 64px); border-top: 1px solid rgba(253, 249, 240, 0.14); padding-top: 28px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: baseline; }
:is(#jt5se-lp,.jt5se-lp) .gps-more h3 { color: var(--cosmo-haze); font-size: var(--fs-h4); white-space: nowrap; }
:is(#jt5se-lp,.jt5se-lp) .gps-more p { color: rgba(253, 249, 240, 0.75); max-width: 72ch; }

/* ---------- 15 Texting (interactive tiles) ---------- */
:is(#jt5se-lp,.jt5se-lp) .texting { background: var(--gradient-orbit); padding: clamp(88px, 12vh, 150px) 0; color: var(--fg-on-dark); overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .texting .tx-head { max-width: 60ch; margin-bottom: clamp(36px, 5vh, 56px); }
:is(#jt5se-lp,.jt5se-lp) .texting h2 { color: #fff; }
:is(#jt5se-lp,.jt5se-lp) .texting .lede { color: rgba(253, 249, 240, 0.85); margin-top: var(--space-4); }
:is(#jt5se-lp,.jt5se-lp) .tx-grid { display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 68px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .tx-tiles { display: flex; flex-direction: column; gap: 12px; }
:is(#jt5se-lp,.jt5se-lp) .tx-tile { text-align: left; font-family: inherit; background: rgba(253, 249, 240, 0.05); border: 1px solid rgba(253, 249, 240, 0.16); border-radius: var(--radius-md); padding: 18px 22px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: background 0.25s var(--ease-standard), border-color 0.25s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .tx-tile:hover { border-color: rgba(253, 249, 240, 0.42); }
:is(#jt5se-lp,.jt5se-lp) .tx-tile.active { background: rgba(253, 249, 240, 0.12); border-color: var(--cosmo-haze); }
:is(#jt5se-lp,.jt5se-lp) .tx-tile-title { font-size: var(--fs-h4); font-weight: var(--fw-heavy); color: #fff; }
:is(#jt5se-lp,.jt5se-lp) .tx-tile-desc { font-size: var(--fs-body-sm); color: rgba(253, 249, 240, 0.72); }
:is(#jt5se-lp,.jt5se-lp) .tx-media { display: flex; align-items: center; justify-content: center; }
:is(#jt5se-lp,.jt5se-lp) .tx-media img { height: clamp(480px, 66vh, 720px); width: auto; max-width: 100%; border-radius: var(--radius-lg); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45)); }
:is(#jt5se-lp,.jt5se-lp) .tx-media img.tx-flat { filter: none; }
@media (max-width: 860px) {
  :is(#jt5se-lp,.jt5se-lp) .tx-grid { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .tx-media { order: 2; margin-top: 16px; }
  :is(#jt5se-lp,.jt5se-lp) .tx-media img { height: auto !important; width: auto; max-width: 100%; max-height: 56vh; }
  :is(#jt5se-lp,.jt5se-lp) .tx-tiles { order: 1; flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; scrollbar-width: none; margin-right: -4vw; padding-right: 4vw; }
  :is(#jt5se-lp,.jt5se-lp) .tx-tiles::-webkit-scrollbar { display: none; }
  :is(#jt5se-lp,.jt5se-lp) .tx-tile { flex: 0 0 auto; padding: 12px 16px; }
  :is(#jt5se-lp,.jt5se-lp) .tx-tile-desc { display: none; }
}

/* ---------- 16 Safety carousel + 17 Battery carousel ---------- */
:is(#jt5se-lp,.jt5se-lp) .rotator { padding: clamp(88px, 12vh, 150px) 0; }
:is(#jt5se-lp,.jt5se-lp) .rotator.alt { background: var(--bg-2); }
:is(#jt5se-lp,.jt5se-lp) .rot-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vh, 52px); }
:is(#jt5se-lp,.jt5se-lp) .rot-stage { position: relative; min-height: clamp(420px, 56vh, 560px); }
:is(#jt5se-lp,.jt5se-lp) .rot-slide {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 0.6s var(--ease-standard);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 64px); align-items: center;
}
:is(#jt5se-lp,.jt5se-lp) .rot-slide.active { opacity: 1; pointer-events: auto; }
:is(#jt5se-lp,.jt5se-lp) .rot-slide .media { height: 100%; max-height: clamp(420px, 56vh, 560px); border-radius: var(--radius-lg); overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
:is(#jt5se-lp,.jt5se-lp) .rot-slide .media img { width: 100%; height: 100%; object-fit: cover; }
:is(#jt5se-lp,.jt5se-lp) .rot-slide .media.contain img { object-fit: contain; padding: 8%; height: 100%; }
:is(#jt5se-lp,.jt5se-lp) .rot-copy .eyebrow { margin-bottom: 10px; }
:is(#jt5se-lp,.jt5se-lp) .rot-copy h3 { font-size: clamp(24px, 2.6vw, 36px); letter-spacing: var(--tracking-tight); margin-bottom: 12px; }
:is(#jt5se-lp,.jt5se-lp) .rot-copy p { max-width: 44ch; }
:is(#jt5se-lp,.jt5se-lp) .rot-dots { display: flex; gap: 8px; margin-top: 26px; }
:is(#jt5se-lp,.jt5se-lp) .rot-dots button { width: 34px; height: 3px; border: none; border-radius: 2px; padding: 0; background: rgba(0, 0, 0, 0.12); transition: background 0.3s; }
:is(#jt5se-lp,.jt5se-lp) .rot-dots button.active { background: #10131a; }

/* ---------- 16 SOS / 911 toggle ---------- */
:is(#jt5se-lp,.jt5se-lp) .sos { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .sos-head { margin-bottom: clamp(32px, 5vh, 52px); }
:is(#jt5se-lp,.jt5se-lp) .sos-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .sos-toggle { display: inline-flex; background: var(--bg-2); border-radius: var(--radius-pill); padding: 5px; gap: 4px; margin-bottom: clamp(24px, 3.5vh, 36px); }
:is(#jt5se-lp,.jt5se-lp) .sos-tab { font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-heavy); color: var(--fg-2); background: transparent; border: none; border-radius: var(--radius-pill); padding: 11px 24px; cursor: pointer; transition: background 0.25s var(--ease-standard), color 0.25s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .sos-tab.active { background: var(--cosmo-pulse); color: #fff; }
:is(#jt5se-lp,.jt5se-lp) .sos-pane { display: none; }
:is(#jt5se-lp,.jt5se-lp) .sos-pane.active { display: block; }
:is(#jt5se-lp,.jt5se-lp) .sos-pane h3 { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: var(--tracking-tight); margin-bottom: 12px; }
:is(#jt5se-lp,.jt5se-lp) .sos-pane p { max-width: 50ch; color: var(--fg-2); }
:is(#jt5se-lp,.jt5se-lp) .sos-list { list-style: none; display: grid; gap: 10px; margin-top: 20px; }
:is(#jt5se-lp,.jt5se-lp) .sos-list li { position: relative; padding-left: 30px; font-size: var(--fs-body-sm); }
:is(#jt5se-lp,.jt5se-lp) .sos-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="%230068FF"/><path d="M7 12.4l3.3 3.3L17 9.1" stroke="white" stroke-width="2.3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-size: contain; background-repeat: no-repeat; }
:is(#jt5se-lp,.jt5se-lp) .sos-media { display: flex; align-items: center; justify-content: center; }
:is(#jt5se-lp,.jt5se-lp) .sos-media img { width: 100%; max-width: none; height: auto; object-fit: contain; }
@media (max-width: 860px) { :is(#jt5se-lp,.jt5se-lp) .sos-grid { grid-template-columns: 1fr; } }

/* ---------- 18 Tiers ---------- */
:is(#jt5se-lp,.jt5se-lp) .tiers { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .tiers-head { text-align: center; margin-bottom: clamp(40px, 6vh, 64px); }
:is(#jt5se-lp,.jt5se-lp) .tiers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); align-items: stretch; max-width: 740px; margin: 0 auto; }
:is(#jt5se-lp,.jt5se-lp) .tier {
  background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-lg);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 0; position: relative;
}
:is(#jt5se-lp,.jt5se-lp) .tier.popular { box-shadow: 0 0 0 2px var(--cosmo-orbit), var(--shadow-md); }
:is(#jt5se-lp,.jt5se-lp) .tier-badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--cosmo-orbit); color: #fff; font-size: 11px; font-weight: var(--fw-heavy);
  letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill);
  z-index: 5; box-shadow: 0 3px 12px rgba(5, 15, 30, 0.32);
}
:is(#jt5se-lp,.jt5se-lp) .tier .shot { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--bg-2); border-radius: var(--radius-md); }
:is(#jt5se-lp,.jt5se-lp) .tier .shot img { height: clamp(200px, 20vw, 258px); width: auto; max-width: 92%; object-fit: contain; }
:is(#jt5se-lp,.jt5se-lp) .tier .shot.cover { overflow: hidden; background: var(--bg-2); }
:is(#jt5se-lp,.jt5se-lp) .tier .shot.cover img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; }

/* Safety carousel: renders sit on gray (not white) and are much bigger; girl photo is narrower + taller */
:is(#jt5se-lp,.jt5se-lp) #safetyRotator .rot-stage { min-height: clamp(480px, 66vh, 680px); }
:is(#jt5se-lp,.jt5se-lp) #safetyRotator .rot-slide .media { background: var(--bg-2); max-height: clamp(480px, 66vh, 680px); }
:is(#jt5se-lp,.jt5se-lp) #safetyRotator .rot-slide .media.contain img { padding: 0; transform: scale(1.15); }
:is(#jt5se-lp,.jt5se-lp) #safetyRotator .rot-slide .media.portrait { max-width: 440px; margin: 0 auto; aspect-ratio: 3 / 4; height: auto; max-height: none; }
:is(#jt5se-lp,.jt5se-lp) .tier h3 { font-size: var(--fs-h4); }
:is(#jt5se-lp,.jt5se-lp) .tier .price { margin: 6px 0 16px; color: var(--fg-1); font-size: var(--fs-body); }
:is(#jt5se-lp,.jt5se-lp) .tier .price strong { font-size: 26px; font-weight: var(--fw-heavy); }
:is(#jt5se-lp,.jt5se-lp) .tier ul { list-style: none; display: grid; gap: 9px; margin-bottom: 22px; }
:is(#jt5se-lp,.jt5se-lp) .tier li { font-size: var(--fs-body-sm); color: var(--fg-2); padding-left: 22px; position: relative; }
:is(#jt5se-lp,.jt5se-lp) .tier li::before { content: ""; position: absolute; left: 0; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--cosmo-haze); mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; background-color: var(--cosmo-spark); }
:is(#jt5se-lp,.jt5se-lp) .tier .btn { margin-top: auto; }
:is(#jt5se-lp,.jt5se-lp) .tier-note { text-align: center; margin-top: 22px; font-size: var(--fs-caption); color: var(--fg-3); }

/* ---------- 19 Size it up ---------- */
:is(#jt5se-lp,.jt5se-lp) .size { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-2); }
:is(#jt5se-lp,.jt5se-lp) .size-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .size-stage { background: #fff; border-radius: var(--radius-xl); aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; position: relative; }
:is(#jt5se-lp,.jt5se-lp) .size-stage img { max-height: 78%; max-width: 78%; object-fit: contain; }
:is(#jt5se-lp,.jt5se-lp) .size-stage.cosmo-3d { background: #fff; }
:is(#jt5se-lp,.jt5se-lp) .size-stage.cosmo-3d model-viewer { width: 100%; height: 100%; }
:is(#jt5se-lp,.jt5se-lp) .size-stage.cosmo-3d .angles { flex-wrap: nowrap; gap: 6px; padding: 0 10px; }
:is(#jt5se-lp,.jt5se-lp) .size-stage.cosmo-3d .angles button { padding: 8px 13px; font-size: 12px; }
:is(#jt5se-lp,.jt5se-lp) .size-dims { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: var(--fs-caption); color: var(--fg-3); letter-spacing: 0.06em; }
:is(#jt5se-lp,.jt5se-lp) .spec-table { border-top: 1px solid var(--border-2); }
:is(#jt5se-lp,.jt5se-lp) .spec-row { display: grid; grid-template-columns: minmax(120px, 0.7fr) 1.3fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--border-1); }
:is(#jt5se-lp,.jt5se-lp) .spec-row dt { font-size: var(--fs-body-sm); font-weight: var(--fw-heavy); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .spec-row dd { font-size: var(--fs-body-sm); color: var(--fg-2); }

/* ---------- 20 Plans ---------- */
:is(#jt5se-lp,.jt5se-lp) .plans { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .plans-head { text-align: center; margin-bottom: 14px; }
:is(#jt5se-lp,.jt5se-lp) .plans-note { text-align: center; font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cosmo-spark); margin-bottom: clamp(36px, 5vh, 52px); }
:is(#jt5se-lp,.jt5se-lp) .plans-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 22px); }
:is(#jt5se-lp,.jt5se-lp) .plan { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-md); padding: 26px 24px; position: relative; }
:is(#jt5se-lp,.jt5se-lp) .plan .badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--cosmo-haze); color: #4b2f05; font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
:is(#jt5se-lp,.jt5se-lp) .plan h3 { font-size: var(--fs-body); margin-bottom: 10px; }
:is(#jt5se-lp,.jt5se-lp) .plan .amt { font-size: 30px; font-weight: var(--fw-heavy); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .plan .amt span { font-size: 14px; font-weight: var(--fw-regular); color: var(--fg-2); }
:is(#jt5se-lp,.jt5se-lp) .plan .sub { font-size: var(--fs-caption); color: var(--fg-3); margin: 4px 0 14px; }
:is(#jt5se-lp,.jt5se-lp) .plan ul { list-style: none; display: grid; gap: 7px; }
:is(#jt5se-lp,.jt5se-lp) .plan li { font-size: var(--fs-caption); color: var(--fg-2); padding-left: 18px; position: relative; }
:is(#jt5se-lp,.jt5se-lp) .plan li::before { content: "✓"; position: absolute; left: 0; color: var(--cosmo-spark); font-weight: var(--fw-heavy); }

/* ---------- 20b Cosmo Care ---------- */
:is(#jt5se-lp,.jt5se-lp) .care { padding: clamp(72px, 10vh, 120px) 0; background: var(--bg-2); }
:is(#jt5se-lp,.jt5se-lp) .care .plans-head { margin-bottom: clamp(30px, 4.5vh, 52px); }
:is(#jt5se-lp,.jt5se-lp) .care-cover { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 4.5vh, 48px); }
:is(#jt5se-lp,.jt5se-lp) .care-chip { background: #fff; border: 1px solid var(--border-1); border-radius: var(--radius-pill); padding: 10px 20px; font-size: var(--fs-body-sm); font-weight: var(--fw-heavy); color: var(--fg-1); }
:is(#jt5se-lp,.jt5se-lp) .care-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); max-width: 680px; margin: 0 auto; align-items: stretch; }
:is(#jt5se-lp,.jt5se-lp) .care-grid .plan { display: flex; flex-direction: column; }
@media (max-width: 620px) { :is(#jt5se-lp,.jt5se-lp) .care-grid { grid-template-columns: 1fr; } }

/* ---------- 22c Reviews rail ---------- */
:is(#jt5se-lp,.jt5se-lp) .reviews { padding: clamp(72px, 10vh, 130px) 0; background: var(--bg-1); overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .reviews-head { text-align: center; margin-bottom: clamp(34px, 5vh, 56px); width: min(1440px, 92vw); margin-inline: auto; }
:is(#jt5se-lp,.jt5se-lp) .rv-stars-lg { color: var(--cosmo-spark); font-size: 24px; letter-spacing: 4px; }
:is(#jt5se-lp,.jt5se-lp) .rv-rating { margin-top: 12px; font-size: var(--fs-body); color: var(--fg-2); }
:is(#jt5se-lp,.jt5se-lp) .rv-rating strong { color: var(--fg-1); font-weight: var(--fw-heavy); }
:is(#jt5se-lp,.jt5se-lp) .rv-rating span { margin: 0 8px; color: var(--fg-3); }
:is(#jt5se-lp,.jt5se-lp) .reviews-head h2 { margin-top: 14px; }
:is(#jt5se-lp,.jt5se-lp) .reviews-rail { display: flex; gap: clamp(16px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px calc((100vw - min(1440px, 92vw)) / 2) 10px; scroll-padding-inline: calc((100vw - min(1440px, 92vw)) / 2); cursor: grab; }
:is(#jt5se-lp,.jt5se-lp) .reviews-rail::-webkit-scrollbar { display: none; }
:is(#jt5se-lp,.jt5se-lp) .reviews-rail.dragging { scroll-snap-type: none; cursor: grabbing; }
:is(#jt5se-lp,.jt5se-lp) .review-card { flex: 0 0 clamp(290px, 26vw, 350px); scroll-snap-align: start; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--border-1); box-shadow: 0 4px 22px rgba(8, 20, 40, 0.05); display: flex; flex-direction: column; min-height: clamp(500px, 58vh, 580px); position: relative; }
:is(#jt5se-lp,.jt5se-lp) .rv-content { flex: 1; display: flex; flex-direction: column; position: relative; z-index: 2; }
:is(#jt5se-lp,.jt5se-lp) .review-card .rv-stars { color: var(--cosmo-spark); font-size: 16px; letter-spacing: 2px; padding: 26px 26px 0; }
:is(#jt5se-lp,.jt5se-lp) .rv-title { font-size: var(--fs-h4); color: var(--cosmo-orbit); letter-spacing: var(--tracking-tight); padding: 14px 26px 0; }
:is(#jt5se-lp,.jt5se-lp) .rv-body { font-size: var(--fs-body-sm); color: #35485f; line-height: var(--lh-loose); padding: 12px 26px 0; flex: 1; }
:is(#jt5se-lp,.jt5se-lp) .rv-meta { padding: 18px 26px 26px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
:is(#jt5se-lp,.jt5se-lp) .rv-name { font-weight: var(--fw-heavy); color: var(--cosmo-orbit); font-size: var(--fs-body-sm); }
:is(#jt5se-lp,.jt5se-lp) .rv-verified { font-size: var(--fs-caption); color: var(--cosmo-pulse); font-weight: var(--fw-heavy); display: inline-flex; align-items: center; gap: 5px; }
:is(#jt5se-lp,.jt5se-lp) .rv-verified::before { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2323a24d'/%3E%3Cpath d='M7 12.4l3.2 3.1L17 8.6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
:is(#jt5se-lp,.jt5se-lp) .review-card.video { background: #0b1f38; border: none; box-shadow: 0 4px 22px rgba(8, 20, 40, 0.05); }
:is(#jt5se-lp,.jt5se-lp) .rv-poster,
:is(#jt5se-lp,.jt5se-lp) .rv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; background: #0b1f38; }
:is(#jt5se-lp,.jt5se-lp) .rv-video { cursor: pointer; }
:is(#jt5se-lp,.jt5se-lp) .rv-vscrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,17,32,0.55), rgba(6,17,32,0.06) 32%, rgba(6,17,32,0.2) 62%, rgba(6,17,32,0.62)); }
:is(#jt5se-lp,.jt5se-lp) .rv-vid-name { padding: 6px 26px 0; color: #fff; display: flex; flex-direction: column; line-height: 1.2; }
:is(#jt5se-lp,.jt5se-lp) .rv-vid-name strong { font-size: var(--fs-body); font-weight: var(--fw-heavy); }
:is(#jt5se-lp,.jt5se-lp) .rv-vid-name span { font-size: var(--fs-caption); color: rgba(255,255,255,0.78); margin-top: 2px; }
:is(#jt5se-lp,.jt5se-lp) .review-card.video .rv-vid-name { margin-top: auto; padding: 0 26px 24px; }
:is(#jt5se-lp,.jt5se-lp) .rv-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3; width: 64px; height: 64px; border-radius: 50%; border: none; background: #fff; color: var(--cosmo-orbit); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 22px rgba(0,0,0,0.28), 0 0 0 6px rgba(255,255,255,0.16); transition: transform 0.2s var(--ease-standard), box-shadow 0.2s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .rv-play:hover { transform: translate(-50%,-50%) scale(1.07); box-shadow: 0 8px 26px rgba(0,0,0,0.32), 0 0 0 8px rgba(255,255,255,0.2); }
:is(#jt5se-lp,.jt5se-lp) .rv-play svg { width: 26px; height: 26px; }
:is(#jt5se-lp,.jt5se-lp) .review-card.video.playing .rv-play { display: none; }
:is(#jt5se-lp,.jt5se-lp) .reviews-progress { width: min(1440px, 92vw); height: 3px; background: rgba(8,20,40,0.1); border-radius: 2px; margin: 20px auto 0; }
:is(#jt5se-lp,.jt5se-lp) .reviews-progress span { display: block; height: 100%; background: var(--cosmo-orbit); border-radius: 2px; width: 30%; }

/* ---------- 21 Know more ---------- */
:is(#jt5se-lp,.jt5se-lp) .know { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-2); }
:is(#jt5se-lp,.jt5se-lp) .know h2 { margin-bottom: clamp(36px, 5vh, 56px); }
:is(#jt5se-lp,.jt5se-lp) .know-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 26px); }
:is(#jt5se-lp,.jt5se-lp) .know-tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 4.6; display: flex; align-items: flex-end; text-decoration: none; background: #fff; }
:is(#jt5se-lp,.jt5se-lp) .know-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-entry); }
:is(#jt5se-lp,.jt5se-lp) .know-tile.contain img { object-fit: contain; padding: 12%; }
:is(#jt5se-lp,.jt5se-lp) .know-tile:hover img { transform: scale(1.045); }
:is(#jt5se-lp,.jt5se-lp) .know-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,15,30,0) 45%, rgba(5,15,30,0.62) 100%); }
:is(#jt5se-lp,.jt5se-lp) .know-tile.light::after { background: linear-gradient(180deg, rgba(253,249,240,0) 45%, rgba(94,87,73,0.5) 100%); }
:is(#jt5se-lp,.jt5se-lp) .know-tile .tile-label { position: relative; z-index: 2; color: #fff; padding: 24px; font-size: var(--fs-h4); font-weight: var(--fw-heavy); display: flex; align-items: center; gap: 10px; width: 100%; justify-content: space-between; }
:is(#jt5se-lp,.jt5se-lp) .know-tile .tile-label svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---------- 22 Newsletter ---------- */
/* The whole block runs on --bg-1. The storefront body is cream, which showed
   below the block as a second colour; btso.js repaints the body to match so the
   page reads as one surface from the hero to the bottom of the block. */
:is(#jt5se-lp,.jt5se-lp) .newsletter { padding: clamp(48px, 7vh, 88px) 0 clamp(72px, 10vh, 120px); background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .news-card { background: var(--cosmo-orbit); border-radius: var(--radius-xl); padding: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
:is(#jt5se-lp,.jt5se-lp) .news-card h2 { color: #fff; font-size: clamp(26px, 3vw, 40px); }
:is(#jt5se-lp,.jt5se-lp) .news-card p { color: rgba(253,249,240,0.75); margin-top: 10px; font-size: var(--fs-body-sm); }
:is(#jt5se-lp,.jt5se-lp) .news-form { display: flex; gap: 10px; }
:is(#jt5se-lp,.jt5se-lp) .news-form input {
  flex: 1; min-width: 0; padding: 15px 20px; border-radius: var(--radius-pill);
  border: 1px solid rgba(253,249,240,0.25); background: rgba(253,249,240,0.08);
  color: #fff; font-family: var(--font-sans); font-size: var(--fs-body-sm); outline: none;
}
:is(#jt5se-lp,.jt5se-lp) .news-form input::placeholder { color: rgba(253,249,240,0.5); }
:is(#jt5se-lp,.jt5se-lp) .news-form input:focus { border-color: var(--cosmo-haze); }
:is(#jt5se-lp,.jt5se-lp) .news-fine { margin-top: 12px !important; font-size: var(--fs-caption) !important; color: rgba(253,249,240,0.5) !important; }
:is(#jt5se-lp,.jt5se-lp) .news-status { margin-top: 10px !important; font-size: var(--fs-body-sm) !important; color: rgba(253,249,240,0.72) !important; min-height: 1.2em; }
:is(#jt5se-lp,.jt5se-lp) .news-status.is-ok { color: #9bff9a !important; }
:is(#jt5se-lp,.jt5se-lp) .news-status.is-error { color: #ffb4b4 !important; }

/* ---------- 23 FAQ ---------- */
:is(#jt5se-lp,.jt5se-lp) .faq { padding: clamp(88px, 12vh, 150px) 0 clamp(72px, 9vh, 110px); background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .faq h2 { margin-bottom: clamp(32px, 5vh, 52px); }
:is(#jt5se-lp,.jt5se-lp) .faq-item { border-top: 1px solid var(--border-1); }
:is(#jt5se-lp,.jt5se-lp) .faq-item:last-child { border-bottom: 1px solid var(--border-1); }
:is(#jt5se-lp,.jt5se-lp) .faq-q {
  width: 100%; background: none; border: none; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; font-size: clamp(16px, 1.4vw, 19px); font-weight: var(--fw-heavy); color: var(--fg-1);
}
:is(#jt5se-lp,.jt5se-lp) .faq-q .chev { flex: 0 0 auto; transition: transform 0.35s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .faq-item.open .faq-q .chev { transform: rotate(180deg); }
:is(#jt5se-lp,.jt5se-lp) .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .faq-item.open .faq-a { grid-template-rows: 1fr; }
:is(#jt5se-lp,.jt5se-lp) .faq-a > div { overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .faq-a p { padding: 0 4px 22px; max-width: 78ch; }

/* ---------- Footnotes ---------- */
:is(#jt5se-lp,.jt5se-lp) .footnotes { padding: 0 0 clamp(56px, 8vh, 88px); background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .footnotes p { font-size: var(--fs-caption); color: var(--fg-3); max-width: 100ch; margin-bottom: 6px; }

/* ---------- 24 Final CTA ---------- */
:is(#jt5se-lp,.jt5se-lp) .final { background: var(--gradient-orbit); padding: clamp(88px, 12vh, 150px) 0; text-align: center; overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .final img.watch { width: min(640px, 88vw); margin: 0 auto clamp(24px, 4vh, 40px); }
:is(#jt5se-lp,.jt5se-lp) .final h2 { color: #fff; font-size: clamp(38px, 5vw, 72px); letter-spacing: var(--tracking-display); }
:is(#jt5se-lp,.jt5se-lp) .final .price-row { margin-top: var(--space-4); color: rgba(253,249,240,0.8); font-size: clamp(15px, 1.3vw, 18px); }
:is(#jt5se-lp,.jt5se-lp) .final .price-row strong { color: #fff; font-size: 1.3em; font-weight: var(--fw-heavy); }
:is(#jt5se-lp,.jt5se-lp) .final .ctas { display: flex; gap: 14px; justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }

/* ---------- 25 Footer ---------- */
:is(#jt5se-lp,.jt5se-lp) footer { background: var(--cosmo-orbit); color: var(--fg-on-dark); padding: clamp(56px, 8vh, 88px) 0 36px; border-top: 1px solid rgba(253,249,240,0.1); }
:is(#jt5se-lp,.jt5se-lp) .foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; margin-bottom: 56px; }
:is(#jt5se-lp,.jt5se-lp) .foot-brand img { height: 24px; margin-bottom: 16px; }
:is(#jt5se-lp,.jt5se-lp) .foot-brand p { color: rgba(253,249,240,0.6); font-size: var(--fs-body-sm); max-width: 30ch; }
:is(#jt5se-lp,.jt5se-lp) .foot-col h4 { color: #fff; font-size: var(--fs-body-sm); margin-bottom: 14px; letter-spacing: 0.04em; }
:is(#jt5se-lp,.jt5se-lp) .foot-col a { display: block; color: rgba(253,249,240,0.62); font-size: var(--fs-body-sm); padding: 5px 0; text-decoration: none; }
:is(#jt5se-lp,.jt5se-lp) .foot-col a:hover { color: #fff; text-decoration: none; }
:is(#jt5se-lp,.jt5se-lp) .foot-legal { border-top: 1px solid rgba(253,249,240,0.12); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--fs-caption); color: rgba(253,249,240,0.5); }
:is(#jt5se-lp,.jt5se-lp) .foot-legal a { color: rgba(253,249,240,0.5); margin-left: 18px; }
:is(#jt5se-lp,.jt5se-lp) .foot-legal a:first-child { margin-left: 0; }
:is(#jt5se-lp,.jt5se-lp) .foot-legal a:hover { color: #fff; text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  :is(#jt5se-lp,.jt5se-lp) .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  :is(#jt5se-lp,.jt5se-lp) .plans-grid { grid-template-columns: repeat(2, 1fr); }
  :is(#jt5se-lp,.jt5se-lp) .tiers-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  :is(#jt5se-lp,.jt5se-lp) .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 880px) {
  :is(#jt5se-lp,.jt5se-lp) .nav-links { display: none; }
  :is(#jt5se-lp,.jt5se-lp) .nav-cta { margin-left: auto; }
  :is(#jt5se-lp,.jt5se-lp) .trio { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  :is(#jt5se-lp,.jt5se-lp) .gtrio-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; gap: 20px; }
  :is(#jt5se-lp,.jt5se-lp) .band-grid { grid-template-columns: 1fr; gap: 32px; max-width: 560px; margin: 0 auto; }
  :is(#jt5se-lp,.jt5se-lp) .closer-head { grid-template-columns: 1fr; align-items: start; }
  :is(#jt5se-lp,.jt5se-lp) .peek-slide { --peek-w: 84vw; aspect-ratio: 4 / 3.4; }
  :is(#jt5se-lp,.jt5se-lp) .peek-story .peek-photo { aspect-ratio: 4 / 3.4; }
  :is(#jt5se-lp,.jt5se-lp) .sfsetup-grid,
:is(#jt5se-lp,.jt5se-lp) .parents-grid { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .parents-photo { order: 2; aspect-ratio: 4 / 3.2; }
  :is(#jt5se-lp,.jt5se-lp) .parents-photo img { object-position: 30% 50%; }
  :is(#jt5se-lp,.jt5se-lp) .gps-grid { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .gps-more { grid-template-columns: 1fr; gap: 8px; }
  :is(#jt5se-lp,.jt5se-lp) .rot-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  :is(#jt5se-lp,.jt5se-lp) .rot-slide { grid-template-columns: 1fr; align-content: start; gap: 22px; }
  :is(#jt5se-lp,.jt5se-lp) .rot-stage { min-height: 510px; }
  :is(#jt5se-lp,.jt5se-lp) .rot-slide .media { max-height: 340px; aspect-ratio: 16/10; height: auto; width: 100%; }
  :is(#jt5se-lp,.jt5se-lp) .schools-img img { aspect-ratio: 4 / 3; }
  :is(#jt5se-lp,.jt5se-lp) .size-grid { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .news-card { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .know-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  :is(#jt5se-lp,.jt5se-lp) .step-frame img { height: min(56vh, 620px); }
  :is(#jt5se-lp,.jt5se-lp) .pf-head { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  :is(#jt5se-lp,.jt5se-lp) .hero-ctas .btn { flex: 0 0 auto; width: 52%; }
  :is(#jt5se-lp,.jt5se-lp) .hero-content { padding-top: 92px; }
  :is(#jt5se-lp,.jt5se-lp) .scroll-cue { bottom: 22px; font-size: 0; gap: 0; }
  :is(#jt5se-lp,.jt5se-lp) .plans-grid { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .news-form { flex-direction: column; }
  :is(#jt5se-lp,.jt5se-lp) .spec-row { grid-template-columns: 1fr; gap: 2px; }
  :is(#jt5se-lp,.jt5se-lp) .peek-hud { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .peek-arrows { order: -1; justify-content: flex-end; }
  :is(#jt5se-lp,.jt5se-lp) .step-hud { max-width: 74vw; }
  :is(#jt5se-lp,.jt5se-lp) .step-cap h3,
:is(#jt5se-lp,.jt5se-lp) .step-cap p { white-space: normal; }
  :is(#jt5se-lp,.jt5se-lp) .foot-grid { grid-template-columns: 1fr; }
  :is(#jt5se-lp,.jt5se-lp) .foot-legal { flex-direction: column; }
  :is(#jt5se-lp,.jt5se-lp) .foot-legal a { margin-left: 0; margin-right: 18px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:has(.jt5se-lp) { scroll-behavior: auto; }
  :is(#jt5se-lp,.jt5se-lp) *,
:is(#jt5se-lp,.jt5se-lp) *::before,
:is(#jt5se-lp,.jt5se-lp) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  :is(#jt5se-lp,.jt5se-lp) .reveal { opacity: 1; transform: none; }
  :is(#jt5se-lp,.jt5se-lp) .bleed-media img { transform: none; }
}
/* ---------- 3D watch viewer (inlined from jrtrack5-3d) ---------- */
:is(#jt5se-lp,.jt5se-lp) .watch3d { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-1); }
:is(#jt5se-lp,.jt5se-lp) .watch3d-head { text-align: center; max-width: 58ch; margin: 0 auto clamp(36px, 5vh, 56px); }
:is(#jt5se-lp,.jt5se-lp) .watch3d-head .lede { margin: var(--space-4) auto 0; }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d { position: relative; background: var(--bg-2); border-radius: var(--radius-xl); overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d model-viewer { width: 100%; height: clamp(380px, 64vh, 620px); display: block; background: transparent; --progress-bar-color: var(--cosmo-pulse); --progress-bar-height: 3px; --poster-color: transparent; outline: none; }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d .hint { position: absolute; top: 18px; left: 22px; font-size: 13px; color: var(--fg-2); background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 8px 14px; border-radius: 999px; pointer-events: none; display: flex; align-items: center; gap: 7px; transition: opacity 0.4s ease; }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d .hint.hidden { opacity: 0; }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d .hint svg { width: 15px; height: 15px; }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d .badge { position: absolute; top: 18px; right: 22px; font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cosmo-orbit); background: rgba(255,255,255,0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 8px 13px; border-radius: 999px; pointer-events: none; display: flex; align-items: center; gap: 6px; }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cosmo-pulse); }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d .angles { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d .angles button { font-family: var(--font-sans); font-size: 13px; color: var(--fg-1); background: #fff; border: 1px solid var(--border-1); border-radius: 999px; padding: 9px 18px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color 0.22s var(--ease-standard), color 0.22s var(--ease-standard), transform 0.22s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d .angles button:hover { border-color: var(--cosmo-pulse); color: var(--cosmo-pulse); transform: translateY(-1px); }
:is(#jt5se-lp,.jt5se-lp) .cosmo-3d .angles button.active { background: var(--cosmo-pulse); border-color: var(--cosmo-pulse); color: #fff; }

/* ---------- Live parent app (iframe embed of cosmo-parent-app) ---------- */
:is(#jt5se-lp,.jt5se-lp) .tryapp { padding: clamp(88px, 12vh, 150px) 0; background: var(--bg-2); overflow: hidden; }
:is(#jt5se-lp,.jt5se-lp) .tryapp-grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(36px, 5vh, 56px); }
:is(#jt5se-lp,.jt5se-lp) .tryapp-copy { max-width: 52ch; }
:is(#jt5se-lp,.jt5se-lp) .tryapp-copy .lede { margin: var(--space-4) auto var(--space-6); }
/* Dynamic explainer: no card — a headline + short description + a few feature bullets
   that replace the intro copy once the visitor taps into the app. Desktop only. */
:is(#jt5se-lp,.jt5se-lp) .tryapp-intro { transition: opacity 0.24s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .tryapp-explainer { display: none; text-align: left; }
:is(#jt5se-lp,.jt5se-lp) .tae-inner { transition: opacity 0.55s var(--ease-entry), transform 0.55s var(--ease-entry); }
:is(#jt5se-lp,.jt5se-lp) .tryapp-explainer.swapping .tae-inner { opacity: 0; transform: translateY(8px); }
:is(#jt5se-lp,.jt5se-lp) .tae-title { font-size: clamp(23px, 2.5vw, 33px); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: var(--fw-heavy); color: #655b50; }
:is(#jt5se-lp,.jt5se-lp) .tae-desc { font-size: var(--fs-body); color: var(--fg-2); line-height: var(--lh-loose); margin-top: 12px; max-width: 42ch; }
:is(#jt5se-lp,.jt5se-lp) .tae-list { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 11px; max-width: 42ch; }
:is(#jt5se-lp,.jt5se-lp) .tae-list li { position: relative; padding-left: 26px; font-size: var(--fs-body-sm); color: var(--fg-1); line-height: var(--lh-normal); }
:is(#jt5se-lp,.jt5se-lp) .tae-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23e6eefb'/%3E%3Cpath d='M7 12.4l3.2 3.1L17 8.6' fill='none' stroke='%230068ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
@keyframes taeReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (min-width: 980px) {
  :is(#jt5se-lp,.jt5se-lp) .tryapp-grid { flex-direction: row-reverse; align-items: center; justify-content: center; text-align: left; gap: clamp(48px, 6vw, 104px); }
  :is(#jt5se-lp,.jt5se-lp) .tryapp-copy { flex: 0 0 42ch; max-width: 42ch; }
  :is(#jt5se-lp,.jt5se-lp) .tryapp-copy .lede { margin-left: 0; margin-right: 0; }
  /* intro shows until the visitor taps something; then the explainer takes its place */
  :is(#jt5se-lp,.jt5se-lp) .tryapp-copy.explaining .tryapp-intro { display: none; }
  :is(#jt5se-lp,.jt5se-lp) .tryapp-copy.explaining .tryapp-explainer { display: block; animation: taeReveal 0.5s var(--ease-entry) both; }
}
:is(#jt5se-lp,.jt5se-lp) .tryapp-phone { position: relative; width: 393px; height: 812px; border-radius: 54px; overflow: hidden; background: #000; box-shadow: 0 0 0 12px #1b1b1d, 0 0 0 13.5px #3d3d40, 0 32px 40px -24px rgba(20,15,8,0.45), 0 70px 130px -30px rgba(20,15,8,0.62); flex: none; }
:is(#jt5se-lp,.jt5se-lp) .tryapp-phone iframe { width: 393px; height: 812px; border: 0; display: block; }
@media (max-width: 767px) {
  /* scale the fixed 393x812 phone to ~86-90% width and reserve exactly its
     scaled footprint so the blue section below can't clip it */
  :is(#jt5se-lp,.jt5se-lp) .tryapp-phone { transform: scale(0.8); transform-origin: top center; margin-bottom: -142px; box-shadow: 0 0 0 10px #1b1b1d, 0 0 0 11.5px #3d3d40, 0 22px 40px -20px rgba(20,15,8,0.5); }
}
/* Desktop: scale the whole bezel (not the iframe alone) so the app screen
   stays aligned inside the frame. ~65px shorter than the 812px native height. */
@media (min-width: 980px) {
  :is(#jt5se-lp,.jt5se-lp) .tryapp-phone {
    transform: scale(0.92);
    transform-origin: top center;
    margin-bottom: -65px;
  }
}
/* ========== App embed gate: tap-to-try, prevents scroll-trap ========== */
:is(#jt5se-lp,.jt5se-lp) .app-embed { position: relative; }
:is(#jt5se-lp,.jt5se-lp) .app-embed iframe { pointer-events: none; }
:is(#jt5se-lp,.jt5se-lp) .app-embed.app-live iframe { pointer-events: auto; }
:is(#jt5se-lp,.jt5se-lp) .app-gate { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border: 0; cursor: pointer; font-family: inherit; background: linear-gradient(180deg, rgba(5,18,36,0.12), rgba(5,18,36,0.42)); transition: opacity 0.3s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .app-embed.app-live .app-gate { opacity: 0; pointer-events: none; }
:is(#jt5se-lp,.jt5se-lp) .app-gate-badge { background: var(--cosmo-spark); color: #fff; font-size: 11px; font-weight: var(--fw-heavy); letter-spacing: 0.14em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
:is(#jt5se-lp,.jt5se-lp) .app-gate-cta { display: inline-flex; align-items: center; gap: 9px; background: var(--cosmo-pulse); color: #fff; font-weight: var(--fw-heavy); font-size: 16px; padding: 15px 26px; border-radius: 999px; box-shadow: 0 12px 32px rgba(0,104,255,0.45); }
:is(#jt5se-lp,.jt5se-lp) .app-gate-cta svg { width: 16px; height: 16px; }
:is(#jt5se-lp,.jt5se-lp) .app-close { position: absolute; top: 12px; right: 12px; z-index: 6; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(10,15,26,0.62); color: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
:is(#jt5se-lp,.jt5se-lp) .app-close svg { width: 15px; height: 15px; }
:is(#jt5se-lp,.jt5se-lp) .app-embed.app-live .app-close { display: flex; }
/* The tap-to-try gate only earns its keep on mobile (where the iframe would trap
   scroll). On desktop the phone is directly interactive with no overlay. */
@media (min-width: 768px) {
  :is(#jt5se-lp,.jt5se-lp) .app-embed iframe { pointer-events: auto; }
  :is(#jt5se-lp,.jt5se-lp) .app-gate,
:is(#jt5se-lp,.jt5se-lp) .app-close { display: none !important; }
}

/* Sticky buy bar: sits under the hero and pins to the top of the viewport as
   soon as the hero scrolls past. Kept slim so it never crowds the theme header. */
/* ========== Mobile refinements (July mobile pass) ========== */
@media (max-width: 880px) {
  /* Scroll reveals: snappier and no stagger on small screens — the long 0.9s
     fade + delays read as "content loading late" while thumb-scrolling. */
  :is(#jt5se-lp,.jt5se-lp) .reveal { transform: translateY(14px); transition-duration: 0.4s; }
  :is(#jt5se-lp,.jt5se-lp) .reveal-d1,
:is(#jt5se-lp,.jt5se-lp) .reveal-d2,
:is(#jt5se-lp,.jt5se-lp) .reveal-d3 { transition-delay: 0s; }
  /* Card rails don't fade at all on mobile: they're swiped, not scrolled into. */
  :is(#jt5se-lp,.jt5se-lp) .trio-card.reveal,
:is(#jt5se-lp,.jt5se-lp) .gtrio-card.reveal { opacity: 1; transform: none; transition: none; }

  /* Swipeable card rails, bled to both screen edges (the .wrap 4vw gutter was
     showing as a white band that clipped the card + its text). */
  :is(#jt5se-lp,.jt5se-lp) .trio,
:is(#jt5se-lp,.jt5se-lp) .gtrio-grid {
    display: flex; grid-template-columns: none; max-width: none; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 6px;
    margin-inline: -4vw; padding-inline: 4vw;
    /* Without this the snap ports ignore padding-inline: the browser scrolls
       the rail by exactly the padding to align card 1's snap-start, cancelling
       the gutter and jamming it against the screen edge. */
    scroll-padding-inline: 4vw;
  }
  :is(#jt5se-lp,.jt5se-lp) .trio::-webkit-scrollbar,
:is(#jt5se-lp,.jt5se-lp) .gtrio-grid::-webkit-scrollbar { display: none; }
  :is(#jt5se-lp,.jt5se-lp) .trio-card,
:is(#jt5se-lp,.jt5se-lp) .gtrio-card { flex: 0 0 80%; scroll-snap-align: start; }
  :is(#jt5se-lp,.jt5se-lp) .gtrio-card { min-width: 0; }

  /* Carousel captions wrap to 2 lines on narrow screens; give the stack room so
     the text can't collide with the progress segments below it. */

  /* 300vh is three full screens of thumb-scrolling for one wipe — too long on a
     phone. The JS measures the track, so this shortens the effect automatically. */
  :is(#jt5se-lp,.jt5se-lp) .wipe-track { height: 220vh; }
}
@media (max-width: 600px) {
  :is(#jt5se-lp,.jt5se-lp) .hero-ctas .btn-ghost { display: none; }
  :is(#jt5se-lp,.jt5se-lp) #heroMedia { transform: none !important; object-position: 56% 38%; }
  :is(#jt5se-lp,.jt5se-lp) .schoolfi-tm { top: -1.05em; font-size: 0.4em; }
  /* keep phone inside its card so its drop-shadow isn't clipped, + give the viewport room below */
  :is(#jt5se-lp,.jt5se-lp) .peek-story .peek-phone { right: -4%; bottom: 3%; height: 80%; filter: drop-shadow(-6px 12px 22px rgba(0,0,0,0.26)); }
  :is(#jt5se-lp,.jt5se-lp) .peek-viewport { padding-bottom: clamp(58px, 11vh, 96px); }
  :is(#jt5se-lp,.jt5se-lp) .peek-progress { margin-top: 26px; }
  :is(#jt5se-lp,.jt5se-lp) .pf-card > p { min-height: 0; }
  :is(#jt5se-lp,.jt5se-lp) .pf-card .shot { height: clamp(300px, 84vw, 380px); }
  :is(#jt5se-lp,.jt5se-lp) .pf-card .shot img { transform: translateY(3%); }
  /* tiers: force single column + never let card content force overflow */
  :is(#jt5se-lp,.jt5se-lp) .tiers-grid { grid-template-columns: 1fr; max-width: 100%; }
  :is(#jt5se-lp,.jt5se-lp) .tier { min-width: 0; }
}
/* The buy bar is fixed to the bottom and ~57px tall; keep the end of the page
   clear of it. Last in the cascade so it beats the mobile footer override. */

/* ---------- Handwritten note pointing at the live app ----------
   Draws in once the section scrolls into view, nudges toward the phone on hover,
   and fades out after the visitor starts using the app. */
:is(#jt5se-lp,.jt5se-lp) .tryapp-stage { position: relative; flex: none; }
:is(#jt5se-lp,.jt5se-lp) .tryapp-note { position: absolute; z-index: 7; margin: 0; left: calc(100% + 64px); top: 70px; width: 210px; color: var(--cosmo-spark); font-family: "Caveat", "Bradley Hand", cursive; font-weight: 600; font-size: 34px; line-height: 1; transform: rotate(-5deg); pointer-events: none; transition: opacity 0.4s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .tryapp-note span { display: block; opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease-entry), transform 0.5s var(--ease-entry); }
:is(#jt5se-lp,.jt5se-lp) .tryapp-note svg { display: block; width: 120px; height: 90px; margin: 4px 0 0 -40px; transition: transform 0.3s var(--ease-standard); }
:is(#jt5se-lp,.jt5se-lp) .tryapp-note .tn-line { stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 0.9s var(--ease-entry) 0.35s; }
:is(#jt5se-lp,.jt5se-lp) .tryapp-note .tn-head { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset 0.3s var(--ease-entry) 1.15s; }
:is(#jt5se-lp,.jt5se-lp) .tryapp-note.is-in span { opacity: 1; transform: none; }
:is(#jt5se-lp,.jt5se-lp) .tryapp-note.is-in .tn-line,
:is(#jt5se-lp,.jt5se-lp) .tryapp-note.is-in .tn-head { stroke-dashoffset: 0; }
:is(#jt5se-lp,.jt5se-lp) .tryapp-stage:hover .tryapp-note svg { transform: translate(-6px, 3px); }
:is(#jt5se-lp,.jt5se-lp) .tryapp-note.is-done { opacity: 0; }
@media (max-width: 979px) {
  :is(#jt5se-lp,.jt5se-lp) .tryapp-note { left: calc(100% + 12px); top: 40px; width: 170px; font-size: 28px; }
}
@media (max-width: 767px) {
  /* the phone is scaled to 80% from its top center, so the note sits above its right shoulder */
  :is(#jt5se-lp,.jt5se-lp) .tryapp-note { display: none; }
}
:is(#jt5se-lp,.jt5se-lp) }
@media (prefers-reduced-motion: reduce) {
  .tryapp-note span, .tryapp-note .tn-line, .tryapp-note .tn-head { transition: none; }
}

/* ===== 2. Hero styles (JT5SE HERO:CSS) ===== */
:is(#jt5se-lp,.jt5se-lp) .jh {--bg-1:#fff; --bg-2:#f7f7f7; --bg-3:#efefef;
  --ink:#5E5749; --ink-2:#736b5d; --ink-3:#9a9283;
  --line:rgba(0,0,0,.09); --line-2:rgba(0,0,0,.16);
  --navy:#052B5D; --navy-2:#0A3A75; --navy-tint:#eef2f8;
  --pulse:#0068FF; --pulse-2:#0055D1;
  --star:#052B5D;
  --wrap:1400px;}
:is(#jt5se-lp,.jt5se-lp) .jh,
:is(#jt5se-lp,.jt5se-lp) .jh * {box-sizing:border-box}
:is(#jt5se-lp,.jt5se-lp) .jh {margin:0;background:#fff;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh {font-family:var(--font-sans);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
:is(#jt5se-lp,.jt5se-lp) .jh img {display:block;max-width:100%}
:is(#jt5se-lp,.jt5se-lp) .jh a {color:inherit;text-decoration:none}
:is(#jt5se-lp,.jt5se-lp) .jh a:hover {text-decoration:none}
:is(#jt5se-lp,.jt5se-lp) .jh button {font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:is(#jt5se-lp,.jt5se-lp) .jh h1,
:is(#jt5se-lp,.jt5se-lp) .jh h2,
:is(#jt5se-lp,.jt5se-lp) .jh h3,
:is(#jt5se-lp,.jt5se-lp) .jh h4,
:is(#jt5se-lp,.jt5se-lp) .jh p {margin:0}
:is(#jt5se-lp,.jt5se-lp) .jh h1,
:is(#jt5se-lp,.jt5se-lp) .jh h2,
:is(#jt5se-lp,.jt5se-lp) .jh h3,
:is(#jt5se-lp,.jt5se-lp) .jh h4,
:is(#jt5se-lp,.jt5se-lp) .jh p,
:is(#jt5se-lp,.jt5se-lp) .jh li,
:is(#jt5se-lp,.jt5se-lp) .jh .bal {text-wrap:balance}
:is(#jt5se-lp,.jt5se-lp) .jh .nb {white-space:nowrap}
:is(#jt5se-lp,.jt5se-lp) .jh .sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-promo {background:linear-gradient(90deg,#052B5D 0%,#0A3A75 55%,#1d56a3 100%);color:#fff;position:relative}
:is(#jt5se-lp,.jt5se-lp) .jh .promo-in {max-width:var(--wrap);margin:0 auto;height:56px;display:flex;align-items:center;justify-content:center;gap:28px;padding:0 24px}
:is(#jt5se-lp,.jt5se-lp) .jh .promo-copy {text-align:center;line-height:1.25}
:is(#jt5se-lp,.jt5se-lp) .jh .promo-copy b {display:block;font-weight:600;font-size:15px;letter-spacing:.02em}
:is(#jt5se-lp,.jt5se-lp) .jh .promo-copy span {font-size:12.5px;opacity:.85}
:is(#jt5se-lp,.jt5se-lp) .jh .cd {display:none;align-items:flex-start;gap:6px}
:is(#jt5se-lp,.jt5se-lp) .jh .cd.on {display:flex}
:is(#jt5se-lp,.jt5se-lp) .jh .cd-u {text-align:center;min-width:30px}
:is(#jt5se-lp,.jt5se-lp) .jh .cd-u b {display:block;font-size:19px;font-weight:600;line-height:1}
:is(#jt5se-lp,.jt5se-lp) .jh .cd-u small {font-size:8.5px;letter-spacing:.08em;opacity:.8}
:is(#jt5se-lp,.jt5se-lp) .jh .cd-sep {font-weight:600;line-height:1;opacity:.7}
:is(#jt5se-lp,.jt5se-lp) .jh .promo-cur {position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:600;display:flex;align-items:center;gap:3px}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-chev {width:10px;height:10px}
:is(#jt5se-lp,.jt5se-lp) .jh .ben {border-bottom:1px solid var(--line);background:#fff}
body:not([data-jh-past]) #cosmo-nav .site-header {box-shadow:none!important}
:is(#jt5se-lp,.jt5se-lp) .jh .ben-in {height:34px;display:flex;align-items:center;justify-content:center;gap:34px;font-size:13px;color:var(--ink);white-space:nowrap;overflow-x:auto;scrollbar-width:none;padding:0 16px}
:is(#jt5se-lp,.jt5se-lp) .jh .ben-in::-webkit-scrollbar {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .ben-in span {display:inline-flex;align-items:center;gap:8px}
:is(#jt5se-lp,.jt5se-lp) .jh .ben-in svg {width:15px;height:15px;flex:none}
:is(#jt5se-lp,.jt5se-lp) .jh .hero {background:#fff}
:is(#jt5se-lp,.jt5se-lp) .jh .hero-in {max-width:var(--wrap);margin:0 auto;padding:32px 24px 64px;display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:0}
:is(#jt5se-lp,.jt5se-lp) .jh .col-l {padding-right:24px;border-right:1px solid var(--line)}
:is(#jt5se-lp,.jt5se-lp) .jh .col-r {padding-left:24px}
:is(#jt5se-lp,.jt5se-lp) .jh .sticky {position:static}
:is(#jt5se-lp,.jt5se-lp) .jh .gal {position:relative;border-radius:20px;overflow:hidden;background:var(--bg-2);aspect-ratio:1/1}
@media (min-width:1024px) {:is(#jt5se-lp,.jt5se-lp) .jh .gal[style*="--gal-h"] {aspect-ratio:auto;height:var(--gal-h)}}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-track {display:flex;height:100%;transition:transform .45s var(--ease-entry)}
:is(#jt5se-lp,.jt5se-lp) .jh .slide {flex:0 0 100%;height:100%;position:relative;overflow:hidden;background:var(--bg-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .slide>img.jh-cover {width:100%;height:100%;object-fit:cover}
:is(#jt5se-lp,.jt5se-lp) .jh .slide>img.jh-contain {width:100%;height:100%;object-fit:contain}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-arrow {position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.12);display:grid;place-items:center;opacity:0;transition:opacity .2s;z-index:3}
:is(#jt5se-lp,.jt5se-lp) .jh .gal:hover .gal-arrow {opacity:1}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-arrow.jh-prev {left:14px}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-arrow.jh-next {right:14px}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-arrow svg {width:16px;height:16px}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-dots {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .thumbs {position:relative;margin-top:12px}
:is(#jt5se-lp,.jt5se-lp) .jh .thumbs-row {display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
:is(#jt5se-lp,.jt5se-lp) .jh .thumbs-row::-webkit-scrollbar {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .thumb {flex:0 0 calc((100% - 40px)/6);aspect-ratio:110/84;border-radius:10px;overflow:hidden;background:var(--bg-2);border:2px solid transparent;position:relative}
:is(#jt5se-lp,.jt5se-lp) .jh .thumb img {width:100%;height:100%;object-fit:cover}
:is(#jt5se-lp,.jt5se-lp) .jh .thumb.jh-contain img {object-fit:contain;padding:6%}
:is(#jt5se-lp,.jt5se-lp) .jh .thumb.on {border-color:var(--navy)}
:is(#jt5se-lp,.jt5se-lp) .jh .thumbs-next {position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.14);display:grid;place-items:center}
:is(#jt5se-lp,.jt5se-lp) .jh .thumbs-next svg {width:12px;height:12px}
:is(#jt5se-lp,.jt5se-lp) .jh .rate {display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
:is(#jt5se-lp,.jt5se-lp) .jh .rate>a,
:is(#jt5se-lp,.jt5se-lp) .jh .rate>span {white-space:nowrap}
:is(#jt5se-lp,.jt5se-lp) .jh .rate a {display:inline-flex;align-items:center;gap:8px}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-stars {display:inline-flex;gap:2px}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-stars svg {width:14px;height:14px}
:is(#jt5se-lp,.jt5se-lp) .jh .rate b {font-weight:600}
:is(#jt5se-lp,.jt5se-lp) .jh .rate .sep {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-eyebrow {margin-top:26px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
:is(#jt5se-lp,.jt5se-lp) .jh .title {margin-top:6px;font-weight:600;font-size:42px;line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .t-se {font-weight:300;color:var(--ink-3)}
:is(#jt5se-lp,.jt5se-lp) .jh .pdp-price {margin-top:8px;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px}
:is(#jt5se-lp,.jt5se-lp) .jh .pdp-price b {font-size:28px;font-weight:400;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .desc {margin-top:14px;font-size:16px;line-height:1.5;color:var(--ink-2);max-width:660px}
:is(#jt5se-lp,.jt5se-lp) .jh .chips {display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px;padding-bottom:22px;border-bottom:1px solid var(--line)}
:is(#jt5se-lp,.jt5se-lp) .jh .chip {display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .chip i {width:20px;height:20px;border-radius:50%;background:var(--navy);display:grid;place-items:center;flex:none}
:is(#jt5se-lp,.jt5se-lp) .jh .chip svg {width:10px;height:10px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-grp {margin-top:24px}
:is(#jt5se-lp,.jt5se-lp) .jh .lbl {font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:24px 0 16px}
:is(#jt5se-lp,.jt5se-lp) .jh .lbl span {letter-spacing:.02em;text-transform:none;font-weight:400;color:var(--ink-2);font-size:14px;margin-left:4px}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-grid {display:grid;grid-template-columns:repeat(5,minmax(0,88px));justify-content:start;gap:16px 14px;padding-bottom:24px;border-bottom:1px solid var(--line)}
:is(#jt5se-lp,.jt5se-lp) .jh .sw {display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-c {position:relative;width:88px;max-width:100%;aspect-ratio:1;border-radius:14px;background:var(--bg-2);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);transition:border-color .2s}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-in {position:absolute;inset:0;border-radius:12px;overflow:hidden}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-c img {position:absolute;left:9%;top:9%;width:82%;height:82%;object-fit:contain}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-c .ring {position:absolute;inset:-6px;border-radius:18px;border:2px solid transparent;transition:border-color .2s}
:is(#jt5se-lp,.jt5se-lp) .jh .sw.on .ring {border-color:var(--navy)}
:is(#jt5se-lp,.jt5se-lp) .jh .sw:hover .ring {border-color:var(--line-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .sw.on:hover .ring {border-color:var(--navy)}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-badge {position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:9.5px;font-weight:600;letter-spacing:.08em;padding:3px 7px;border-radius:4px;z-index:2;white-space:nowrap}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-n {font-size:13px;font-weight:600;line-height:1.2;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .kit {position:relative;display:block;width:100%;text-align:left;border:1px solid var(--line-2);border-radius:14px;padding:20px 20px 18px;background:#fff;margin-bottom:12px;transition:border-color .2s,box-shadow .2s}
:is(#jt5se-lp,.jt5se-lp) .jh .kit.on {border:2px solid var(--navy);padding:19px 19px 17px;box-shadow:0 6px 22px -12px rgba(5,43,93,.35)}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-tag {position:absolute;top:-1px;right:-1px;background:var(--navy);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.1em;padding:6px 12px;border-radius:0 12px 0 10px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit.on .kit-tag {top:-2px;right:-2px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-hd {display:flex;align-items:center;gap:12px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit[data-kit="bundle"] .kit-hd {padding-right:118px}
:is(#jt5se-lp,.jt5se-lp) .jh .radio {width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);flex:none;position:relative}
:is(#jt5se-lp,.jt5se-lp) .jh .kit.on .radio {border:6px solid var(--navy)}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-name {font-weight:600;font-size:19px;letter-spacing:-.01em}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-price {margin-top:8px;display:flex;align-items:baseline;gap:8px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-price b {font-size:30px;font-weight:400;letter-spacing:-.02em;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-price span {font-size:14px;color:var(--ink-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-was {display:inline-flex;align-items:center;gap:8px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-was s {font-size:16px;color:var(--ink-3)}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-was em {font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.08em;padding:4px 9px;border-radius:999px;background:#e6f0ff;color:var(--pulse)}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-sub {margin-top:6px;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--ink-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-sub b {font-weight:600;color:var(--ink);white-space:nowrap}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-more {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .kit.on .kit-more {display:block}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-items {display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
:is(#jt5se-lp,.jt5se-lp) .jh .ki {display:flex;align-items:center;gap:14px}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-th {width:60px;height:60px;flex:none;border-radius:10px;background:#fff;border:1px solid var(--line);overflow:hidden}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-th img {width:100%;height:100%;object-fit:contain;padding:5px}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-t {font-size:14.5px;line-height:1.3;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-t small {display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-prot .pdots {margin-left:auto}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-t small.need {color:var(--navy);font-weight:600}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-t small.err {color:#D0342C;font-weight:600}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-prot.err .pdot {box-shadow:0 0 0 2px #D0342C}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-th img.dim {opacity:.45}
:is(#jt5se-lp,.jt5se-lp) .jh .pdots {display:flex;gap:10px}
:is(#jt5se-lp,.jt5se-lp) .jh .pdot {width:30px;height:30px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line-2);cursor:pointer}
:is(#jt5se-lp,.jt5se-lp) .jh .pdot.on {box-shadow:0 0 0 2px var(--navy)}
:is(#jt5se-lp,.jt5se-lp) .jh .plan-link {display:inline-flex;align-items:center;gap:5px;font-size:14.5px;color:var(--ink-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .plan-link span {text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
:is(#jt5se-lp,.jt5se-lp) .jh .plan-link svg {width:15px;height:15px;flex:none;color:var(--ink-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .plan-link:hover,
:is(#jt5se-lp,.jt5se-lp) .jh .plan-link:hover svg {color:var(--navy)}
:is(#jt5se-lp,.jt5se-lp) .jh .cta {margin-top:20px;width:100%;height:56px;border-radius:999px;background:var(--pulse);color:#fff;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 24px -10px rgba(0,104,255,.55);transition:background .15s}
:is(#jt5se-lp,.jt5se-lp) .jh .cta:hover {background:var(--pulse-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .amz-row {margin-top:14px;display:flex;justify-content:center}
:is(#jt5se-lp,.jt5se-lp) .jh .amz {display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 18px 0 5px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-weight:600;font-size:13.5px;transition:border-color .15s,background .15s}
:is(#jt5se-lp,.jt5se-lp) .jh .amz:hover {border-color:var(--ink);background:var(--bg-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .amz-flag {display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 20px 0 12px;background:#F57C1F;color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.01em;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%);border-radius:16px 0 0 16px}
:is(#jt5se-lp,.jt5se-lp) .jh .amz-flag svg {width:19px;height:19px;flex:none}
:is(#jt5se-lp,.jt5se-lp) .jh .amz-div {width:1px;height:20px;background:var(--line-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .amz-out {width:11px;height:11px;margin-left:-4px}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-press {margin-top:22px;display:block;text-align:center;padding:20px 8px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
:is(#jt5se-lp,.jt5se-lp) .jh .press-q {display:block;font-size:20px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .press-by {margin-top:10px;display:flex;align-items:center;justify-content:center;gap:14px}
:is(#jt5se-lp,.jt5se-lp) .jh .press-by img {height:18px;width:auto}
:is(#jt5se-lp,.jt5se-lp) .jh .press-a {font-size:13px;color:var(--navy);white-space:nowrap;font-weight:600}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-press:hover .press-a {text-decoration:underline;text-underline-offset:3px}
:is(#jt5se-lp,.jt5se-lp) .jh .reach {margin-top:16px;background:var(--bg-2);border-radius:10px;padding:11px 16px;display:flex;gap:9px;align-items:center;justify-content:center;font-size:13.5px;line-height:1.35}
:is(#jt5se-lp,.jt5se-lp) .jh .reach svg {width:17px;height:17px;flex:none}
:is(#jt5se-lp,.jt5se-lp) .jh .reach b {font-weight:600}
:is(#jt5se-lp,.jt5se-lp) .jh .trust {margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
:is(#jt5se-lp,.jt5se-lp) .jh .trust-i {display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14px;font-weight:600}
:is(#jt5se-lp,.jt5se-lp) .jh .trust-i span {width:44px;height:44px;border-radius:10px;border:1px solid var(--line-2);display:grid;place-items:center}
:is(#jt5se-lp,.jt5se-lp) .jh .trust-i svg {width:19px;height:19px}
:is(#jt5se-lp,.jt5se-lp) .jh .glance {margin-top:22px;border:1px solid var(--line-2);border-radius:14px;padding:20px 18px 16px;background:var(--bg-2);text-align:center}
:is(#jt5se-lp,.jt5se-lp) .jh .glance h4 {font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
:is(#jt5se-lp,.jt5se-lp) .jh .glance-g {display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:16px 0 4px}
:is(#jt5se-lp,.jt5se-lp) .jh .glance-g b {display:block;font-size:26px;font-weight:400;letter-spacing:-.02em;color:var(--navy);white-space:nowrap}
:is(#jt5se-lp,.jt5se-lp) .jh .glance-g span {display:block;font-size:12.5px;line-height:1.3;color:var(--ink-2);margin-top:4px}
:is(#jt5se-lp,.jt5se-lp) .jh .glance p {font-size:12px;color:var(--ink-3)}
:is(#jt5se-lp,.jt5se-lp) .jh .apps {margin-top:22px;border:1px solid var(--line-2);border-radius:16px;padding:28px 22px 24px;background:var(--bg-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .apps-in {text-align:center}
:is(#jt5se-lp,.jt5se-lp) .jh .app-pill {display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.1em;padding:5px 14px;border-radius:999px;background:var(--navy-tint);color:var(--navy)}
:is(#jt5se-lp,.jt5se-lp) .jh .apps h3 {margin-top:14px;font-weight:600;font-size:26px;letter-spacing:-.02em}
:is(#jt5se-lp,.jt5se-lp) .jh .app-sub {margin:8px auto 0;max-width:460px;font-size:14.5px;color:var(--ink-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .apps-row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px;margin-top:22px}
:is(#jt5se-lp,.jt5se-lp) .jh .ph {margin:0}
:is(#jt5se-lp,.jt5se-lp) .jh .ph img {width:100%;max-width:150px;height:auto;margin:0 auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.14))}
:is(#jt5se-lp,.jt5se-lp) .jh .ph figcaption {margin-top:12px}
:is(#jt5se-lp,.jt5se-lp) .jh .ph b {display:block;font-size:14px;font-weight:600;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .ph small {display:block;font-size:12.5px;line-height:1.35;color:var(--ink-2);margin-top:3px}
:is(#jt5se-lp,.jt5se-lp) .jh .app-foot {margin-top:20px;font-size:13.5px;color:var(--ink-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-acc {margin-top:28px;border-top:1px solid var(--line-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-acc details {border-bottom:1px solid var(--line-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-acc summary {list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-weight:600;font-size:16px}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-acc summary::-webkit-details-marker {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-acc summary i {width:14px;height:14px;position:relative;flex:none}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-acc summary i:before,
:is(#jt5se-lp,.jt5se-lp) .jh .jh-acc summary i:after {content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--ink);transition:transform .2s}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-acc summary i:after {transform:rotate(90deg)}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-acc details[open] summary i:after {transform:rotate(0)}
:is(#jt5se-lp,.jt5se-lp) .jh .acc-b {padding:0 0 18px;font-size:15px;line-height:1.55;color:var(--ink-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .acc-b p+p {margin-top:12px}
:is(#jt5se-lp,.jt5se-lp) .jh .acc-b b {color:var(--ink);font-weight:600}
:is(#jt5se-lp,.jt5se-lp) .jh .acc-b a {text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .acc-b ul {margin:0;padding-left:18px}
:is(#jt5se-lp,.jt5se-lp) .jh .acc-b li {margin-bottom:5px}
:is(#jt5se-lp,.jt5se-lp) .jh .ticker {background:var(--navy);color:#fff;overflow:hidden;height:50px;display:flex;align-items:center}
:is(#jt5se-lp,.jt5se-lp) .jh .ticker-t {display:flex;gap:56px;white-space:nowrap;animation:jh-tick 48s linear infinite;padding-left:56px;font-size:13px;font-weight:600;letter-spacing:.1em}
:is(#jt5se-lp,.jt5se-lp) .jh .ticker-t span {display:inline-flex;align-items:center;gap:56px}
:is(#jt5se-lp,.jt5se-lp) .jh .ticker-t span:after {content:"";width:5px;height:5px;border-radius:50%;background:#E3BF85}
@keyframes jh-tick {to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce) {:is(#jt5se-lp,.jt5se-lp) .jh .ticker-t {animation:none}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-track {transition:none}}
:is(#jt5se-lp,.jt5se-lp) .jh .modal {position:fixed;inset:0;background:rgba(20,22,28,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
:is(#jt5se-lp,.jt5se-lp) .jh .modal.on {display:flex}
:is(#jt5se-lp,.jt5se-lp) .jh .modal-c {background:#fff;border-radius:18px;max-width:520px;width:100%;padding:28px 26px 24px;position:relative;max-height:90vh;overflow:auto}
:is(#jt5se-lp,.jt5se-lp) .jh .modal-x {position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center}
:is(#jt5se-lp,.jt5se-lp) .jh .modal h3 {font-weight:600;font-size:24px;letter-spacing:-.02em}
:is(#jt5se-lp,.jt5se-lp) .jh .modal-sub {margin-top:6px;font-size:14px;color:var(--ink-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-plans {margin-top:18px;border-top:1px solid var(--line)}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-plan {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-plan b {font-weight:600;font-size:16px}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-plan small {display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
:is(#jt5se-lp,.jt5se-lp) .jh .plan-r {text-align:right;font-size:18px;white-space:nowrap}
:is(#jt5se-lp,.jt5se-lp) .jh .plan-r small {display:inline;font-size:12px}
:is(#jt5se-lp,.jt5se-lp) .jh .plan-pop {display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.08em;background:var(--navy);color:#fff;padding:3px 7px;border-radius:4px;margin-left:8px;vertical-align:2px}
:is(#jt5se-lp,.jt5se-lp) .jh .modal-note {margin-top:14px;font-size:12.5px;color:var(--ink-3)}
:is(#jt5se-lp,.jt5se-lp) .jh .acc-plans {margin-top:14px}
:is(#jt5se-lp,.jt5se-lp) .jh .acc-plans .jh-plan {padding:12px 0}
:is(#jt5se-lp,.jt5se-lp) .jh .acc-list {margin-top:14px!important;font-size:13.5px}
body:has(.sbar) {padding-bottom:calc(88px + env(safe-area-inset-bottom))}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar {position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility 0s .3s;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 28px -20px rgba(0,0,0,.4);padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-in {max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:14px}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-p {display:flex;align-items:center;gap:14px;margin-right:auto;min-width:0}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-th {width:60px;height:60px;border-radius:10px;background:var(--bg-2);flex:none;overflow:hidden}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-th img {width:100%;height:100%;object-fit:contain;padding:4px}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-t {min-width:0}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-t b {display:block;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-t span {display:block;font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-kit {position:relative;width:300px;flex:none}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-sel {width:100%;height:58px;border:1.5px solid var(--navy);border-radius:12px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;background:#fff}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-sel-t {min-width:0}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-sel-t b {display:block;font-weight:600;font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-sel-t small {display:block;font-size:12.5px;color:var(--ink-2);margin-top:1px;white-space:nowrap}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-sel svg {width:12px;height:12px;flex:none;color:var(--navy);transition:transform .2s}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-sel[aria-expanded="true"] svg {transform:rotate(180deg)}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-menu {position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:0 14px 34px -14px rgba(0,0,0,.3);padding:6px;display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-menu.on {display:block}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-opt {display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:12px;border-radius:8px;text-align:left}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-opt:hover {background:var(--bg-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-opt.on {background:var(--navy-tint)}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-opt b {font-weight:600;font-size:14.5px;color:var(--ink)}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-opt small {font-size:13px;color:var(--ink-2);white-space:nowrap}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar .cta.sbar-cta {margin:0;width:330px;height:58px;flex:none}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar.on {transform:none;visibility:visible;transition:transform .3s ease}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-short {display:none}
@media (max-width:1180px) {:is(#jt5se-lp,.jt5se-lp) .jh .title {font-size:36px}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-grid {gap:14px 6px}}
@media (max-width:1023px) {:is(#jt5se-lp,.jt5se-lp) .jh .hero-in {grid-template-columns:minmax(0,1fr);padding:0 0 48px}
:is(#jt5se-lp,.jt5se-lp) .jh .col-l {padding:0;border:0}
:is(#jt5se-lp,.jt5se-lp) .jh .col-r {padding:20px 16px 0}
:is(#jt5se-lp,.jt5se-lp) .jh .gal {border-radius:0}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-arrow {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-dots {display:flex;gap:6px;position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-dots i {width:6px;height:6px;border-radius:50%;background:rgba(94,87,73,.3)}
:is(#jt5se-lp,.jt5se-lp) .jh .gal-dots i.on {background:var(--navy)}
:is(#jt5se-lp,.jt5se-lp) .jh .thumbs {padding:0 16px}
:is(#jt5se-lp,.jt5se-lp) .jh .thumb {flex-basis:calc((100% - 24px)/4.4)}
:is(#jt5se-lp,.jt5se-lp) .jh .thumbs-next {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-kit {width:260px}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar .cta.sbar-cta {width:auto;padding:0 28px}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-t span {display:none}}
@media (max-width:640px) {:is(#jt5se-lp,.jt5se-lp) .jh .promo-in {height:auto;min-height:52px;padding:8px 16px;gap:14px}
:is(#jt5se-lp,.jt5se-lp) .jh .promo-copy b {font-size:13px}
:is(#jt5se-lp,.jt5se-lp) .jh .promo-copy span {font-size:11.5px}
:is(#jt5se-lp,.jt5se-lp) .jh .promo-cur {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .ben-in {justify-content:flex-start;gap:24px}
:is(#jt5se-lp,.jt5se-lp) .jh .rate {font-size:13px;gap:10px;flex-wrap:wrap}
:is(#jt5se-lp,.jt5se-lp) .jh .rate .sep {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .jh-eyebrow {margin-top:18px}
:is(#jt5se-lp,.jt5se-lp) .jh .title {font-size:32px}
:is(#jt5se-lp,.jt5se-lp) .jh .pdp-price b {font-size:24px}
:is(#jt5se-lp,.jt5se-lp) .jh .desc {font-size:15px}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 4px}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-c {width:58px}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-n {font-size:11.5px}
:is(#jt5se-lp,.jt5se-lp) .jh .sw-badge {font-size:8px;padding:2px 5px;top:-8px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit {display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;padding:18px 16px 16px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit.on {padding:17px 15px 15px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-tag {top:-10px;right:14px;border-radius:6px;font-size:9.5px;padding:4px 9px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit.on .kit-tag {top:-11px;right:13px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit[data-kit="bundle"] .kit-hd {padding-right:0}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-hd {gap:10px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-name {font-size:17px;white-space:nowrap}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-price {grid-column:2;grid-row:1;margin:0;flex-direction:column;align-items:flex-end;gap:3px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-price b {font-size:22px;line-height:1.1}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-was {gap:6px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-was s {font-size:13px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-was em {font-size:9.5px;padding:3px 7px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-sub,
:is(#jt5se-lp,.jt5se-lp) .jh .kit.on .kit-more {grid-column:1/-1}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-sub {margin-top:8px;flex-direction:column;gap:2px;font-size:12.5px}
:is(#jt5se-lp,.jt5se-lp) .jh .kit-sub b {font-size:12.5px;color:var(--ink-2)}
:is(#jt5se-lp,.jt5se-lp) .jh .ki {gap:12px}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-th {width:52px;height:52px}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-prot {flex-wrap:wrap;row-gap:8px}
:is(#jt5se-lp,.jt5se-lp) .jh .ki-prot .pdots {margin-left:64px;width:100%;gap:12px}
:is(#jt5se-lp,.jt5se-lp) .jh .press-q {font-size:18px}
body:has(.sbar) {padding-bottom:calc(76px + env(safe-area-inset-bottom))}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar {padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-in {padding:0 12px;gap:8px}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-p {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-kit {flex:1;width:auto;min-width:0}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-sel {height:54px;padding:0 12px}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-sel-t b {font-size:14px}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar-sel-t small {font-size:12px}
:is(#jt5se-lp,.jt5se-lp) .jh .sbar .cta.sbar-cta {flex:1;height:54px;padding:0 16px;font-size:14px;letter-spacing:.04em}
:is(#jt5se-lp,.jt5se-lp) .jh .glance-g {display:flex;flex-wrap:wrap;justify-content:center;row-gap:16px;gap:16px 0}
:is(#jt5se-lp,.jt5se-lp) .jh .glance-g div {width:33.333%;padding:0 4px}
:is(#jt5se-lp,.jt5se-lp) .jh .glance-g b {font-size:22px}
:is(#jt5se-lp,.jt5se-lp) .jh .trust-i {font-size:12.5px}
:is(#jt5se-lp,.jt5se-lp) .jh .apps {padding:24px 0 18px}
:is(#jt5se-lp,.jt5se-lp) .jh .apps-in {padding:0 14px}
:is(#jt5se-lp,.jt5se-lp) .jh .apps h3 {font-size:22px}
:is(#jt5se-lp,.jt5se-lp) .jh .apps-row {display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:20px 0 0;padding:0 14px 8px}
:is(#jt5se-lp,.jt5se-lp) .jh .apps-row::-webkit-scrollbar {display:none}
:is(#jt5se-lp,.jt5se-lp) .jh .ph {flex:0 0 40%;scroll-snap-align:start}}
:is(#jt5se-lp,.jt5se-lp) .ostrip {display:none!important}