/* =========================================================================
   Landing page, the shipped composition (named "bold" while it was a draft,
   and still filed under that name so its history stays greppable).
   Layered on top of landing.css, which keeps the phone film, the report frame
   and the reveal that landing.js drives. Only the composition lives here.

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

   Cobalt is rare. It fills the primary button and marks exactly four things:
   the emphasised word in the headline, the tightest prodi on the chart, the
   rail beside the report chapter on screen, and the rail beside the campus
   picked in the catalogue. A page where everything is blue is a page where
   nothing is marked.

   No glows, no dark blocks, no icon-in-a-tinted-square. Surfaces are the page's
   own paper and its sunk band tone; structure comes from type, rules and space.

   One corner system: 20px on panels and photographs, 12px on inputs and small
   tiles, full pill on buttons. One theme at a time, every colour a token.
   ========================================================================= */

.lpb {
  --b-r: 20px;
  --b-r-sm: 12px;
  --b-wrap: 1340px;
}

.lpb-wrap {
  width: 100%;
  max-width: var(--b-wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.lpb-section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.lpb-section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.lpb-section--end { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* The sunk band tone, never the accent, and never twice in a row: stakes,
   catalogue, objections. */
.lpb-band { background: var(--surface-2); padding-block: clamp(3.5rem, 7vw, 5.5rem); }

/* ---- Type ----------------------------------------------------------------
   One family. Section headings are ranged left: three centred headings in a
   row is the templated rhythm (§4.3). Balanced, so a heading never ends on
   one stranded word. */
.lpb-h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  color: var(--ink);
}
.lpb-h1 em { font-style: normal; color: var(--accent-ink); }

.lpb-h2 {
  margin: 0 0 0.75rem;
  max-width: 22ch;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--ink);
  text-wrap: balance;
}
.lpb-h2--sm { max-width: none; font-size: clamp(1.35rem, 2.2vw, 1.8rem); letter-spacing: -0.025em; }

.lpb-lede {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lpb-lede--sm { font-size: 1.02rem; color: var(--muted); }
.lpb-head { margin-bottom: 2rem; }

/* ---- Hero ---------------------------------------------------------------- */
.lpb-hero {
  position: relative;
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  overflow: clip;
}
/* From 992px the bar floats (NAVIGATION in app.css: 71px of the page's top,
   transparent but for its capsule), so the hero starts under it and the
   photographs fade in behind the capsule instead of being cut off below it.
   The text stays where it was: the padding gives the 71px back. It is the
   page that moves up, not the hero inside it: the page clips its overflow,
   so a hero pulled up on its own was cut off at the page's old top edge. */
@media (min-width: 992px) {
  main.lpb { margin-top: -71px; }
  .lpb-hero { padding-top: calc(71px + clamp(2rem, 4vw, 3.25rem)); }
}
.lpb-hero-grid {
  width: 100%;
  max-width: var(--b-wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
  display: grid;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 992px) {
  .lpb-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; }
}
.lpb-hero-say { position: relative; z-index: 1; }

/* A plain line of text, not a pill. */
.lpb-kicker {
  margin: 0 0 1rem;
  font-size: 1rem; font-weight: 700;
  color: var(--accent-ink);
}

.lpb-sub {
  margin: 0 0 1.75rem;
  max-width: 34rem;
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.lpb-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 575px) {
  .lpb-cta .btn { width: 100%; }
  /* One obvious action on a phone. The quiz stays, as a link under the
     button: stacked at the same size, the two read as a choice between
     equals, and only one of them is what the page is for. */
  .lpb-hero .lpb-cta { gap: 0.9rem; }
  .lpb-hero .lpb-cta .btn-ghost,
  .lpb-hero .lpb-cta .btn-ghost:hover,
  .lpb-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;
    font-size: 1rem; font-weight: 700; color: var(--accent-ink);
    text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 4px;
  }
}
/* What it costs and how you get in, at the button. */
.lpb-cta-note { margin: 1rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--muted); }

.lpb-hero-stage {
  position: relative;
  display: flex; justify-content: center;
  padding-block: 2.5rem 1rem;
}
@media (min-width: 992px) {
  .lpb-hero-stage { justify-content: flex-end; padding-block: 0; }
}
.lpb .lp-phone { position: relative; z-index: 1; margin: 0; }
/* A phone in graphite. landing.css draws the bezel in slate navy, which the
   original page still uses; on this page it was one more blue object on warm
   paper, and real handsets are not navy. */
