/* ============================================================================
   site.css — the white-and-ink system. Every page outside the admin is built
   from it: white ground, near-black ink, one grey, hairlines, small engraved
   plates, slow reveals. No violet, no round pills, no arrows after a label.

   A page opts in with  {% block body_class %} z2h-ink{% endblock %}  and puts
   its content inside  <div class="lp">  (the name is historical: the system
   began on the landing page). Every rule is written ".lp .x" so the older
   stylesheets cannot reach in. Since 2026-10-12 only the admin panel loads
   those stylesheets at all (base.html).

   Order: page · tokens and base · type · buttons · links · layout · page head ·
   detail top · blocks · facts and lists · cards · rows · tools and filters ·
   forms · notices · purchase box · player · steps · accordion · tabs · dialog ·
   empty state · reveals · tablets · phones · reduced motion.

   Page-specific pieces live beside it: landing.css (home), catalog.css,
   account.css, student.css, play.css.
   ========================================================================== */
body.z2h-ink { margin: 0; min-height: 100vh; background: #fff; color: #0b0a14; font-family: "Plus Jakarta Sans", system-ui, sans-serif; line-height: 1.6; }
body.z2h-ink #main { padding: 0 !important; background: #fff; }

.lp {
  --ground: #ffffff;
  --tint: #f7f6f3;
  --ink: #0b0a14;
  --muted: #6b6680;
  --line: rgba(11, 10, 20, 0.1);
  --line-2: rgba(11, 10, 20, 0.24);
  --bad: #b42318;
  --ok: #17663a;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1240px;
  --radius: 8px;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "Plus Jakarta Sans", system-ui, sans-serif;
  --bar: var(--z2h-nav-h, 80px);

  counter-reset: lp-section;
  background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: 1rem; line-height: 1.6;
  overflow-x: clip;
}
.lp .lp-wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.lp .lp-wrap--mid { --maxw: 980px; }
.lp .lp-wrap--narrow { --maxw: 720px; }
body .lp a { color: inherit; text-decoration: none; }
.lp img { display: block; max-width: 100%; }
.lp h1, .lp h2, .lp h3, .lp h4, .lp p, .lp ul, .lp ol, .lp dl, .lp dd, .lp figure { margin: 0; padding: 0; }
.lp ul, .lp ol { list-style: none; }
body .lp h1, body .lp h2, body .lp h3, body .lp h4 { color: inherit; font-family: inherit; }
.lp :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.lp [hidden] { display: none !important; }

/* ── type ── */
.lp .lp-kicker {
  font: 500 0.72rem/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.lp .lp-kicker--n::before { content: counter(lp-section, decimal-leading-zero) " · "; }
.lp .lp-h1 {
  margin-top: 0.9rem; font: 600 clamp(2.1rem, 4.4vw, 3.5rem)/1.03 var(--display);
  letter-spacing: -0.035em; color: var(--ink); text-wrap: balance;
}
.lp .lp-title {
  margin-top: 0.9rem; font: 600 clamp(1.9rem, 3.3vw, 2.85rem)/1.06 var(--display);
  letter-spacing: -0.03em; color: var(--ink); text-wrap: balance;
}
.lp .lp-title em, .lp .lp-h1 em { font-style: normal; color: var(--muted); }
.lp .lp-h2 { margin-top: 0.7rem; font: 600 clamp(1.35rem, 2.1vw, 1.7rem)/1.15 var(--display); letter-spacing: -0.022em; text-wrap: balance; }
.lp .lp-h3 { font: 600 1.08rem/1.25 var(--display); letter-spacing: -0.015em; }
.lp .lp-lead { margin-top: 1rem; max-width: 56ch; font-size: clamp(1rem, 1.25vw, 1.08rem); line-height: 1.6; color: var(--muted); }
.lp .lp-muted { color: var(--muted); }
.lp .lp-small { font-size: 0.88rem; }
.lp .lp-num { font-variant-numeric: tabular-nums; }
.lp .lp-prose { max-width: 66ch; font-size: 1.02rem; line-height: 1.72; }
.lp .lp-prose > * + * { margin-top: 1em; }
.lp .lp-prose h2, .lp .lp-prose h3 { margin-top: 1.8em; font: 600 1.2rem/1.25 var(--display); letter-spacing: -0.015em; }
.lp .lp-prose ul { display: grid; gap: 0.45em; padding-left: 1.1rem; list-style: disc; }
.lp .lp-prose ol { display: grid; gap: 0.45em; padding-left: 1.3rem; list-style: decimal; }
body .lp .lp-prose a, body .lp .lp-a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* the line under a label that is small-caps data, joined by middots */
.lp .lp-meta { font: 500 0.68rem/1.5 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lp .lp-meta > *:not(:last-child)::after { content: "·"; margin: 0 0.5rem; }

/* ── buttons: ink that turns to paper, or a line that firms up. Quick, and never a jump. ── */
.lp .lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 50px; padding: 0 1.5rem; border: 1px solid var(--ink); border-radius: var(--radius);
  font: 600 0.98rem/1 var(--display); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease, opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lp .lp-btn i { font-size: 0.78em; }
body .lp .lp-btn--ink { background: var(--ink); color: #fff; }
body .lp .lp-btn--line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.lp .lp-btn--block { display: flex; width: 100%; }
.lp .lp-btn--sm { min-height: 42px; padding: 0 1rem; font-size: 0.88rem; }
.lp .lp-btn--wrap { white-space: normal; text-align: center; line-height: 1.25; padding-block: 0.8rem; }
.lp .lp-btn:active { transform: translateY(1px); }
.lp .lp-btn:focus-visible { border-radius: var(--radius); }
.lp .lp-btn:disabled, .lp .lp-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  body .lp .lp-btn--ink:not(:disabled):hover { background: #fff; color: var(--ink); }
  body .lp .lp-btn--line:not(:disabled):hover { border-color: var(--ink); background: rgba(11, 10, 20, 0.04); }
}

/* ── the text link: a hairline draws itself under the words (in from the left, out to the right) ── */
.lp .lp-link {
  position: relative; display: inline-block; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 0.92rem/1.3 var(--display); letter-spacing: -0.005em; color: var(--ink);
}
.lp .lp-link::before { content: ""; position: absolute; inset: -13px -8px; }
.lp .lp-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: left; transition: transform 0.9s var(--ease-out);
}
.lp .lp-link--muted { color: var(--muted); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .lp .lp-link::after { transform: scaleX(0); transform-origin: right; }
  .lp .lp-link:hover::after,
  .lp a:hover .lp-link::after,
  .lp .lp-link:focus-visible::after,
  .lp a:focus-visible .lp-link::after { transform: scaleX(1); transform-origin: left; }
  .lp .lp-link--muted:hover { color: var(--ink); }
}

/* ============================================================ LAYOUT */
.lp .lp-section { padding-block: clamp(4rem, 9vw, 7.5rem); counter-increment: lp-section; }
.lp .lp-section--tint { background: var(--tint); }
.lp .lp-section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.lp .lp-section + .lp-section:not(.lp-section--tint) { border-top: 1px solid var(--line); }
.lp .lp-section--tint + .lp-section { border-top: 0; }
/* the last thing on a page keeps clear of the footer */
.lp .lp-end { padding-bottom: clamp(4rem, 9vw, 7rem); }

/* Section head (home): a small plate, the words, and at the far end a way to see all of it. */
.lp .lp-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end;
  gap: clamp(1.25rem, 3vw, 2.5rem); margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem);
}
.lp .lp-head__plate { width: clamp(76px, 8.4vw, 116px); height: auto; align-self: center; }
.lp .lp-head__more { margin-bottom: 0.4rem; white-space: nowrap; }

/* ============================================================ PAGE HEAD
   What opens a list page: where you are, what this is, one line of why. The plate sits at the far
   end, as the film does on the home. */
.lp .lp-pagehead { padding-block: clamp(2.5rem, 6vw, 4.75rem) clamp(1.75rem, 3.5vw, 2.75rem); }
.lp .lp-pagehead__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(1.25rem, 4vw, 3.5rem); }
.lp .lp-pagehead__plate { width: clamp(104px, 12vw, 168px); height: auto; }
.lp .lp-pagehead__side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.5rem; margin-top: 1.6rem; }

