/* Old schole.ai 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). */
@font-face { font-family:'Inter'; src: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('/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('/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('/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 old site is Tailwind v4: every colour is a variable, so the palette is remapped once and every page follows
   the Upskilling home page (/business): slate becomes its ink #14151c, body #3c4150 and panel grey #eef0f4;
   periwinkle (accents, buttons) becomes the Upskilling violet; cards take the home's 12px corners. */
.original-schole {
  --color-slate-900: #14151c; --color-slate-800: #242631; --color-slate-700: #2f3240; --color-slate-600: #3c4150;
  --color-slate-500: #5b6070; --color-slate-400: #8a8f9c; --color-slate-300: #d3d7df; --color-slate-200: #e3e6ec;
  --color-slate-100: #e8ebf0; --color-slate-50: #eef0f4;
  --color-periwinkle-50: #eef0f4; --color-periwinkle-100: #e8e6f2; --color-periwinkle-200: #d9d4ec;
  --color-periwinkle-400: #9075c0; --color-periwinkle-500: #7a6cb4; --color-periwinkle-600: #615c9c; --color-periwinkle-700: #4b4680;
  --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px;
  background: #fff;
  color: #14151c;
}
/* Filled buttons and button-links become the Upskilling gradient button; the label sits in Inter. */
.original-schole :is(a, button)[class*="bg-periwinkle-5"][class*="text-white"],
.original-schole :is(a, button)[class*="bg-periwinkle-6"][class*="text-white"],
.original-schole :is(a, button)[class*="bg-slate-900"][class*="text-white"] {
  background: linear-gradient(270deg, #9075c0 0%, #6e94cf 100%) !important;
  color: #fff !important; border-color: transparent !important; box-shadow: none !important; border-radius: 10px !important;
}
.original-schole :is(a, button)[class*="bg-periwinkle-5"][class*="text-white"]:hover,
.original-schole :is(a, button)[class*="bg-slate-900"][class*="text-white"]:hover { background: linear-gradient(270deg, #7c66a5 0%, #6080b1 100%) !important; }

/* Eyebrows (the small uppercase labels over headings and demos) look like the home page's: the Scholé stars, then the
   label in plain case, Inter 15px. A label keeps its own colour (white stays white on a dark band); periwinkle ones become
   ink. Filled badges ("★ Favorite") are not eyebrows. Same line, so nothing below moves. */
.original-schole :is(p[class*="uppercase"][class*="tracking"], :is(p, span, div)[class*="uppercase"][class*="tracking"][class*="text-periwinkle"]):not([class*="bg-"]) {
  text-transform: none !important; letter-spacing: normal !important; font-size: 15px !important; font-weight: 400 !important;
}
.original-schole :is(p, span, div)[class*="uppercase"][class*="tracking"][class*="text-periwinkle"]:not([class*="bg-"]) { color: #14151c !important; }
.original-schole :is(p[class*="uppercase"][class*="tracking"], :is(p, span, div)[class*="uppercase"][class*="tracking"][class*="text-periwinkle"]):not([class*="bg-"])::before {
  content: ""; display: inline-block; width: 1.2em; height: 1.2em; margin-right: .45em; vertical-align: -.25em;
  background: currentColor; -webkit-mask: url('/assets/brand/schole-stars.svg') center / contain no-repeat; mask: url('/assets/brand/schole-stars.svg') center / contain no-repeat;
}
/* The shared "Ready to learn?" band (in place of "Start for free!"): its buttons as on the learner pages. */
.ready-band-wrap :is(.schole-btn-primary, .schole-btn-dark-secondary, .schole-btn-secondary), .ready-band-wrap :is(.schole-btn-primary, .schole-btn-dark-secondary, .schole-btn-secondary) * {
  font-family: 'Inter', Arial, sans-serif !important; font-weight: 500 !important; letter-spacing: normal !important;
}
.ready-band-wrap .schole-btn-primary { background: linear-gradient(270deg, #9075c0 0%, #6e94cf 100%) !important; color: #fff !important; border-color: transparent !important; box-shadow: none !important; border-radius: 10px !important; }
.ready-band-wrap :is(.schole-btn-dark-secondary, .schole-btn-secondary) { border-radius: 10px !important; box-shadow: none !important; }
.ready-band-wrap :is(h2) { color: #fff; }

/* Vini's List: the hero title in white (KJ, Nov 2), both words. */
.page-vini-list h1, .page-vini-list h1 span { color: #fff !important; }

/* Book a demo: the booking button that stands in for the calendar widget. */
.original-schole .booking-cta { display: inline-flex; align-items: center; min-height: 46px; padding: 13px 28px; border-radius: 10px; background: linear-gradient(270deg, #9075c0 0%, #6e94cf 100%); color: #fff; font-family: 'Inter', Arial, sans-serif; font-size: 16px; font-weight: 500; text-decoration: none; }
.original-schole .booking-cta:hover { background: linear-gradient(270deg, #7c66a5 0%, #6080b1 100%); }
/* An eyebrow that already carried its own small icon (the original stars image) shows only the stars above, not two. */
.original-schole :is(p[class*="uppercase"][class*="tracking"], :is(p, span, div)[class*="uppercase"][class*="tracking"][class*="text-periwinkle"]):not([class*="bg-"]) > :is(img, svg) { display: none !important; }
/* Stars sit 6px from the label (the home page spaces its 24px icon 8px from the text; these icons are 18px). */
.original-schole :is(p[class*="uppercase"][class*="tracking"], :is(p, span, div)[class*="uppercase"][class*="tracking"][class*="text-periwinkle"]):not([class*="bg-"]) { gap: 0 !important; column-gap: 0 !important; }
.original-schole :is(p[class*="uppercase"][class*="tracking"], :is(p, span, div)[class*="uppercase"][class*="tracking"][class*="text-periwinkle"]):not([class*="bg-"])::before { margin-right: 6px !important; }
/* The eyebrow stars in colour: the Scholé stars of the Scholé AI logo (schole-stars-color.svg), not a one-colour mark. */
.original-schole :is(p[class*="uppercase"][class*="tracking"], :is(p, span, div)[class*="uppercase"][class*="tracking"][class*="text-periwinkle"]):not([class*="bg-"])::before { background: url("/assets/brand/schole-stars-color.svg") center / contain no-repeat !important; -webkit-mask: none !important; mask: none !important; }
/* About Scholé: the tilted photo strip is wider than its column (no scroll animation slides it here), so centre it
   on the column and let the sticky frame crop both ends evenly instead of only the right (KJ, Nov 2). */
.original-schole.page-about div.w-max.will-change-transform { margin-left: 50%; translate: -50% 0; }