@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--n-800);
  background: var(--n-50);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; color: var(--n-900); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

.tabular-num { font-variant-numeric: tabular-nums; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--sp-4); }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Annotation callouts — magenta, off-brand. Hidden by default: these are
   meant to be added beside frames in Figma after import (see Part B),
   not baked into the captured layout. Append ?annotate=1 to any screen
   URL to reveal them here for review — see js/annotate.js. */
.annot { position: relative; }
body.show-annotations .annot {
  border: 1.5px dashed #FF00A8;
  border-radius: var(--r-md);
}
body.show-annotations .annot::before {
  content: attr(data-annot);
  position: absolute;
  top: -30px; left: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #FF00A8;
  background: #fff;
  padding: 2px 8px;
  border: 1px solid #FF00A8;
  border-radius: var(--r-sm);
  white-space: normal;
  width: max-content;
  max-width: 280px;
  line-height: 1.3;
  z-index: 50;
}