/* =========================================================================
   Landing page, rebuilt 16 Oct 2026 (views/landing-v3.php), second pass the
   same day: "make the hero design a lot better with animations, glows,
   shadows, backgrounds" and "use transparent glass liquid clear panels apple
   like like in the last cta for where panels are used".

   Loaded after landing.css and landing-bold.css, which keep the pieces this
   page reuses as they are: the phone film, the conversation, the chart and
   its lookup, the report frame, the FAQ rows, the closing card. What is here
   is the composition around them. The page before it is views/landing.php,
   still drawn at ?versi=lama or when the admin panel says so.

   Built against tasteskill v2 (design-taste-frontend).
   Dials: DESIGN_VARIANCE 8, MOTION_INTENSITY 8, VISUAL_DENSITY 4.

   - The hero is a night scene in both themes (.lp3-night): its own tokens,
     a campus photograph, glass that is dark.
   - Every other panel is the closing card's glass (.lp3-glass: --glass-panel,
     one --glass-edge hairline, --glass-blur, --glass-lift), never a bevel,
     never a sheen.
   - One glow on the page: a faint light behind the phone, keeping it apart
     from the photograph. Nothing else glows, not the type, not the buttons,
     not the dots ("too much glow is ugly", 17 Oct 2026). Shadows are plain
     shadows in the page's own dark.
   - Movement is transform and opacity only; nothing loops for reduced
     motion, and the slow phone tier (html.pk-lite) gets no blur and no drift.
   ========================================================================= */

/* landing.css hides the page's overflow, which also stops anything inside
   it from sticking; the report below is held in view with position: sticky.
   Clipping sideways only keeps the bleeding layers from widening the page. */
main.lp3 { overflow: visible; overflow-x: clip; }

/* One rhythm between blocks: every block is padded by --sec above and below,
   so the space between the last thing in one and the first in the next is
   the same all the way down. A block on a photograph adds the photograph's
   fade on top of it. */
.lp3 {
  --glow-1: rgba(37, 99, 235, .30);
  --sec: clamp(3rem, 5.6vw, 5rem);
}
:root[data-theme="light"] .lp3 {
  --glow-1: rgba(37, 99, 235, .16);
}

/* Every grid on the page starts as one column that may shrink below its
   content: an implicit auto track sizes itself to the widest thing in it,
   and the sample report made the tour's column wider than a phone. */
.lp3-stakes-grid,
.lp3-check-head,
.lp3-tour-grid,
.lp3-bento,
.lp3-faq-grid { grid-template-columns: minmax(0, 1fr); }

/* ---- Type ---------------------------------------------------------------- */
.lp3-h2 {
  margin: 0 0 1rem;
  max-width: 18ch;
  font-size: clamp(1.9rem, 3.5vw, 3.15rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
}
/* The statement the page is argued from, a size up. Capped where "Pilihanmu
   cuma dua." still sets on one line. */
.lp3-h2--xl { max-width: 15ch; font-size: clamp(2.2rem, 3.9vw, 3.6rem); margin-bottom: 1.25rem; }

.lp3-h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

/* ---- Glass ------------------------------------------------------------------
   The closing card's material, for every panel. */
.lp3-glass {
  position: relative;
  border-radius: var(--b-r);
  background-color: var(--glass-panel);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift), 0 30px 80px -40px rgba(var(--shadow-rgb), .55);
}
.pk-lite .lp3-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ==== The question ==========================================================
   A night scene in both themes, with its own tokens: the dark theme's ink and
   accent, and a dark glass. */
.lp3-night {
  --ink: #f5f0ea;
  --ink-2: #d9d2ca;
  --muted: #b9b2aa;
  --accent-ink: #8db0ff;
  --accent-ink-2: #b6ccff;
  --accent-line: #34508f;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .2);
  --glass-clear: rgba(255, 255, 255, .07);
  --glass-clear-hover: rgba(255, 255, 255, .12);
  --glass-line: rgba(255, 255, 255, .18);
  --night-glass: rgba(22, 19, 17, .54);
  --night-edge: rgba(255, 255, 255, .15);
  color: var(--ink);
  background-color: #0e0c0a;
}
@media (prefers-reduced-transparency: reduce) {
  .lp3-night { --night-glass: rgba(22, 19, 17, .74); }
}
/* The phone's screen is the product, in the page's own theme, so it takes
   back the colours the night overrides: each is kept on .lp3 as --page-*
   (resolved there, before the night sets its own) and handed back here.
   Without it the film drew the night's light ink on a light screen. */
.lp3 {
  --page-ink: var(--ink);
  --page-ink-2: var(--ink-2);
  --page-muted: var(--muted);
  --page-accent-ink: var(--accent-ink);
  --page-accent-ink-2: var(--accent-ink-2);
  --page-accent-line: var(--accent-line);
  --page-line: var(--line);
  --page-line-strong: var(--line-strong);
  --page-glass-clear: var(--glass-clear);
  --page-glass-clear-hover: var(--glass-clear-hover);
  --page-glass-line: var(--glass-line);
}
.lp3-night .lp-phone-screen {
  --ink: var(--page-ink);
  --ink-2: var(--page-ink-2);
  --muted: var(--page-muted);
  --accent-ink: var(--page-accent-ink);
  --accent-ink-2: var(--page-accent-ink-2);
  --accent-line: var(--page-accent-line);
  --line: var(--page-line);
  --line-strong: var(--page-line-strong);
  --glass-clear: var(--page-glass-clear);
  --glass-clear-hover: var(--page-glass-clear-hover);
  --glass-line: var(--page-glass-line);
  color: var(--ink);
}

