/* Learner pages rebuilt from their original HTML: the design skin. The original stylesheet keeps every size, grid
   and position; this file only changes the look to The Upskilling Company's: its fonts (served here), colours,
   buttons, cards and pills. Loaded last (after about.css and pages.css). */
/* Motion pass, Nov 3: the faces list the learner home's copies of these fonts first (byte-identical files that the home
   page preloads), so arriving from the home page the text paints in its own fonts at once instead of swapping from
   Georgia/Arial a moment later (the /constellation heading re-wrapped and dropped 59px). The second URL is this site's own copy. */
@font-face { font-family:'Inter'; src:url('/schole-assets/fonts/Inter-latin.woff2') format('woff2'), url('/assets/brand/fonts/inter-latin-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'New Spirit'; src:url('/schole-assets/fonts/NewSpirit-Regular.woff2') format('woff2'), url('/assets/brand/fonts/new-spirit-400.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter Display'; src:url('/schole-assets/fonts/Inter-latin.woff2') format('woff2'), url('/assets/brand/fonts/inter-latin-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter Variable'; src:url('/schole-assets/fonts/Inter-latin.woff2') format('woff2'), url('/assets/brand/fonts/inter-latin-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
:root {
  --_typography-primitives---family--primary-family: 'Inter', Arial, sans-serif;
  --_typography-primitives---family--display-sans: 'New Spirit', Georgia, 'Times New Roman', serif;
}

/* The learner pages were laid out under a header that floats over them (their top padding clears it), so the
   content tucks under the shared header the same way instead of starting below it. */
.original-learner [data-original-content] { margin-top: -101px; }
@media (max-width:767px) { .original-learner [data-original-content] { margin-top: -92px; } }
.original-learner { --periwinkle: #615c9c; background: #fff; color: #14151c; }

/* Heroes: white like the Upskilling pages, no blue wash. */
.original-learner .schole-subhero { background-color: #fff !important; background-image: none !important; }
.original-learner .schole-subhero-fade { display: none !important; }
/* Hero headings as on /scenarios (Nov 4, KJ: "the headings are different than the ones that are like the scenarios"):
   the label 82px under the header (46px on phones), 20px to a New Spirit title of 32/40/48/56px at 1.18 with its second
   half in violet (scripts/build_pages.py HERO_HEADINGS), 20px to an 18px lede. */
.original-learner .schole-subhero { padding-top: 138px; }
@media (min-width: 640px) { .original-learner .schole-subhero { padding-top: 172px; } }
@media (min-width: 768px) { .original-learner .schole-subhero { padding-top: 181px; } }
.original-learner .schole-subhero-inner .schole-eyebrow-pill { margin-bottom: 20px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.5 !important; }
.original-learner .schole-subhero-inner .schole-garden-h1 {
  font-family: 'New Spirit', Georgia, 'Times New Roman', serif !important; font-weight: 400 !important; font-size: 32px !important;
  line-height: 1.18 !important; letter-spacing: normal !important; text-shadow: none !important; color: #14151c !important;
}
@media (min-width: 640px) { .original-learner .schole-subhero-inner .schole-garden-h1 { font-size: 40px !important; } }
@media (min-width: 768px) { .original-learner .schole-subhero-inner .schole-garden-h1 { font-size: 48px !important; } }
@media (min-width: 1024px) { .original-learner .schole-subhero-inner .schole-garden-h1 { font-size: 56px !important; } }
.original-learner .schole-subhero-inner .schole-garden-h1 .hero-accent { color: #7a6cb4; }
.original-learner .schole-subhero-inner .schole-lede { max-width: 560px; margin-top: 20px !important; font-size: 17px; line-height: 1.5; color: #3c4150; }
@media (min-width: 640px) { .original-learner .schole-subhero-inner .schole-lede { font-size: 18px; } }


/* Cards: the two-layer bevelled "bento" card becomes one flat Upskilling card (the outer shell keeps its padding,
   so nothing moves, but draws nothing; the inner card carries a 1px lavender edge and 20px corners). */
.original-learner .schole-bento-shell { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.original-learner .schole-bento-inner { border: 1px solid #e3e6ec !important; border-radius: 12px !important; }
.original-learner .schole-journey-surface { background-image: none !important; background-color: #eef0f4 !important; }

/* Buttons: the gradient button and the quiet outline button, labels in Inter. */
.original-learner .schole-btn-primary, .original-learner .schole-btn-primary *,
.original-learner .schole-btn-secondary, .original-learner .schole-btn-secondary *,
.original-learner .schole-btn-dark-secondary, .original-learner .schole-btn-dark-secondary * {
  font-family: 'Inter', Arial, sans-serif !important; font-weight: 500 !important; letter-spacing: normal !important;
}
/* A gradient cannot transition, so the hover swapped gradients in one frame while the button lifted over 150ms; the two
   colours are animatable properties (@property) and fade with the lift. Same look at rest and on hover. */
@property --sk-btn-a { syntax: '<color>'; inherits: false; initial-value: #9075c0; }
@property --sk-btn-b { syntax: '<color>'; inherits: false; initial-value: #6e94cf; }
.original-learner .schole-btn-primary { background: linear-gradient(270deg, var(--sk-btn-a) 0%, var(--sk-btn-b) 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: none !important; border-radius: 10px !important; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, --sk-btn-a .15s ease, --sk-btn-b .15s ease !important; }
.original-learner .schole-btn-primary:hover { --sk-btn-a: #7c66a5; --sk-btn-b: #6080b1; }
.original-learner .schole-btn-secondary { background: #fff !important; color: #242631 !important; border: 1px solid #d9d7e6 !important; box-shadow: none !important; border-radius: 10px !important; }
/* Pricing's Monthly / Yearly switch: the active pill's gradient appeared and vanished in one frame while the labels faded
   over 180ms, so for a moment the leaving label was white on white and the arriving one dark on violet. The pill now
   fades in and out with its label (transparent stops when inactive, the gradient when active). */
.original-learner .schole-billing-btn { --sk-btn-a: transparent; --sk-btn-b: transparent; background-image: linear-gradient(270deg, var(--sk-btn-a) 0%, var(--sk-btn-b) 100%) !important; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .15s ease, --sk-btn-a .18s ease, --sk-btn-b .18s ease !important; }
.original-learner .schole-billing-btn.is-active { --sk-btn-a: #9075c0; --sk-btn-b: #6e94cf; background-color: transparent !important; box-shadow: none !important; }

/* Pills and chips: Upskilling lavender pills, outline chips, eyebrow pills without the bevel. */
.original-learner .schole-topic-pill { background-color: #efedf6 !important; color: #4b4680 !important; }

.original-learner .schole-mascot-socket { background: #e8e6f2 !important; border-color: #d9d4ec !important; box-shadow: none !important; }

/* Eyebrows: a plain ink label, no pill chrome and no stars (Nov 4, KJ: "remove the star logo from every instance"; the
   pill keeps its box, so nothing moves). Hero eyebrow pills and the pills that head a section ("Plan Breakdown") count. */
.original-learner :is(.schole-eyebrow-pill, .schole-section-head > .schole-topic-pill, .schole-post-more-head .schole-topic-pill) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  color: #14151c !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: normal !important; text-transform: none !important;
}
.original-learner .schole-eyebrow-dot { display: none !important; }

/* The Pro plan keeps its emphasis as an Upskilling featured card: violet edge and a soft glow. */
.original-learner .schole-pricing-card.is-pro .schole-bento-inner { border-color: #b7a5e0 !important; box-shadow: 0 24px 60px -32px rgba(97, 92, 156, .45) !important; }
/* "Read article ->" reads as a link, not a disabled label. */
.original-learner .schole-post-card-cta { color: #4b4680 !important; }
.original-learner :is(.schole-eyebrow-pill, .schole-section-head > .schole-topic-pill, .schole-post-more-head .schole-topic-pill) { gap: 0 !important; }

/* Nov 3, KJ: /pricing uses the Scholé app's signup pictures (build_pages.py app_art). Each is multiplied onto its tile
   so the clip's white ground takes the tile's colour, as in the app; pointing at its chip, list line or table row lifts it
   and plays the clip (originals.js). */
.original-learner .app-art { position: relative; display: inline-block; flex-shrink: 0; mix-blend-mode: multiply; transition: transform .3s cubic-bezier(.33, 1, .68, 1); }
.original-learner .app-art img, .original-learner .app-art video { display: block; width: 100%; height: 100%; object-fit: contain; }
.original-learner .app-art video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease-out; pointer-events: none; }
.original-learner .app-art.is-playing video { opacity: 1; }
.original-learner .app-art.is-lifted { transform: translateY(-2px); }
.original-learner .schole-compare-feature-cell:has(> .app-art) { position: relative; padding-left: 70px; }
.original-learner .schole-compare-feature-cell > .app-art { position: absolute; left: 18px; top: calc(50% - 21px); width: 42px; height: 42px; margin: 0; }
@media (max-width: 640px) {
  .original-learner .schole-compare-feature-cell:has(> .app-art) { padding-left: 52px; }
  .original-learner .schole-compare-feature-cell > .app-art { left: 10px; top: calc(50% - 16px); width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .original-learner .app-art, .original-learner .app-art video { transition: none; }
  .original-learner .app-art.is-lifted { transform: none; }
}
.original-learner .schole-pricing-features li:has(> .app-art) { align-items: center; }
.original-learner .schole-pricing-features li > .app-art { width: 36px; height: 36px; margin: -7px 0; }
.original-learner .app-art.is-off { filter: grayscale(1); opacity: .4; }
.original-learner .schole-pricing-title-row + .schole-pricing-blurb { margin-top: 14px; }   /* the price box that sat between them is gone (Nov 3) */
/* Nov 3, KJ: "the fonts on the top part of the cards look different" - the tagline (14.5px medium, grey) and the blurb
   (15px regular, darker) sat right on top of each other once the price box went. Both now read like the list below. */
.original-learner .schole-pricing-sub, .original-learner .schole-pricing-blurb { font-family: 'Inter', Arial, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #2f3240; }
.original-learner .schole-pricing-title-row + .schole-pricing-blurb { margin-top: 10px !important; }
/* Nov 3, KJ: "the cards look like they are different sizes" - the original grid gave Pro .94fr : 1.06fr (62px wider at
   1440). Both cards now take the same width. */
@media (min-width: 900px) { .original-learner .schole-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Nov 3, KJ: bigger pictures and words in the cards; each picture fitted to its frame (build_pages.py ART_FIT). */
.original-learner .app-art > img { transform: var(--art-fit, none); }
/* The clip sits on its still (build_pages.py CLIP_FIT), and its ground, drawn #fdfdfd, is lifted to pure white so
   the multiply leaves no box around it. */
.original-learner .app-art > video { transform: var(--art-fit, scale(1)) var(--clip-fit, scale(1)); filter: brightness(1.02); }
.original-learner .schole-pricing-features li:has(> .app-art) { font-size: 16px; gap: 14px; }
.original-learner .schole-pricing-features li > .app-art { width: 64px; height: 64px; margin: -12px 0; }