.lpb .lp-phone { background: linear-gradient(160deg, #4a4642 0%, #1c1a18 38%, #2a2724 72%, #141210 100%); }
.lpb .lp-phone-island { background: #141210; }
/* On a phone the handset is a size down: at 296px it was 646px tall, 80% of
   the screen, and the second screen was nothing but a phone. The camera is
   measured from the screen by landing.js; --reel-scale is only the resting
   frame without JavaScript (224/560). */
@media (max-width: 575px) {
  .lpb-hero-stage { padding-block: 1.75rem 0.5rem; }
  .lpb .lp-phone { max-width: 240px; padding: 8px; border-radius: 36px; }
  .lpb .lp-phone-screen { border-radius: 29px; }
  .lpb .lp-phone-key--vol { top: 88px; height: 50px; }
  .lpb .lp-phone-key--pwr { top: 108px; height: 70px; }
  .lpb .lp-reel { --reel-scale: .4; }
}
/* The verdict chip inside the film read --primary-deep as its text, which does
   not lift in dark, so it was dark blue on the dark accent tint at 1.6:1.
   --accent-ink-2 is the token for the accent as small type: identical in light,
   lifted in dark. The original page has the same bug; this fixes it here only,
   because that page is being kept as it is. */
.lpb .rv-chip { color: var(--accent-ink-2); }

/* The photographs. On a phone, a band behind the handset faded top and bottom.
   From lg up they bleed right to the edge of the screen and dissolve into the
   page through a mask whose left edge starts past the end of the text column,
   so no line of type ever sits on a photograph. The mask's bottom fade has to
   finish above the hero's clip line or the photographs end in a hard edge. */
.lpb-hero-photo {
  --bleed: max(1.25rem, calc((100vw - var(--b-wrap)) / 2 + 1.25rem));
  position: absolute; z-index: 0;
  top: 0; bottom: 18%;
  left: -1.25rem; right: -1.25rem;
  overflow: hidden; overflow: clip;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 72%, transparent 100%);
}
@media (min-width: 992px) {
  .lpb-hero-photo {
    top: -4rem; bottom: -2rem;
    left: -3rem;
    right: calc(var(--bleed) * -1);
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, #000 34%),
      linear-gradient(180deg, transparent 0, #000 14%, #000 52%, transparent 94%);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(90deg, transparent 0, #000 34%),
      linear-gradient(180deg, transparent 0, #000 14%, #000 52%, transparent 94%);
            mask-composite: intersect;
  }
}
/* In their own colours, quieted a little so five differently lit campuses sit
   together. No cobalt grade: tinting real photographs blue is the same move as
   the glow, the brand colour applied because it is there. */
.lpb-hero-photo .lp-campus-shot {
  background-position: center;
  filter: saturate(.82) contrast(.97);
}
:root[data-theme="dark"] .lpb-hero-photo .lp-campus-shot { filter: saturate(.7) brightness(.55); }

/* ---- Coverage: the crests ------------------------------------------------
   Fourteen seals in their own colours, standing still, never cropped: one row
   of fourteen from 1200px, two rows of seven below it, so the grid always has
   exactly as many cells as crests. */
.lpb-crests { padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2.75rem, 5vw, 3.75rem); }
.lpb-crests-cap {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 0.95rem; font-weight: 600;
  color: var(--muted);
}
.lpb-crests-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1.25rem 0.75rem;
  justify-items: center; align-items: center;
}
@media (min-width: 1200px) { .lpb-crests-row { grid-template-columns: repeat(14, minmax(0, 1fr)); } }
.lpb-crests-row img {
  display: block;
  width: clamp(34px, 3.6vw, 52px); height: clamp(34px, 3.6vw, 52px);
  object-fit: contain;
}
/* Several seals are drawn with dark outlines on a transparent ground, which
   vanish on a dark page; a hairline of light keeps their edge. */
:root[data-theme="dark"] .lpb-crests-row img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)); }

/* ---- Stakes: the worries, then every prodi --------------------------------
   The headline and the conversation side by side on the band tone, then the
   chart across the full width under both. */
.lpb-stakes { background: var(--surface-2); padding-block: clamp(3.75rem, 8vw, 6.5rem); }
.lpb-stakes-top { display: grid; gap: 2.25rem; }
@media (min-width: 992px) {
  .lpb-stakes-top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: center; }
}
/* The one statement the page is argued from, a size up from other headings.
   Capped where "Pilihanmu cuma dua." still sets on one line in a 5fr column. */
.lpb-stakes-head .lpb-h2 { max-width: 15ch; font-size: clamp(2rem, 3.5vw, 3.2rem); margin-bottom: 1rem; }
.lpb-stakes-head .lpb-lede { max-width: 36ch; }

/* The conversation: a doubt on the left, our reply on the right, three times,
   then the button. The lines arrive in turn. .is-playing is set by landing.js
   only when the thread is on screen, separately from the .lp-in reveal, whose
   five-second safety net would otherwise play it to an empty room. Without
   JavaScript, or under reduced motion, the thread is simply there. */
.lpb-chat {
  position: relative;
  display: flex; flex-direction: column; gap: 0.7rem;
}
@media (min-width: 992px) { .lpb-chat { width: 100%; max-width: 40rem; justify-self: end; } }
.lpb-bub {
  margin: 0; align-self: flex-start; max-width: 85%;
  padding: 0.85rem 1.15rem;
  border-radius: var(--b-r);
  border-bottom-left-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: clamp(0.98rem, 1.5vw, 1.08rem); line-height: 1.5;
  color: var(--ink);
}
/* Ours: the accent's tint, not the accent. Three solid cobalt bubbles and a
   button would make cobalt the colour of the whole column; the button is the
   one solid thing in it. */
.lpb-bub--us {
  align-self: flex-end;
  background: var(--primary-soft); border-color: var(--accent-line);
  border-bottom-left-radius: var(--b-r); border-bottom-right-radius: 6px;
}
.lpb-chat-go { align-self: flex-end; margin-top: 0.5rem; }