.lp3-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-top: clamp(2.25rem, 6vw, 3.5rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
/* From 992px the bar floats over the top 71px of the page (landing-bold.css
   pulls main.lpb up under it), so the hero gives the 71px back. */
@media (min-width: 992px) {
  .lp3-hero { padding-top: calc(71px + clamp(2.5rem, 4.5vw, 4rem)); }
}

/* The ground: photograph and shade. */
.lp3-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; overflow: clip; pointer-events: none; }
.lp3-hero-photo { position: absolute; inset: 0; }
.lp3-hero-photo .lp-campus-shot { background-position: center 42%; transform-origin: 50% 40%; }
/* The shade: hardest where the type is (the top third, and a pool under the
   headline), lightest across the middle where the phone and the cards stand
   in front of the campus, and into the page's own ground at the foot. */
.lp3-hero-shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 44% 46% at 50% 30%, rgba(12, 10, 8, .74) 0%, rgba(12, 10, 8, .5) 45%, rgba(12, 10, 8, 0) 78%),
    linear-gradient(180deg,
      rgba(12, 10, 8, .72) 0%,
      rgba(12, 10, 8, .56) 46%,
      rgba(12, 10, 8, .36) 60%,
      rgba(12, 10, 8, .46) 80%,
      var(--bg) 100%);
}
/* A phone has the type across its whole width, so the shade is even there. */
@media (max-width: 767px) {
  .lp3-hero-shade {
    background: linear-gradient(180deg,
      rgba(12, 10, 8, .8) 0%,
      rgba(12, 10, 8, .74) 44%,
      rgba(12, 10, 8, .4) 58%,
      rgba(12, 10, 8, .46) 80%,
      var(--bg) 100%);
  }
}
/* The words: centred, the one statement on the page that is. */
.lp3-hero-in { position: relative; }
.lp3-hero-say { position: relative; z-index: 3; max-width: 58rem; margin-inline: auto; text-align: center; }
.lp3-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--accent-ink-2);
}
.lp3-h1 {
  margin: 0 0 1.4rem;
  font-size: clamp(2.9rem, 7vw, 6.6rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1.0;
  color: var(--ink);
  text-shadow: 0 4px 40px rgba(0, 0, 0, .35);
}
.lp3-h1 em {
  font-style: normal;
  color: var(--accent-ink-2);
}
/* Each line rises into place out of a blur. */
.lp3-line { display: block; }
.lp3-line > span { display: inline-block; }
.lp3-sub {
  margin: 0 auto 2.25rem;
  max-width: 34rem;
  font-size: clamp(1.08rem, 1.45vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: balance;
}
.lp3-cta { justify-content: center; }
.lp3-cta-note { margin-top: 1.1rem; color: var(--ink); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }

/* The main button lifts a little on hover; the second one is the night glass. */
.lp3-hero .btn-primary {
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7);
}
.lp3-hero .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .75);
}
.lp3-hero .btn-ghost {
  color: var(--ink);
  background-color: var(--glass-clear);
  border-color: var(--glass-line);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}
.lp3-hero .btn-ghost:hover { background-color: var(--glass-clear-hover); color: var(--ink); border-color: var(--line-strong); }

/* One obvious action on a phone, as on the page before: the quiz is a link
   under the button, not a second button the same size. */
@media (max-width: 575px) {
  .lp3-hero .lpb-cta { gap: 0.9rem; }
  .lp3-hero .lpb-cta .btn-ghost,
  .lp3-hero .lpb-cta .btn-ghost:hover,
  .lp3-hero .lpb-cta .btn-ghost:active {
    width: auto; padding: 0.15rem 0; min-height: 0;
    border: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    font-size: 1rem; font-weight: 700; color: var(--accent-ink-2);
    text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 4px;
  }
}

/* The stage: the phone in the middle, a halo behind it, the cards around it.
   The phone is in the flow, so the film measures itself as it always has;
   what moves is its wrapper (--hs, the hero's scroll, from landing-v3.js). */
.lp3-stage {
  position: relative;
  max-width: 1180px;
  margin: clamp(2.75rem, 5.5vw, 4.5rem) auto 0;
  display: grid; justify-items: center;
}
/* The phone is an object in the room. It arrives leaning back and rising,
   leans a little further back at rest and comes upright as the page scrolls,
   and turns towards the pointer (--px, --py); its shadow on the floor moves
   the other way. On a screen with no pointer it sways slowly instead. */
.lp3-stage { perspective: 1600px; perspective-origin: 50% 10%; }
.lp3-phone-wrap {
  position: relative; z-index: 2;
  width: 100%; max-width: 300px;
  perspective: 1200px;
  transform:
    translate3d(0, calc(var(--hs, 0) * -36px), 0)
    rotateX(calc(max(0, 1 - var(--hs, 0) * 1.8) * 8deg - var(--py, 0) * 0.45deg))
    rotateY(calc(var(--px, 0) * 0.6deg))
    scale(calc(1 + var(--hs, 0) * 0.05));
  transform-origin: 50% 80%;
}
.lp3-floor {
  position: absolute; z-index: 1;
  left: 50%; bottom: -2.25rem;
  width: 280px; height: 46px; margin-left: -140px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
  transform: translate3d(calc(var(--px, 0) * -1.6px), 0, 0) scaleX(calc(1 - var(--hs, 0) * 0.25));
  pointer-events: none;
}
/* landing-bold.css sets the handset margin: 0, which put it on the left of
   this holder wherever the handset is narrower than the holder (on a phone
   it is 242px in 300px, so it sat 30px left of centre). */
