@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('fonts/dm-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 1000; font-display:swap; src:url('fonts/dm-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The same palette the applications use, so arriving at the sign-in does not feel like leaving. */
:root { --ink:#172329; --muted:#718083; --paper:#f5f7f3; --line:#dde4df; --accent:#e3a25d; --teal:#3b7772; }
* { box-sizing:border-box; }
input { user-select:text; -webkit-user-select:text; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 100% 0%, #e8efe8 0, transparent 35%), var(--paper); color:var(--ink); font-family:'DM Sans', sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
h1,h2 { font-family:'Space Grotesk', sans-serif; margin:0; letter-spacing:0; }
h1 { font-size:clamp(2rem, 9vw, 3.4rem); max-width:520px; }
h2 { font-size:1.35rem; }
a { color:var(--teal); }
.kicker { color:var(--teal); font-size:.68rem; font-weight:700; letter-spacing:.14em; margin:0 0 7px; text-transform:uppercase; }
.muted { color:var(--muted); }

.shell { align-items:flex-start; display:flex; flex-direction:column; justify-content:center; min-height:100vh; padding:36px 0; width:min(100% - 32px, 680px); margin:0 auto; }
.mark { align-items:center; background:var(--ink); border-radius:50%; color:var(--accent); display:flex; font-family:'Space Grotesk', sans-serif; font-size:1.7rem; font-weight:700; height:64px; justify-content:center; margin-bottom:26px; width:64px; }
.shell > .muted { margin:10px 0 28px; max-width:520px; line-height:1.5; }

form { display:flex; flex-direction:column; gap:9px; max-width:480px; width:100%; }
input[type=text],input[type=password] { background:#fff; border:1px solid var(--line); border-radius:5px; min-width:0; padding:14px; width:100%; }
input[type=text]:focus,input[type=password]:focus { border-color:var(--teal); outline:none; }
.actions { display:flex; gap:9px; margin-top:6px; }
.primary-button { background:var(--ink); border:0; border-radius:5px; color:var(--paper); flex:1; font-weight:700; min-height:48px; padding:0 18px; }
.ghost-button { background:transparent; border:1px solid var(--line); border-radius:5px; color:var(--ink); font-weight:500; min-height:48px; padding:0 18px; text-align:center; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.danger-button { background:#b85e53; }
.link-button { background:none; border:0; color:var(--teal); font-weight:700; padding:0; text-decoration:underline; }
.switch { color:var(--muted); font-size:.85rem; margin:16px 0 0; }
/* Spoken in the same voice as a field label, because it is one: the error belongs to the form, not
   to the page, and floating it at the top would separate it from what has to be retyped. */
.notice { background:#fbeee9; border:1px solid #e6c3b6; border-radius:5px; color:#8c4436; font-size:.88rem; line-height:1.45; margin:0 0 4px; padding:11px 13px; }
.consent { align-items:flex-start; color:var(--muted); display:flex; font-size:.85rem; gap:9px; line-height:1.4; margin:6px 0 2px; }
.consent input { margin-top:2px; }

.tiles { display:grid; gap:11px; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); margin:6px 0 0; padding:0; list-style:none; width:100%; }
.tile { background:#fff; border:1px solid var(--line); border-radius:8px; color:var(--ink); display:block; padding:16px 17px; text-decoration:none; }
.tile:hover { border-color:var(--teal); }
.tile strong { display:block; font-family:'Space Grotesk', sans-serif; font-size:1.05rem; }
.tile span { color:var(--muted); font-size:.8rem; }
.section { border-top:1px solid var(--line); margin-top:34px; padding-top:22px; width:100%; }
.section h2 { margin-bottom:12px; }
.row { align-items:center; display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.legal { line-height:1.6; max-width:620px; }
.legal h2 { font-size:1.1rem; margin:26px 0 8px; }
.legal p,.legal li { color:var(--muted); font-size:.92rem; }