/* ==========================================================================
   OEdu — the welcome page, before sign-in.

   What edu.oplocloud.com shows somebody who is not signed in. It wears
   oplocloud.com's own bar, chapter bar and footer — generated into index.html
   and oplo-chrome.css by tools/build.py, the same way every page on the site
   gets them — and between them takes its manners from Apple's education
   pages: a photograph that fills the window and draws in as you leave it,
   rounded cards on quiet grey, a black band for the three kinds of people
   OEdu is for, a rail to swipe.

   The whole page is the #gate overlay, so it scrolls inside itself and never
   touches the app behind it. Every class here is `ld-` prefixed so nothing
   here can reach the app's styles, and nothing there can reach these — except
   the sign-in form's .lx-form and .lx-field, which are the app's on purpose.
   ========================================================================== */

.ld {
  --ld-ink: #1d1d1f;
  --ld-ink-2: #6e6e73;
  --ld-ink-3: #86868b;
  --ld-soft: #f5f5f7;
  --ld-warm: #f7f6f4;
  --ld-blue: #0071e3;
  --ld-blue-2: #0077ed;
  --ld-link: #0066cc;
  --ld-accent: #e11d48;
  --ld-accent-dark: #ff5a74;
  --ld-wrap: 980px;
  --ld-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ld-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ld-ease: cubic-bezier(.2, .8, .2, 1);

  position: fixed; inset: 0; z-index: 90;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: var(--ld-ink);
  font-family: var(--ld-text); font-size: 17px; line-height: 1.47; letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
/* Blank until the server has said nobody is signed in, so a signed-in visitor
   is sent to their own address without a glimpse of this page first. */
.ld.ld-wait > * { visibility: hidden; }
.ld.ld-locked { overflow: hidden; }
.ld *, .ld *::before, .ld *::after { box-sizing: border-box; }
.ld h1, .ld h2, .ld h3, .ld h4, .ld p { margin: 0; }
.ld a { color: inherit; text-decoration: none; }
/* app.css already takes the browser's styling off every button. This adds
   only the letter-spacing, at no specificity, so each button's own class —
   the chapter bar's pill, the close button, the sign-in button — still decides
   how it looks. A `.ld button` reset here outranked all of them and painted
   them out. */
:where(.ld) :where(button) { letter-spacing: inherit; }
.ld svg { display: block; }
.ld :focus-visible { outline: 2px solid var(--ld-blue); outline-offset: 3px; border-radius: 6px; }
.ld-wrap { width: min(var(--ld-wrap), calc(100% - 44px)); margin: 0 auto; }
.ld-accent { color: var(--ld-accent); }
/* A section link scrolls its heading clear of the chapter bar (the only bar
   still there once the page has scrolled), not underneath it. */
.ld section[id] { scroll-margin-top: 72px; }

/* Room for the site's bar, which is fixed. The main site gives the body this
   padding, but here the page scrolls inside #gate, and padding on a scroll
   container is added to a sticky element's offset — the chapter bar would
   stick 44px below the bar instead of under it. A margin on the chapter bar
   leaves the same room and lets it stick where the site's does. */
.ld > .chapter { margin-top: 44px; }

/* ---------------------------------------------------------------- The bars
   The way Apple's education page does it:

     one bar stays   this page has a chapter bar, so the chapter bar is the
                     one pinned at the top and the site's bar scrolls away
                     above it, as on every page of the site that has two
                     (oplo-chrome.css).
     dark on dark    the top of the page is dark to meet the photograph: the
                     site's bar, the chapter bar and the ribbon are all dark
                     material, so the picture seems to begin under them.
     light after     once the photograph has gone by, the chapter bar turns to
                     light material (landing.js sets .ld-light).
     material        opaque enough that nothing behind it can be read, clear
                     enough that its colour and light still come through: a
                     tint at ~80%, blurred hard and saturated. */
/* This page scrolls inside #gate rather than the window, so the site's rule
   for a page with two bars cannot reach it: say it here. The chapter bar is
   the one pinned at the top; the bar above it scrolls away with the page. */
.ld .nav { position: absolute; }
/* What the bar opens is fixed to the window, so it follows the bar out. */
.ld :is(.nav-flyout, .nav-find) { top: calc(var(--nav) + var(--nav-y, 0px)); }
.ld :is(.nav-scrim, .nav-links) { inset: calc(var(--nav) + var(--nav-y, 0px)) 0 0 0; }

/* Black behind the bars at the top, so dark material over them reads as dark
   rather than grey; the page is white from the photograph down. */
.ld { background: linear-gradient(#000, #000) 0 0 / 100% 97px no-repeat local, #fff; }

/* The bar here always sits on the dark top of the page, so it and everything
   it opens — the menus, the search sheet — are dark, the way the site's are
   on a dark page. */
.ld .nav {
  --paper: #161617;
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #a1a1a6;
  --rule: rgba(255, 255, 255, .16);
  --blue: #2997ff;
}
.ld .nav::before { background-color: rgba(22, 22, 23, .72); }
.ld .chapter {
  --ink: #f5f5f7; --ink-2: #a1a1a6;
  background: rgba(22, 22, 23, .72); color: var(--ink);
  border-bottom-color: rgba(255, 255, 255, .1);
  transition: background-color .45s var(--ld-ease), border-color .45s var(--ld-ease), color .45s var(--ld-ease);
}
.ld .chapter-links a { transition: color .45s var(--ld-ease); }
.ld.ld-light .chapter {
  --ink: #1d1d1f; --ink-2: #6e6e73;
  background: rgba(250, 250, 252, .72);
  border-bottom-color: rgba(0, 0, 0, .12);
}

.ld-ribbon { padding: 16px 22px; background: #161617; color: rgba(255, 255, 255, .8); text-align: center; font-size: 14px; line-height: 1.43; }
.ld-ribbon .ld-inline { color: #2997ff !important; }
.ld-inline { color: var(--ld-link) !important; }
.ld-inline:hover { text-decoration: underline; }

/* ------------------------------------------------------------- Media slot */
.ld-media { position: relative; overflow: hidden; background: #e8e8ed; }
.ld-media > img, .ld-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-media.ld-bare { background: transparent; }
.ld-media.ld-bare > img, .ld-media.ld-bare > video { object-fit: contain; }
.ld-media.is-empty { display: grid; place-items: center; background: linear-gradient(140deg, #ededf1, #e2e2e7); }
.ld-media.is-empty::after {
  content: ""; position: absolute; inset: 10px; border-radius: inherit; pointer-events: none;
  border: 1.5px dashed rgba(0, 0, 0, .13);
}
.ld-dark.is-empty { background: radial-gradient(120% 90% at 50% 18%, #3a3a3f, #0f0f11); }
.ld-dark.is-empty::after { border-color: rgba(255, 255, 255, .14); }
.ld-slot { position: relative; z-index: 1; display: grid; justify-items: center; gap: 5px; padding: 18px; text-align: center; color: #8e8e93; }
.ld-slot svg { width: 30px; height: 30px; margin-bottom: 2px; opacity: .75; }
.ld-slot b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.ld-slot small { font-size: 11.5px; letter-spacing: 0; }
.ld-dark .ld-slot { color: rgba(255, 255, 255, .5); }

/* ------------------------------------------------------------------ Hero */
.ld-hero-frame {
  --p: 0;
  position: relative; height: min(88vh, 900px); min-height: 560px; overflow: hidden; background: #000;
  clip-path: inset(0 calc(var(--p) * 6%) 0 calc(var(--p) * 6%) round calc(var(--p) * 30px));
}
.ld-hero-frame > .ld-media { position: absolute; inset: 0; }
/* The hero photograph is nearly square and the frame is wide, so only a band
   of it shows. The band sits a little above centre: the whole cathedral tower
   and the laptop screens stay in, and the headline lands on the dark chairs
   below, where it reads best. Black behind it, so nothing pale flashes while
   it loads. */
.ld-hero-media { background: #000; }
.ld-hero-media > img { object-position: 50% 30%; }
.ld-hero-frame > .ld-media.is-empty { align-items: start; padding-top: 12vh; }
/* Shade at the top, where it meets the dark ribbon, deeper at the bottom
   under the headline, and a little at the edges, so the eye goes to the
   middle — Apple's hero does all three. */
.ld-hero-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .78)),
    radial-gradient(130% 100% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35));
}
.ld-hero-copy {
  position: absolute; z-index: 2; left: 50%; bottom: 7%; transform: translateX(-50%);
  width: min(660px, calc(100% - 44px)); text-align: center; color: #fff;
}
.ld-hero-mark { width: 36px; height: 36px; margin: 0 auto 14px; color: var(--ld-accent-dark); }
.ld-hero h1 {
  font-family: var(--ld-display); font-size: clamp(40px, 5.6vw, 64px); line-height: 1.06;
  font-weight: 600; letter-spacing: -.015em;
}
.ld-hero h1 .ld-accent { display: block; color: var(--ld-accent-dark); }
.ld-hero-copy p { max-width: 470px; margin: 18px auto 0; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.38; color: rgba(255, 255, 255, .92); }

/* ------------------------------------------------------------------ Film */
.ld-film { padding: 70px 0; }
.ld-film-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px;
  padding: 26px 26px 26px 64px; border-radius: 28px; background: var(--ld-soft);
}
.ld-film-copy h2 { max-width: 270px; font-family: var(--ld-display); font-size: clamp(24px, 2.4vw, 28px); line-height: 1.14; font-weight: 600; letter-spacing: .004em; }
.ld-play { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 17px; color: var(--ld-link) !important; }
.ld-play svg { width: 18px; height: 18px; }
.ld-play:hover { text-decoration: underline; }
.ld-play[aria-disabled="true"] { color: var(--ld-ink-3) !important; cursor: default; text-decoration: none; }
.ld-film-card .ld-media { aspect-ratio: 16 / 9; border-radius: 14px; }

/* ----------------------------------------------------------------- Bands */
.ld-band { padding: 100px 0; }
.ld-soft { background: var(--ld-warm); }
.ld-white { background: #fff; }
.ld-black { background: #000; color: #f5f5f7; }
.ld-black .ld-accent { color: var(--ld-accent-dark); }
.ld-head { max-width: 660px; margin: 0 auto 56px; text-align: center; }
.ld-head h2 { font-family: var(--ld-display); font-size: clamp(34px, 4.6vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -.005em; }
.ld-head h2 .ld-accent { display: block; }
.ld-head p { max-width: 560px; margin: 18px auto 0; font-size: 19px; line-height: 1.42; }
.ld-h2 { font-family: var(--ld-display); font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: 0; }

.ld-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ld-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: #fff; }
.ld-card .ld-media { aspect-ratio: 7 / 5; }
.ld-card-copy { padding: 34px 40px 46px; }
.ld-card h3 { font-family: var(--ld-display); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.125; font-weight: 600; letter-spacing: .004em; }
.ld-card p { max-width: 420px; margin-top: 18px; font-size: 17px; line-height: 1.47; }

.ld-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.ld-tile {
  position: relative; display: block; aspect-ratio: 1 / .95; overflow: hidden; border-radius: 22px;
  background: #1d1d1f; color: #fff !important; text-align: left; transform: translateZ(0);
}
.ld-tile .ld-media, .ld-wide .ld-media { position: absolute; inset: 0; }
.ld-tile .ld-media.is-empty, .ld-wide .ld-media.is-empty { background: linear-gradient(160deg, #2c2c2e, #151516); }
.ld-tile .ld-media.is-empty::after, .ld-wide .ld-media.is-empty::after { border-color: rgba(255, 255, 255, .12); }
.ld-tile .ld-slot, .ld-wide .ld-slot { color: rgba(255, 255, 255, .42); }
.ld-tile::before, .ld-wide::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 42%);
}
.ld-tile-copy, .ld-wide-copy { position: absolute; z-index: 2; left: 22px; right: 22px; top: 22px; display: grid; gap: 6px; color: #fff; }
.ld-tile-copy .k, .ld-wide-copy .k { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.ld-tile-copy .t, .ld-wide-copy .t { font-family: var(--ld-display); font-size: clamp(19px, 1.9vw, 21px); line-height: 1.19; font-weight: 600; letter-spacing: .01em; }
.ld-arrow {
  position: absolute; z-index: 2; right: 16px; bottom: 16px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: #1d1d1f;
  transition: transform .35s var(--ld-ease);
}
.ld-tile:hover .ld-arrow { transform: scale(1.08); }

.ld-head-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.ld-more { font-size: 17px; color: var(--ld-link) !important; }
.ld-more:hover { text-decoration: underline; }
.ld-rail {
  --edge: max(22px, calc((100% - var(--ld-wrap)) / 2));
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 40px var(--edge) 10px; scroll-padding: 0 var(--edge); scrollbar-width: none; outline: none;
}
.ld-rail::-webkit-scrollbar { display: none; }
.ld-wide {
  position: relative; flex: 0 0 min(560px, 82vw); aspect-ratio: 16 / 10.4; overflow: hidden;
  border-radius: 22px; background: #1d1d1f; scroll-snap-align: start;
}
.ld-rail-ctl { display: flex; justify-content: flex-end; gap: 14px; margin-top: 20px; }
.ld-rail-ctl button {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(210, 210, 215, .64); color: rgba(0, 0, 0, .56); transition: background .2s, opacity .2s;
}
.ld-rail-ctl button:hover:not(:disabled) { background: rgba(223, 223, 227, .9); }
.ld-rail-ctl button:disabled { opacity: .38; cursor: default; }

.ld-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 48px; }
.ld-split-copy p { max-width: 380px; margin-top: 14px; font-size: 19px; line-height: 1.42; }
.ld-btn {
  display: inline-block; margin-top: 26px; padding: 11px 22px; border-radius: 999px; font-size: 17px;
  background: var(--ld-blue); color: #fff !important; transition: background .2s;
}
.ld-btn:hover { background: var(--ld-blue-2); }
.ld-split .ld-media { aspect-ratio: 4 / 3; border-radius: 22px; }
.ld-split .ld-media.ld-bare.is-empty { background: linear-gradient(140deg, #f2f2f5, #e8e8ed); }

.ld-value { display: flex; flex-direction: column; min-height: 290px; padding: 32px 30px 40px; border-radius: 22px; background: #fff; }
.ld-value svg { width: 30px; height: 30px; margin-bottom: 16px; color: var(--ld-ink); }
.ld-value h3 { font-family: var(--ld-display); font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: .009em; }
.ld-value p { margin-top: 12px; font-size: 17px; line-height: 1.47; }
.ld-value a { margin-top: 12px; color: var(--ld-link); }
.ld-value a:hover { text-decoration: underline; }

/* ----------------------------------------------------- Sign in, and film
   Above the site's bar, which sits at z-index 9000. */
.ld-modal, .ld-lightbox { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 22px; }
.ld-scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  animation: ld-fade .25s ease;
}
.ld-sheet {
  position: relative; width: min(420px, 100%); max-height: calc(100vh - 44px); overflow-y: auto;
  padding: 42px 36px 30px; border-radius: 22px; background: #fff; text-align: center;
  box-shadow: 0 30px 90px -24px rgba(0, 0, 0, .5); animation: ld-rise .38s var(--ld-ease);
}
.ld-sheet .lx-mark { width: 38px; height: 38px; margin: 0 auto 20px; color: var(--ld-ink); }
.ld-sheet h2 { font-family: var(--ld-display); font-size: 28px; font-weight: 600; letter-spacing: -.015em; }
.ld-sheet .sub { margin-top: 10px; font-size: 15px; line-height: 1.47; color: var(--ld-ink-2); }
.ld-sheet .lx-form { margin-top: 24px; }
.ld-sheet .lx-btn { width: 100%; margin-top: 6px; }
.ld-sheet .ld-go { margin-top: 26px; }
.ld-sheet .err { min-height: 1.3em; margin-top: 12px; font-size: 13.5px; color: #d70015; }
.ld-sheet .err code { font-size: 12px; }
.ld-sheet .fine { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e6e6e8; font-size: 12px; line-height: 1.5; color: var(--ld-ink-3); }
.ld-x {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: #e8e8ed; color: #6e6e73;
}
.ld-x:hover { background: #dcdce1; }
.ld-film-player { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000; animation: ld-rise .38s var(--ld-ease); }
.ld-film-player video { width: 100%; height: 100%; display: block; }
.ld-film-player .ld-x { background: rgba(255, 255, 255, .22); color: #fff; }
@keyframes ld-fade { from { opacity: 0; } }
@keyframes ld-rise { from { transform: translateY(18px) scale(.98); opacity: 0; } }

/* Rising into place as it scrolls into view. Only when the page is visible
   and motion is welcome — landing.js adds .ld-anim — so a page opened in a
   background tab or printed is never left invisible. */
.ld-anim .ld-reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ld-ease), transform .9s var(--ld-ease); }
.ld-anim .ld-reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------- Narrower */
@media (max-width: 1068px) {
  .ld-film-card { padding-left: 44px; }
  .ld-card-copy { padding: 30px 32px 40px; }
}
@media (max-width: 834px) {
  .ld-grid2, .ld-split { grid-template-columns: minmax(0, 1fr); }
  .ld-split .ld-media { order: -1; }
  .ld-values { grid-template-columns: minmax(0, 1fr); }
  .ld-value { min-height: 0; }
  .ld section[id] { scroll-margin-top: 68px; }
}

/* ----------------------------------------------------------------- Phone
   Chosen for a thumb rather than shrunk: the site's bar and chapter bar do
   what they do on every oplocloud.com page, the black band and the rail
   become rows to swipe, the rail's cards turn portrait, and sign-in rises
   from the bottom edge. */
@media (max-width: 734px) {
  .ld { font-size: 16px; }

  .ld-ribbon { padding: 12px 18px; font-size: 12px; }
  .ld-hero-frame { height: 78vh; min-height: 520px; clip-path: none; }
  .ld-hero-frame > .ld-media.is-empty { padding-top: 10vh; }
  .ld-hero h1 { font-size: 38px; }
  .ld-hero-copy { bottom: 6%; }
  .ld-hero-copy p { font-size: 16px; }

  .ld-film { padding: 36px 0; }
  .ld-film-card { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px 18px 18px; border-radius: 24px; text-align: center; }
  .ld-film-copy h2 { max-width: none; font-size: 24px; }

  .ld-band { padding: 64px 0; }
  .ld-head { margin-bottom: 30px; }
  .ld-head h2 { font-size: 36px; }
  .ld-head p { font-size: 17px; }
  .ld-card { border-radius: 24px; }
  .ld-card-copy { padding: 24px 24px 30px; }
  .ld-card h3 { font-size: 26px; }
  .ld-card h3 br, .ld-value h3 br, .ld-tile-copy br { display: none; }
  .ld-h2 { font-size: 30px; }

  .ld-tiles {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 28px -22px 0; padding: 0 22px 4px; scroll-padding: 0 22px; scrollbar-width: none;
  }
  .ld-tiles::-webkit-scrollbar { display: none; }
  .ld-tiles > .ld-tile { flex: 0 0 78%; aspect-ratio: 4 / 5; scroll-snap-align: start; }

  .ld-rail { gap: 10px; padding-top: 24px; }
  .ld-wide { flex-basis: 82vw; aspect-ratio: 4 / 5; }
  .ld-rail-ctl { display: none; }

  .ld-split { gap: 28px; }
  .ld-split .ld-media { aspect-ratio: 1; }
  .ld-values { gap: 10px; margin-top: 28px; }
  .ld-value { padding: 26px 24px 30px; }

  .ld-modal { align-items: end; padding: 0; }
  .ld-sheet {
    width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0;
    padding: 36px 22px calc(24px + env(safe-area-inset-bottom));
  }
  .ld-lightbox { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ld *, .ld *::before, .ld *::after { animation: none !important; transition: none !important; }
  .ld-hero-frame { clip-path: none; }
}