.lp3-phone-wrap .lp-phone { margin-inline: auto; }
.lp3-phone-wrap .lp-phone {
  box-shadow:
    0 60px 90px -40px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(255, 255, 255, .1);
}
.lp3-halo {
  position: absolute; z-index: 1;
  left: 50%; top: -6%;
  width: min(880px, 120vw); aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 130, 246, .26), rgba(37, 99, 235, .08) 50%, rgba(37, 99, 235, 0) 72%);
  mix-blend-mode: screen;
}

/* The floating cards: dark glass, one hairline edge, a deep soft shadow.
   Three wrappers' worth of movement on two elements: the outer one leans
   with the pointer and spreads with the scroll (transform, from custom
   properties), the inner one arrives (scale, opacity) and then floats
   (translate). */
.lp3-float {
  position: absolute; z-index: 3;
  transform: translate3d(
    calc(var(--px, 0) * var(--d, 1) * 1px + var(--hs, 0) * var(--sx, 0) * 1px),
    calc(var(--py, 0) * var(--d, 1) * 1px + var(--hs, 0) * var(--sy, 0) * 1px),
    0);
}
.lp3-float-in {
  display: grid; gap: 0.35rem;
  width: 17.5rem;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: 20px;
  background-color: var(--night-glass);
  border: 1px solid var(--night-edge);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
  backdrop-filter: saturate(170%) blur(18px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  color: var(--ink);
  text-align: left;
}
.lp3-float-k {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--ink-2);
}
.lp3-float-k img { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .92); padding: 2px; }
.lp3-float-k i { font-size: 1.05rem; color: var(--accent-ink-2); }
.lp3-float-v { font-size: 1.12rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.lp3-float-v--big { display: flex; align-items: center; gap: 0.45rem; font-size: 2rem; letter-spacing: -0.04em; line-height: 1.05; }
.lp3-float-v--big i { font-size: 1.3rem; color: var(--muted); }
.lp3-float-v--big em { font-style: normal; color: var(--accent-ink-2); }
.lp3-float-s { font-size: 0.86rem; line-height: 1.45; color: var(--ink-2); }
.lp3-float-picks { list-style: none; margin: 0.15rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.lp3-float-picks li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.lp3-float-picks span { display: grid; font-size: 0.95rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.lp3-float-picks small { font-size: 0.78rem; font-weight: 500; color: var(--muted); }
.lp3-float-picks b { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp3-float-in--chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  width: auto; padding: 0.6rem 1rem;
  border-radius: 999px;
  font-size: 0.88rem; font-weight: 700; white-space: nowrap;
}
.lp3-float-in--chip i { font-size: 1.1rem; color: var(--accent-ink-2); }

.lp3-float--a { left: 3%; top: 10%; }
.lp3-float--b { left: 7%; top: 54%; }
.lp3-float--c { right: 2%; top: 24%; }
.lp3-float--d { right: 9%; top: 70%; }
@media (min-width: 768px) and (max-width: 1099px) {
  .lp3-float-in { width: 14.5rem; }
  .lp3-float--a { left: 0; }
  .lp3-float--b { left: 0; }
  .lp3-float--c { right: 0; }
  .lp3-float--d { right: 0; }
  .lp3-float-v--big { font-size: 1.6rem; }
}
/* On a phone the handset takes the width; the cards would only cover it. */
@media (max-width: 767px) {
  .lp3-float { display: none; }
}

/* Where the photograph is from, named while it is on screen. */
.lp3-hero-where {
  position: absolute; z-index: 3;
  right: max(1.25rem, calc((100vw - var(--b-wrap)) / 2 + 1.25rem));
  top: calc(71px + 1.25rem);
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0; padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background-color: var(--night-glass);
  border: 1px solid var(--night-edge);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.8rem; font-weight: 700; color: var(--ink-2);
  transition: opacity .5s ease;
}
.lp3-hero-where.is-swapping { opacity: 0; }
.lp3-hero-where i { color: var(--accent-ink-2); }
@media (max-width: 991px) { .lp3-hero-where { display: none; } }

/* The hero's movement. Every piece ends where the page without it would
   be, so a reader who asked for less motion simply gets that page. */
@media (prefers-reduced-motion: no-preference) {
  .lp3-line > span { animation: lp3LineUp 1.05s cubic-bezier(.16, 1, .3, 1) both; }
  .lp3-line + .lp3-line > span { animation-delay: .1s; }
  .lp3-kicker, .lp3-sub, .lp3-cta, .lp3-cta-note { animation: lp3FadeUp .9s cubic-bezier(.16, 1, .3, 1) both; }
  .lp3-kicker { animation-delay: .05s; }
  .lp3-sub { animation-delay: .3s; }
  .lp3-cta { animation-delay: .42s; }
  .lp3-cta-note { animation-delay: .52s; }
  .lp3-phone-wrap .lp-phone { animation: lp3Rise 1.5s cubic-bezier(.16, 1, .3, 1) .3s both; }
  .lp3-floor { animation: lp3FadeUp 1.5s ease .6s both; }
  .lp3-float-in {
    animation: lp3Pop .9s cubic-bezier(.2, .9, .3, 1.15) both, lp3Bob 7s ease-in-out infinite alternate;
    animation-delay: var(--in, .7s), calc(var(--in, .7s) + 1s);
  }
  .lp3-float--b .lp3-float-in { animation-duration: .9s, 8.5s; }
  .lp3-float--c .lp3-float-in { animation-duration: .9s, 6.4s; }
  .lp3-float--d .lp3-float-in { animation-duration: .9s, 9s; }
  html:not(.pk-lite) .lp3-hero-photo .lp-campus-shot { animation: lp3Burns 26s ease-in-out infinite alternate; }
}
@keyframes lp3LineUp { from { opacity: 0; transform: translateY(38%); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lp3FadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lp3Rise { from { opacity: 0; translate: 0 130px; rotate: x 26deg; scale: .93; } to { opacity: 1; translate: 0 0; rotate: x 0deg; scale: 1; } }
@keyframes lp3Sway { from { rotate: y -5deg; } to { rotate: y 5deg; } }
@keyframes lp3Pop { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }
@keyframes lp3Bob { from { translate: 0 0; } to { translate: 0 -14px; } }
@keyframes lp3Burns { from { transform: scale(1.03); } to { transform: scale(1.14); } }

/* Glass is costly on a slow phone and needless where nothing moves behind. */
.pk-lite .lp3-float-in,
.pk-lite .lp3-hero-where,
.pk-lite .lp3-hero .btn-ghost { -webkit-backdrop-filter: none; backdrop-filter: none; }
.pk-lite .lp3-night { --night-glass: rgba(22, 19, 17, .9); }

/* ==== The campuses, moving past ============================================== */
/* The track keeps 2.5rem under the cards for their shadows; the block takes it back. */
.lp3-rail { position: relative; padding-block: clamp(2rem, 4vw, 3rem) calc(var(--sec) - 1rem); }
.lp3-rail-cap { margin: 0 0 1.75rem; text-align: center; font-size: 0.98rem; font-weight: 600; color: var(--muted); }
/* A row to swipe: native scrolling (a finger's momentum, a trackpad, shift
   and the wheel), no visible scrollbar, and a swipe past either end does not
   turn into the browser's back gesture. landing-v3.js drifts it along and
   lets a mouse drag it. */
.lp3-rail-view {
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 7%, black 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 7%, black 93%, transparent 100%);
}
.lp3-rail-view::-webkit-scrollbar { display: none; }
.lp3-rail-view.is-grabbing { cursor: grabbing; }
.lp3-rail-view.is-grabbing .lp3-rail-link { cursor: grabbing; }
.lp3-rail-track { display: flex; gap: 1.1rem; width: max-content; padding: 0.5rem 1.25rem 2.5rem; }
.lp3-rail-row { display: flex; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.lp3-rail-card {
  position: relative; flex: none;
  width: clamp(240px, 25vw, 380px); aspect-ratio: 3 / 2;
  border-radius: var(--b-r);
  overflow: hidden; overflow: clip;
  background: var(--surface-2);
  box-shadow: 0 30px 60px -34px rgba(var(--shadow-rgb), .75);
}
.lp3-rail-photo { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
.lp3-rail-card:hover .lp3-rail-photo { transform: scale(1.06); }
/* The label is glass on the photograph, dark in both themes like the hero's. */
.lp3-rail-tag {
  position: absolute; left: 0.75rem; bottom: 0.75rem; right: auto;
  display: inline-flex; align-items: center; gap: 0.5rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
  border-radius: 999px;
  background-color: rgba(18, 16, 14, .68);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  font-size: 0.84rem; font-weight: 700; line-height: 1.2;
  color: rgba(255, 255, 255, .96);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp3-rail-tag img { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .94); padding: 2px; }
.pk-lite .lp3-rail-tag { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(18, 16, 14, .8); }
/* Without the drift (reduced motion, or no script) the copy row has no use:
   one row to swipe through. */
@media (prefers-reduced-motion: reduce) {
  .lp3-rail-view { -webkit-mask-image: none; mask-image: none; }
}
.lp3-rail:not(.is-looping) .lp3-rail-row[aria-hidden="true"] { display: none; }

/* ==== What is at stake ======================================================== */
.lp3-stakes { padding-block: var(--sec); }
.lp3-stakes-grid { display: grid; gap: 2.5rem; }
@media (min-width: 992px) {
  .lp3-stakes-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; align-items: center; }
}
.lp3-stakes-head .lpb-lede { max-width: 34ch; }
.lp3-chatbox { padding: clamp(1.25rem, 2.6vw, 2rem); }
.lp3 .lp3-chat { width: 100%; }
@media (min-width: 992px) { .lp3-chatbox { justify-self: end; width: 100%; max-width: 38rem; } }

/* ==== Look your own prodi up ================================================== */
.lp3-check { padding-block: var(--sec); }
.lp3-check-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 992px) {
  .lp3-check-head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: end; }
}
.lp3-check-head .lp3-h2 { margin: 0; }
.lp3 .lp3-spot { max-width: none; margin: 0; }
.lp3 .lp3-spot .form-control {
  min-height: 3.6rem;
  padding-left: 3.1rem;
  border-radius: 999px;
  font-size: 1.08rem;
  background-color: var(--glass-panel);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift);
}
.lp3 .lp3-spot .lpb-search i { left: 1.25rem; }
.lp3 .lp3-spot .lpb-spot-out { margin-top: 1rem; }
.lp3-chartbox { padding: clamp(1.25rem, 3vw, 2.5rem); }
.lp3 .lp3-spread { margin: 0; }

/* ==== What you get ============================================================
   From 992px: the board of what the sample found on the left, the report on
   the right. Below that: the board is a row to swipe above the report, and
   the button comes after it. */
.lp3-tour { padding-block: var(--sec); }
.lp3 .lp3-tour .lp-report-frame { width: 100%; max-width: 420px; margin: 0 auto; }
/* The lift goes on the card itself (.rs-stage, round corners), not on .rs:
   that is a square box 10px wider than the card, so its shadow showed as
   straight, hard edges round the rounded card (17 Oct 2026). The hairline
   ring is report.css's own. */
.lp3 .lp3-tour .lp-report-frame .rs.is-story .rs-stage { box-shadow: 0 0 0 1px var(--line), 0 50px 90px -40px rgba(var(--shadow-rgb), .75); }

/* ---- The board (17 Oct 2026): one tile per chapter, its figure ----------
   Lifted by a soft shadow like the landing's other panels, never a border.
   The answer and the pengaman sit on the report's cobalt, as their cards do.
   The tile whose chapter is on the card is lit: a tint across the whole tile,
   which fills from the left while the card moves on by itself (landing-v3.js
   ends each turn on this animation's end), and stands full once a person has
   taken over. */
.lp3-board {
  --dwell: 5.5s;
  list-style: none;
  margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
}
.lp3-res { min-width: 0; }
.lp3-res[hidden] { display: none; }
.lp3-res--wide { grid-column: 1 / -1; }
.lp3-res-btn {
  --res-k: var(--muted); --res-v: var(--ink); --res-s: var(--ink-2); --res-lit: color-mix(in srgb, var(--primary) 11%, transparent);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  width: 100%; height: 100%;
  padding: 1rem 1.15rem 1.1rem;
  border: 0; border-radius: var(--b-r);
  background: var(--surface);
  box-shadow: 0 22px 44px -30px rgba(var(--shadow-rgb), .6);
  color: var(--res-v);
  font: inherit; text-align: left;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}
.lp3-res--lead .lp3-res-btn,
.lp3-res--wide .lp3-res-btn {
  --res-k: rgba(255, 255, 255, .78); --res-v: white; --res-s: rgba(255, 255, 255, .9); --res-lit: rgba(255, 255, 255, .09);
  background: var(--primary-dark);
}
.lp3-res-btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--res-lit);
  transform: scaleX(0); transform-origin: left center;
  pointer-events: none;
}
.lp3-res-btn[aria-pressed="true"]::after { transform: none; }
.lp3-res-btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 3px; }