.lp .lp-crumbs { display: flex; flex-wrap: wrap; gap: 0.3rem 0.55rem; font: 500 0.7rem/1.5 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .lp-crumbs li + li::before { content: "/"; margin-right: 0.55rem; color: var(--line-2); }
.lp .lp-crumbs [aria-current] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .lp .lp-crumbs a:hover { color: var(--ink); } }

/* ============================================================ DETAIL TOP
   What opens a programme page: the words on one side, its cover or video on the other. */
.lp .lp-top { padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(2.25rem, 5vw, 3.75rem); }
.lp .lp-top__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: center;
  gap: clamp(1.5rem, 4.5vw, 4rem); margin-top: clamp(1.25rem, 3vw, 2.25rem);
}
.lp .lp-top__grid--solo { grid-template-columns: minmax(0, 1fr); }
/* no cover and no video: the section's plate stands at the far end, as on a list page */
.lp .lp-top__grid--plate { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.lp .lp-top__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.5rem; margin-top: clamp(1.4rem, 3vw, 2rem); }
.lp .lp-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--tint); }
.lp .lp-cover img { width: 100%; height: 100%; object-fit: cover; }
.lp .lp-cover__glyph { position: absolute; inset: 0; display: grid; place-items: center; font: 600 4rem var(--display); color: var(--line-2); }

