/* learn.drband.com additions over codex.css. Member-side classes are prefixed .m (the codex rule). */
.mframe{position:relative;aspect-ratio:16/9;background:#0E0E0C;border-radius:var(--r);overflow:hidden}
.mframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mframe.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mframe.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,12,0) 55%,rgba(14,14,12,.55))}
.mlicence{position:absolute;right:.8rem;bottom:.8rem;z-index:2;pointer-events:none;font-family:var(--ff-sans);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,239,232,.6);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.mplayer{position:relative}
.mplayer:fullscreen{background:#0E0E0C;display:flex;align-items:center;justify-content:center}
.mplayer:fullscreen .mframe{width:100%;max-height:100vh;aspect-ratio:16/9;border-radius:0}
.mplayer:fullscreen .mchapters,.mplayer:fullscreen .mtools{display:none}
.mtools{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:.8rem}
.mtools .small{margin:0}
.mchapters{margin:1.2rem 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem}
.mchapters button{width:100%;text-align:left;background:var(--paper);border:1px solid var(--ink-14);border-radius:var(--r);padding:.7rem .9rem;font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink)}
.mchapters button:hover{border-color:var(--plum)}
.mchapters button .t{display:block;font-family:var(--ff-sans);font-size:.68rem;letter-spacing:.14em;color:var(--smoke);text-transform:uppercase;margin-bottom:.2rem}
.mstate{margin-top:1rem}
.film-card{display:flex;flex-direction:column;gap:.9rem}
.film-card .mframe{aspect-ratio:16/10}
.film-card h3{margin-top:0}
.price{font-family:var(--ff-display);font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;letter-spacing:-.01em}
.price small{font-family:var(--ff-sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke);margin-left:.6rem}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:1.6rem}
.form{display:grid;gap:.7rem;margin-top:1rem}
.form input[type=email],.form input[type=text]{width:100%;padding:.8rem .9rem;border:1.5px solid var(--ink-22);border-radius:var(--r);background:#fff;font:inherit;font-size:1rem;color:var(--ink)}
.form input:focus{outline:2px solid var(--plum);outline-offset:1px;border-color:var(--plum)}
.err{color:var(--oxblood);font-size:.9rem}
.ok-msg{color:var(--plum);font-size:.95rem}
.steps{counter-reset:s}
.steps .card{position:relative;padding-top:1.4rem}
.steps .card::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:1rem;right:1.2rem;font-family:var(--ff-display);font-size:1.4rem;color:var(--ghost)}
.credit-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.15rem;letter-spacing:.08em;background:var(--bone-2);border:1px solid var(--ink-14);padding:.35rem .6rem;border-radius:var(--r);display:inline-block}
.credit-code.used{text-decoration:line-through;color:var(--smoke)}
#acct{display:flex;gap:.6rem;align-items:center}
#acct .who{font-size:.8rem;color:var(--smoke);max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#acct button{background:none;border:0;padding:0;font:inherit;font-size:.9rem;cursor:pointer;color:var(--plum);text-decoration:underline;text-underline-offset:.18em}
.hero .figure .mframe{aspect-ratio:7/9}
@media (max-width:900px){#acct{margin-left:0}}