.lp3-res-k {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.82rem; font-weight: 700; color: var(--res-k);
}
.lp3-res-k .ph { font-size: 1rem; }
.lp3-res-crest { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .96); padding: 2px; object-fit: contain; }
.lp3-res-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.3rem; line-height: 1; }
.lp3-res-v b { font-size: clamp(2.2rem, 3.2vw, 2.75rem); font-weight: 800; letter-spacing: -0.045em; color: var(--res-v); }
.lp3-res-v small { font-size: 1rem; font-weight: 700; color: var(--res-s); }
.lp3-res-v sup { position: relative; top: -0.88em; margin-left: 0.05em; vertical-align: baseline; font-size: 0.46em; letter-spacing: 0; }
.lp3-res-tier {
  align-self: center; margin-left: 0.35rem;
  padding: 0.22rem 0.6rem; border-radius: 999px;
  background: var(--nav-lit);
  font-size: 0.72rem; font-style: normal; font-weight: 700; color: var(--ink-2);
}
.lp3-res-v--jump { gap: 0 0.5rem; }
.lp3-res-from { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; color: var(--res-s); }
.lp3-res-v--jump .ph { align-self: center; font-size: 1.2rem; color: var(--res-s); }
.lp3-res-s { font-size: 0.9rem; line-height: 1.45; color: var(--res-s); }
.lp3-res-s strong { font-weight: 700; color: var(--res-v); }
.lp3-res-c { display: block; margin-top: 0.15rem; color: var(--res-k); }

