/* AIO Sign · AIO Master Brand System v1: Onyx / Graphite / Soft Silver / Warm White / Electric Blue (accent only).
   Display = Frank Ruhl Libre (serif, "Luxury Front"), body = Heebo. Fonts self-hosted (fonts.css). */
@import url("fonts.css");

:root {
  --onyx: #0A0A0B;       /* background 60% */
  --graphite: #1C1C1E;   /* surfaces 25% */
  --silver: #D1D1D6;     /* supporting text, dividers 10% */
  --white: #F5F5F0;      /* primary text, logo */
  --blue: #0047FF;       /* accent 5%: CTAs, focus, highlights */
  --line: rgba(209, 209, 214, .16);
  --muted: rgba(209, 209, 214, .78);
  --serif: "Frank Ruhl Libre", Georgia, serif;
  --sans: "Heebo", "Segoe UI", system-ui, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--onyx); }
body { margin: 0; min-height: 100vh; background: var(--onyx); color: var(--white); font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; }

/* Header: the wordmark alone, generous space (logo rules) */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 26px; width: auto; display: block; }
.tag { color: var(--muted); font-size: 13px; letter-spacing: .02em; }

main { max-width: 820px; margin: 0 auto; padding: clamp(24px, 5vw, 48px) 16px 24px; }
main:focus, main:focus-visible { outline: none; }

.card { background: var(--graphite); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(20px, 4vw, 32px); margin: 0 0 20px; }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.005em; color: var(--white); }
h1 { font-size: clamp(26px, 4.4vw, 34px); line-height: 1.2; margin: 0 0 12px; }
h2 { font-size: 24px; line-height: 1.25; margin: 0 0 12px; }
p { margin: 0 0 12px; }
.kicker { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.eyebrow { display: block; width: 28px; height: 2px; background: var(--blue); margin: 0 0 18px; }

a { color: var(--white); text-decoration: underline; text-decoration-color: var(--blue);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--white); }

label { display: block; margin: 18px 0 6px; font-weight: 500; font-size: 15px; }
input:not([type=checkbox]), textarea { width: 100%; padding: 12px 14px; font: inherit; color: var(--white);
  background: var(--onyx); border: 1px solid rgba(209, 209, 214, .3); border-radius: 10px; }
input::placeholder { color: rgba(209, 209, 214, .45); }
input:not([type=checkbox]):focus, textarea:focus { border-color: var(--blue); outline: none;
  box-shadow: 0 0 0 3px rgba(0, 71, 255, .35); }
#otp { max-width: 200px; letter-spacing: .4em; text-align: center; font-size: 24px; font-weight: 500; }

button { font: inherit; cursor: pointer; border-radius: 10px; }
.primary { background: var(--blue); color: #fff; border: 0; padding: 12px 26px; font-weight: 500;
  transition: filter .15s ease; }
.primary:hover { filter: brightness(1.12); }
.primary.big { width: 100%; padding: 15px; margin-top: 22px; font-size: 17px; }
.secondary { background: transparent; color: var(--white); border: 1px solid var(--silver); padding: 10px 20px;
  margin-top: 12px; }
.link { background: none; border: 0; color: var(--white); text-decoration: underline;
  text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; padding: 8px 2px; }
button:disabled, fieldset:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; box-shadow: 0 0 0 5px var(--blue); }

.row { display: flex; gap: 14px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.error { min-height: 1.2em; margin: 10px 0 0; color: var(--white); }
.error:not(:empty) { padding: 10px 14px; border-inline-start: 3px solid var(--blue);
  background: rgba(0, 71, 255, .12); border-radius: 6px; }

/* Document viewer */
.pages { max-height: 72vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px;
  background: #2a2a2d; padding: 14px; margin-bottom: 20px; }
.pages img { display: block; width: 100%; height: auto; margin: 0 auto 14px; background: #fff;
  border-radius: 2px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.pages .end { height: 1px; }
.progress { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 14px; }
.progress span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .2s; }
.doc-text { white-space: pre-wrap; font-size: 15px; max-height: 50vh; overflow-y: auto; background: var(--onyx);
  border: 1px solid var(--line); padding: 14px; border-radius: 10px; margin: 14px 0; }
details summary { cursor: pointer; font-weight: 500; }

fieldset { border: 0; padding: 0; margin: 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 15px; line-height: 1.7;
  background: var(--onyx); border: 1px solid var(--line); padding: 16px; border-radius: 10px; margin-top: 4px; }
.consent input { margin-top: 5px; width: 20px; height: 20px; flex: none; accent-color: var(--blue); }
.tabs { display: flex; gap: 8px; margin: 22px 0 10px; }
.tabs button { border: 1px solid rgba(209, 209, 214, .3); background: transparent; color: var(--muted); padding: 8px 16px; }
.tabs button[aria-selected=true] { border-color: var(--blue); color: var(--white); background: rgba(0, 71, 255, .14); }
#pad { width: 100%; max-width: 640px; aspect-ratio: 3 / 1; height: auto; display: block; touch-action: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.typed { font-family: var(--sans); font-weight: 300; font-size: 34px; color: var(--white); min-height: 56px; margin: 8px 0;
  border-bottom: 1px solid var(--line); }

.foot { text-align: center; color: var(--muted); font-size: 12.5px; letter-spacing: .02em; padding: 28px 16px 44px; }
.foot img { height: 14px; opacity: .7; vertical-align: -2px; margin-inline-start: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .progress span, .primary { transition: none; } }