/** Public two-choice entry; typography, focus and touch targets work without scripts or remote fonts. */
:root { color-scheme: light; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17324c; background: #f2f7fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at 5% 75%, #dff3ef 0, transparent 50%), radial-gradient(ellipse at 95% 18%, #e6edff 0, transparent 48%), #f5f8fc; }
.portal-header { min-height: 100px; padding: 28px max(24px, calc((100vw - 1120px) / 2)); border-bottom: 1px solid #e1e9f1; background: #ffffffb8; }
.portal-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #17324c; text-decoration: none; font-weight: 800; font-size: 23px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: white; background: #118b83; font-size: 34px; font-weight: 500; }
.brand-caption { margin-left: 6px; padding-left: 18px; border-left: 1px solid #dbe5ed; color: #6c7f92; font-size: 15px; font-weight: 500; }
.portal-main { width: min(1040px, 100%); margin: 0 auto; padding: 58px 24px 30px; text-align: center; }
.eyebrow { margin: 0 0 16px; font-size: 12px; letter-spacing: .19em; font-weight: 800; color: #137d77; }
h1 { margin: 0; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.18; letter-spacing: -.04em; }
.portal-intro { margin: 18px 0 36px; font-size: 17px; line-height: 1.6; color: #62768b; }
.portal-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; text-align: left; }
.portal-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dae5ef; border-radius: 26px; background: white; color: inherit; text-decoration: none; box-shadow: 0 14px 45px #193b5d09; transition: transform .16s, box-shadow .16s; }
.portal-card:hover { transform: translateY(-3px); box-shadow: 0 18px 45px #193b5d14; }
.portal-card:focus-visible, .portal-brand:focus-visible { outline: 4px solid #195dcb; outline-offset: 5px; }
.card-art { display: grid; place-items: center; min-height: 176px; }
.workspace-art { background: linear-gradient(125deg, #edf1ff, #e7f0fc); color: #4c6ac4; }
.clock-art { background: linear-gradient(125deg, #e1f4ed, #e7f5f4); color: #128a7b; }
.card-art svg { width: 246px; height: 160px; max-width: 100%; }
.art-paper { fill: white; stroke: currentColor; stroke-width: 2.5; }
.art-line { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.art-accent { fill: currentColor; }
.art-tick { fill: none; stroke: white; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.card-copy { display: flex; flex: 1; flex-direction: column; padding: 26px 30px 28px; }
.card-kicker { margin: 0 0 9px; color: #62758c; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
h2 { margin: 0; font-size: 29px; letter-spacing: -.025em; }
.card-copy > p:not(.card-kicker) { margin: 13px 0 24px; color: #60758b; font-size: 16px; line-height: 1.65; }
.card-action { display: flex; justify-content: space-between; align-items: center; min-height: 52px; margin-top: auto; padding: 14px 18px; border-radius: 12px; background: #edf1fc; color: #3659b2; font-size: 16px; font-weight: 750; }
.clock-card .card-action { background: #e6f5ef; color: #107d6e; }
.card-note { display: block; margin-top: 13px; font-size: 12px; color: #65798d; text-align: center; }
.portal-footer { margin: 29px 0 0; color: #6c7f92; font-size: 13px; }
@media (max-width: 640px) { .portal-header { min-height: 84px; padding: 20px; } .brand-caption { font-size: 13px; padding-left: 12px; } .portal-main { padding: 35px 18px 28px; } .portal-options { grid-template-columns: 1fr; gap: 20px; } .portal-intro { font-size: 16px; margin-bottom: 26px; } .card-art { min-height: 132px; } .card-art svg { height: 132px; } .card-copy { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .portal-card { transition: none; } .portal-card:hover { transform: none; } }