/* Main column and, beside it, what you act on. The aside comes first in the document so that on a
   phone the price sits right under the top of the page. */
.lp .lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 384px); grid-template-areas: "main aside"; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.lp .lp-split__main { grid-area: main; min-width: 0; }
.lp .lp-split__aside { grid-area: aside; position: sticky; top: calc(var(--bar) + 1.5rem); display: grid; gap: 1rem; }

/* ============================================================ BLOCKS
   The sections of a long page: a numbered kicker, a title, the matter. */
.lp .lp-block { padding-block: clamp(2rem, 4.5vw, 3.25rem); border-top: 1px solid var(--line); counter-increment: lp-section; }
.lp .lp-block:first-child { padding-top: 0; border-top: 0; }
.lp .lp-block--plain { counter-increment: none; }
.lp .lp-block__head { margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem); }

/* ============================================================ FACTS AND LISTS */
.lp .lp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1.1rem clamp(1.25rem, 3vw, 2.25rem); padding-block: 1.2rem; border-block: 1px solid var(--line); }
.lp .lp-facts dt { font: 500 0.66rem/1.3 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .lp-facts dd { margin-top: 0.3rem; font: 600 0.98rem/1.3 var(--display); letter-spacing: -0.01em; }
.lp .lp-facts--bare { padding-block: 0; border: 0; }
.lp .lp-facts--big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp .lp-facts--big dd { font-size: 1.5rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.lp .lp-specs { border-top: 1px solid var(--line); }
.lp .lp-specs > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.lp .lp-specs dt { font: 500 0.66rem/1.4 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .lp-specs dd { font-size: 0.98rem; }

.lp .lp-checks { display: grid; gap: 0.6rem; font-size: 0.95rem; }
.lp .lp-checks li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; }
.lp .lp-checks li::before { content: ""; width: 5px; height: 10px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(42deg) translate(-1px, -1px); justify-self: center; }

/* a plain list in hairlines, two columns when there is room */
.lp .lp-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.lp .lp-lines li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.lp .lp-lines--one { grid-template-columns: 1fr; }

.lp .lp-person { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.lp .lp-person__photo { width: 72px; height: 72px; border-radius: var(--radius); object-fit: cover; border: 1px solid var(--line); background: var(--tint); display: grid; place-items: center; font: 600 1.5rem var(--display); color: var(--line-2); }
.lp .lp-person__role { margin-top: 0.2rem; font: 500 0.66rem/1.4 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .lp-person__bio { margin-top: 0.55rem; color: var(--muted); font-size: 0.95rem; }
.lp .lp-people { display: grid; gap: 1.5rem; }

/* ============================================================ CARDS
   A cover, one line of what it is, the title, and what a reader compares on. */
.lp .lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.6vw, 3rem) clamp(1.25rem, 2.4vw, 2rem); }
body .lp .lp-card { display: flex; flex-direction: column; color: var(--ink); }
.lp .lp-card[hidden], .lp .lp-card.is-hidden { display: none; }
.lp .lp-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--tint); }
.lp .lp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.lp .lp-card__glyph { position: absolute; inset: 0; display: grid; place-items: center; font: 600 3rem var(--display); color: var(--line-2); }
.lp .lp-card__meta { margin-top: 1rem; }
.lp .lp-card__title { margin-top: 0.4rem; font: 600 1.22rem/1.25 var(--display); letter-spacing: -0.015em; text-wrap: balance; }
.lp .lp-card__text { margin-top: 0.45rem; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
.lp .lp-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 0.9rem; font-size: 0.9rem; color: var(--muted); }
.lp .lp-card__price { font: 600 1rem/1.2 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .lp .lp-card:hover .lp-card__media img { transform: scale(1.035); }
}

