/* Pages rebuilt from the original schole.ai site (legacy/pages/*.json, rendered by scripts/build_pages.py)
   in The Upskilling Company's style. They share the About page's shell (about.css: white sticky header
   with the schole.ai menus, gradient buttons, footer) and add the section types below. New Spirit
   headings over Inter text, white and soft lavender surfaces, generous spacing, rounded media. */
.lp-section { padding-block:88px; }
.lp-section + .lp-section { padding-top:0; }
.lp-section.is-tint { background:#f6f5fb; padding-block:88px; }
.lp-section.is-tint + .lp-section { padding-top:88px; }
.lp-eyebrow { margin-bottom:18px !important; color:#615c9c; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.lp-section h2 { font-family:var(--_typography-primitives---family--display-sans); font-size:clamp(34px,3.8vw,54px); font-weight:400; line-height:1.12; max-width:22ch; }
/* Long words (German, French, product names) wrap instead of pushing the page sideways on phones. */
.about-page :is(h1,h2,h3,p,li,a,figcaption,blockquote) { overflow-wrap:break-word; }
.lp-hero h3, .lp-section h3 { font-family:var(--_typography-primitives---family--display-sans); font-size:22px; font-weight:400; line-height:1.3; }
.lp-intro { margin-top:20px !important; max-width:62ch; color:#535560; font-size:18px; line-height:1.6; }
.lp-intro + .lp-intro { margin-top:12px !important; }
.lp-head { margin-bottom:48px; }
.lp-head.is-center { text-align:center; }
.lp-head.is-center h2, .lp-head.is-center .lp-intro { margin-inline:auto; }

/* Hero */
.lp-hero { padding-block:96px 72px; }
.lp-hero-layout { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center; }
.lp-hero-layout.is-solo { grid-template-columns:minmax(0,1fr); }
.lp-hero h1 { font-family:var(--_typography-primitives---family--display-sans); font-size:clamp(44px,5.4vw,76px); font-weight:400; line-height:1.06; max-width:18ch; }
.lp-hero .lp-intro { font-size:20px; }
.lp-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.lp-hero-media img, .lp-media img { width:100%; height:auto; border-radius:20px; background:#f6f5fb; }

/* Buttons: the gradient button (about.css .about-button) plus a quiet outline one. */
.about-page .lp-button-quiet { display:inline-flex; align-items:center; min-height:46px; padding:13px 24px; border:1px solid #d9d7e6; border-radius:10px; color:#242631; text-decoration:none; font-size:16px; }
.about-page .lp-button-quiet:hover { background:#f6f5fb; }
.lp-link { display:inline-block; margin-top:20px; color:#242631; font-weight:500; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; }
.lp-link::after { content:" \2192"; }

/* Text beside media */
.lp-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; }
.lp-split.is-flip .lp-media { order:-1; }
.lp-copy p { margin-top:16px !important; color:#535560; font-size:17px; line-height:1.65; }

/* Cards */
.lp-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.lp-cards.is-two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lp-card { padding:28px; border-radius:20px; background:#f6f5fb; }
.lp-section.is-tint .lp-card { background:#fff; }
.lp-card h3 { margin-bottom:10px !important; }
.lp-card p { color:#535560; font-size:15px; line-height:1.6; }
.lp-card img { width:100%; height:auto; margin-bottom:18px; border-radius:12px; }

/* Plain bullet list */
.lp-list { display:grid; gap:12px; margin:24px 0 0; padding:0; list-style:none; }
.lp-list li { position:relative; padding-left:28px; color:#535560; font-size:17px; line-height:1.55; }
.lp-list li::before { content:""; position:absolute; left:0; top:.55em; width:12px; height:12px; border-radius:50%; background:linear-gradient(270deg,#9075c0 0%,#6e94cf 100%); }

/* Logos */
.lp-logos { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:28px 56px; }
.lp-logos img { width:auto; height:30px; max-width:140px; object-fit:contain; filter:grayscale(1); opacity:.75; }

/* Gallery (photo walls, screenshots) */
.lp-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.lp-gallery img { width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; }

/* People */
.lp-people { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:28px 20px; }
.lp-person img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px; background:#f6f5fb; }
.lp-person p { margin-top:10px !important; font-size:15px; line-height:1.35; }
.lp-person p + p { margin-top:2px !important; color:#535560; font-size:13px; }

/* Quotes */
.lp-quotes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.lp-quote { display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:28px; border-radius:20px; background:#f6f5fb; }
.lp-quote blockquote { margin:0; font-family:var(--_typography-primitives---family--display-sans); font-size:20px; line-height:1.45; }
.lp-quote figcaption { color:#535560; font-size:14px; line-height:1.4; }
/* On a tinted band the quote cards turn white, as .lp-card does, so their edges show. */
.lp-section.is-tint .lp-quote { background:#fff; }
/* Two quotes share the row instead of leaving the third column empty. */
@media (min-width:651px) { .lp-quotes:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* FAQ */
.lp-faq { max-width:880px; border-top:1px solid #e6e4ef; }
.lp-faq details { border-bottom:1px solid #e6e4ef; }
.lp-faq summary { display:flex; justify-content:space-between; gap:24px; padding:22px 0; cursor:pointer; list-style:none; font-size:18px; font-weight:500; }
.lp-faq summary::-webkit-details-marker { display:none; }
.lp-faq summary::after { content:"+"; flex:none; color:#615c9c; font-size:22px; line-height:1; }
.lp-faq details[open] summary::after { content:"\2212"; }
.lp-faq details p { padding-bottom:22px; color:#535560; font-size:16px; line-height:1.65; }

/* Stats and definition pairs */
.lp-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.lp-stat { padding:24px; border-radius:18px; background:#f6f5fb; }
.lp-stat strong { display:block; font-family:var(--_typography-primitives---family--display-sans); font-size:40px; font-weight:400; line-height:1.1; }
.lp-stat span { display:block; margin-top:8px; color:#535560; font-size:14px; }

/* Long-form text: blog posts, answers, comparisons, privacy */
.lp-article { max-width:760px; }
.lp-article h2 { margin-top:48px !important; font-size:clamp(28px,3vw,38px); max-width:none; }
.lp-article h3 { margin-top:32px !important; font-size:24px; }
.lp-article p, .lp-article li { margin-top:16px !important; color:#3c3e4a; font-size:18px; line-height:1.7; }
.lp-article ul { margin:0; padding-left:22px; }
.lp-article blockquote { margin:28px 0 0; padding-left:20px; border-left:3px solid #9075c0; font-family:var(--_typography-primitives---family--display-sans); font-size:22px; line-height:1.45; }
.lp-article img { width:100%; height:auto; margin-top:28px; border-radius:16px; }
.lp-article a { text-decoration:underline; }

/* Closing call to action: the About page's lavender band (about.css .about-next). */
.lp-cta { padding-block:88px; background:#efedf6; }
.lp-cta-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px; align-items:end; }
.lp-cta h2 { font-family:var(--_typography-primitives---family--display-sans); font-size:clamp(36px,4.2vw,58px); font-weight:400; line-height:1.1; }
.lp-cta p { color:#535560; font-size:17px; line-height:1.6; }

/* Mascot art in a hero stays mascot-sized; framed media sits on a lavender panel. */
.lp-hero-media { display:flex; justify-content:center; }
.lp-hero-media img[src$=".svg"] { width:auto; max-width:min(100%,320px); max-height:380px; background:none; }
.lp-media.is-framed { display:flex; justify-content:center; padding:40px; border-radius:20px; background:#efedf6; }
.lp-media.is-framed img { width:auto; max-width:100%; max-height:440px; background:none; }
/* One quote reads as a centred feature; many become a scrolling strip, as on the original page. */
.lp-quotes:has(> :only-child) { grid-template-columns:minmax(0,760px); justify-content:center; }
.lp-quotes.is-strip { display:grid; grid-auto-flow:column; grid-template-rows:repeat(2,auto); grid-template-columns:none; grid-auto-columns:minmax(320px,380px); overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:12px; }
.lp-quotes.is-strip .lp-quote { scroll-snap-align:start; }
/* The strip fades at its right edge and keeps a thin scrollbar, so it reads as more to scroll, not cut-off text. */
.lp-quotes.is-strip { scrollbar-width:thin; scrollbar-color:#cfcbe3 transparent; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 96px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 96px),transparent); }
@media (max-width:650px) { .lp-quotes.is-strip { -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent); } }
@media (max-width:650px) { .lp-quotes.is-strip { grid-template-rows:auto; grid-auto-columns:85%; } }
/* Tags (the 24 ways to learn, example prompts) */
.lp-tags { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.lp-tags li { padding:10px 16px; border:1px solid #e6e4ef; border-radius:999px; background:#fff; color:#242631; font-size:15px; }
.lp-cards.is-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.lp-section > .about-container > * + *, .lp-hero > .about-container > * + * { margin-top:40px; }
.lp-head + * { margin-top:0 !important; }

/* Quote faces, notes */
.lp-quote figcaption { display:flex; align-items:center; gap:12px; }
.lp-face { width:42px; height:42px; border-radius:50%; object-fit:cover; flex:none; }
.lp-note { margin-top:16px !important; color:#6b6d78; font-size:14px; line-height:1.5; }
/* A note under a centred logo row centres with it. */
.lp-logos + .lp-note { text-align:center; }

/* People groups: founders large with bios, teams as small portraits */
.lp-people-title { margin-bottom:20px !important; }
.lp-people.is-large { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
.lp-people.is-large .lp-person img { aspect-ratio:1.08; border-radius:18px; }
.lp-people.is-large .lp-person > p:first-of-type { font-family:var(--_typography-primitives---family--display-sans); font-size:clamp(24px,2.4vw,32px); }
.lp-people:not(.is-large) { grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); }
.lp-bio { margin-top:12px !important; color:#535560 !important; font-size:16px !important; line-height:1.6; }
.lp-person-link { text-decoration:none; }

/* Footer for the rebuilt pages: the schole.ai menus as columns */
/* The footer's styles are in footer.css. */
@media (max-width:991px) { .lp-cards.is-four { grid-template-columns:repeat(2,minmax(0,1fr)); } .lp-people.is-large { grid-template-columns:minmax(0,1fr); } }
@media (max-width:650px) { .lp-cards.is-four { grid-template-columns:minmax(0,1fr); } }

@media (max-width:991px) {
  .lp-hero-layout, .lp-split, .lp-cta-layout { grid-template-columns:minmax(0,1fr); gap:36px; }
  .lp-split.is-flip .lp-media { order:0; }
  .lp-cards, .lp-quotes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:650px) {
  .lp-section, .lp-section.is-tint, .lp-cta { padding-block:56px; }
  .lp-section.is-tint + .lp-section { padding-top:56px; }
  .lp-hero { padding-block:56px 40px; }
  .lp-cards, .lp-cards.is-two, .lp-quotes { grid-template-columns:minmax(0,1fr); }
  .lp-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-intro, .lp-hero .lp-intro { font-size:17px; }
  .lp-article p, .lp-article li { font-size:17px; }
}
.lp-creds { margin-top:10px !important; color:#6b6d78 !important; font-size:13px !important; letter-spacing:.02em; }

/* Design QA, Oct 31 */
/* Headings balance their lines instead of ending on one word ("…with / Scholé"). */
.lp-hero h1, .lp-section h2, .lp-cta h2, .lp-card h3 { text-wrap:balance; }
/* Cards: no default top margin on the title (it sat 50px down); stacked paragraphs get a gap. */
.lp-card h3 { margin-top:0; }
.lp-card p + p { margin-top:8px !important; }
/* A section that is only a heading doesn't keep the 48px gap meant for the content below it. */
.lp-head:last-child { margin-bottom:0; }
/* Founders read like the About page: room under the photo and an open bio. */
.lp-people.is-large .lp-person img { margin-bottom:18px; }
.lp-person .lp-bio { margin-top:14px !important; line-height:1.6; }
/* The learning-path graphic is a crop of a taller drawing, so its cut top and bottom fade out. */
.lp-media img[src*="learning-path"] { -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent); }
/* Square and narrow logos get more height so they read next to the wide ones; the security badges show in full. */
.lp-logos img:is([alt="NASA"],[alt="NVIDIA"]) { height:40px; }
.lp-logos:has(img[alt^="ISO"]) img { height:56px; filter:none; opacity:1; }
/* The gallery photos have rounded corners baked in; a slight inset hides the notches. */
.lp-gallery img { clip-path:inset(4px round 14px); }
/* The quote avatars carry a stray arc at their left edge. */
.lp-face { transform:scale(1.12); }
/* Stat tiles on a tinted band turn white like cards and quotes, so their edges show. */
.lp-section.is-tint .lp-stat { background:#fff; }

/* Directory (Tool library): many small links in titled groups, a tile per tool with its logo. */
.lp-dir-group + .lp-dir-group { margin-top:56px; }
.lp-dir-group h3 { display:flex; align-items:baseline; gap:10px; margin:0 0 18px !important; }
.lp-dir-count { color:#8a8796; font-family:var(--_typography-primitives---family--primary-family); font-size:14px; }
.lp-dir-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.lp-dir-item { display:flex; align-items:center; gap:12px; height:100%; padding:14px 16px; border-radius:14px; background:#f6f5fb; color:#242631; text-decoration:none; transition:background-color .2s; }
.lp-dir-item:hover, .lp-dir-item:focus-visible { background:#ece9f7; }
.lp-section.is-tint .lp-dir-item { background:#fff; }
.lp-dir-item img { flex:none; width:28px; height:28px; border-radius:7px; }
.lp-dir-item strong { display:block; font-size:15px; font-weight:500; line-height:1.3; }
.lp-dir-item small { display:block; margin-top:2px; color:#6b6d78; font-size:13px; line-height:1.4; }
/* A card's small icon (a tool logo) stays logo-sized instead of filling the card like a card image. */
.lp-card img.lp-card-icon { width:44px; height:44px; margin-bottom:18px; border-radius:10px; object-fit:contain; }
/* A card title that is itself the link (AI Adoption Diaries headlines). */
.lp-card-title-link { color:inherit; text-decoration:none; }
.lp-card-title-link:hover, .lp-card-title-link:focus-visible { text-decoration:underline; text-underline-offset:4px; }

/* Nov 2 design pass on the header pages (Product, Resources, Company). */
.lp-hero + .lp-section:not(.is-tint) { padding-top:24px; }
.lp-hero-media img[src*="mascot-atlas"] { width:220px; max-width:100%; }
.lp-hero-media img[src*="vinitra-sketch"] { max-width:360px; }
/* Wide demo stills (the star map, the lesson in a laptop) sit full width under the hero copy, not in a column. */
.lp-hero-layout:has(img[src*="constellation-sky"], img[src*="integrations-lesson"]) { grid-template-columns:minmax(0,1fr); }
.lp-hero-layout:has(img[src*="constellation-sky"], img[src*="integrations-lesson"]) h1 { max-width:24ch; }
/* Learn-anywhere: tall panel stills fade out instead of stopping on a hard edge. */
.lp-media img[src*="panel-task"], .lp-card img[src*="learn-anywhere-card"] { -webkit-mask-image:linear-gradient(#000 82%,transparent); mask-image:linear-gradient(#000 82%,transparent); }
.lp-copy .lp-tags, .lp-hero .lp-tags { margin-top:20px; }
.lp-head.is-center + .lp-actions, .lp-head.is-center + .lp-note + .lp-actions { justify-content:center; }
.lp-head.is-center ~ .lp-list { grid-template-columns:repeat(2,max-content); justify-content:center; column-gap:48px; }
/* Org logos (wide wordmarks) as card icons keep their shape. */
.lp-card img.lp-card-icon[src*="-logo"] { width:auto; height:28px; max-width:160px; border-radius:0; }
/* Two links on a card (Vini's List: the lesson, then the tool's site) sit side by side and wrap cleanly. */
.lp-card .lp-link:not(:last-child) { margin-right:18px; }
/* Story pages: chart captions read as captions; article headings balance. */
.lp-article img + p { font-size:14px !important; color:#6b6d78 !important; }
.lp-article h2, .lp-article h3 { text-wrap:balance; }
/* Careers: open positions three across under a heading sized like the page's other headings. */
#positions .lp-dir-group h3 { font-size:clamp(28px,3vw,40px); }
@media (min-width:992px) { #positions .lp-dir-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:991px) { .lp-split:has(img[src*="video-poster"]) .lp-media { order:-1; } }
@media (max-width:650px) {
  .lp-dir-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .lp-dir-item { gap:10px; padding:10px 12px; }
  .lp-dir-item img { width:24px; height:24px; }
  .lp-stats:has(> :nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .lp-stats:has(> :nth-child(3):last-child) .lp-stat strong { font-size:26px; }
  .lp-hero-media img[src*="mascot-atlas"] { width:160px; }
  .lp-hero-media img[src*="vinitra-sketch"] { max-width:240px; }
  .lp-head.is-center ~ .lp-list { grid-template-columns:minmax(0,1fr); justify-content:start; }
  .lp-media:has(img[src*="api-code"]) { overflow-x:auto; }
  .lp-media img[src*="api-code"] { width:640px; max-width:none; }
}
.lp-head.is-center ~ .lp-note { text-align:center; }

/* Pricing plans (rebuilt learner Pricing): two cards side by side, the featured one with a lavender edge; every
   billing period's price is shown, so there is no toggle. */
.lp-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:1040px; margin:0 auto; padding:0; list-style:none; }
.lp-plan { display:flex; flex-direction:column; gap:14px; padding:32px; border:1px solid #e6e4ef; border-radius:20px; background:#fff; }
.lp-plan.is-featured { border-color:#b7a5e0; box-shadow:0 24px 60px -32px rgba(97,92,156,.45); }
.lp-section.is-tint .lp-plan { background:#fff; }
.lp-plan-top { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-height:40px; }
.lp-plan img.lp-plan-icon { width:40px; height:40px; object-fit:contain; }
.lp-plan-pill { padding:6px 12px; border-radius:999px; background:#efedf6; color:#4b4680; font-size:13px; font-weight:500; }
.lp-plan-tag { margin-left:auto; color:#6b6d78; font-size:13px; }
.lp-plan h3 { margin:6px 0 0 !important; font-size:32px !important; }
.lp-plan-sub { color:#535560; font-size:15px; }
.lp-plan-prices { display:grid; gap:12px; padding:18px 20px; border-radius:14px; background:#f6f5fb; }
.lp-plan-price p:first-child strong { font-family:var(--_typography-primitives---family--display-sans); font-size:40px; font-weight:400; line-height:1.1; }
.lp-plan-price p:first-child span { color:#535560; font-size:15px; }
.lp-plan-note { margin-top:4px !important; color:#6b6d78; font-size:13px; line-height:1.5; }
.lp-plan-blurb { color:#535560; font-size:15px; line-height:1.6; }
.lp-plan .lp-actions { margin-top:4px; }
.lp-plan-chips { margin-top:4px; }
.lp-plan-chips li { padding:6px 12px; font-size:13px; }
.lp-plan-features-title { margin-top:6px !important; font-weight:600; font-size:15px; }
.lp-plan-features { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.lp-plan-features li { display:flex; gap:10px; align-items:flex-start; color:#242631; font-size:15px; line-height:1.5; }
.lp-plan-features li.is-no { color:#8a8796; }
.lp-mark { display:inline-flex; flex:none; align-items:center; justify-content:center; width:20px; height:20px; margin-top:2px; border-radius:50%; }
.lp-mark.is-yes { background:#e7f6ec; color:#1f7a45; }
.lp-mark.is-no { background:#f1f0f5; color:#8a8796; }
/* Comparison table: a scrollable box on phones, grouped rows, check and dash cells. */
.lp-table-wrap { max-width:1040px; margin:0 auto; overflow-x:auto; border:1px solid #e6e4ef; border-radius:20px; background:#fff; }
.lp-table { width:100%; min-width:560px; border-collapse:collapse; font-size:15px; }
.lp-table th, .lp-table td { padding:16px 20px; border-bottom:1px solid #eeedf1; text-align:left; vertical-align:top; }
.lp-table thead th { font-weight:600; background:#f6f5fb; }
.lp-table thead th span { display:block; margin-top:2px; color:#6b6d78; font-weight:400; font-size:13px; }
.lp-table td { text-align:center; color:#242631; }
.lp-table tbody th strong { display:block; font-weight:500; }
.lp-table tbody th span { display:block; margin-top:2px; color:#6b6d78; font-size:13px; font-weight:400; }
.lp-table-group td { padding:12px 20px; background:#fbfaff; color:#615c9c; font-size:12px; font-weight:600; letter-spacing:.12em; text-align:left; text-transform:uppercase; }
.lp-table tr:last-child th, .lp-table tr:last-child td { border-bottom:0; }
@media (max-width:767px) { .lp-plans { grid-template-columns:minmax(0,1fr); } .lp-plan { padding:24px; } }
.lp-table thead th:not(:first-child) { text-align:center; }