@media (prefers-reduced-motion: no-preference) {
  /* The first doubt is there from the start, so what scrolls into view is
     already a conversation and never an empty column; the lines after it
     arrive. */
  .lp-anim .lpb-chat .lpb-bub ~ .lpb-bub,
  .lp-anim .lpb-chat .lpb-chat-go {
    opacity: 0;
    transform: translateY(12px);
  }
  /* One line every 420 ms, counted from the second. Nothing loops: each line
     moves once and is then ordinary text. */
  .lp-anim .lpb-chat.is-playing .lpb-bub ~ .lpb-bub,
  .lp-anim .lpb-chat.is-playing .lpb-chat-go {
    opacity: 1; transform: none;
    transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc((var(--i, 1) - 1) * 420ms);
  }
}
/* ---- Stakes: the chart -----------------------------------------------------
   Every prodi with both figures, as a histogram of peminat per kursi on a log
   axis. The loose majority in the field grey, the tail tighter than 1 : 20 in
   ink, the single tightest step in cobalt: the eye lands where the message is.
   The four readings are one list, pinned onto the chart from lg up and set as
   a plain grid below it. */
.lpb-spread { margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; }
.lpb-spread-cap { display: grid; gap: 0.4rem; margin-bottom: 1.75rem; }
.lpb-spread-cap b {
  font-size: clamp(1.3rem, 2.3vw, 1.8rem); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
.lpb-spread-cap span { font-size: 1rem; line-height: 1.55; color: var(--muted); }

.lpb-plot {
  --row: 1.75rem;
  --bars-h: clamp(9rem, 38vw, 12rem);
  --ticks-h: 2.1rem;
  position: relative;
  padding-top: var(--row);
}
.lpb-bars {
  height: var(--bars-h);
  display: grid; grid-template-columns: repeat(var(--steps, 40), minmax(0, 1fr));
  gap: 2px; align-items: end;
  border-bottom: 2px solid var(--ink);
}
.lpb-bars i {
  display: block;
  height: max(3px, var(--h));
  border-radius: 3px 3px 0 0;
  background: var(--field-line);
  transform-origin: 50% 100%;
}
.lpb-bars .is-empty { height: 0; }
.lpb-bars .is-tail { background: var(--ink); }
.lpb-bars .is-top { background: var(--primary); }
/* The first step is taller than the scale; a gap near its top says so. */
.lpb-bars .is-cut {
  background: linear-gradient(180deg, var(--field-line) 0 7px, transparent 7px 12px, var(--field-line) 12px);
}
.lpb-cut {
  position: absolute; left: 0; top: 0;
  line-height: var(--row);
  font-size: 0.8rem; font-weight: 800; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.lpb-ticks { position: relative; height: var(--ticks-h); }
.lpb-ticks span {
  position: absolute; top: 0.5rem; left: var(--at);
  transform: translateX(-50%);
  font-size: 0.8rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lpb-ticks span::before {
  content: ""; position: absolute; left: 50%; top: -0.5rem;
  width: 1px; height: 0.35rem;
  background: var(--ink);
}
.lpb-ticks span:first-child { transform: none; }
.lpb-ticks span:first-child::before { left: 0; }
.lpb-ticks span:last-child { transform: translateX(-100%); }
.lpb-ticks span:last-child::before { left: auto; right: 0; }
@media (max-width: 767px) { .lpb-ticks .is-minor { display: none; } }

.lpb-marks {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem 1.5rem;
}
@media (min-width: 768px) { .lpb-marks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lpb-mark > b {
  display: block;
  font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lpb-mark > span { display: block; margin-top: 0.25rem; font-size: 0.88rem; line-height: 1.4; color: var(--muted); }
.lpb-mark--max > b { color: var(--accent-ink); }

.lpb-src { margin: 1.5rem 0 0; max-width: 72ch; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }

/* ---- Stakes: the visitor's own prodi on that chart --------------------------
   A question, a field and, once a prodi is chosen, its figures beside the one
   button. The field is the explorer's (.lpb-search) and its list is Jelajahi
   PTN's (.explore-suggest), so nothing here is a new component. The pin is
   drawn by landing.js, which also decides how high its tag can sit. */
.lpb-spot { max-width: 46rem; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }
.lpb-spot[hidden] { display: none; }
.lpb-spot-q {
  display: block; margin: 0 0 0.6rem;
  font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
}
.lpb-spot-field { margin-bottom: 0; z-index: 5; }
.lpb-spot-field .ss-option { cursor: pointer; }
.lpb-spot-cap { padding: 0.45rem 0.7rem 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.lpb-spot-out {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.85rem 1.25rem; margin-top: 0.9rem;
}
.lpb-spot-out[hidden] { display: none; }
.lpb-spot-say { flex: 1 1 16rem; min-width: 0; margin: 0; }
.lpb-spot-say > b { display: block; font-size: 1.04rem; line-height: 1.35; color: var(--ink); }
.lpb-spot-say > span { display: block; margin-top: 0.15rem; font-size: 0.95rem; line-height: 1.5; color: var(--ink-2); }
.lpb-spot-say > span b { color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.lpb-spot-say > span a {
  font-weight: 700; color: var(--accent-ink);
  text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px;
}
.lpb-spot-say > span a:hover { text-decoration-color: currentColor; }
@media (max-width: 575px) { .lpb-spot-out .btn { width: 100%; } }

.lpb-pin { position: absolute; z-index: 3; width: 0; pointer-events: none; }
.lpb-pin[hidden] { display: none; }
.lpb-pin::before {
  content: ""; position: absolute; left: -1px; top: 0.6rem; bottom: 0;
  border-left: 2px solid var(--primary);
}
.lpb-pin-tag {
  position: absolute; top: 0; left: 0;
  display: flex; gap: 0.4rem; max-width: min(15rem, 76vw); padding: 0.2rem 0.6rem;
  border-radius: 999px; background: var(--primary); color: #fff;
  font-size: 0.74rem; font-weight: 800; line-height: 1.3; white-space: nowrap;
}
/* A long name gives way; the prodi's own percentage, which is what the pin is
   there to put on the axis, never does. */
.lpb-pin-tag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.lpb-pin-tag > b { flex: none; font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.pk-lite) .lpb-pin { transition: left .35s cubic-bezier(.16, 1, .3, 1), top .35s cubic-bezier(.16, 1, .3, 1), height .35s cubic-bezier(.16, 1, .3, 1); }
}

@media (min-width: 992px) {
  .lpb-plot { --row: 6rem; --bars-h: clamp(13rem, 19vw, 17rem); --ticks-h: 4.4rem; }
  .lpb-bars { gap: 3px; }

  .lpb-marks { display: block; position: absolute; inset: 0; margin: 0; pointer-events: none; }
  .lpb-mark { position: absolute; left: var(--at); }
  .lpb-mark > b,
  .lpb-mark > span { position: absolute; left: 0; margin: 0; white-space: nowrap; }

  /* The average, above the chart, with a dashed rule down to the axis. */
  .lpb-mark--avg { top: 0; bottom: var(--ticks-h); }
  .lpb-mark--avg > b,
  .lpb-mark--avg > span { transform: translateX(-50%); }
  .lpb-mark--avg > b { top: 0; }
  .lpb-mark--avg > span { top: 2.3rem; }
  .lpb-mark--avg::before {
    content: ""; position: absolute; left: -1px; top: 4.1rem; bottom: 0;
    border-left: 2px dashed var(--ink);
  }

  /* The median, under the axis where its ratio falls, in the tick row. */
  .lpb-mark--med { top: calc(var(--row) + var(--bars-h)); height: var(--ticks-h); }
  .lpb-mark--med::before {
    content: ""; position: absolute; left: -1px; top: 0;
    height: 0.45rem; border-left: 2px solid var(--ink);
  }
  .lpb-mark--med > b,
  .lpb-mark--med > span { transform: translateX(-50%); }
  .lpb-mark--med > b { top: 0.5rem; font-size: 1.05rem; letter-spacing: -0.01em; }
  .lpb-mark--med > span { top: 2rem; font-size: 0.86rem; }

  /* The tail, bracketed and named, just above the tallest of its bars. */
  .lpb-mark--tail { top: calc(var(--row) - 1.1rem); right: 0; height: 3.3rem; }
  .lpb-mark--tail > b,
  .lpb-mark--tail > span { position: static; display: inline; font-size: 1.02rem; letter-spacing: 0; }
  .lpb-mark--tail > b { color: var(--ink); }
  .lpb-mark--tail > span { margin-left: 0.2rem; color: var(--ink-2); }
  .lpb-mark--tail::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 0.6rem;
    border: 2px solid var(--ink); border-bottom: 0;
  }

  /* The tightest prodi, flagged to the left of its bar. */
  .lpb-mark--max { top: calc(var(--row) + var(--bars-h) * .34); bottom: var(--ticks-h); }
  .lpb-mark--max > b,
  .lpb-mark--max > span { left: auto; right: 0.75rem; text-align: right; }
  .lpb-mark--max > b { top: 0; font-size: clamp(2.3rem, 3.8vw, 3.4rem); }
  .lpb-mark--max > span { top: 3.4rem; }
  .lpb-mark--max::before {
    content: ""; position: absolute; left: -1px; top: 1.1rem; bottom: 0;
    border-left: 2px solid var(--primary);
  }
}

/* The bars rise left to right, loose to tight, the order the chart is read in.
   Only the bars move; the readings are there from the start so the average's
   count-up is seen. */
@media (prefers-reduced-motion: no-preference) {
  .lp-anim .lpb-spread .lpb-bars i { transform: scaleY(0); }
  .lp-anim .lpb-spread.is-in .lpb-bars i {
    transform: none;
    transition: transform .8s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--i, 0) * 22ms + 150ms);
  }
}

/* Verified claims about the product, when there are any. */
.lpb-facts {
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: 1.75rem;
  border-top: 1px solid var(--line-strong);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
}
.lpb-facts dt {
  font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lpb-facts dd { margin: 0.35rem 0 0; font-size: 0.86rem; line-height: 1.45; color: var(--muted); }

/* ---- The report and its table of contents --------------------------------
   Report on the left, contents on the right. The frame needs an explicit
   width: landing.css gives it width: 100% only under .lp-showcase, so in any
   other grid it shrink-wraps to about 133px.

   The contents are a rail of type. The chapter on screen is ink with its
   stretch of the rail in cobalt and its one-line description showing; the
   others are grey titles. Top-aligned, so a description opening under one
   title moves only what is below it and never re-centres the report. */
.lpb-showcase { display: grid; gap: 2.5rem; }
@media (min-width: 992px) {
  .lpb-showcase { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4.5rem; align-items: start; }
  .lpb-showcase-say { padding-top: 2.5rem; }
}
@media (max-width: 991px) { .lpb-showcase-say { order: -1; } }
/* The button after the report, on the widths where the list comes before it.
   Beside the report (992px up) the list's own button is level with it. */
.lpb-showcase-go { display: none; }
@media (max-width: 991px) {
  .lpb-showcase-btn { display: none; }
  .lpb-showcase-go { display: block; margin-top: -0.75rem; text-align: center; }
  .lpb-showcase-go p { margin: 0 0 0.9rem; font-weight: 700; color: var(--ink); }
}
@media (max-width: 575px) { .lpb-showcase-go .btn { width: 100%; } }
.lpb-showcase .lp-report-frame { width: 100%; max-width: 420px; margin: 0 auto; }

.lpb-toc {
  list-style: none;
  margin: 1.75rem 0 1.5rem; padding: 0;
  border-left: 2px solid var(--line-strong);
}
.lpb-toc-btn {
  position: relative;
  display: block; width: 100%;
  padding: 0.7rem 0 0.7rem 1.35rem;
  border: 0; background: none;
  font: inherit; text-align: left;
  color: var(--muted);
  cursor: pointer;
}
.lpb-toc-btn::before {
  content: ""; position: absolute; left: -2px; top: 0.45rem; bottom: 0.45rem;
  width: 2px;
  background: transparent;
  transition: background-color .2s ease;
}
.lpb-toc-btn b {
  display: block;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.25;
  transition: color .2s ease;
}
.lpb-toc-btn span {
  display: none;
  margin-top: 0.3rem;
  font-size: 0.98rem; line-height: 1.5;
  color: var(--ink-2);
}
.lpb-toc-btn:hover b { color: var(--ink-2); }
.lpb-toc-btn[aria-pressed="true"] { color: var(--ink); }
.lpb-toc-btn[aria-pressed="true"] b { color: var(--ink); }
.lpb-toc-btn[aria-pressed="true"]::before { background: var(--primary); }
.lpb-toc-btn[aria-pressed="true"] span { display: block; }
.lpb-toc-btn:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .lpb-toc-btn::before,
  .lpb-toc-btn b { transition: none; }
}

.lpb-toc-more { margin: 0 0 1.75rem; max-width: 44ch; font-size: 0.95rem; line-height: 1.55; color: var(--muted); }

/* ---- The catalogue --------------------------------------------------------
   On the band tone. The campuses are a plain list, the picked one on paper
   with a cobalt rail like the report's contents; the panel is the paper
   surface with the prodi as a real table. */
/* minmax(0, 1fr), not the implicit auto track. An auto track sizes itself to
   its widest content, and one long university name made it 399px inside a
   335px column on a phone: the search box and the list ran 64px off the right
   edge and were clipped. */
.lpb-explore { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem 2.5rem; }
.lpb-explore > * { min-width: 0; }
@media (min-width: 992px) {
  .lpb-explore { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
}

.lpb-search { position: relative; margin-bottom: 0.75rem; }
.lpb-search i {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); z-index: 2; pointer-events: none;
}
.lpb-search .form-control { padding-left: 2.9rem; border-radius: var(--b-r-sm); background-color: var(--surface); }

.lpb .uni-grid { gap: 2px; max-height: 470px; padding-right: 0.5rem; }
.lpb .uni-card {
  position: relative;
  padding: 0.7rem 0.9rem 0.7rem 1.1rem;
  border: 0; border-radius: var(--b-r-sm);
  background: transparent;
  box-shadow: none;
  transition: background-color .15s ease;
}
.lpb .uni-card:hover { transform: none; box-shadow: none; background: var(--surface); }
.lpb .uni-card.active { background: var(--surface); }
.lpb .uni-card.active::before {
  content: ""; position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem;
  width: 3px; border-radius: 3px;
  background: var(--primary);
}
.lpb .uni-card.active .uni-card-meta { color: var(--muted); }
.lpb .uni-card:focus-visible { outline: 3px solid rgba(37, 99, 235, .35); outline-offset: 1px; }
.lpb .uni-card-name { font-size: 0.95rem; }
.lpb .uni-card-logo { width: 34px; height: 34px; }

.lpb-explore-panel {
  display: flex; flex-direction: column;
  padding: 1.35rem 1.5rem 1.25rem;
  border-radius: var(--b-r);
  border: 1px solid var(--line);
  background: var(--surface);
}
.lpb-panel-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.lpb-panel-head .uni-card-logo { width: 44px; height: 44px; }
.lpb-panel-name { flex: 1 1 auto; min-width: 0; }
.lpb-panel-name h3 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
.lpb-panel-name small { color: var(--muted); font-size: 0.88rem; }
.lpb .lp-count { padding: 0; background: none; color: var(--muted); font-size: 0.9rem; font-weight: 700; }

/* Not a whole number of rows: the half row showing at the fold is what says
   the list goes on. */
.lpb .program-list { gap: 0; max-height: 378px; }
.lpb-panel-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 0.25rem; padding-top: 1rem;
  border-top: 1px solid var(--line-strong);
}
.lpb-panel-foot p { margin: 0; font-weight: 700; color: var(--ink); }
@media (max-width: 575px) { .lpb-panel-foot .btn { width: 100%; } }

/* The prodi table landing.js draws for this page. Hairlines between rows only,
   numbers in tabular figures, keketatan last and in ink where it is tighter
   than 1 : 20. On a phone the two count columns fold into a line under the
   name, so the name keeps its width. */
.pk-prodi { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.93rem; }
.pk-prodi th,
.pk-prodi td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: right; vertical-align: middle;
}
.pk-prodi thead th {
  position: sticky; top: 0; z-index: 1;
  padding-top: 0; padding-bottom: 0.6rem;
  background: var(--surface);
  border-bottom-color: var(--line-strong);
  font-size: 0.78rem; font-weight: 700; white-space: nowrap;
  color: var(--muted);
}
.pk-prodi th:first-child { padding-left: 0; text-align: left; }
.pk-prodi th:last-child,
.pk-prodi td:last-child { padding-right: 0.25rem; }
.pk-prodi tbody tr:last-child > * { border-bottom: 0; }
.pk-prodi tbody th { font-weight: 400; }
.pk-prodi-name { display: block; font-weight: 700; line-height: 1.3; color: var(--ink); }
.pk-prodi-sub,
.pk-prodi-nums { display: block; margin-top: 0.1rem; font-size: 0.78rem; line-height: 1.35; color: var(--muted); }
.pk-prodi-nums { display: none; }
.pk-prodi td { white-space: nowrap; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pk-prodi-ratio { font-weight: 600; }
.pk-prodi .is-tight .pk-prodi-ratio { font-weight: 800; color: var(--ink); }
/* A figure that needs an account: a lock in the figure's own cell, and the
   cell is the way to sign in. Quiet until pointed at, like the row's arrow. */
.pk-prodi-lock {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin: -0.35rem -0.45rem -0.35rem 0;
  border-radius: 999px; color: var(--muted); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pk-prodi-lock:hover { background: var(--primary-soft); color: var(--accent-ink); }
.pk-prodi-lock:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.35); outline-offset: 1px; }
/* Each row's way into the form with that prodi chosen. */
.pk-prodi td.pk-prodi-go { width: 2.4rem; padding-left: 0.2rem; padding-right: 0; }
.pk-prodi-go a {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: 999px; color: var(--muted); text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.pk-prodi-go a:hover, .pk-prodi tr:hover .pk-prodi-go a { background: var(--primary-soft); color: var(--accent-ink); }
.pk-prodi-go a:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.35); outline-offset: 1px; }
@media (max-width: 575px) {
  .pk-prodi thead th:nth-child(2),
  .pk-prodi thead th:nth-child(3),
  .pk-prodi td:nth-child(2),
  .pk-prodi td:nth-child(3) { display: none; }
  .pk-prodi-sub { display: none; }
  .pk-prodi-nums { display: block; }
}