/* ============================================================ ROWS
   A list where each line is a programme: its number, what it is, and to the side its figures. */
.lp .lp-rows { border-top: 1px solid var(--line); }
body .lp .lp-row {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 2.8vw, 2rem) 0; border-bottom: 1px solid var(--line); color: var(--ink);
}
body .lp .lp-row--plain { grid-template-columns: minmax(0, 1fr) auto; }
.lp .lp-row__n { font: 500 0.95rem var(--display); color: var(--line-2); font-variant-numeric: tabular-nums; transition: color 0.5s var(--ease-out); }
.lp .lp-row__chips { font: 500 0.68rem/1.3 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.lp .lp-row__chips span:not(:last-child)::after { content: "·"; margin: 0 0.5rem; }
.lp .lp-row__title { display: block; margin-top: 0.45rem; font: 600 clamp(1.2rem, 2.3vw, 1.6rem)/1.2 var(--display); letter-spacing: -0.02em; }
.lp .lp-row__title .lp-link { font: inherit; letter-spacing: inherit; }
.lp .lp-row__tag { display: block; margin-top: 0.35rem; max-width: 56ch; font-size: 0.95rem; color: var(--muted); }
.lp .lp-row__stats { display: flex; gap: clamp(1.1rem, 2.4vw, 2rem); }
.lp .lp-row__stats span { display: grid; gap: 0.2rem; font: 500 0.66rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .lp-row__stats b { font: 600 1.4rem/1 var(--display); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp .lp-row__side { display: grid; gap: 0.3rem; justify-items: end; text-align: right; }
.lp .lp-row__price { font: 600 1.25rem/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .lp .lp-row:hover .lp-row__n { color: var(--ink); }
}

/* ============================================================ TOOLS AND FILTERS */
.lp .lp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding-block: 1rem; border-block: 1px solid var(--line); }
.lp .lp-search { position: relative; flex: 1 1 260px; min-width: 0; }
.lp .lp-search i { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); font-size: 0.85rem; color: var(--muted); pointer-events: none; }
.lp .lp-search .lp-input { padding-left: 2.5rem; }
.lp .lp-tools .lp-select { width: auto; flex: 0 1 auto; }
.lp .lp-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lp .lp-filter {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.95rem;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink);
  font: 500 0.88rem/1 var(--display); cursor: pointer; white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.lp .lp-filter small { font-size: 0.78em; color: var(--muted); font-variant-numeric: tabular-nums; transition: color 0.25s ease; }
.lp .lp-filter.is-active, .lp .lp-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.lp .lp-filter.is-active small, .lp .lp-filter[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.7); }
@media (hover: hover) and (pointer: fine) {
  .lp .lp-filter:not(.is-active):not([aria-pressed="true"]):hover { border-color: var(--ink); }
}
.lp .lp-count { font-size: 0.88rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================ FORMS */
.lp .lp-form { display: grid; gap: 1.15rem; }
.lp .lp-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1rem; }
.lp .lp-field { display: grid; gap: 0.45rem; align-content: start; }
.lp .lp-label { font: 500 0.84rem/1.3 var(--display); color: var(--ink); }
.lp .lp-label small { font: inherit; color: var(--muted); }
.lp .lp-input, .lp .lp-select, .lp .lp-textarea {
  width: 100%; min-height: 50px; padding: 0.7rem 0.95rem; border: 1px solid var(--line-2); border-radius: var(--radius);
  background-color: #fff; color: var(--ink); font: 400 1rem/1.4 var(--body); box-shadow: none;
  -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lp .lp-textarea { min-height: 132px; resize: vertical; }
.lp .lp-input::placeholder, .lp .lp-textarea::placeholder { color: #9a96a8; opacity: 1; }
.lp .lp-select {
  padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%230b0a14' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center;
}
.lp .lp-input:focus, .lp .lp-select:focus, .lp .lp-textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lp .lp-input:disabled, .lp .lp-input[readonly] { background-color: var(--tint); color: var(--muted); }
.lp .lp-help { font-size: 0.84rem; line-height: 1.45; color: var(--muted); }
.lp .lp-field.is-error .lp-input, .lp .lp-field.is-error .lp-select, .lp .lp-field.is-error .lp-textarea,
.lp .lp-input[aria-invalid="true"], .lp .lp-select[aria-invalid="true"], .lp .lp-textarea[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.lp .lp-error { font-size: 0.86rem; line-height: 1.45; color: var(--bad); }
.lp .lp-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 0.7rem; align-items: start; font-size: 0.92rem; cursor: pointer; }
.lp .lp-check input { width: 20px; height: 20px; margin: 0.15rem 0 0; accent-color: var(--ink); cursor: pointer; }
/* a field with its button on the same line (a code, an e-mail) */
.lp .lp-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; }
/* the eye beside a password */
.lp .lp-reveal { position: relative; }
.lp .lp-reveal .lp-input { padding-right: 5.4rem; }
.lp .lp-reveal__btn { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); min-height: 40px; padding: 0 0.7rem; border: 0; background: none; cursor: pointer; font: 500 0.82rem var(--display); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .lp .lp-reveal__btn:hover { color: var(--ink); } }

