/* The website's look (site/style.css: paper, teal, Manrope, the S mark) on the pages between suprsuit.ai and the computer: sign-in at
   app.suprsuit.ai and on each computer, the hand-off answer and the live view link pages. Loaded after tokens.css and the page's own
   stylesheet, on <html class="si-brand"> only; the shared tokens.css stays grayscale for the app itself. The font's address is relative,
   so it resolves next to this file on a computer (/s/) and on app.suprsuit.ai (/). */
@font-face {
  font-family: "Manrope";
  src: url("manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root.si-brand:not([data-theme]):not([data-scheme]) {
  --page: #F5F3ED;
  --card: #FFFFFF;
  --fg: #172C31;
  --muted: #576A6A;
  --hint: #576A6A;
  --sep: #CBD4CB;
  --tint: rgba(59, 124, 114, 0.08);
  --tint-2: rgba(59, 124, 114, 0.14);
  --accent: #3B7C72;
  --brand: #172C31;
  --btn: #12272C;
  --btn-fg: #F5F3ED;
  --btn-hover: #3B7C72;
  --focus: #3B7C72;
  --mark-bg: #12272C;
  --mark-fg: #F5F3ED;
  --tld: #3B7C72;
  --glow: rgba(173, 204, 194, 0.45);
  --shadow: 0 24px 60px -32px rgba(18, 39, 44, 0.45);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root.si-brand:not([data-theme]):not([data-scheme]) {
    --page: #12272C;
    --card: #172C31;
    --fg: #F5F3ED;
    --muted: #ADCCC2;
    --hint: #ADCCC2;
    --sep: rgba(173, 204, 194, 0.22);
    --tint: rgba(173, 204, 194, 0.08);
    --tint-2: rgba(173, 204, 194, 0.16);
    --accent: #ADCCC2;
    --brand: #F5F3ED;
    --btn: #F5F3ED;
    --btn-fg: #12272C;
    --btn-hover: #ADCCC2;
    --focus: #ADCCC2;
    --mark-bg: #3B7C72;
    --mark-fg: #F5F3ED;
    --tld: #ADCCC2;
    --glow: rgba(59, 124, 114, 0.35);
    --shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

.si-brand body {
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(60rem 30rem at 50% -10%, var(--glow), transparent 70%), var(--page);
  background-attachment: fixed;
}
.si-brand h1 { font-weight: 750; letter-spacing: -0.02em; }
.si-brand .si h1 { font-size: 26px; }
.si-brand .btn { border-radius: 999px; font-weight: 700; }
.si-brand .btn.primary:hover, .si-brand .card .btn:hover { filter: none; background: var(--btn-hover); color: var(--btn-fg); }
.si-brand .si-form input { border-radius: 12px; }

.si-brand .si-card, .si-brand .card {
  width: min(420px, 100%);
  padding: 32px 28px 24px;
  background: var(--card);
  border: 1px solid var(--sep);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.si-brand .brand-logo {
  margin: 0 auto 10px;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
}
.brand-mark {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: var(--mark-bg);
  color: var(--mark-fg);
  display: grid;
  place-items: center;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1;
}
.brand-tld { color: var(--tld); letter-spacing: 0.08em; margin-left: -0.5rem; }
/* The link pages put the logo above the card, not in it. */
.si-brand body > .brand-logo { margin: 0 0 auto; padding-bottom: 24px; }
@media (min-width: 600px) { .si-brand body > .brand-logo { margin: 0; } }

@media (max-width: 480px) {
  .si-brand .si-card, .si-brand .card { padding: 28px 20px 20px; border-radius: 18px; }
}