/* ---- The quiz ------------------------------------------------------------
   The question on the left, the nine rumpun on the right as line icons beside
   plain labels, in ink. Nine items in a 3 by 3 grid, nine cells. */
.lpb-quiz { display: grid; gap: 2.25rem 4rem; align-items: center; }
@media (min-width: 992px) { .lpb-quiz { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); } }
.lpb-quiz .lpb-lede { margin: 0.25rem 0 1.5rem; }
/* Two columns: the quiz has ten rumpun since 15 Oct 2026, and three columns
   left the tenth alone on a row of its own. */
.lpb-rumpun {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}
.lpb-rumpun li {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.98rem; font-weight: 700; line-height: 1.3;
  color: var(--ink);
}
.lpb-rumpun i { flex: 0 0 auto; font-size: 1.6rem; color: var(--ink-2); }
@media (max-width: 575px) {
  .lpb-rumpun { gap: 1.1rem 0.6rem; }
  .lpb-rumpun li { flex-direction: column; align-items: flex-start; gap: 0.35rem; font-size: 0.8rem; }
  .lpb-rumpun i { font-size: 1.35rem; }
}

/* ---- Quotes, when there are real ones ----------------------------------- */
.lpb-says { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
@media (min-width: 768px) { .lpb-says { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lpb-say {
  margin: 0; padding: 1.5rem;
  border-radius: var(--b-r); border: 1px solid var(--line); background: var(--surface);
}
.lpb-say blockquote { margin: 0 0 0.9rem; font-size: 1.02rem; line-height: 1.55; color: var(--ink); }
.lpb-say figcaption b { display: block; font-size: 0.9rem; color: var(--ink); }
.lpb-say figcaption span { font-size: 0.82rem; color: var(--muted); }

/* ---- Objections ----------------------------------------------------------
   Heading left, questions right: the right column carries the accordion, so
   this is not the banned headline-plus-floating-paragraph header. A rule
   between rows and none above the first or under the last. */
.lpb-faq-wrap { display: grid; gap: 1.5rem 4rem; }
@media (min-width: 992px) {
  .lpb-faq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; }
}
.lpb-faq-item + .lpb-faq-item { border-top: 1px solid var(--line-strong); }
.lpb-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-size: clamp(1.02rem, 1.5vw, 1.15rem); font-weight: 700; color: var(--ink);
}
.lpb-faq-item:first-child summary { padding-top: 0.25rem; }
.lpb-faq-item summary::-webkit-details-marker { display: none; }
.lpb-faq-item summary i { flex: 0 0 auto; font-size: 1.2rem; color: var(--ink-2); transition: transform .25s ease; }
.lpb-faq-item[open] summary i { transform: rotate(45deg); }
.lpb-faq-item summary:hover { color: var(--accent-ink); }
.lpb-faq-a { padding: 0 0 1.35rem; max-width: 62ch; color: var(--ink-2); font-size: 1rem; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .lpb-faq-item summary i { transition: none; } }

/* ---- Schools -------------------------------------------------------------
   One line after the closing card: the offer, who hands it on, the way in. */
.lpb-schoolline { padding-block: 0 clamp(2.5rem, 5vw, 4rem); }
.lpb-school {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 2rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.lpb-school-say { flex: 1 1 24rem; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.lpb-school-say b { color: var(--ink); font-weight: 700; }
.lpb-school-say span { display: block; margin-top: 0.15rem; font-size: 0.92rem; color: var(--muted); }
@media (max-width: 575px) { .lpb-school-cta { width: 100%; } }

/* ---- The ask -------------------------------------------------------------
   A panel of paper with the heading, the three steps and the button, laid
   over the left edge of a campus photograph. From lg up the photograph takes
   the right two thirds at about its own resolution (it is 1200px wide, and at
   full width it was being stretched past that); on a phone it sits on top and
   the panel overlaps its foot. The type never sits on the photograph. */
.lpb-final { position: relative; display: grid; }
.lpb-final-img {
  order: -1;
  display: block;
  width: 100%; height: clamp(13rem, 56vw, 22rem);
  object-fit: cover; object-position: center 60%;
  border-radius: calc(var(--b-r) + 8px);
}
:root[data-theme="dark"] .lpb-final-img { filter: brightness(.72) saturate(.85); }

.lpb-final-card {
  position: relative; z-index: 1;
  margin: -4.5rem 0.75rem 0;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--b-r);
  background: var(--surface);
  box-shadow: 0 30px 60px -32px rgba(var(--shadow-rgb), .45);
}
@media (min-width: 992px) {
  .lpb-final { display: block; padding-block: 3.5rem; }
  .lpb-final-img { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; height: 100%; }
  .lpb-final-card { width: 42%; min-width: 30rem; margin: 0; }
}

.lpb-final-h {
  margin: 0 0 0.6rem;
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.05; color: var(--ink);
  text-wrap: balance;
}
.lpb-final-p { margin: 0; color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; }

.lpb-final-steps {
  list-style: none;
  margin: 1.5rem 0 1.75rem; padding: 1.35rem 0 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 1rem;
}
.lpb-final-steps li {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr);
  column-gap: 0.55rem; align-items: baseline;
}
.lpb-final-n {
  grid-row: span 2;
  font-size: 1.05rem; font-weight: 800; line-height: 1.3;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lpb-final-steps b { font-size: 1.05rem; font-weight: 800; line-height: 1.3; color: var(--ink); }
.lpb-final-d { grid-column: 2; margin-top: 0.1rem; font-size: 0.95rem; line-height: 1.5; color: var(--muted); }

/* The price, between the steps and the button: the two amounts as type,
   figures in ink, not in the accent; the page's accent stays on the button. */
.lpb-final-price {
  margin: 1.5rem 0; padding-top: 1.25rem; border-top: 1px solid var(--line);
  display: grid; gap: 1rem 1.75rem;
}
@media (min-width: 576px) { .lpb-final-price { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.lpb-final-price dt {
  font-size: 1.45rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.lpb-final-price dd { margin: 0.3rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
.lpb-final-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.lpb-final-go span { font-size: 0.92rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 575px) { .lpb-final-go .btn { width: 100%; } }

/* ---- Desktop -------------------------------------------------------------
   The phone is a fixed 100/192 block. Between 992 and 1199 two columns leave
   little room, so it comes down to keep inside the window; from 1200 the type
   and phone are sized so the two columns are close in height. The headline
   stops growing at 6rem so "Bakal keterima" never reaches the photographs. */
@media (min-width: 992px) and (max-width: 1199px) {
  .lpb .lp-phone { max-width: 268px; }
}
@media (min-width: 1200px) {
  .lpb .lp-phone { max-width: 292px; }
  .lpb-sub { margin-bottom: 2.25rem; }
}
@media (min-width: 1600px) {
  .lpb .lp-phone { max-width: 310px; }
}

/* ---- Ground graphics ------------------------------------------------------
   A quiet drawing behind each of the larger sections, so the page is not two
   flat tones from top to bottom: the crowd going for a seat behind the stakes,
   the report's dial behind the sample, rows of seats in a hall beside the
   catalogue, rings spreading from a corner behind the objections. Markup and the reason for
   each are in views/landing.php.

   Drawn in the page's own ink at a fraction of its strength, so both themes
   get them from the same rules. The lit seats are the fifth thing on the page
   allowed to be cobalt, and they are a few pixels each.

   Nothing here may cost a slow phone anything. What moves is opacity and
   transform, on small or simple elements, only while its section is on screen
   (.is-live, from landing.js), never for reduced motion and never on .pk-lite;
   stopped, every drawing is complete as a still. The two largest are left off
   below 992px, where the section's own content takes the whole width. */
.lpb-grounded { position: relative; isolation: isolate; }
.lpb-amb { position: absolute; z-index: -1; pointer-events: none; }

/* A seat that is taken. Still: every third one is lit. Live: each breathes in
   and out on its own clock (--t) from its own point in the cycle (--d). */
.lpb-amb i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 24%, transparent);
  opacity: 0;
}
.lpb-amb i:nth-child(3n + 1) { opacity: 1; }

/* The crowd: a grid of dots from the section's top left corner, thinning out
   toward the conversation on the right and the chart below. */
.lpb-amb--crowd {
  --g: 32px;
  inset: 0 auto auto 0; width: min(100%, 62rem); height: min(100%, 44rem);
  overflow: clip;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 34%, transparent) 0 1.7px, transparent 2.4px);
  background-size: var(--g) var(--g);
  -webkit-mask-image: linear-gradient(98deg, #000 18%, transparent 74%), linear-gradient(180deg, #000 52%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(98deg, #000 18%, transparent 74%), linear-gradient(180deg, #000 52%, transparent 96%);
  mask-composite: intersect;
}
.lpb-amb--crowd i {
  left: calc(var(--c) * var(--g) + var(--g) / 2 - 3px);
  top: calc(var(--r) * var(--g) + var(--g) / 2 - 3px);
}
/* Below 992px the heading and the conversation stack and fill the width, and
   dots showing through the gaps between speech bubbles read as dirt. There the
   crowd is two still rows along the top of the section and nothing else. */
@media (max-width: 991px) {
  .lpb-amb--crowd {
    width: 100%; height: 5.5rem;
    -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 92%);
    mask-image: linear-gradient(180deg, #000 25%, transparent 92%);
  }
  .lpb-amb--crowd i { display: none; }
}
/* The heading stands in a clearing, so no dot sits behind a letter. */
.lpb-grounded .lpb-stakes-head { position: relative; isolation: isolate; }
.lpb-grounded .lpb-stakes-head::before {
  content: ""; position: absolute; z-index: -1; inset: -1.25rem -2rem -1.25rem -2.25rem;
  border-radius: 2rem; background: var(--surface-2);
  box-shadow: 0 0 2.5rem 2.5rem var(--surface-2);
  pointer-events: none;
}

/* The dial: two rings of ticks turning against each other round the sample
   report, and one short cobalt arc on the inner ring, the report's own gauge
   drawn large. It lives in the report's grid cell without being a grid item. */
.lpb-showcase { position: relative; }
.lpb-amb--dial { display: none; }
.lpb-dial {
  position: absolute; left: 50%; top: 50%; width: 60rem; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 99%);
  mask-image: radial-gradient(closest-side, #000 80%, transparent 99%);
}
.lpb-ring { position: absolute; inset: var(--in); border-radius: 50%; }
.lpb-ring--a {
  --in: 17%;
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--ink) 42%, transparent) 0 0.34deg, transparent 0.34deg 20deg),
    repeating-conic-gradient(color-mix(in srgb, var(--ink) 24%, transparent) 0 0.3deg, transparent 0.3deg 4deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  mask-image: radial-gradient(closest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
}
.lpb-ring--b {
  --in: 8%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--ink) 20%, transparent) 0 0.7deg, transparent 0.7deg 2deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask-image: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.lpb-ring--c {
  --in: 17%;
  background: conic-gradient(from 248deg, var(--primary) 0 22deg, transparent 22deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  mask-image: radial-gradient(closest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
}
@media (min-width: 992px) {
  .lpb-amb--dial { display: block; grid-column: 1 / 2; grid-row: 1 / 2; inset: 0; }
}

/* The hall: rows of seats curving round the catalogue's top right corner. */
.lpb-amb--hall { display: none; }
.lpb-amb--hall svg { display: block; width: 100%; height: 100%; }
@media (min-width: 992px) {
  .lpb-amb--hall {
    display: block; top: 0; right: 0; width: 640px; height: 520px; overflow: clip;
    color: color-mix(in srgb, var(--ink) 36%, transparent);
    -webkit-mask-image: radial-gradient(circle at 100% 0, #000 42%, transparent 84%);
    mask-image: radial-gradient(circle at 100% 0, #000 42%, transparent 84%);
  }
}

/* The echo: rings spreading from the bottom left corner under the heading that
   asks, each a hairline, each fainter than the one inside it. Round the same
   way the dial and the hall are, so the four drawings read as one hand. */
.lpb-amb--echo { display: none; }
@media (min-width: 992px) {
  .lpb-amb--echo {
    display: block; left: 0; bottom: 0; width: 46rem; height: 34rem; overflow: clip;
    -webkit-mask-image: radial-gradient(circle at 0 100%, #000 30%, transparent 78%);
    mask-image: radial-gradient(circle at 0 100%, #000 30%, transparent 78%);
  }
  .lpb-amb--echo b {
    position: absolute; left: 0; bottom: 0; width: var(--d); height: var(--d);
    margin: 0 0 calc(var(--d) / -2) calc(var(--d) / -2);
    border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 50%;
  }
  .lpb-amb--echo b:nth-child(1) { --d: 16rem; }
  .lpb-amb--echo b:nth-child(2) { --d: 30rem; }
  .lpb-amb--echo b:nth-child(3) { --d: 44rem; }
  .lpb-amb--echo b:nth-child(4) { --d: 58rem; }
  .lpb-amb--echo b:nth-child(5) { --d: 72rem; }
}

@keyframes lpbSeat {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  14%, 50% { opacity: 1; transform: scale(1); }
  64% { opacity: 0; transform: scale(0.4); }
}
@keyframes lpbTurn { to { transform: rotate(1turn); } }
@keyframes lpbEcho {
  0% { transform: scale(0.9); opacity: 0.25; }
  45% { opacity: 1; }
  100% { transform: scale(1.1); opacity: 0.25; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.pk-lite) .lpb-amb.is-live i { animation: lpbSeat var(--t, 14s) ease-in-out var(--d, 0s) infinite; }
  html:not(.pk-lite) .lpb-amb.is-live .lpb-ring--a { animation: lpbTurn 260s linear infinite; }
  html:not(.pk-lite) .lpb-amb.is-live .lpb-ring--b { animation: lpbTurn 380s linear infinite reverse; }
  html:not(.pk-lite) .lpb-amb.is-live .lpb-ring--c { animation: lpbTurn 150s linear infinite reverse; }
  html:not(.pk-lite) .lpb-amb--echo.is-live b { animation: lpbEcho 9s ease-in-out infinite alternate; }
  html:not(.pk-lite) .lpb-amb--echo.is-live b:nth-child(2) { animation-delay: -2.2s; }
  html:not(.pk-lite) .lpb-amb--echo.is-live b:nth-child(3) { animation-delay: -4.4s; }
  html:not(.pk-lite) .lpb-amb--echo.is-live b:nth-child(4) { animation-delay: -6.6s; }
  html:not(.pk-lite) .lpb-amb--echo.is-live b:nth-child(5) { animation-delay: -8.8s; }
}