/* ============================================================ NOTICES */
.lp .lp-notice { padding: 0.9rem 1.1rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--tint); font-size: 0.95rem; line-height: 1.5; }
.lp .lp-notice strong { font-weight: 600; }
.lp .lp-notice--error { border-color: var(--bad); background: #fff; color: var(--bad); }
.lp .lp-notice--ok { border-color: var(--ok); background: #fff; color: var(--ok); }
.lp .lp-status { font-size: 0.9rem; color: var(--muted); min-height: 1.4em; }
.lp .lp-status.is-error { color: var(--bad); }
.lp .lp-status.is-ok { color: var(--ok); }

/* ============================================================ PURCHASE BOX */
/* the box answers to a button at the top of the page: it stops clear of the sticky bar */
.lp .lp-buy { padding: clamp(1.3rem, 2.4vw, 1.75rem); border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; scroll-margin-top: calc(var(--bar) + 1.25rem); }
.lp .lp-buy__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.7rem; margin-top: 0.7rem; font: 600 clamp(1.9rem, 3vw, 2.35rem)/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lp .lp-buy__price small { font: 500 0.88rem var(--body); letter-spacing: 0; color: var(--muted); }
.lp .lp-buy__ask { margin-top: 0.7rem; font: 600 1.3rem/1.2 var(--display); letter-spacing: -0.02em; }
.lp .lp-buy__note { margin-top: 0.55rem; font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.lp .lp-buy__act { margin-top: 1.25rem; }
.lp .lp-buy__panel { display: grid; gap: 0.6rem; margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.lp .lp-buy__sep { margin: 0.35rem 0 0; font: 500 0.66rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .lp-buy__bank { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; padding: 0 0.15rem; font-size: 0.84rem; color: var(--muted); }
.lp .lp-buy__bank code { font: 500 0.84rem "JetBrains Mono", ui-monospace, monospace; color: var(--ink); background: none; padding: 0; }
.lp .lp-buy__list { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.lp .lp-buy__trust { margin-top: 1rem; font-size: 0.8rem; color: var(--muted); }
.lp .lp-buy__sign { position: relative; width: 11px; height: 11px; }
.lp .lp-buy__sign::before, .lp .lp-buy__sign::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: currentColor; transition: transform 0.42s var(--ease); }
.lp .lp-buy__sign::after { transform: rotate(90deg); }
.lp [aria-expanded="true"] > .lp-buy__sign::after { transform: rotate(0deg); }
/* open, the toggle is only the heading of what it opened: the ink passes to the way to pay */
body .lp .lp-buy [data-payment-toggle][aria-expanded="true"] { background: transparent; color: var(--ink); border-color: var(--line-2); }

/* the promotional code: a field, its button, and the sum once it is applied */
.lp .lp-code__feedback { font-size: 0.86rem; line-height: 1.45; }
.lp .lp-code__feedback--error { color: var(--bad); }
.lp .lp-code__feedback--ok { color: var(--ok); }
.lp .lp-code__feedback a { text-decoration: underline; text-underline-offset: 3px; }
.lp .lp-code__sum { display: grid; gap: 0.35rem; padding: 0.85rem 1rem; border-radius: var(--radius); background: var(--tint); font-size: 0.9rem; }
.lp .lp-code__sum > div { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.lp .lp-code__sum strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp .lp-code__sum .is-total { padding-top: 0.45rem; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.lp .lp-code__name { font: 500 0.66rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* On phones the price follows the reader along the bottom edge once the box itself is out of sight. */
.lp .lp-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line);
  transition: transform 0.42s var(--ease);
}
.lp .lp-buybar.is-hidden { transform: translateY(110%); }
.lp .lp-buybar__price { display: grid; gap: 0.1rem; min-width: 0; }
.lp .lp-buybar__price small { font: 500 0.62rem var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lp .lp-buybar__price strong { font: 600 1.05rem/1.2 var(--display); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================ PLAYER
   A poster and a white disc; the video is only fetched when it is pressed. */
.lp .lp-player__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--ink); }
.lp [data-lp-player] { cursor: pointer; }
.lp .lp-player__poster, .lp .lp-player__frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), opacity 0.4s ease; }
.lp .lp-player__iframe, .lp .lp-player__frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lp .lp-player__play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: var(--ink);
  font-size: 1.1rem; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(11, 10, 20, 0.55);
  transition: transform 0.5s var(--ease), background-color 0.25s ease, color 0.25s ease;
}
.lp .lp-player__play i { margin-left: 3px; }
.lp .lp-player__play--sm { width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 0.85rem; }
.lp .lp-player__frame.is-playing .lp-player__poster,
.lp .lp-player__frame.is-playing > img,
.lp .lp-player__frame.is-playing .lp-player__play,
.lp .lp-player__frame.is-playing .lp-player__tag { opacity: 0; pointer-events: none; }
.lp .lp-player__tag { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.3rem 0.55rem; border-radius: 5px; background: rgba(11, 10, 20, 0.78); color: #fff; font: 500 0.72rem/1.2 var(--display); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .lp .lp-player__frame:hover .lp-player__poster, .lp .lp-player__frame:hover > img { transform: scale(1.02); }
  .lp .lp-player__play:hover, .lp [data-lp-player]:hover .lp-player__play { transform: scale(1.06); background: var(--ink); color: #fff; }
}

/* ============================================================ STEPS */
.lp .lp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.lp .lp-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lp .lp-step { position: relative; padding-top: 1.2rem; }
/* each step's line draws itself, one after the other */
.lp .lp-step::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink);
  transform-origin: left; transition: transform 0.76s var(--ease-out); transition-delay: calc(var(--d, 0) * 220ms + 150ms);
}
.lp.lp-js .lp-step[data-reveal]:not(.is-in)::before { transform: scaleX(0); }
.lp .lp-step__n { font: 500 0.72rem var(--display); letter-spacing: 0.16em; color: var(--muted); }
.lp .lp-step__title { display: block; margin-top: 0.7rem; font: 600 1.08rem/1.25 var(--display); letter-spacing: -0.015em; }
.lp .lp-step__text { display: block; margin-top: 0.35rem; font-size: 0.93rem; line-height: 1.55; color: var(--muted); }

/* ============================================================ ACCORDION
   A line that opens. The plus becomes a minus; the matter unfolds under it. */
.lp .lp-acc { border-top: 1px solid var(--line); }
.lp .lp-acc__item { border-bottom: 1px solid var(--line); }
.lp .lp-acc__btn {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: 100%; min-height: 64px; padding: 0.9rem 0;
  border: 0; background: none; text-align: left; color: var(--ink); cursor: pointer; font-family: var(--body);
}
.lp .lp-acc__n { font: 500 0.72rem var(--display); letter-spacing: 0.14em; color: var(--muted); font-variant-numeric: tabular-nums; }
.lp .lp-acc__title { font: 600 1.05rem/1.3 var(--display); letter-spacing: -0.015em; }
.lp .lp-acc__sub { display: block; margin-top: 0.15rem; font: 400 0.86rem/1.4 var(--body); letter-spacing: 0; color: var(--muted); }
.lp .lp-acc__sign { position: relative; width: 13px; height: 13px; }
.lp .lp-acc__sign::before, .lp .lp-acc__sign::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--ink); transition: transform 0.52s var(--ease); }
.lp .lp-acc__sign::after { transform: rotate(90deg); }
.lp .lp-acc__item.is-open .lp-acc__sign::after { transform: rotate(0deg); }
.lp .lp-acc__panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.52s var(--ease), visibility 0s linear 0.52s; }
.lp .lp-acc__item.is-open .lp-acc__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.76s var(--ease), visibility 0s; }
.lp .lp-acc__inner { min-height: 0; overflow: hidden; }
.lp .lp-acc__body { padding: 0.2rem 0 1.4rem; color: var(--muted); font-size: 0.96rem; }

