/* Palette: asphalt and paper, with amber for the one action that matters on each screen. Business green and private violet are the only other colors that carry meaning — everything else stays out of the way. */ :root { --mi-ink: #223040; --mi-slate: #2f3d4a; --mi-muted: #6d7783; --mi-paper: #f4f2ee; --mi-card: #ffffff; --mi-line: #ddd8d0; --mi-amber: #e0952f; --mi-amber-dark: #c07a19; --mi-green: #45865c; --mi-violet: #7061ab; --mi-red: #bd5340; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, sans-serif; color: var(--mi-ink); background: var(--mi-paper); } main { max-width: 640px; margin: 0 auto; padding: 1em 0.8em 3em; } h1, h2 { color: var(--mi-slate); } h1 { font-size: 1.25em; margin: 0 0 0.6em; } h2 { font-size: 1.05em; margin: 0 0 0.5em; } a { color: var(--mi-amber-dark); } .hint { color: var(--mi-muted); font-size: 0.85em; margin-top: -0.2em; } .error { color: var(--mi-red); font-weight: 600; } /* ---- shared controls ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; background: var(--mi-amber); color: #fff; border: none; padding: 0.7em 1.3em; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--mi-amber-dark); } .btn-secondary { background: var(--mi-slate); } .btn-secondary:hover { background: #1d2833; } .btn-danger { background: var(--mi-red); } .btn-link { background: none; border: none; padding: 0; color: var(--mi-red); font-size: 0.9em; cursor: pointer; text-decoration: underline; } input[type=text], input[type=number], input[type=date], input[type=email], select { padding: 0.6em; border: 1px solid var(--mi-line); border-radius: 8px; font-size: 1.05em; width: 100%; background: #fff; color: var(--mi-ink); } label { display: block; margin-bottom: 0.7em; } label.inline { display: inline-flex; align-items: center; gap: 0.4em; } .card { background: var(--mi-card); border: 1px solid var(--mi-line); border-radius: 12px; padding: 1.1em; margin-bottom: 1em; } .setup-card { max-width: 420px; } .back-link { margin-top: 1.5em; font-size: 0.9em; } /* ---- landing ---- */ .hero { text-align: center; padding: 1.5em 0 0.5em; } .hero-mark { color: var(--mi-slate); } .hero h1 { font-size: 1.8em; margin: 0.2em 0 0.1em; } .hero-tagline { color: var(--mi-muted); margin: 0 auto 1.2em; max-width: 30em; } .steps { padding-left: 1.2em; margin: 0; } .steps li { margin-bottom: 0.6em; } .card-privacy { border-left: 4px solid var(--mi-green); } .card-cta { text-align: center; } /* ---- home: one screen, never scrolls ----------------------------------- body is the flex column and the j-tools bar is its first child (bar.js inserts itself before its own