/**
 * NeoYug Program Landing — front end styles.
 * Ported to the v3 Landing Page design: sunset gradient hero with cream stat
 * pills, proven-system card (numbered transformations + technique tags), the
 * "standard in every NeoYug program" trio, a horizontally scrolling module
 * rail with timezone-aware session pills, a dark mentor pull quote, a full-bleed
 * testimonial marquee, a purple mentor panel, and a black closing footer with
 * energy exchange + FAQ. Every class is namespaced under .nypl to stay clear of
 * host-theme styles. Display + body: inherits the active theme's font.
 * Brand: purple #8D22C3, orange #E96F46, deep purple #261A48.
 */

.nypl{
  --purple:#8D22C3; --purple-2:#A93BE0;
  --deep:#261A48; --deep-2:#302256;
  --orange:#E96F46; --orange-2:#F2A14B;
  --lilac:#F4E9F9; --lilac-2:#FAF5FE;
  --peach:#FDF1ED; --ink:#0A0813;
  --cream:#F7EEDD; --cream-2:#FBF5E9;
  --white:#fff; --text:#2B2240; --muted:#6B6480;
  --grey-head:#BCB6C7;
  --gold:#F6B81E;
  --line:rgba(38,26,72,.10);
  --radius:18px; --radius-sm:14px; --radius-lg:24px;
  --max:1180px;
  font-family:inherit;
  color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.nypl *,.nypl *::before,.nypl *::after{box-sizing:border-box}
.nypl img{max-width:100%;height:auto;display:block}
.nypl a{text-decoration:none;color:inherit}

/* The host theme often wraps the course template in a constrained column.
   Let the landing break out to full width — and, per design, let the hero
   sunset run all the way to the very top with no white gap above it. */

/* ----------------------------------------------------------------------
 * Flatten the wrappers that box the landing in — on landing pages only.
 *
 * Verified DOM chain on this site (Twenty Twenty theme + MasterStudy):
 *   body.nypl-landing > #page.site > .stm-lms-wrapper > .container > .nypl
 *
 * The .container here is Bootstrap's centered, fixed-max-width container
 * (~1320px on desktop, ~12px side padding on phones) — that was the white
 * frame on all four sides. The .nypl full-bleed below can't escape it on its
 * own, so on landing pages we strip the max-width, padding, side margins and
 * any card chrome off this exact chain. Scoped under .stm-lms-wrapper so the
 * site's other .container instances (header / footer) are never touched, and
 * the whole block only ever applies on landing-enabled course pages. */
body.nypl-landing #page,
body.nypl-landing .stm-lms-wrapper,
body.nypl-landing .stm-lms-wrapper > .container,
body.nypl-landing .stm-lms-wrapper .container{
  max-width:none;
  width:auto;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow-x:visible;
}

.nypl{
  /* Full-bleed: span the whole viewport even when the theme nests this template
     inside a centered, fixed-width content column. The calc() self-corrects for
     the column's own side padding, so every band runs edge-to-edge. */
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:0;
  padding:0;
  overflow-x:hidden;
}

.nypl-wrap{width:100%;max-width:1180px;max-width:var(--max);margin:0 auto;padding:0 26px}
.nypl-section{padding:clamp(40px,5vw,72px) 0}

/* ---- typographic helpers ---- */
.nypl-display{font-family:inherit;font-weight:800;letter-spacing:-.02em;line-height:1.14;color:var(--deep);margin:0}
.nypl-h2{font-size:clamp(24px,3vw,38px)}
.nypl-head{max-width:1120px;margin:0 auto 36px;text-align:center}
.nypl-head .nypl-sub{max-width:920px;margin:13px auto 0;color:var(--muted);font-size:clamp(14px,1.2vw,16.5px)}
.nypl-grey{color:var(--grey-head)}
.nypl-eyebrow{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--purple);margin:0 0 12px}

.nypl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:15px;line-height:1;padding:14px 28px;border-radius:999px;
  text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.nypl-btn:hover{transform:translateY(-2px)}
