/* Client-facing pages (landing, consent result): the same paper-and-ink look as the portal and the M365 scanner. */
:root {
  --accent: #d2402a; --accent-soft: rgba(210, 64, 42, 0.08);
  --bg: #f4efe6; --surface: #fbf8f2; --ink: #15171b; --ink-2: #4b4f56; --ink-3: #8a857c; --rule: #ddd4c5;
  --serif: "Fraunces", Georgia, serif; --sans: "Hanken Grotesk", "Segoe UI", sans-serif; --mono: "JetBrains Mono", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #e4553d; --accent-soft: rgba(228, 85, 61, 0.12); --bg: #101216; --surface: #171a1f; --ink: #efe9df; --ink-2: #b9b2a6; --ink-3: #847d72; --rule: #2b2f36; color-scheme: dark; }
}
:root[data-theme="dark"] { --accent: #e4553d; --accent-soft: rgba(228, 85, 61, 0.12); --bg: #101216; --surface: #171a1f; --ink: #efe9df; --ink-2: #b9b2a6; --ink-3: #847d72; --rule: #2b2f36; color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background-color: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); padding: clamp(32px, 8vh, 96px) 16px; -webkit-font-smoothing: antialiased;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card { max-width: 660px; margin: 0 auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: clamp(24px, 5vw, 46px); box-shadow: 0 1px 2px rgba(20, 16, 10, 0.06), 0 30px 60px -36px rgba(20, 16, 10, 0.55); animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); font: 600 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.brand img { display: none; }
.brand::before { content: ""; width: 12px; height: 12px; background: var(--accent); transform: rotate(45deg); flex: none; }
h1 { font-family: var(--serif); font-weight: 380; font-size: clamp(38px, 6.5vw, 58px); line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 20px; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1; }
h1 em { font-style: italic; color: var(--accent); font-weight: 340; }
h2 { font-family: var(--serif); font-weight: 420; font-size: 24px; letter-spacing: -0.015em; margin: 30px 0 10px; font-variation-settings: "opsz" 72; }
p { color: var(--ink-2); }
a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: 13px; background: var(--accent-soft); color: var(--ink); padding: 4px 9px; border-radius: 3px; word-break: break-all; display: inline-block; margin-top: 6px; }
ol { padding-left: 20px; color: var(--ink-2); }
li + li { margin-top: 10px; }