/* Fixed artboard + repeating shell chrome */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--white);
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

strong,
b {
  font-weight: var(--fw-bold);
}

button {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

img,
svg {
  display: block;
}

/* ---------- Artboard ---------- */

.arena {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* Slightly cooler than the stage so letterbox bars read as intentional
     margins rather than content being clipped off the sides. */
  background: #dce8ef;
}

/* Centred by translate rather than flex/grid alignment, which clamps to the
   start edge once the 1280px box is wider than the viewport.
   --scale = min(arenaW/1280, arenaH/720), set by fitStage(), which also
   sets --ex-w / --ex-h so the scaled stage covers the whole arena. */
.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--stage-w) * 1px + var(--ex-w, 0px));
  height: calc(var(--stage-h) * 1px + var(--ex-h, 0px));
  overflow: hidden;
  background: var(--white);
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
}

.fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  overflow: hidden;
}

/* ---------- Page frame ---------- */

.page {
  position: absolute;
  inset: 0;
}

.page-head {
  position: absolute;
  top: var(--title-top);
  left: var(--gutter);
  right: 120px;
}

.page-title {
  margin: 0;
  color: var(--navy);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.page-title.is-deep {
  color: var(--navy-deep);
}

.page-sub {
  margin: var(--subtitle-gap) 0 0;
  color: var(--ink);
  font-size: var(--fs-instruction);
  font-weight: 500;
  line-height: 1.25;
}

.page-sub.is-center {
  /* Warm-up instructions (e.g. care board) sit a bit lower than other subs. */
  margin-top: 20px;
  text-align: center;
  margin-right: -120px; /* centre against the full stage, not the title column */
}

.page-sub.is-navy {
  color: var(--navy);
  font-weight: 600;
}

/* Content slot. Spans the whole artboard so pages can place children at the
   absolute coordinates read off the storyboard; the nav row and footer paint
   above it because they come later in the DOM. */
.page-body {
  position: absolute;
  inset: 0;
}

/* Mobile-only copy of the nav row's teaser line (see css/mobile.css). */
.page-teaser {
  display: none;
}

/* ---------- Badges button (top right) ---------- */

.badges-btn {
  position: absolute;
  top: var(--badges-top);
  right: var(--badges-right);
  z-index: 15;
  display: block;
  cursor: pointer;
}

.badges-btn img {
  display: block;
  width: var(--badges-w);
  height: var(--badges-h);
  transition: transform 0.18s ease;
}

.badges-btn:hover img,
.badges-btn:focus-visible img {
  transform: scale(1.06);
}

.badges-btn.is-pulsing img {
  /* Hover's transform transition would fight the keyframes. */
  transition: none;
  animation: badge-pulse 0.7s ease-in-out 2;
}

@keyframes badge-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.28);
  }
}

/* ---------- Nav row ---------- */

.page-nav {
  position: absolute;
  top: var(--nav-top);
  left: var(--gutter);
  right: var(--gutter);
  height: var(--nav-h);
}

.nav-left,
.nav-right {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-left {
  left: 0;
}

.nav-right {
  right: 0;
}

.nav-center-btns {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translate(-50%, -50%);
}

.nav-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 640px;
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--navy);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.nav-center.is-deep,
.page-teaser.is-deep {
  color: var(--navy-deep);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: var(--pill-min-w);
  height: var(--nav-h);
  padding: 0 22px;
  border-radius: var(--radius-pill);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}

.pill svg {
  width: 13.4px;
  height: 11.4px;
  flex: none;
}

.pill-fill {
  background: var(--navy);
  color: var(--white);
}

.pill-fill:hover:not(:disabled),
.pill-fill:focus-visible:not(:disabled) {
  background: var(--navy-hover);
}

.pill-ghost {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--navy);
}

.pill-ghost:hover,
.pill-ghost:focus-visible {
  background: var(--ice);
}

.pill-teal {
  background: var(--teal);
  color: var(--white);
  min-width: 0;
}

.pill-teal:hover,
.pill-teal:focus-visible {
  background: var(--teal-hover);
}

/* Measured off p4: the "Let's begin" CTA runs 238px. */
.pill.is-wide {
  min-width: 238px;
}

.pill:disabled {
  background: var(--navy-disabled);
  color: var(--white);
  cursor: default;
}

.pill:active:not(:disabled) {
  transform: translateY(1px);
}

/* ---------- Footer toolbar ---------- */

.page-foot {
  position: absolute;
  top: var(--footer-top);
  left: 0;
  right: 0;
  height: var(--footer-h);
  display: flex;
  align-items: flex-start;
  gap: var(--footer-gap);
  padding: var(--footer-pad-t) var(--footer-pad-x) 0;
  background: var(--mint);
}

/* Asset106 at its footer size (p4 onward): 886,652.6 on the artboard. */
.foot-lockup {
  position: absolute;
  top: calc(652.6px - var(--footer-top));
  left: 886.22px;
  width: 372.51px;
  height: 48.35px;
}

.foot-btn {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: var(--footer-circle);
  color: var(--teal);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
}

/* The disc is drawn inside each icon, so states recolor its circle. */
.foot-btn .foot-disc {
  display: block;
  width: var(--footer-circle);
  height: var(--footer-circle);
  transition: transform 0.15s ease;
}

.foot-btn .foot-disc svg {
  display: block;
  width: 100%;
  height: 100%;
}

.foot-btn .foot-disc circle {
  fill: var(--teal);
  transition: fill 0.15s ease;
}

.foot-btn:hover .foot-disc,
.foot-btn:focus-visible .foot-disc {
  transform: scale(1.06);
}

.foot-btn:hover .foot-disc circle,
.foot-btn:focus-visible .foot-disc circle {
  fill: var(--teal-hover);
}

.foot-btn[aria-expanded="true"] .foot-disc circle {
  fill: var(--navy);
}

/* ---------- Shared focus ring ---------- */

:where(button, a, input, [tabindex]):focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Shell-less pages (cover, login) ---------- */

.page.is-bare .page-foot,
.page.is-bare .badges-btn {
  display: none;
}

/* ---------- Filling the window (desktop) ----------
   The stage is --ex-w wider and --ex-h taller than the artboard. Header and
   Badges keep their corners, the nav row and footer ride the bottom edge,
   and the 1280×720 content frame stays centred in the space between. */

html[data-viewport="desktop"] .page-body {
  inset: auto;
  top: calc(var(--ex-h, 0px) / 2);
  left: calc(var(--ex-w, 0px) / 2);
  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);
}

html[data-viewport="desktop"] .page-nav {
  top: calc(var(--nav-top) + var(--ex-h, 0px));
}

html[data-viewport="desktop"] .page-foot {
  top: calc(var(--footer-top) + var(--ex-h, 0px));
}

html[data-viewport="desktop"] .foot-lockup {
  left: calc(886.22px + var(--ex-w, 0px));
}