.nypl-btn--purple{background:var(--purple);color:#fff;box-shadow:0 10px 24px rgba(141,34,195,.30)}
.nypl-btn--white{background:#fff;color:var(--deep);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.nypl-btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* Pin CTA text colours with enough specificity to beat host-theme link colours:
   purple buttons read white, the white closing button reads black. */
.nypl a.nypl-btn--purple,
.nypl a.nypl-btn--purple .nypl-btn__price,
.nypl a.nypl-btn--purple .nypl-btn__label{color:#fff}
.nypl a.nypl-btn--white,
.nypl a.nypl-btn--white .nypl-btn__price,
.nypl a.nypl-btn--white .nypl-btn__label{color:#000}
/* Spaced-colon separator between the CTA label and the auto-priced figure.
   Scoped to label-then-price order so the label-only closing button stays
   clean. A small space sits before the colon and a slightly larger one after,
   so it reads as a "label: value" pair, never as a minus sign. */
.nypl-btn__label + .nypl-btn__price::before{content:":";margin-left:-5px;margin-right:9px}

/* image placeholder (used until an admin uploads real media) */
.nypl-ph{position:relative;background:linear-gradient(135deg,#cdb8e6 0%,#e7d6f4 45%,#f5e3ec 100%);border-radius:var(--radius-sm);overflow:hidden}
.nypl-ph::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(38,26,72,.40);font-weight:600}

/* =========================================================
   1. HERO — sunset gradient
   ========================================================= */
.nypl-hero{position:relative;overflow:hidden;text-align:center;color:#fff;margin:0;
  background:linear-gradient(178deg,#2a1846 0%,#391f4f 16%,#5b3656 36%,#965a61 56%,#cd836e 76%,#efad8c 100%);
  /* Extra top room so the host theme header has space to breathe above the hero,
     while the sunset still fills right up to the top edge (no white strip). */
  padding:clamp(64px,7vw,116px) 0 clamp(46px,5vw,78px)}
.nypl-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 4%,rgba(255,255,255,.10),rgba(255,255,255,0) 60%)}
.nypl-hero .nypl-wrap{position:relative;z-index:2}
.nypl-hero__dots{position:absolute;top:0;bottom:0;width:150px;background-repeat:no-repeat;background-position:top center;background-size:cover;mix-blend-mode:screen;opacity:.32;pointer-events:none;z-index:1}
.nypl-hero__dots--l{left:0;background-image:url(../img/hero-dots-l.jpg)}
.nypl-hero__dots--r{right:0;background-image:url(../img/hero-dots-r.jpg)}
.nypl-hero__title{font-family:inherit;font-weight:700;font-size:clamp(28px,3.7vw,44px);line-height:1.12;margin:0 auto;max-width:720px}
.nypl-hero__eyebrow{font-weight:700;font-size:clamp(14px,1.4vw,18px);color:#F4E7E0;margin:14px 0 0}
.nypl-hero__sub{max-width:920px;margin:15px auto 0;color:#F0E1DA;font-size:clamp(14px,1.3vw,16.5px)}
.nypl-hero__cta{margin:28px auto 0;padding:19px 48px;font-size:18.5px}
.nypl-hero__note{margin:14px 0 0;color:#fff;font-weight:600;font-size:14px}
.nypl-hero__card{margin:34px auto 0;max-width:760px;background:#fff;border-radius:var(--radius);padding:12px 12px 16px;box-shadow:0 24px 56px rgba(38,12,30,.30)}
.nypl-hero__video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#26304a 0%,#070b16 75%)}
.nypl-hero__video iframe,.nypl-hero__video video,.nypl-hero__video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.nypl-hero__facade{cursor:pointer}
.nypl-hero__facade .nypl-hero__play{transition:transform .15s ease,background .15s ease}
.nypl-hero__facade:hover .nypl-hero__play{transform:scale(1.06);background:#fff}
.nypl-hero__facade.is-playing{cursor:default}
.nypl-hero__play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
.nypl-hero__play svg{margin-left:3px}
.nypl-hero__stats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.nypl-stat{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;box-shadow:0 6px 18px rgba(40,15,30,.16)}
.nypl-stat b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--orange);color:#fff;font-size:11px;font-weight:700}
.nypl-stat svg{flex:none}
/* Single hero schedule pill: never wraps its own text, so it reads as one line
   at every width. The label carries the visitor's own timezone abbreviation,
   capped at four characters in PHP so the pill cannot burst on a small phone. */
.nypl-stat--schedule{white-space:nowrap;max-width:100%}
.nypl-hero__trust{display:flex;align-items:center;justify-content:center;gap:8px;max-width:620px;margin:16px auto 2px;color:var(--text);font-size:13.5px;text-align:left}
.nypl-hero__trust .nypl-sh{flex:none;width:30px;height:30px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center}
.nypl-hero__trust b,.nypl-hero__trust strong{color:var(--deep)}

/* =========================================================
   2. PROVEN SYSTEM
   ========================================================= */
.nypl-system{background:#fff}
/* White card holding the numbered shifts list + technique pills. The two
   sub-blocks (shifts, techniques) share one header pattern: gradient medallion
   + title + sub. Poppins everywhere; the ghosted index numerals use Dosis. */
.nypl-tshift{max-width:1040px;margin:0 auto;background:#fff;border:1px solid rgba(141,34,195,.16);border-radius:24px;box-shadow:0 4px 74px rgba(0,0,0,.08);padding:30px 40px;font-family:'Poppins',sans-serif}
.nypl-tshift__head{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.nypl-tshift__badge{flex:0 0 54px;width:54px;height:54px;border-radius:50%;background:#8D22C3;display:flex;align-items:center;justify-content:center}
.nypl-tshift__badge svg{width:26px;height:26px}
.nypl-tshift__intro{min-width:0}
.nypl-tshift__title{font-family:'Poppins',sans-serif;font-weight:700;font-size:20px;line-height:1.15;color:#15192C;margin:0}
.nypl-tshift__sub{font-size:14px;color:#737580;line-height:1.4;margin:2px 0 0}
.nypl-tshift__list{margin-top:18px}
.nypl-tshift__row{display:flex;align-items:baseline;gap:14px;padding:13px 0;border-top:1px solid rgba(141,34,195,.14)}
.nypl-tshift__row:last-child{border-bottom:1px solid rgba(141,34,195,.14)}
.nypl-tshift__num{flex:0 0 42px;width:42px;font-family:'Dosis',sans-serif;font-weight:700;font-size:30px;line-height:1;color:rgba(141,34,195,.45)}
.nypl-tshift__text{font-weight:700;font-size:17px;line-height:1.4;color:#15192C}
.nypl-tshift__tech{margin-top:34px}
.nypl-tshift__pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.nypl-tshift__pill{font-weight:600;font-size:14px;color:#8D22C3;background:rgba(141,34,195,.08);border:1px solid rgba(141,34,195,.16);padding:11px 18px;border-radius:40px;line-height:1}
.nypl-standard{max-width:1080px;margin:40px auto 34px;text-align:center}
.nypl-standard__label{display:flex;align-items:center;gap:18px;color:#a59fb4;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px}
.nypl-standard__label::after{content:"";flex:1;height:1px;background:var(--line)}
.nypl-standard__row{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 0;padding:16px 14px;background:#fff;border-radius:20px;box-shadow:0 12px 32px rgba(38,26,72,.06);text-align:left;max-width:100%}
.nypl-feat{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 28px}
.nypl-feat + .nypl-feat{border-left:1px solid var(--line)}
.nypl-feat__ic{flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;font-size:16px;line-height:1}
.nypl-feat h4{margin:0;font-size:17px;font-weight:700;color:var(--muted);white-space:nowrap;letter-spacing:.01em}
.nypl-feat p{margin:0;color:var(--muted);font-size:13px}

/* =========================================================
   3. INSIDE THE PROGRAM — horizontal scroll + time pill
   ========================================================= */
.nypl-modules{background:var(--peach)}
.nypl-mod-scroll-area{width:100%}
.nypl-mod-scroller{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 26px 24px;padding-left:clamp(28px,5vw,64px);scroll-padding-left:clamp(28px,5vw,64px);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.nypl-mod-scroller::-webkit-scrollbar{display:none}
.nypl-modcard{flex:0 0 400px;scroll-snap-align:start;background:#fff;border-radius:var(--radius);padding:16px 16px 24px;box-shadow:0 12px 30px rgba(38,26,72,.07)}
.nypl-modcard .nypl-ph,.nypl-modcard__media{aspect-ratio:16/10;border-radius:12px;margin-bottom:16px;overflow:hidden}
.nypl-modcard__media img{width:100%;height:100%;object-fit:cover}
.nypl-modcard h3{font-family:inherit;font-weight:600;font-size:19px;color:var(--deep);margin:0 0 10px;line-height:1.3}
.nypl-modcard__time{display:inline-flex;align-items:center;gap:7px;background:var(--lilac);color:var(--purple);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;margin:0 0 14px}
.nypl-modcard__time svg{flex:none}
.nypl-modcard ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px}
.nypl-modcard li{margin:0 0 10px}
.nypl-modcard li::marker{color:var(--purple)}
/* Rich-text module body: authored basic HTML (paragraphs, lists, links). */
.nypl-modcard__body{color:var(--muted);font-size:14px;line-height:1.5}
.nypl-modcard__body p{margin:0 0 10px}
.nypl-modcard__body ul,.nypl-modcard__body ol{margin:0 0 10px;padding-left:18px}
.nypl-modcard__body li{margin:0 0 10px}
.nypl-modcard__body ul li::marker{color:var(--purple)}
.nypl-modcard__body h3,.nypl-modcard__body h4{font-size:15px;color:var(--deep);margin:0 0 6px;font-weight:600;line-height:1.3}
.nypl-modcard__body blockquote{margin:14px 0;padding:2px 0 2px 16px;border-left:3px solid var(--purple);color:var(--deep);font-style:italic}
.nypl-modcard__body blockquote p{margin:0}
.nypl-modcard__body blockquote>*:last-child{margin-bottom:0}
.nypl-modcard__body>*:last-child{margin-bottom:0}
.nypl-modcard a{color:var(--purple);text-decoration:underline}
.nypl-modcard strong,.nypl-modcard b{color:var(--deep);font-weight:600}
.nypl-modcard em,.nypl-modcard i{font-style:italic}
.nypl-scroll-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;color:var(--muted);font-size:12.5px}

/* =========================================================
   4. MENTOR QUOTE — dark band
   ========================================================= */
.nypl-quote{position:relative;color:#fff;overflow:hidden;background:linear-gradient(100deg,#3a1f5e 0%,#241640 40%,#141019 72%,#1a1410 100%)}
.nypl-quote::after{content:"";position:absolute;right:0;top:0;bottom:0;width:60%;background:radial-gradient(100% 100% at 74% 50%,rgba(242,161,75,.42) 0%,rgba(242,161,75,0) 62%);pointer-events:none;z-index:1}
.nypl-quote__grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;min-height:360px;max-width:1180px;margin-left:auto;margin-right:auto}
.nypl-quote__body{padding:54px 0}
.nypl-quote__mark{font-family:inherit;font-weight:800;font-size:76px;line-height:.6;color:var(--purple-2);margin-bottom:4px}
.nypl-quote__text{font-size:clamp(20px,2.4vw,32px);font-weight:500;line-height:1.32;max-width:24ch;margin:0}
.nypl-quote__text b{font-weight:700}
.nypl-quote__author{margin:26px 0 0;color:#D7CFE6;font-size:clamp(16px,1.6vw,21px)}
.nypl-quote__photo{position:relative;z-index:2;align-self:center;width:clamp(300px,34vw,420px);aspect-ratio:537/696;border-radius:var(--radius);overflow:hidden;
  background:radial-gradient(85% 120% at 0% 50%,rgba(242,161,75,.42),rgba(242,161,75,0) 55%),linear-gradient(180deg,#4a3a2a 0%,#241a2e 100%)}
.nypl-quote__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nypl-quote__photo.nypl-ph::after{color:rgba(255,255,255,.5)}

/* =========================================================
   5. TESTIMONIALS — full-bleed auto marquee
   ========================================================= */
.nypl-voices{background:#fff;overflow:hidden}
.nypl-marquee{position:relative;margin-top:4px}
.nypl-marquee__track{display:flex;gap:0;width:max-content;will-change:transform;animation:nypl-scroll-x 26s linear infinite}
.nypl-marquee:hover .nypl-marquee__track{animation-play-state:paused}
@keyframes nypl-scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nypl-tcard{flex:0 0 300px;height:380px;overflow:hidden;position:relative}
.nypl-tcard:nth-child(6n+1){background:linear-gradient(160deg,#d9c2f0,#f2dcea)}
.nypl-tcard:nth-child(6n+2){background:linear-gradient(160deg,#c9b3ec,#efd9e6)}
.nypl-tcard:nth-child(6n+3){background:linear-gradient(160deg,#e7d2f5,#f7e4ec)}
.nypl-tcard:nth-child(6n+4){background:linear-gradient(160deg,#efcf9f,#e9b6c0)}
.nypl-tcard:nth-child(6n+5){background:linear-gradient(160deg,#d6bff0,#f5dde9)}
.nypl-tcard:nth-child(6n+6){background:linear-gradient(160deg,#e8c79a,#caa7e6)}
.nypl-tcard img{width:100%;height:100%;object-fit:cover}
.nypl-tcard--image{background:none}
.nypl-tcard__body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:22px;color:var(--deep)}
.nypl-tcard__quote{font-size:14px;font-weight:500;line-height:1.45}
.nypl-tcard__name{font-weight:700;font-size:14px}
.nypl-tcard__loc{font-size:12px;color:var(--muted)}
.nypl-tcard .nypl-stars{margin-bottom:2px}
@media (prefers-reduced-motion:reduce){
  /* The Love Letters row is designed as a continuous slow pan, so keep it
     animating even for reduce-motion users, just at a calmer pace. */
  .nypl-marquee__track{animation-duration:40s}
}

.nypl-stars{color:var(--orange);font-size:15px;letter-spacing:2px}
.nypl-star{color:#D8CFE6}
.nypl-star.is-on{color:var(--orange)}

/* =========================================================
   6. MEET THE MENTOR
   ========================================================= */
.nypl-mentor{background:var(--lilac)}
.nypl-mentor__head{text-align:center;margin-bottom:34px}
.nypl-mentor__panel{background:var(--purple);border-radius:var(--radius-lg);color:#fff;display:grid;grid-template-columns:0.8fr 1.2fr;gap:34px;padding:30px;max-width:1120px;margin:0 auto}
.nypl-mentor__photo{background:#7a16ad;border-radius:var(--radius);padding:12px 12px 0;display:flex;flex-direction:column}
.nypl-mentor__photo .nypl-ph{flex:1;min-height:360px;background:linear-gradient(180deg,#5a5560 0%,#2c2730 100%)}
.nypl-mentor__photo .nypl-ph::after{color:rgba(255,255,255,.45)}
.nypl-mentor__photo img{flex:1;min-height:360px;width:100%;object-fit:cover;border-radius:8px}
.nypl-mentor__name{text-align:center;font-weight:700;font-size:22px;padding:14px 0 13px}
.nypl-mentor__bio{font-size:clamp(15px,1.5vw,18px);line-height:1.5;margin:4px 0 22px}
.nypl-badges{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.nypl-badge{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:12px 16px;color:var(--text);font-weight:600;font-size:14px}
.nypl-badge i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--purple);display:flex;align-items:center;justify-content:center}
.nypl-creds{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px}
.nypl-creds li{display:flex;align-items:flex-start;gap:12px;font-size:clamp(14px,1.4vw,16.5px);line-height:1.35}
.nypl-creds svg{flex:none;margin-top:2px}
.nypl-mentor__close{font-size:clamp(15px,1.5vw,18px);opacity:.96;margin:0}

/* =========================================================
   7. ENERGY EXCHANGE + FAQ — closing
   ========================================================= */
.nypl-closing{background:var(--ink);color:#fff;padding:clamp(44px,5vw,76px) 0}
.nypl-energy{background:linear-gradient(150deg,#1c1830 0%,#15121f 100%);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;max-width:1080px;margin:0 auto}
.nypl-energy__img{aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:radial-gradient(circle at 50% 42%,#3b6ea3 0%,#1b2b4a 45%,#070a14 85%)}
.nypl-energy__img img{width:100%;height:100%;object-fit:cover}
.nypl-energy h2{font-family:inherit;font-weight:800;font-size:clamp(26px,3vw,38px);margin:0 0 11px}
.nypl-energy__price{font-weight:700;font-size:clamp(19px,2vw,26px);margin:0 0 18px;color:#F4B73D;
  background:linear-gradient(90deg,#F8D26A 0%,#E8A23A 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nypl-energy__pricenote{display:block;margin-top:5px;font-weight:500;font-size:14px}
.nypl-energy p{color:#C9C2DD;font-size:clamp(14px,1.4vw,17px);margin:0 0 24px;max-width:36ch}
.nypl-faq{max-width:820px;margin:clamp(40px,4.5vw,64px) auto 0}
.nypl-faq__title{text-align:center;font-family:inherit;font-weight:800;letter-spacing:-.02em;font-size:clamp(22px,2.4vw,32px);margin:0 0 22px}
.nypl-faq__panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:6px 28px}
.nypl-faq__item{border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
.nypl-faq__item:last-child{border-bottom:0}
.nypl-faq__q{width:100%;text-align:left;background:none;border:0;color:#fff;cursor:pointer;font-family:inherit;font-size:15px;font-weight:600;text-transform:none;letter-spacing:normal;padding:16px 2px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nypl-faq__q .nypl-ic{flex:none;width:18px;height:18px;position:relative}
.nypl-faq__q .nypl-ic::before,.nypl-faq__q .nypl-ic::after{content:"";position:absolute;background:var(--orange);border-radius:2px;transition:transform .25s ease}
.nypl-faq__q .nypl-ic::before{top:8px;left:1px;right:1px;height:2px}
.nypl-faq__q .nypl-ic::after{left:8px;top:1px;bottom:1px;width:2px}
.nypl-faq__item.open .nypl-ic::after{transform:scaleY(0)}
.nypl-faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:#B8B2C8;font-size:13.5px;padding:0 2px}
.nypl-faq__item.open .nypl-faq__a{max-height:480px;padding-bottom:16px}
.nypl-faq__a p{margin:0 0 10px}
.nypl-fineprint{max-width:840px;margin:clamp(40px,5vw,68px) auto 0;text-align:center;color:#8780A0;font-size:12px;line-height:1.7}
.nypl-fineprint a{color:#C9A7F0}
.nypl-fineprint .nypl-copy{margin-top:16px;color:#6F6A84}

/* =========================================================
   8. STICKY BANNER — white
   ========================================================= */
.nypl-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;transform:translateY(120%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 34px rgba(38,26,72,.14)}
.nypl-sticky.show{transform:translateY(0)}
.nypl-sticky__inner{max-width:var(--max);margin:0 auto;padding:18px 26px;display:flex;align-items:center;gap:22px}
.nypl-sticky__thumb{flex:none;width:118px;height:70px;border-radius:12px;background:linear-gradient(135deg,#caa34a,#7a16ad);overflow:hidden}
.nypl-sticky__thumb img{width:100%;height:100%;object-fit:cover}
.nypl-sticky__meta{flex:1;min-width:0}
.nypl-sticky__meta .nypl-t{color:var(--deep);font-weight:700;font-size:clamp(15px,1.6vw,19px);line-height:1.2}
.nypl-sticky__meta .nypl-by{color:var(--deep);font-weight:700;font-size:clamp(13px,1.3vw,16px);opacity:.78}
.nypl-sticky__cta{display:flex;flex-direction:column;align-items:center;gap:6px}
.nypl-sticky__cta .nypl-btn{padding:13px 26px;font-size:16px}
.nypl-sticky__cta .nypl-note{color:var(--text);font-weight:600;font-size:12.5px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .nypl-standard__row,.nypl-energy,.nypl-mentor__panel,.nypl-quote__grid,.nypl-badges{grid-template-columns:1fr}
  .nypl-stat{font-size:12px;padding:8px 14px;gap:6px}
  .nypl-stat b{width:18px;height:18px;font-size:10px}
  .nypl-quote::after{width:100%;opacity:.28}
  .nypl-quote__photo{width:min(240px,60vw);aspect-ratio:537/696;order:-1;margin:0 auto 4px;border-radius:18px;background:linear-gradient(160deg,#4a3a2a 0%,#241a2e 100%)}
  .nypl-quote__body{padding:40px 0}
  .nypl-mentor__photo .nypl-ph,.nypl-mentor__photo img{min-height:300px}
  .nypl-energy__img{order:-1}
}
@media (max-width:680px){
  /* More top room on phones so the hero H1 clears the host theme header
     (logo / Live Sessions) instead of colliding with it. Adjustable. */
  .nypl-hero{padding-top:100px}
  .nypl-wrap{padding:0 16px}
  .nypl-section{padding:42px 0}
  .nypl-h2{font-size:18px}
  .nypl-head{margin-bottom:22px}
  .nypl-head .nypl-sub{font-size:13.5px}
  .nypl-modcard{flex-basis:78vw}
  .nypl-mod-scroller{padding-left:24px;scroll-padding-left:24px}
  .nypl-sticky__thumb,.nypl-sticky__meta{display:none}
  .nypl-sticky__inner{padding:12px 16px;gap:6px}
  .nypl-sticky__cta{width:100%;flex-direction:column;gap:6px}
  .nypl-sticky__cta .nypl-btn{width:100%;padding:15px 26px;font-size:17px}
  .nypl-badges{grid-template-columns:1fr}
  .nypl-hero__trust{text-align:center}
  .nypl-system{padding:30px 0}
  .nypl-system .nypl-h2{font-size:16px}
  .nypl-system .nypl-head{margin-bottom:16px}
  .nypl-standard{margin:30px auto 24px}
  .nypl-standard__row{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 0;padding:12px 10px;border-radius:16px}
  .nypl-feat{padding:4px 13px;gap:6px}
  .nypl-feat h4{white-space:nowrap;font-size:13.5px;font-weight:700}
  .nypl-feat__ic{font-size:13px}
  /* Tightened toward the old proven-system mobile rule so the card footprint
     stays close to the previous design on phones. */
  .nypl-tshift{padding:18px 18px 20px;border-radius:18px}
  .nypl-tshift__head{gap:12px;margin-bottom:6px}
  .nypl-tshift__badge{flex-basis:42px;width:42px;height:42px}
  .nypl-tshift__badge svg{width:20px;height:20px}
  .nypl-tshift__title{font-size:17px}
  .nypl-tshift__sub{font-size:13px}
  .nypl-tshift__list{margin-top:12px}
  .nypl-tshift__row{padding:10px 0;gap:10px}
  .nypl-tshift__num{flex-basis:34px;width:34px;font-size:24px}
  .nypl-tshift__text{font-size:14px}
  .nypl-tshift__tech{margin-top:22px}
  .nypl-tshift__pills{gap:8px;margin-top:12px}
  .nypl-tshift__pill{padding:7px 13px;font-size:12.5px}
  /* Energy exchange: center the whole card on phones (heading, price,
     description, enroll button) and make the price figure read bigger. */
  .nypl-energy__content{text-align:center}
  .nypl-energy p{margin-left:auto;margin-right:auto}
  .nypl-energy__priceval{font-size:28px}
  /* Mentor quote: center the mark, quote and author on phones. */
  .nypl-quote__body{text-align:center}
  .nypl-quote__text{margin-left:auto;margin-right:auto}
}

@media (prefers-reduced-motion:reduce){
  .nypl *{transition:none !important}
}

/* =========================================================
   HERO SCHEDULE PILL — narrow phones
   A 320px viewport leaves 288px inside .nypl-wrap. The widest legitimate label,
   "6 live sessions from 28 Sep, 11:30 am AEDT", measures about 270px at these
   sizes, which clears it with room to spare. Timezones PHP only knows by
   numeric offset are stripped in NYPL_Currency::hero_schedule() rather than
   shrunk here, since no type size saves a nine-character "GMT+08:00".
   ========================================================= */
@media (max-width:400px){
  .nypl-stat{font-size:11px;padding:8px 12px;gap:6px}
  .nypl-stat b{width:17px;height:17px;font-size:9.5px}
}