/* ============================================================ TABS */
.lp .lp-tabs { display: flex; gap: clamp(1.1rem, 3vw, 2rem); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.lp .lp-tabs::-webkit-scrollbar { display: none; }
body .lp .lp-tab { position: relative; min-height: 48px; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap; font: 600 0.95rem var(--display); letter-spacing: -0.005em; color: var(--muted); transition: color 0.25s ease; }
.lp .lp-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease-out); }
body .lp .lp-tab.is-active, body .lp .lp-tab[aria-selected="true"], body .lp .lp-tab[aria-current="page"] { color: var(--ink); }
.lp .lp-tab.is-active::after, .lp .lp-tab[aria-selected="true"]::after, .lp .lp-tab[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { body .lp .lp-tab:hover { color: var(--ink); } }

/* ============================================================ DIALOG */
.lp .lp-dialog {
  position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: var(--gutter);
  background: rgba(11, 10, 20, 0.46); opacity: 0; visibility: hidden; transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}
.lp .lp-dialog.is-open { opacity: 1; visibility: visible; transition: opacity 0.42s var(--ease), visibility 0s; }
.lp .lp-dialog__box {
  position: relative; width: min(100%, 560px); max-height: calc(100vh - 2 * var(--gutter)); max-height: calc(100svh - 2 * var(--gutter)); overflow: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem); border-radius: var(--radius); background: #fff; color: var(--ink);
  transform: translateY(14px); transition: transform 0.42s var(--ease);
}
.lp .lp-dialog__box--wide { width: min(100%, 980px); }
.lp .lp-dialog.is-open .lp-dialog__box { transform: none; }
.lp .lp-dialog__close { position: absolute; right: 0.6rem; top: 0.6rem; min-width: 44px; min-height: 44px; border: 0; background: none; cursor: pointer; font: 500 0.82rem var(--display); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .lp .lp-dialog__close:hover { color: var(--ink); } }

