/* ─────────────────────────────────────────
   Disney+ — shared design tokens & base
   Used by login / landing / card / profile
   ───────────────────────────────────────── */

@font-face {
  font-family: Inspire;
  font-weight: 400;
  src: url("../f2199f841165.bin") format("woff2"),
       url("../c7d8596d5b57.woff") format("woff");
}
@font-face {
  font-family: Inspire;
  font-weight: 600;
  src: url("../4ff15ddc9344.bin") format("woff2"),
       url("../b16fb94fbdeb.woff") format("woff");
}

:root {
  /* Palette */
  --bg-teal:     radial-gradient(circle at 20% 95%, #056877, #051828 96%);
  --bg-dark:     #17171c;
  --card-white:  #fff;
  --surface-1:   #2c2d35;   /* card panels on dark */
  --surface-2:   #363742;   /* section headers on dark */
  --ink:         #252526;
  --ink-muted:   #5f6166;
  --grey-border: #86898f;
  --divider:     #e9ebf0;
  --field-bg:    #e9ebf0;
  --white:       #fff;
  --white-muted: #b0bcc2;
  --teal:        #1ec9ba;   /* active tab underline */
  --link:        #0040e5;
  --link-blue:   #34b3ff;   /* blue link on dark bg */
  --focus:       #0040e5;

  /* Type */
  --font: Inspire, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ── Top bar (Disney+ left, profile right) ── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  max-width: 1280px;
  margin: 0 auto;
}
.topbar .logo { display: inline-flex; height: 40px; }
.topbar .logo svg { height: 100%; width: auto; }
.topbar .logo svg path { fill: #fff; }

.profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.profile-btn img {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
}

/* ── Dark footer ── */
.site-footer {
  padding: 56px 32px 48px;
  text-align: center;
  background: var(--bg-dark);
}
.site-footer .logo {
  display: inline-flex;
  height: 40px;
  margin-bottom: 24px;
}
.site-footer .logo svg { height: 100%; width: auto; }
.site-footer .logo svg path { fill: #fff; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  max-width: 900px;
  margin: 0 auto;
}
.site-footer a,
.site-footer .text-link {
  color: #fff;
  font: inherit;
  font-size: 13px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.site-footer a:hover,
.site-footer .text-link:hover { text-decoration: underline; }
.site-footer .copy {
  margin-top: 24px;
  font-size: 12px;
  color: var(--white-muted);
}

/* ── Skip link (accessibility) ── */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  background: #fff;
  color: #000;
  padding: 8px 16px;
  border-radius: 4px;
  z-index: 10;
}

/* ── Brand pill button (white on dark) ── */
.btn-pill {
  display: inline-block;
  min-width: 360px;
  max-width: 100%;
  padding: 16px 32px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #000;
  background: #fff;
  border: 0;
  border-radius: 32px;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  transition: background .2s;
}
.btn-pill:hover { background: #e5e5e5; }

@keyframes fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── 1-second preload spinner (on every page) ── */
.preload {
  position: fixed;
  inset: 0;
  background: #17171c;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: preload-out .45s ease-in .85s forwards;
  pointer-events: all;
}
.preload::before {
  content: "";
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.08);
  border-top-color: #1ec9ba;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes preload-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.preload.light { background: #f4f5f7; }
.preload.light::before { border-color: rgba(0,0,0,.08); border-top-color: #1a5cff; }