@media (prefers-reduced-motion: no-preference) {
  .lp3-res-btn:hover { transform: translateY(-2px); box-shadow: 0 28px 52px -30px rgba(var(--shadow-rgb), .7); }
  .lp3-board.is-auto .lp3-res-btn[aria-pressed="true"]::after { animation: lp3ResFill var(--dwell) linear both; }
  .lp3-board.is-auto.is-off .lp3-res-btn::after { animation-play-state: paused; }
}
/* A pointer resting on the tiles or on the card is somebody reading them:
   the turn waits. Anywhere else in the section (it is the width of the
   screen) it carries on. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lp3-board.is-auto:hover .lp3-res-btn::after,
  .lp3-tour:has(.lp3-tour-stage:hover) .lp3-board.is-auto .lp3-res-btn::after { animation-play-state: paused; }
}
@keyframes lp3ResFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.lp3-tour-end .lpb-toc-more { margin: 1.75rem 0 1.25rem; }
.lp3-tour-go { text-align: center; }
.lp3-tour-go p { margin: 0 0 0.9rem; font-weight: 700; color: var(--ink); }

@media (min-width: 992px) {
  .lp3-tour-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 0 4rem;
    align-items: center;
  }
  .lp3-tour-say { grid-column: 1; grid-row: 1; }
  .lp3-tour-stage { grid-column: 2; grid-row: 1; }
  .lp3-tour-go { display: none; }
}
@media (max-width: 991px) {
  .lp3-tour-grid { display: grid; gap: 1.5rem; }
  /* A row to swipe above the card, out to the screen's edge. */
  .lp3-board {
    display: flex; gap: 0.6rem;
    margin: 1.25rem -1.25rem 0; padding: 0.25rem 1.25rem 1.25rem;
    overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x mandatory; scroll-padding-inline: 1.25rem;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }
  .lp3-board::-webkit-scrollbar { display: none; }
  .lp3-res { flex: 0 0 min(76%, 290px); scroll-snap-align: start; }
  .lp3-res--wide { flex-basis: min(86%, 340px); }
  .lp3-tour-end { display: none; }
}
@media (max-width: 575px) { .lp3-tour-go .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .lp3-res-btn { transition: none; }
  .lp3-board { scroll-behavior: auto; }
}

