/* Same Raleway font, Contras palette and corner radius as of-dashboard/src/index.css. */
@font-face {
  font-family: Raleway;
  src: url('/assets/raleway.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --background: oklch(0.941 0.004 219.5);
  --foreground: oklch(0.29 0.007 345.7);
  --muted-foreground: oklch(0.503 0.009 229);
  --primary: oklch(0.448 0.121 353.4);
  --border: oklch(0.879 0.006 223.5);
  --brand-deep: oklch(0.323 0.105 356.4);
  --sidebar: oklch(0.214 0.054 351.4);
  --sidebar-foreground: oklch(0.925 0.013 345.5);
  --sidebar-muted-foreground: oklch(0.719 0.043 345.8);
  font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
  color: var(--foreground);
  background: var(--background);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
.brand-panel { position: relative; overflow: hidden; min-height: 100svh; padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, var(--brand-deep), var(--sidebar)); color: var(--sidebar-foreground); }
.brand, .mobile-brand { display: flex; align-items: center; gap: .75rem; font-weight: 600; }
.brand-copy { position: relative; z-index: 1; max-width: 28rem; }
.brand-copy p { font-size: 2rem; line-height: 1.2; font-weight: 600; letter-spacing: -.035em; margin-bottom: .75rem; }
.brand-copy span { font-size: .875rem; line-height: 1.6; color: var(--sidebar-muted-foreground); }
.brand-watermark { position: absolute; width: 18rem; height: 18rem; right: -4rem; bottom: -4rem; opacity: .1; }
main { display: flex; align-items: center; justify-content: center; padding: 3rem 2.5rem; }
.notice { max-width: 27rem; }
.eyebrow { color: var(--primary); font-size: .8125rem; font-weight: 600; margin: 0 0 1rem; }
h1 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.22; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; margin: 0 0 1.25rem; }
p { font-size: .9375rem; line-height: 1.7; }
.notice > p:not(.eyebrow) { color: var(--muted-foreground); }
.hint { background: white; border: 1px solid var(--border); border-radius: .5rem; padding: 1.25rem; margin: 1.75rem 0; }
h2 { font-size: .9375rem; font-weight: 600; margin: 0 0 .5rem; }
.hint p { font-size: .875rem; margin: 0; }
.help { font-size: .8125rem; }
.mobile-brand { display: none; }
@media (max-width: 1023px) {
  body { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  main { padding: 2rem 1.5rem; }
  .mobile-brand { display: flex; margin-bottom: 3rem; }
  .mobile-brand img { box-sizing: content-box; padding: .375rem; background: var(--sidebar); border-radius: .5rem; }
}