@font-face {font-family:BrandFredoka;src:url(fonts/Fredoka.ttf);font-weight:300 700;font-display:swap}
@media screen {
  .brand {gap:10px; text-decoration:none; flex-shrink:0}
  .brand-logo {width:78px;height:78px;object-fit:contain;flex-shrink:0}
  .brand-name {font:700 24px/1.15 BrandFredoka,Fredoka,sans-serif;letter-spacing:-.5px;white-space:nowrap}
  .brand-name .word-color {color:#bc1734}
  .brand-name .word-my {color:#a55000}
  .brand-name .word-nite {color:#00735c}
  .brand-name .word-lite {color:#2459b8}
  .brand-name small {display:block;color:var(--muted);font:700 10px/1.5 Nunito,sans-serif;letter-spacing:.1px;margin-top:4px}
  .hero-copy .owner-note {display:block;margin:20px 0 10px}
  .watch-link {display:inline-flex;gap:8px;align-items:center;margin-top:16px;background:transparent;box-shadow:none;border:0;padding:0;color:var(--purple);font-size:15px;text-decoration:underline;text-underline-offset:4px}
  .site-footer {border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-top:22px;padding-bottom:26px}
  .site-footer p {margin:0}
  .site-footer strong {font-size:14px}
  .footer-links {display:flex;flex-wrap:wrap;align-items:center;gap:15px}
  .footer-links a {font-size:13px;overflow-wrap:anywhere}
  #how-it-works {width:min(900px,94vw);max-height:92dvh;padding:22px;overflow:auto}
  #how-it-works video {width:100%;max-height:62dvh;display:block;background:#17131e;border-radius:12px;margin:16px 0}
  #how-it-works .dialog-head {display:flex;align-items:center;justify-content:space-between;gap:20px}
  #how-it-works .dialog-head h2 {margin:0;font-size:26px}
  #how-it-works .dialog-head button {min-width:44px;font-size:24px}
  #how-it-works details {font-size:14px}
  #how-it-works li {margin:8px 0}
  .help-page {max-width:850px;margin:0 auto;padding:36px 24px 60px}
  .help-page h1 {font-size:36px}
  .help-page h2 {margin-top:30px}
  .help-page a {overflow-wrap:anywhere}
}
@media screen and (max-width:1100px) {.brand-name{font-size:21px}.brand-logo{width:66px;height:66px}.site-header{gap:16px}}
@media screen and (max-width:820px) {
  .site-header {padding:9px 14px;gap:9px}
  .brand-logo {width:57px;height:57px}
  .brand-name {font-size:21px}
  .brand-name small {font-size:8px;max-width:190px;white-space:normal}
  .site-header nav {margin-left:auto}
  .site-header nav a {font-size:11px}
  .site-footer {display:block}
  .footer-links {margin-top:14px;gap:12px}
  #how-it-works {padding:15px}
  #how-it-works .dialog-head h2 {font-size:22px}
  #how-it-works video {max-height:60dvh}
}
@media screen and (max-width:380px) {.brand-name{font-size:18px}.brand-logo{width:49px;height:49px}.brand{gap:7px}.site-header nav a{font-size:10px}}
@media print {#how-it-works,.site-footer{display:none!important}}