/* Colors/type: ARA Live/styles/theme.css (copied as theme.css).
   Gold button: ARA Live/components/ui/Button.tsx and lib/theme.ts. */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ara-bg);
  color: var(--ara-text);
  font-family: var(--ara-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.site-header {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--ara-border);
}
.brand { display: inline-flex; flex-shrink: 0; width: min(115.5px, 100%); }
.brand img { display: block; width: 100%; height: auto; }
.brand:focus-visible { outline: 2px solid var(--ara-accent); outline-offset: 6px; }
.coming-soon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 64px;
  text-align: center;
}
h1 {
  margin: 0;
  color: var(--ara-text-strong);
  font-size: clamp(44px, 8vw, 80px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.description {
  max-width: 440px;
  margin: 24px 0 36px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  padding: 12px 24px;
  background: var(--ara-accent-soft);
  color: var(--ara-text-on-accent);
  border: none;
  border-radius: var(--ara-radius-md);
  font-family: var(--ara-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: rgb(250, 234, 177) 0px 0px 2px 1px inset,
    rgba(61, 61, 61, 0.02) 0px 0.602187px 2.047437px 0px inset,
    rgba(61, 61, 61, 0.06) 0px 2.288533px 7.781013px 0px inset,
    rgba(61, 61, 61, 0.25) 0px 10px 34px 0px inset;
  transition: box-shadow 0.2s;
}
.button:hover {
  box-shadow: rgb(250, 234, 177) 2px 2px 10px 6px inset,
    rgba(255, 255, 255, 0.02) 0px 0.602187px 1.565687px 0px inset,
    rgba(255, 255, 255, 0.06) 0px 2.288533px 5.950187px 0px inset,
    rgba(255, 255, 255, 0.25) 0px 10px 26px 0px inset;
}
.button:focus-visible { outline: 2px solid var(--ara-accent); outline-offset: 5px; }
footer {
  padding: 24px;
  text-align: center;
  color: var(--ara-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 440px) {
  .desktop-break { display: none; }
  .description { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}