/* ============================================================ EMPTY STATE */
.lp .lp-empty { padding: clamp(2.25rem, 6vw, 4rem) 0; border-block: 1px solid var(--line); }
.lp .lp-empty__title { font: 600 1.35rem/1.2 var(--display); letter-spacing: -0.02em; }
.lp .lp-empty__text { margin-top: 0.5rem; max-width: 52ch; color: var(--muted); }
.lp .lp-empty__act { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.5rem; margin-top: 1.4rem; }

/* ============================================================ REVEALS
   Things arrive once, slowly, a beat apart. Without the script everything is simply there. */
.lp.lp-js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 110ms);
}
.lp.lp-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================ TABLETS */
@media (max-width: 1100px) {
  .lp .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================ PHONES AND SMALL TABLETS */
@media (max-width: 991.98px) {
  .lp .lp-steps, .lp .lp-steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .lp .lp-top__grid { grid-template-columns: 1fr; }
  .lp .lp-top__plate { display: none; }
  .lp .lp-top__visual { order: -1; }
  .lp .lp-split { grid-template-columns: 1fr; grid-template-areas: "aside" "main"; }
  .lp .lp-split__aside { position: static; }
  /* the box with the same action follows the top at once: one primary button per screen */
  .lp .lp-top__ctas [data-buy-scroll] { display: none; }
  .lp .lp-buybar { display: flex; }
  .lp .lp-has-buybar { padding-bottom: 5.5rem; }
}

@media (max-width: 700px) {
  .lp .lp-head { grid-template-columns: 1fr; align-items: start; gap: 1.1rem; }
  .lp .lp-head__plate { width: 68px; align-self: start; }
  .lp .lp-head__more { justify-self: start; margin: 0.25rem 0 0; }
  .lp .lp-pagehead__grid { grid-template-columns: 1fr; align-items: start; gap: 1.1rem; }
  .lp .lp-pagehead__plate { width: 72px; order: -1; }

  body .lp .lp-row, body .lp .lp-row--plain { grid-template-columns: 1fr; gap: 1.1rem; }
  .lp .lp-row__n { display: none; }
  .lp .lp-row__stats { justify-content: space-between; max-width: 22rem; }
  .lp .lp-row__side { justify-items: start; text-align: left; }
  .lp .lp-steps, .lp .lp-steps--3 { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .lp .lp-cards { grid-template-columns: 1fr; }
  .lp .lp-lines { grid-template-columns: 1fr; }
  .lp .lp-form__row { grid-template-columns: 1fr; }
  .lp .lp-specs > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .lp .lp-tools .lp-select { flex: 1 1 140px; }
  /* filters: one row to swipe, so a long list of topics does not push the results down */
  .lp .lp-filters--swipe { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lp .lp-filters--swipe::-webkit-scrollbar { display: none; }
}

@media (max-width: 560px) {
  .lp .lp-top__ctas .lp-btn, .lp .lp-empty__act .lp-btn { width: 100%; }
  .lp .lp-player__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .lp .lp-dialog { padding: 0.75rem; }
  .lp .lp-person { grid-template-columns: 56px minmax(0, 1fr); }
  .lp .lp-person__photo { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp.lp-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .lp.lp-js .lp-step[data-reveal]:not(.is-in)::before { transform: none; }
  .lp .lp-link::after, .lp .lp-card__media img, .lp .lp-player__poster, .lp .lp-player__frame > img, .lp .lp-player__play,
  .lp .lp-step::before, .lp .lp-acc__panel, .lp .lp-acc__sign::before, .lp .lp-acc__sign::after, .lp .lp-tab::after,
  .lp .lp-dialog, .lp .lp-dialog__box, .lp .lp-buybar { transition: none; }
}