/* LMS (/lms/): the learner app and its admin panel, rebuilt on November 5, 2026 from the owner's feature document and
   screenshots of the Novaterra demo tenant (docs/lms-screens.json). Every screen sits on one of the painted textures of
   the menu and the program steps. lms.js adds the light and dark switch in the hero, the learner story that follows
   the scroll and the admin tabs; without it, every step and panel shows in order. */

/* Painted fields behind product screens, and plain frames for screens with their own background. */
.lms-field { position: relative; margin: 0; padding: clamp(14px, 2.2vw, 28px); border-radius: 20px; background: #eef1ea center / cover no-repeat; }
.lms-field img { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; outline: 1px solid rgb(0 0 0 / .06); outline-offset: -1px; box-shadow: 0 18px 40px -24px rgb(16 54 57 / .45); }
.lms-field--mint { background-image: url('screens/backgrounds/truth.webp?v=c2f34fbd844b'); }
.lms-field--lilac { background-image: url('screens/backgrounds/discovery.webp?v=1a7a51c74eb9'); }
.lms-field--blue { background-image: url('screens/backgrounds/readiness.webp?v=c8bcd7182338'); }
.lms-field--peach { background-image: url('screens/backgrounds/learning.webp?v=c8af22551c63'); }
.lms-field--green { background-image: url('screens/backgrounds/tower.webp?v=ce006eac251c'); }
.lms-frame { margin: 0; }
.lms-frame img { display: block; width: 100%; height: auto; border: 1px solid rgb(18 44 43 / .12); border-radius: 14px; background: #fff; }
.lms-frame figcaption { padding: 10px 4px 0; color: var(--muted); font-size: 15px; line-height: 1.5; text-wrap: pretty; }

.lms-kicker { color: #20846a; font-size: 13px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.adoption-section-heading .lms-kicker + h2 { margin-top: 14px; }

/* Hero: the headline on the left, the intro and buttons on the right, and the learner home below on the LMS's peach
   texture, running off the bottom edge, with the phone version over its corner. The phone screen has a real phone's
   proportions, so it also runs off the bottom edge, below the Fellow's portrait. The switch shows it in dark mode. */
.lms-hero { padding-top: clamp(36px, 5.4vw, 80px); }
.lms-hero-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "eyebrow eyebrow" "title side"; align-items: end; gap: 22px clamp(32px, 4.4vw, 72px); }
.lms-hero-copy .eyebrow-pill { grid-area: eyebrow; justify-self: start; border: 0; background: #fde4d4; box-shadow: none; }
.lms-hero h1 { grid-area: title; font-size: clamp(46px, 5.6vw, 86px); line-height: 1; letter-spacing: -.055em; text-wrap: balance; }
.lms-hero-side { grid-area: side; padding-bottom: 6px; }
.lms-hero-intro { color: #4e655b; font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.lms-hero .hero-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 26px; }
.lms-hero-stage { margin-top: clamp(36px, 4.4vw, 64px); }
.lms-hero-field { position: relative; overflow: hidden; padding: clamp(56px, 6vw, 88px) clamp(20px, 7vw, 128px) 0; border-radius: 24px; background: #f7e6da url('screens/backgrounds/learning.webp?v=c8af22551c63') center / cover no-repeat; }
.lms-hero-screen { position: relative; max-width: 1120px; margin: 0 auto -10%; }
.lms-hero-screen img { display: block; width: 100%; height: auto; border-radius: 14px; background: #fff; outline: 1px solid rgb(0 0 0 / .06); outline-offset: -1px; box-shadow: 0 34px 80px -34px rgb(16 54 57 / .6); }
.lms-hero-screen .lms-hero-dark { position: absolute; inset: 0; background: #0d1616; opacity: 0; transition: opacity .5s var(--ease); }
.lms-hero-field.is-dark .lms-hero-dark { opacity: 1; }
.lms-hero-phone { position: absolute; right: clamp(16px, 4.4vw, 72px); bottom: -24px; width: clamp(120px, 14.3vw, 206px); margin: 0; transform: translateY(53%); }
.lms-hero-phone img { display: block; width: 100%; height: auto; border: clamp(4px, .45vw, 7px) solid #13201f; border-radius: clamp(18px, 2vw, 30px); background: #fff; box-shadow: 0 30px 60px -22px rgb(16 54 57 / .6); }
.lms-theme-toggle { position: absolute; top: clamp(12px, 1.6vw, 20px); left: clamp(12px, 1.6vw, 20px); z-index: 2; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .74); box-shadow: 0 1px 3px rgb(16 54 57 / .12); backdrop-filter: blur(10px); }
.lms-theme-toggle[hidden] { display: none; }
.lms-theme-toggle button { min-height: 40px; padding: 0 18px; border-radius: 999px; background: transparent; color: #4f6058; font-size: 15px; font-weight: 500; }
.lms-theme-toggle button:hover { color: var(--ink); }
.lms-theme-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.lms-theme-toggle button:focus-visible { outline-offset: 2px; }

/* Facts under the hero. */
.lms-facts { padding-top: 48px; }

/* From the first lesson to the certificate. From 1001 px with lms.js, the steps scroll on the left while the screen
   stays on the right and changes with them; otherwise each step shows its own screen. */
.lms-week { padding-top: 128px; scroll-margin-top: 6px; }
.lms-story { margin-top: 48px; }
.lms-steps { display: grid; gap: 64px; margin: 0; padding: 0; list-style: none; }
.lms-step-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(18 44 43 / .14); color: var(--ink); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; transition: background .3s, box-shadow .3s; }
.lms-step h3 { margin-top: 16px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.lms-step > p:not(.lms-step-num) { max-width: 46ch; margin-top: 12px; color: #3f5650; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.lms-step-shot { margin-top: 24px; }
.lms-stage { display: none; }
@media (min-width: 1001px) {
  .lms-story.is-ready { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 clamp(40px, 5vw, 80px); margin-top: 16px; }
  .is-ready .lms-steps { gap: 0; }
  .is-ready .lms-step { display: flex; flex-direction: column; justify-content: center; min-height: 76vh; opacity: .32; transition: opacity .4s var(--ease); }
  .is-ready .lms-step.is-active { opacity: 1; }
  .is-ready .lms-step.is-active .lms-step-num { background: var(--teal); box-shadow: none; }
  .is-ready .lms-step-shot { display: none; }
  .is-ready .lms-stage { position: sticky; top: max(calc(24px + var(--header-offset)), calc(50vh - 340px + var(--header-offset) / 2)); display: block; align-self: start; margin-top: calc(38vh - 300px); }
  .lms-stage-frame { position: relative; }
  .lms-stage-frame > .lms-field { transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .lms-stage-frame > .lms-field:not(:first-child) { position: absolute; inset: 0; }
  .lms-stage-frame > .lms-field:not(.is-active) { opacity: 0; transform: translateY(12px) scale(.985); }
}

/* An AI Fellow on every page: a dark panel, the widest block on the page. */
.lms-fellow { width: min(calc(100% - 48px), var(--hero-width, 1600px)); margin: 128px auto 0; scroll-margin-top: 24px; }
.lms-fellow-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 48px clamp(40px, 5vw, 96px); padding: clamp(32px, 5.6vw, 104px); border-radius: 24px; background: radial-gradient(90% 80% at 100% 100%, rgb(5 217 171 / .2), transparent 60%), var(--deep); color: #fff; }
.lms-fellow .lms-kicker { color: var(--mint); }
.lms-fellow h2 { margin-top: 14px; font-size: clamp(36px, 4vw, 58px); line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.lms-fellow-lead { max-width: 44ch; margin-top: 18px; color: rgb(255 255 255 / .8); font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.lms-fellow-list { display: grid; gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.lms-fellow-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; color: rgb(255 255 255 / .72); font-size: 16px; line-height: 1.55; }
.lms-fellow-list .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--mint); }
.lms-fellow-list strong { color: #fff; font-weight: 500; }
.lms-fellow-button { margin-top: 32px; border-color: #fff; background: #fff; color: var(--ink); }
.lms-fellow-button:hover { background: #e9fbf4; }
.lms-fellow-button .icon { width: 17px; height: 17px; }
.lms-fellow-button:focus-visible { outline-color: var(--mint); }
.lms-fellow-shot img { box-shadow: 0 30px 60px -26px rgb(0 0 0 / .6); }

/* Campus life: two wide tiles over three. */
.lms-campus { padding-top: 128px; scroll-margin-top: 6px; }
.lms-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; margin-top: 48px; }
.lms-tile { display: flex; flex-direction: column; grid-column: span 4; }
.lms-tile--wide { grid-column: span 6; }
.lms-tile-shot { overflow: hidden; padding-bottom: 0; }
.lms-tile-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-radius: 10px 10px 0 0; }
.lms-tile h3 { margin-top: 22px; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.15; letter-spacing: -.025em; }
.lms-tile p { max-width: 54ch; margin-top: 10px; color: #3f5650; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.lms-tile--text { padding: clamp(22px, 2.4vw, 32px); border: 1px solid rgb(18 44 43 / .1); border-radius: 20px; background: #fff; }
.lms-tile--text h3 { margin-top: 0; }
.lms-mini-list { margin: 16px 0 0; padding: 0; list-style: none; }
.lms-mini-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid rgb(18 44 43 / .1); color: #3f5650; font-size: 16px; line-height: 1.5; }
.lms-mini-list li:last-child { padding-bottom: 0; }
.lms-mini-list .icon { width: 20px; height: 20px; color: #20846a; }

/* The admin panel: five tabs from 1001 px with lms.js, a list of panels otherwise. */
.lms-admin { padding-top: 128px; scroll-margin-top: 6px; }
.lms-tabs { margin-top: 48px; }
.lms-tablist { display: none; }
.lms-panels { display: grid; gap: 56px; }
.lms-panel { border-radius: 8px; }
.lms-panel:focus-visible { outline-offset: 10px; }
.lms-panel h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.03em; }
.lms-panel > p { max-width: 64ch; margin-top: 12px; color: #3f5650; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.lms-panel .lms-field { margin-top: 24px; }
.lms-admin-note { max-width: 64ch; color: var(--muted); font-size: 16px; line-height: 1.55; }
@media (min-width: 1001px) {
  .lms-tabs.is-ready { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; column-gap: clamp(32px, 4vw, 64px); }
  .is-ready .lms-tablist { position: sticky; top: calc(24px + var(--header-offset)); display: flex; flex-direction: column; gap: 6px; }
  .is-ready .lms-panels { gap: 28px; }
  .is-ready .lms-panel:not(.is-active) { display: none; }
  .is-ready .lms-panel.is-active { animation: lms-in .45s var(--ease); }
}
@keyframes lms-in { from { opacity: 0; transform: translateY(8px); } }
.lms-tab { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 12px 16px; border: 1px solid transparent; border-radius: var(--button-radius); background: transparent; color: #4f6058; font-size: 18px; font-weight: 500; text-align: left; }
.lms-tab .icon { width: 20px; height: 20px; }
.lms-tab:hover { background: rgb(255 255 255 / .7); color: var(--ink); }
.lms-tab[aria-selected="true"] { border-color: var(--line); background: #fff; color: var(--ink); box-shadow: 0 8px 20px -14px rgb(16 54 57 / .35); }
.lms-tab[aria-selected="true"] .icon { color: #20846a; }
.lms-tab:focus-visible { outline-offset: 2px; }

/* Brand and systems. */
.lms-connect { padding-top: 128px; scroll-margin-top: 6px; }
.lms-connect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 40px clamp(40px, 5vw, 80px); margin-top: 48px; }
.lms-connect-login img { box-shadow: 0 24px 50px -30px rgb(16 54 57 / .5); }
.lms-connect-list { display: grid; margin: 0; }
.lms-connect-list > div { padding: 20px 0; border-top: 1px solid rgb(18 44 43 / .12); }
.lms-connect-list > div:first-child { padding-top: 0; border-top: 0; }
.lms-connect-list > div:last-child { padding-bottom: 0; }
.lms-connect-list dt { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 19px; font-weight: 500; }
.lms-connect-list dt .icon { color: #20846a; }
.lms-connect-list dd { margin: 8px 0 0 32px; color: #3f5650; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.lms-connect-list code { padding: 1px 6px; border-radius: 6px; background: #eef2ea; color: var(--ink); font-size: .86em; }
.lms-connect-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.lms-connect-note { margin-top: 24px; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* For every learner, on any screen: the facts beside three phones. */
.lms-access { padding-top: 128px; scroll-margin-top: 6px; }
.lms-access-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 48px clamp(40px, 5vw, 88px); }
.lms-access-list { margin: 28px 0 0; padding: 0; list-style: none; }
.lms-access-list li { padding: 16px 0; border-top: 1px solid rgb(18 44 43 / .12); color: #3f5650; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.lms-access-list strong { color: var(--ink); font-weight: 500; }
.lms-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(12px, 2vw, 28px); overflow: hidden; padding: clamp(32px, 4.4vw, 64px) clamp(20px, 3.4vw, 48px); }
.lms-phones img { border: clamp(4px, .4vw, 6px) solid #13201f; border-radius: clamp(16px, 1.8vw, 26px); outline: 0; box-shadow: 0 26px 50px -24px rgb(16 54 57 / .55); }
.lms-phones img:nth-child(2) { margin-top: 48px; }

/* Questions and the closing. */
.questions.lms-questions { padding-top: 128px; }
.lms-questions .faq-list a { color: #08775d; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lms-questions .faq-list a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .lms-hero-screen .lms-hero-dark, .lms-step, .lms-stage-frame > .lms-field { transition: none; }
  .lms-stage-frame > .lms-field:not(.is-active) { transform: none; }
  .is-ready .lms-panel.is-active { animation: none; }
}

@media (max-width: 1000px) {
  .lms-hero-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "side"; align-items: start; }
  .lms-hero-side { max-width: 640px; padding-bottom: 0; }
  .lms-fellow-panel, .lms-connect-grid, .lms-access-grid { grid-template-columns: minmax(0, 1fr); }
  .lms-tile, .lms-tile--wide { grid-column: span 6; }
  .lms-tile--text { grid-column: 1 / -1; }
  .lms-admin-note { margin-top: 8px; }
  .lms-week, .lms-campus, .lms-admin, .lms-connect, .lms-access, .questions.lms-questions { padding-top: 104px; }
  .lms-fellow { margin-top: 104px; }
}
@media (max-width: 650px) {
  .lms-hero h1 { font-size: clamp(38px, 10.4vw, 48px); }
  .lms-hero-intro { font-size: 17px; }
  .lms-hero .hero-actions { flex-direction: column; align-items: stretch; max-width: none; margin-inline: 0; }
  .lms-hero-field { padding: 64px 14px 0; border-radius: 16px; }
  .lms-hero-screen { margin-bottom: -18%; }
  .lms-hero-screen img { border-radius: 8px; }
  .lms-hero-phone { right: 10px; bottom: -14px; width: 34%; }
  .lms-theme-toggle button { padding: 0 14px; font-size: 14px; }
  .lms-facts { padding-top: 32px; }
  .lms-facts .spec-grid > div:nth-child(4) { grid-column: auto; }
  .lms-facts .spec-grid > div:nth-child(5) { grid-column: 1 / -1; }
  .lms-week, .lms-campus, .lms-admin, .lms-connect, .lms-access, .questions.lms-questions { padding-top: 80px; }
  .lms-story, .lms-bento, .lms-tabs { margin-top: 32px; }
  .lms-steps, .lms-panels { gap: 48px; }
  .lms-step > p:not(.lms-step-num), .lms-panel > p { font-size: 17px; }
  .lms-field { padding: 12px; border-radius: 14px; }
  .lms-field img { border-radius: 7px; }
  .lms-tile-shot { padding-bottom: 0; }
  .lms-tile-shot img { border-radius: 7px 7px 0 0; }
  .lms-fellow { width: calc(100% - 24px); margin-top: 80px; }
  .lms-fellow-panel { gap: 36px; padding: 32px 22px; border-radius: 18px; }
  .lms-fellow-lead { font-size: 17px; }
  .lms-fellow-button { width: 100%; }
  .lms-bento { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lms-tile, .lms-tile--wide, .lms-tile--text { grid-column: auto; }
  .lms-connect-shots { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lms-connect-list dd { margin-left: 0; }
  .lms-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px 20px; }
  .lms-phones img:first-child { display: none; }
  .lms-phones img:nth-child(2) { margin-top: 0; }
  .lms-phones img:nth-child(3) { margin-top: 36px; }
}