.trial-page [hidden] { display: none; }
.trial-main { padding-block: 28px; }
.trial-card { max-width: 488px; width: 100%; }
.trial-card h1 { font-size: clamp(32px, 5vw, 45px); }
.trial-card .intro { margin-top: 13px; }
.trial-caption { margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; text-align: center; }
.subscribe-button { display: grid; place-items: center; text-decoration: none; }
.trial-page[data-state="active"] .backdrop { opacity: .4; }
.trial-page[data-state="active"] .trial-main { place-items: start center; }
.watch-room { width: min(100%, 1380px); min-width: 0; }
.watch-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.watch-header h1 { margin: 8px 0 0; font-size: clamp(23px, 4vw, 34px); }
.countdown { display: grid; gap: 4px; text-align: right; flex: none; padding: 9px 14px; background: #14223e; border: 1px solid #8aa7f05c; border-radius: 10px; }
.countdown span { font-size: 11px; color: var(--muted); }
.countdown strong { font-size: 21px; font-variant-numeric: tabular-nums; }
.watch-frame { border: 1px solid #8aa7f05c; overflow: hidden; border-radius: 14px; background: #080d1a; }
.watch-frame iframe { display: block; width: 100%; height: max(460px, calc(100svh - 245px)); border: 0; }
@media (max-width: 600px) {
  .trial-main { padding: 16px 14px 25px; }
  .watch-frame iframe { height: max(450px, calc(100svh - 175px)); }
  .watch-header .eyebrow { letter-spacing: .1em; font-size: 9px; }
  .countdown { padding: 7px 9px; }
}

/* The embedded site centers a 1240px-wide bar and switches to bottom tabs at 768px. */
.watch-frame {
  position: relative;
  container: player / inline-size;
}
.watch-brand { display: none; }
@container player (width > 768px) {
  .watch-brand {
    position: absolute;
    z-index: 1;
    inset-block-start: 23px;
    inset-inline-start: calc(max(16px, (100cqw - 1240px) / 2) + 10px);
    width: 123px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 10px;
    background: #131725;
    color: #f7f9ff;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: -.035em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }
}
.watch-frame:has(iframe:fullscreen) .watch-brand { display: none; }