/* ==== The other ways in ========================================================
   A campus from the air behind three glass tiles of three sizes: the quiz
   tall on the left, Jelajahi and the schools stacked on the right. */
.lp3-photo-sec {
  position: relative; isolation: isolate;
  overflow: hidden; overflow: clip;
  padding-block: calc(var(--sec) + 3rem);
}
.lp3-sec-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
:root[data-theme="dark"] .lp3-sec-photo { filter: brightness(.62) saturate(.95); }
/* Into the page's ground at both edges, so the photograph has no hard line. */
.lp3-photo-sec::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%);
  pointer-events: none;
}
.lp3-bento { display: grid; gap: 1rem; }
@media (min-width: 768px) {
  .lp3-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp3-tile--quiz { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .lp3-bento { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem; }
  .lp3-tile--quiz { grid-column: 1; grid-row: 1 / span 2; }
}
.lp3-tile {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--b-r);
}
.lp3-tile-p { margin: 0; max-width: 40ch; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.lp3-tile-note { margin: 0.4rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
/* The button sits at the foot of its tile, whatever the tile's height. */
.lp3-tile-go { margin-top: auto; }
.lp3-tile > :nth-last-child(2) { margin-bottom: 1.75rem; }

.lp3-rumpun {
  list-style: none;
  margin: 2rem 0 0; padding: 0;
  width: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 1.5rem;
}
.lp3-rumpun li { display: flex; align-items: center; gap: 0.8rem; font-size: 1.04rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.lp3-rumpun i { flex: none; font-size: 1.65rem; color: var(--accent-ink); }
@media (max-width: 575px) {
  .lp3-rumpun { gap: 0.85rem 1rem; }
  .lp3-rumpun li { font-size: 0.9rem; gap: 0.55rem; }
  .lp3-rumpun i { font-size: 1.3rem; }
}

/* The catalogue counted, the tile's picture. */
.lp3-count { display: flex; gap: 2.25rem; margin: 0 0 1.5rem; }
.lp3-count dt {
  font-size: clamp(2.6rem, 4.6vw, 3.9rem);
  font-weight: 800; letter-spacing: -0.05em; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lp3-count dd { margin: 0.35rem 0 0; font-size: 0.95rem; font-weight: 700; color: var(--ink-2); }
.lp3-count + .lp3-h3 { margin-top: auto; }
.lp3-tile--explore .lp3-tile-go { margin-top: 0; }

/* ==== The hesitations ========================================================= */
.lp3-faq { padding-block: var(--sec); }
.lp3-faq-grid { display: grid; gap: 1.5rem; }
@media (min-width: 992px) {
  .lp3-faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
}
.lp3-faqbox { padding: clamp(0.75rem, 2vw, 1.25rem) clamp(1.25rem, 3vw, 2.25rem); }
.lp3-faqbox .lpb-faq-item:first-child summary { padding-top: 1.1rem; }

/* ==== The ask ================================================================
   A campus across the whole screen, the closing card floating over its left
   side (glass.css makes .lpb-final-card the floating glass). On a phone the
   photograph is a band on top and the card overlaps its foot. */
.lp3-final { position: relative; isolation: isolate; }
.lp3-final-img {
  display: block;
  width: 100%; height: clamp(14rem, 62vw, 22rem);
  object-fit: cover; object-position: center 45%;
}
:root[data-theme="dark"] .lp3-final-img { filter: brightness(.8) saturate(.92); }
.lp3 .lp3-final-card { margin: -4.5rem 0 0; box-shadow: var(--glass-lift), 0 40px 90px -40px rgba(var(--shadow-rgb), .7); }
.lp3-final-wrap { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
/* Out of the page's ground and back into it, like the photograph behind the
   tiles, so no block ends on a hard line. */
.lp3-final-wrap { position: relative; z-index: 1; }
.lp3-final::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 16%, transparent 84%, var(--bg) 100%);
  pointer-events: none;
}
@media (max-width: 991px) {
  .lp3-final::before { display: none; }
  .lp3-final-img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, black 22%);
            mask-image: linear-gradient(180deg, transparent 0, black 22%);
  }
}
@media (min-width: 992px) {
  .lp3-final { padding-block: calc(var(--sec) + 3rem); }
  .lp3-final-img { position: absolute; inset: 0; z-index: -1; height: 100%; }
  .lp3-final-wrap { padding-bottom: 0; }
  .lp3 .lp3-final-card { width: auto; max-width: 35rem; min-width: 0; margin: 0; }
}
/* The card lies wholly on the photograph here, so the steps' grey line can
   land on a light patch of it through the clear glass (3.95:1 measured); a
   tone up holds AA in both themes without thickening the glass. */
.lp3 .lp3-final-card .lpb-final-d { color: var(--ink-2); }

/* ==== The photographs' credits ================================================ */
.lp3-credits { padding-block: 1.5rem 0.5rem; font-size: 0.8rem; color: var(--muted); }
.lp3-credits summary { cursor: pointer; width: max-content; max-width: 100%; }
.lp3-credits summary:hover { color: var(--ink-2); }
.lp3-credits ul { margin: 0.75rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; line-height: 1.5; }
.lp3-credits a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* ==== Third pass: the road and the smaller touches ============================ */

/* The photographs open their campus in Jelajahi PTN. */
.lp3-rail-link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; border-radius: inherit; }
.lp3-rail-link:focus-visible { outline: 3px solid rgba(37, 99, 235, .6); outline-offset: -3px; }
.lp3-rail-go {
  position: absolute; right: 0.75rem; top: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background-color: rgba(18, 16, 14, .68);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  font-size: 0.8rem; font-weight: 700; color: rgba(255, 255, 255, .96);
  opacity: 0; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.lp3-rail-link:hover .lp3-rail-go,
.lp3-rail-link:focus-visible .lp3-rail-go { opacity: 1; transform: none; }

/* The stakes headline, lit word by word as it is read (landing-v3.js adds
   .is-armed only when it can run the light; otherwise the words are ink). */
.lp3-lit.is-armed .lp3-w { color: var(--muted); transition: color .4s ease; }
.lp3-lit.is-armed .lp3-w.is-on { color: var(--ink); }

/* The conversation types its answers: each of ours shows three dots first,
   then its words. A little slower than before, so a reply can be typed. */
@media (prefers-reduced-motion: no-preference) {
  .lp-anim .lp3-chat.is-playing .lpb-bub ~ .lpb-bub,
  .lp-anim .lp3-chat.is-playing .lpb-chat-go { transition-delay: calc((var(--i, 1) - 1) * 900ms); }
  .lp-anim .lp3-chat .lpb-bub--us { position: relative; }
  .lp-anim .lp3-chat.is-playing .lpb-bub--us {
    animation: lp3Say .3s ease both;
    animation-delay: calc((var(--i, 1) - 1) * 900ms + 650ms);
  }
  .lp-anim .lp3-chat .lpb-bub--us::after {
    content: ""; position: absolute; left: 1.15rem; top: 50%;
    width: 30px; height: 8px; margin-top: -4px;
    background: radial-gradient(circle at 4px 4px, var(--ink-2) 3px, transparent 3.5px) 0 0 / 11px 8px repeat-x;
    opacity: 0;
  }
  .lp-anim .lp3-chat.is-playing .lpb-bub--us::after {
    animation: lp3Dots .65s linear both;
    animation-delay: calc((var(--i, 1) - 1) * 900ms);
  }
}
@keyframes lp3Say { from { -webkit-text-fill-color: transparent; } to { -webkit-text-fill-color: currentColor; } }
@keyframes lp3Dots { 0%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* ---- The road -------------------------------------------------------------- */
.lp3-road { padding-block: var(--sec); }
.lp3-road-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 3rem; align-items: end; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
@media (min-width: 992px) { .lp3-road-head { grid-template-columns: minmax(0, 1fr) auto; } }
.lp3-road-head .lp3-h2 { margin: 0 0 0.6rem; }
.lp3-road-head .lpb-lede { max-width: 46ch; }
/* The one figure: days to registration. */
/* A wrapping row, not a grid: in a grid the label spanning both columns
   widened the first and pushed "hari lagi" away from the figure. */
.lp3-road-count { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 0.6rem; margin: 0; text-align: left; }
.lp3-road-count-k { flex: 0 0 100%; margin-bottom: 0.25rem; font-size: 0.95rem; font-weight: 700; color: var(--ink-2); }
.lp3-road-count b {
  font-size: clamp(3.4rem, 6.4vw, 5.6rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.9;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.lp3-road-count-u { padding-bottom: 0.45rem; font-size: 1.15rem; font-weight: 700; color: var(--ink-2); }
.lp3-road-box { padding: clamp(1.75rem, 3.2vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 2.6vw, 2rem); }

.lp3-road-track {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}
/* The line through the points, and its stretch to today in cobalt. */
.lp3-road-track::before,
.lp3-road-track::after {
  content: ""; position: absolute;
  left: calc(50% / var(--n)); top: 10px;
  height: 2px; border-radius: 2px;
}
.lp3-road-track::before { z-index: 0; right: calc(50% / var(--n)); background: var(--line-strong); }
.lp3-road-track::after { z-index: 1; width: calc(var(--today) * 100% / var(--n)); background: var(--primary); }
.lp3-road-track li { position: relative; z-index: 2; display: grid; justify-items: center; align-content: start; gap: 0.3rem; padding: 0 0.35rem; text-align: center; }
.lp3-road-dot {
  position: relative;
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-bottom: 0.6rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--line-strong) inset;
  font-size: 0.72rem;
}
.lp3-road-track .is-done .lp3-road-dot { background: var(--primary); box-shadow: none; color: white; }
.lp3-road-track .is-today .lp3-road-dot { background: var(--ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 18%, transparent); }
.lp3-road-track .is-target .lp3-road-dot { background: var(--primary); box-shadow: none; }
.lp3-road-track .is-target .lp3-road-dot::after {
  content: ""; position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--primary);
}
.lp3-road-track b { font-size: 0.88rem; font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.lp3-road-when { font-size: 0.8rem; line-height: 1.35; color: var(--ink-2); }
.lp3-road-when em { display: block; font-style: normal; font-size: 0.74rem; color: var(--muted); }
.lp3-road-track .is-done b,
.lp3-road-track .is-done .lp3-road-when { color: var(--muted); }
.lp3-road-track .is-target b { color: var(--accent-ink); }
.lp3-road-note { margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.9rem; }
.lp3-road-note a { color: var(--accent-ink); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .lp3-road-track .is-target .lp3-road-dot::after { animation: lp3Ping 1.9s ease-out infinite; }
}
@keyframes lp3Ping { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
/* A phone gets the points as a column. */
@media (max-width: 767px) {
  .lp3-road-track { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .lp3-road-track::before { left: 10px; right: auto; top: 11px; bottom: 11px; width: 2px; height: auto; }
  .lp3-road-track::after { display: none; }
  .lp3-road-track li { grid-template-columns: 22px minmax(0, 1fr); justify-items: start; column-gap: 0.9rem; row-gap: 0.1rem; padding: 0; text-align: left; }
  .lp3-road-dot { grid-row: span 2; margin: 0; }
}

/* ---- The floating button --------------------------------------------------- */
.lp3-dock {
  position: fixed; z-index: 1030;
  left: 50%; bottom: 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.45rem 0.45rem 0.45rem 1.3rem;
  border-radius: 999px;
  background-color: var(--glass-panel);
  border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-lift), 0 24px 60px -24px rgba(var(--shadow-rgb), .7);
  transform: translate(-50%, 0);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}
/* Hidden by sliding away, so it stays in the box model for the motion. */
.lp3-dock[hidden] {
  display: flex;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 160%);
  transition: opacity .25s ease, transform .35s ease, visibility 0s .35s;
}
.lp3-dock-say { font-size: 0.92rem; color: var(--ink-2); white-space: nowrap; }
.lp3-dock-say b { color: var(--ink); }
@media (max-width: 991px) {
  .lp3-dock, .lp3-dock[hidden] { display: none; }
}
.pk-lite .lp3-dock { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* No pointer to turn towards: the phone sways slowly once it has arrived. */
@media (prefers-reduced-motion: no-preference) and (hover: none), (prefers-reduced-motion: no-preference) and (max-width: 991px) {
  html:not(.pk-lite) .lp3-phone-wrap .lp-phone {
    animation: lp3Rise 1.5s cubic-bezier(.16, 1, .3, 1) .3s both, lp3Sway 7s ease-in-out 1.8s infinite alternate;
  }
}
/* ==== The film's second cut: the pair ========================================
   Sized in cqw like the rest of the film (the screen is 100cqw wide and
   192cqw tall), placed in % of its height. Drawn here, not in landing.css,
   because only this page plays this cut. */
.rv-pair { color: var(--ink); }
.rv-pair-k {
  position: absolute; left: 8cqw; right: 8cqw; top: 7%;
  margin: 0; text-align: center;
  font-size: 4.6cqw; font-weight: 700; color: var(--muted);
}
.rv-pair-n {
  position: absolute; left: 0; right: 0; top: 10.5%;
  display: flex; align-items: baseline; justify-content: center; gap: 2.4cqw;
  margin: 0;
}
.rv-pair-slot { display: inline-grid; justify-items: end; }
.rv-pair-slot > * { grid-area: 1 / 1; }
.rv-pair-a, .rv-pair-b {
  font-size: 25cqw; font-weight: 800; letter-spacing: -.05em; line-height: 1.12;
  color: var(--primary);
}
.rv-pair-of { font-size: 6.4cqw; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.rv-pair-tier {
  position: absolute; left: 0; right: 0; top: 27.5%;
  display: grid; justify-items: center; margin: 0;
}
.rv-pair-tier > * { grid-area: 1 / 1; }
.rv-tier {
  padding: 1.2cqw 3.6cqw;
  border-radius: 99px;
  font-size: 3.7cqw; font-weight: 800;
  white-space: nowrap;
}
.rv-tier--a { background: var(--nav-lit); color: var(--ink); }
.rv-tier--b { background: var(--primary-soft); color: var(--accent-ink-2); }

/* A hundred students, ten by ten; the ones who get in in cobalt. */
.rv-hundred {
  position: absolute; left: 50%; top: 33.5%;
  display: grid; grid-template-columns: repeat(10, 4.4cqw); gap: 2.2cqw;
  transform: translateX(-50%);
}
.rv-hundred i { position: relative; display: block; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--line-strong); }
.rv-hundred b {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--primary);
}

.rv-prows { position: absolute; left: 7cqw; right: 7cqw; top: 67.5%; display: grid; gap: 2.4cqw; }
.rv-prow {
  position: relative;
  display: flex; align-items: center; gap: 2.6cqw;
  padding: 2.4cqw 3cqw;
  border-radius: 3.6cqw;
  background: var(--surface-2);
}
.rv-prow-n {
  flex: none;
  display: grid; place-items: center;
  width: 6cqw; height: 6cqw;
  border-radius: 50%;
  background: var(--nav-lit);
  font-size: 3.4cqw; font-weight: 800; color: var(--ink);
}
.rv-prow .rv-crest { width: 8.4cqw; height: 8.4cqw; }
.rv-prow-t { display: grid; min-width: 0; }
.rv-prow-t b { font-size: 4cqw; font-weight: 800; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-prow-t i { font-size: 3.1cqw; font-style: normal; font-weight: 600; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-prow-slot { position: relative; display: grid; flex: 1 1 auto; min-width: 0; }
.rv-prow-slot > * { grid-area: 1 / 1; display: flex; align-items: center; gap: 2.6cqw; min-width: 0; }
.rv-prow-new { opacity: 0; }
.rv-prow--swap { box-shadow: 0 0 0 .5cqw var(--primary) inset; }
.rv-tag {
  position: absolute; right: 2.4cqw; top: 0;
  display: inline-flex; align-items: center; gap: 1cqw;
  padding: .7cqw 2.2cqw;
  border-radius: 99px;
  background: var(--primary); color: white;
  font-size: 2.9cqw; font-weight: 800;
  /* Its place is a translate; its transform is the film's, which scales it in. */
  translate: 0 -55%;
}
.rv-pair-foot {
  position: absolute; left: 8cqw; right: 8cqw; top: 90%;
  margin: 0; text-align: center;
  font-size: 3.7cqw; font-weight: 700; color: var(--muted);
}