/* Tessera landing — "Zie het werken" (echte opnames), prijzen en de login-link onder de slot-CTA. */

/* ============ Zie het werken ============ */
.demo{display:grid;grid-template-columns:minmax(260px,1fr) 2.2fr;gap:40px;margin-top:64px;align-items:start}
.demo__chapters{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.chapter{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:36px 1fr;gap:6px 12px;
  padding:20px 22px 18px;border:1px solid transparent;border-radius:var(--radius-lg);position:relative;overflow:hidden;
  color:var(--muted);transition:color 200ms var(--ease),background-color 200ms var(--ease),border-color 200ms var(--ease)}
.chapter:hover{color:var(--fg);background:color-mix(in srgb,var(--card) 60%,transparent)}
.chapter[aria-pressed="true"]{color:var(--fg);background:var(--card);border-color:var(--line);box-shadow:var(--shadow-sm)}
.chapter:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.chapter__n{font-family:var(--font-mono);font-size:12px;line-height:2.1;letter-spacing:.08em}
.chapter__body{display:flex;flex-direction:column;gap:8px}
.chapter__title{font-weight:600;font-size:18px;line-height:1.3}
.chapter__text{font-size:15px;line-height:1.6;color:var(--muted);max-height:0;overflow:hidden;opacity:0;
  transition:max-height .5s ease,opacity .5s ease}
.chapter[aria-pressed="true"] .chapter__text{max-height:120px;opacity:1}
.chapter__bar{position:absolute;left:22px;right:22px;bottom:10px;height:2px;border-radius:2px;background:transparent}
.chapter[aria-pressed="true"] .chapter__bar{background:var(--line)}
.chapter__bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--color-primary)}
.demo__player{position:relative;padding:7px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.demo__player video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-sm);background:#0A0A0A}

/* ============ Prijzen ============ */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:64px;align-items:stretch}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  padding:32px;display:flex;flex-direction:column;gap:18px;min-height:360px}
.plan--featured{background:var(--dark-bg);color:var(--fg);border-color:var(--dark-bg);box-shadow:var(--shadow-lg)} /* + .is-dark in de JS */
.plan--quiet{background:var(--color-accent);box-shadow:none}
.plan__name{margin:0;font-weight:600;font-size:19px;line-height:1.2}
.plan__price{display:flex;align-items:baseline;gap:8px}
.plan__eur{font-family:var(--font-display);font-size:60px;line-height:1;letter-spacing:-.01em}
.plan__per{font-size:14px;color:var(--muted)}
.plan__lead{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.plan__list{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;
  font-size:15px;line-height:1.5;flex:1}
.plan__list li{padding-left:26px;position:relative}
.plan__list li::before{content:"";position:absolute;left:3px;top:.42em;width:5px;height:10px;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);opacity:.75}
.plan .pill{align-self:stretch}
.plans__note{margin:20px 0 0;font-size:13px;color:var(--muted)}

/* ============ Slot-CTA: login ============ */
.finalcta__login{margin-top:20px;font-size:14px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px}
.finalcta__login:hover{color:var(--fg);border-color:var(--fg)}

@media (max-width:900px){
  .demo{grid-template-columns:1fr;gap:20px;margin-top:40px}
  .demo__player{order:-1}
  .chapter{padding:16px 18px 16px}
  .chapter__bar{left:18px;right:18px;bottom:8px}
  .plan{min-height:0;padding:26px 22px}
  .plan__eur{font-size:50px}
}
@media (prefers-reduced-motion:reduce){
  .chapter__text{transition:none}
}