/* ───────────────────────────────────────────────────────── SwitchBoard auth — production stylesheet Standalone (no Bootstrap). ~8 KB minified. Targets: /login, /register, /verify-email, /onboarding/password, /onboarding/phone, /onboarding/verify Theme is controlled by a `data-theme="light|dark"` attribute on . ───────────────────────────────────────────────────────── */ /* Reset (minimal — only what we need) */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } button { font: inherit; cursor: pointer; } a { color: inherit; } /* ─── Theme tokens ───────────────────────────────────────── Light theme ("Cool slate") — cool neutrals with a faint blue cast. Distinguished from warm-paper looks (Claude's signature); pairs naturally with the SwitchBoard cyan accent and reads as appropriate for a calm, professional communications product. ─────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { --bg: #f4f6f9; --bg-soft: #e7ecf2; --bg-elev: #fbfcfe; --ink: #0e1a26; --ink-2: #2d3b4a; --ink-3: #5c6a78; --ink-4: #94a0ad; --line: rgba(14,26,38,0.10); --line-strong: rgba(14,26,38,0.18); --field-bg: rgba(255,255,255,0.85); --field-bg-focus: #ffffff; --danger: #c2410c; --danger-bg: rgba(194,65,12,0.08); --success: #047857; --success-bg: rgba(4,120,87,0.08); --shadow-sm: 0 1px 2px rgba(14,26,38,0.05); --shadow-md: 0 8px 24px -8px rgba(14,26,38,0.14), 0 2px 6px rgba(14,26,38,0.06); /* Brand accent — SwitchBoard cyan */ --accent: #2196c2; --accent-fg: #ffffff; --accent-hover: #1880a8; --shadow-focus: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); /* Type */ --font-display: 'Source Serif 4', Georgia, serif; --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; } /* Nomad.services — dark surfaces with a vibrant purple accent. Matches the nomad.services marketing site: near-black background with #6c5ce7 / #a855f7 as primary/secondary brand colors, used on the hero banner, dropzone glow, and CTA buttons. Headings use the body sans-serif (no serif on the marketing site). */ [data-theme="nomadservices"] { --bg: #0e0c1f; --bg-soft: #15142a; --bg-elev: #1a1830; --ink: #ffffff; --ink-2: #e0e0f0; --ink-3: #a0a0b8; --ink-4: #6a6a7c; --line: #2a2a4a; --line-strong: #3a3a5a; --field-bg: rgba(255,255,255,0.04); --field-bg-focus: rgba(255,255,255,0.07); --danger: #e57373; --danger-bg: rgba(229,115,115,0.12); --success: #66bb6a; --success-bg: rgba(102,187,106,0.12); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 16px 40px -12px rgba(108,92,231,0.22), 0 2px 6px rgba(0,0,0,0.4); --accent: #6c5ce7; --accent-fg: #ffffff; --accent-hover: #7d6ee8; --shadow-focus: 0 0 0 4px color-mix(in oklab, var(--accent) 28%, transparent); --font-display: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } /* Moonshine.dev — neutral dark-slate surfaces with a green accent. Matches the Moonshine.dev Canvas editor chrome: layered neutral greys (no blue/purple cast) with the green primary CTA ("Login", "Login Now") as the brand accent. Headings use the body sans-serif. */ [data-theme="moonshinedev"] { --bg: #23272b; --bg-soft: #2b3034; --bg-elev: #32383d; --ink: #ffffff; --ink-2: #d8dde1; --ink-3: #9aa1a8; --ink-4: #6b727a; --line: #41484e; --line-strong: #535b62; --field-bg: rgba(255,255,255,0.05); --field-bg-focus: rgba(255,255,255,0.08); --danger: #e57373; --danger-bg: rgba(229,115,115,0.12); --success: #66bb6a; --success-bg: rgba(102,187,106,0.12); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 16px 40px -12px rgba(31,157,87,0.20), 0 2px 6px rgba(0,0,0,0.4); --accent: #1f9d57; --accent-fg: #ffffff; --accent-hover: #25b063; --shadow-focus: 0 0 0 4px color-mix(in oklab, var(--accent) 28%, transparent); --font-display: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } /* Dark theme ("Deep slate") — blue-charcoal surfaces and a bright sky-blue accent. Reads as "communications product at night" rather than a generic neutral-dark theme. */ [data-theme="dark"] { --bg: #0a1018; --bg-soft: #11192a; --bg-elev: #131c2e; --ink: #e8edf3; --ink-2: #c5d0dc; --ink-3: #8b97a6; --ink-4: #4f5b6b; --line: rgba(232,237,243,0.10); --line-strong: rgba(232,237,243,0.20); --field-bg: rgba(255,255,255,0.04); --field-bg-focus: rgba(255,255,255,0.08); --danger: #fb7185; --danger-bg: rgba(251,113,133,0.10); --success: #4ade80; --success-bg: rgba(74,222,128,0.10); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 12px 32px -8px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3); --accent: #38bdf8; --accent-hover: #7dd3fc; } /* ─── Page ─────────────────────────────────────────────── */ html, body { height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .auth-shell { min-height: 100vh; display: flex; flex-direction: column; } .auth-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; color: var(--ink-3); font-size: 13px; } .auth-topbar .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 500; text-decoration: none; font-family: var(--font-display); font-size: 17px; letter-spacing: -0.015em; } .auth-topbar .brand svg { color: var(--accent); } .auth-topbar .help { color: var(--ink-3); text-decoration: none; } .auth-topbar .help:hover { color: var(--ink-2); } .auth-page { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px 64px; text-align: center; } .auth-column { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 28px; text-align: left; } .auth-heading { text-align: center; } .auth-headline { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.08; font-size: 38px; color: var(--ink); margin: 0; text-wrap: balance; } .auth-subhead { color: var(--ink-3); font-size: 15px; margin: 8px 0 0; text-wrap: pretty; } .auth-form { display: flex; flex-direction: column; gap: 14px; } /* ─── Form fields ─────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 13px; font-weight: 500; color: var(--ink-2); } .field-label-row { display: flex; justify-content: space-between; align-items: baseline; } .input-wrap { position: relative; display: flex; align-items: center; background: var(--field-bg); border: 1px solid var(--line); border-radius: 12px; transition: border-color .15s, background .15s, box-shadow .15s; } .input-wrap:hover { border-color: var(--line-strong); } .input-wrap:focus-within { border-color: var(--accent); background: var(--field-bg-focus); box-shadow: var(--shadow-focus); } .input-wrap input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 14px 16px; font: inherit; color: var(--ink); /* Match the wrap's corner radius so when Chrome's autofill paints its inset shadow on the input, the shadow respects the rounded shape. Without this the autofill background goes square at the input's actual edges and clashes with the wrap. */ border-radius: 12px; } .input-wrap input::placeholder { color: var(--ink-4); } /* Neutralize Chrome / Edge autofill styling. Chrome blocks setting background-color on -webkit-autofill, so we use a massive inset box-shadow as a paint-over — same width as the input. The mask colour MUST be opaque: on the dark themes --field-bg-focus is a translucent white (e.g. rgba(255,255,255,0.08)), and a translucent inset shadow lets Chrome's pale-lavender autofill paint bleed through, leaving the field looking near-white on a dark page. Use --bg-elev (an opaque per-theme surface colour) so the autofilled field reads as a normal dark field in every theme. The transition delay keeps the override active across Chrome's autofill repaint pulses. border-radius is inherited from the input (12px) so the painted rectangle respects the wrap's rounded corners. */ .input-wrap input:-webkit-autofill, .input-wrap input:-webkit-autofill:hover, .input-wrap input:-webkit-autofill:focus, .input-wrap input:-webkit-autofill:active { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--bg-elev) inset; box-shadow: 0 0 0 1000px var(--bg-elev) inset; caret-color: var(--ink); transition: background-color 5000s ease-in-out 0s; } /* In a password wrap the input is only the left portion — the reveal button is a sibling on the right. The autofill paint-over (inset box-shadow above) follows the input's border-radius, so rounding all four corners curves the right edge mid-field, leaving a visible arc next to the eye icon. Round only the left corners here so the paint is flush-square where it meets the reveal button. (Full-width inputs like email keep the all-corners radius from .input-wrap input.) */ .input-wrap--password input { border-radius: 12px 0 0 12px; } /* Password-reveal button — sits at the right edge of the input-wrap, borderless, transparent. Two SVGs (eye / eye-off) inside the button; CSS swaps which one is visible via the .is-showing class set by JS. */ .input-wrap--password .reveal { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; padding: 0; margin-right: 4px; color: var(--ink-3); cursor: pointer; border-radius: 8px; transition: color .12s, background .12s; } .input-wrap--password .reveal:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); } .input-wrap--password .reveal .icon-eye-off { display: none; } .input-wrap--password .reveal.is-showing .icon-eye { display: none; } .input-wrap--password .reveal.is-showing .icon-eye-off { display: inline-block; } .input-prefix { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-right: 1px solid var(--line); color: var(--ink-2); background: transparent; border: 0; border-right: 1px solid var(--line); font-weight: 500; } .input-suffix { padding-right: 12px; display: flex; align-items: center; color: var(--ink-3); } .input-suffix button { background: transparent; border: 0; color: var(--ink-3); font-size: 12.5px; font-weight: 500; padding: 6px 8px; border-radius: 6px; } .input-suffix button:hover { background: var(--bg-soft); color: var(--ink-2); } .input-helper { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; } .input-error { font-size: 13px; color: var(--danger); margin-top: 4px; } .input-wrap.has-error { border-color: var(--danger); } .input-wrap.has-error:focus-within { box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 18%, transparent); } /* ─── Buttons ─────────────────────────────────────────── */ .btn { appearance: none; border: 1px solid transparent; border-radius: 12px; padding: 14px 18px; font: inherit; font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; line-height: 1.1; transition: transform .06s, background .15s, border-color .15s, color .15s, box-shadow .15s; } .btn:active { transform: translateY(0.5px); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .btn-block { width: 100%; } .btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.16); } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-secondary { background: var(--bg-elev); border-color: var(--line-strong); color: var(--ink); } .btn-secondary:hover:not(:disabled) { background: var(--bg-soft); } /* OAuth consent: per-scope rows with toggleable checkbox + label. */ .scope-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; } .scope-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elev); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; } .scope-row:hover { border-color: var(--line-strong); } .scope-row input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; } .scope-row .scope-label { font-weight: 600; color: var(--ink); } .scope-row .scope-desc { color: var(--ink-3); font-size: 13px; margin-top: 2px; } .scopes-heading { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.04em; } .principal-footer { text-align: center; margin-top: 14px; color: var(--ink-3); font-size: 13px; } .principal-footer strong { color: var(--ink-2); font-weight: 600; } .btn-ghost { background: transparent; color: var(--ink-3); padding: 8px 12px; border-radius: 8px; font-size: 14px; } .btn-ghost:hover { background: var(--bg-soft); color: var(--ink-2); } /* ─── OR divider ──────────────────────────────────────── */ .or-divider { display: flex; align-items: center; gap: 14px; color: var(--ink-3); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; margin: 4px 0; } .or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ─── Links / footer ──────────────────────────────────── */ .link { color: var(--accent); text-decoration: none; font-weight: 500; } .link:hover { text-decoration: underline; } .auth-foot { text-align: center; color: var(--ink-3); font-size: 14px; } .auth-fineprint { text-align: center; font-size: 12px; color: var(--ink-4); margin: 0; } .auth-fineprint a { color: var(--ink-3); } /* ─── Alerts ──────────────────────────────────────────── */ .alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; } .alert-danger { background: var(--danger-bg); color: var(--danger); } .alert-success { background: var(--success-bg); color: var(--success); } .alert-info { background: var(--bg-soft); color: var(--ink-2); } .alert svg { flex-shrink: 0; margin-top: 2px; } /* ─── OTP ─────────────────────────────────────────────── */ .otp-row { display: flex; gap: 10px; justify-content: center; } .otp-row input { width: 54px; height: 60px; text-align: center; font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--ink); background: var(--field-bg); border: 1px solid var(--line); border-radius: 12px; outline: 0; transition: border-color .15s, box-shadow .15s, background .15s; } .otp-row input:focus { border-color: var(--accent); background: var(--field-bg-focus); box-shadow: var(--shadow-focus); } .otp-row input.filled { border-color: var(--line-strong); } /* ─── Phone country picker ────────────────────────────── */ .phone-cc-btn { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: transparent; border: 0; border-right: 1px solid var(--line); color: var(--ink-2); font: inherit; font-weight: 500; } .phone-cc-btn .flag { font-size: 18px; line-height: 1; } .phone-cc-btn .cc { font-variant-numeric: tabular-nums; } .country-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: 4px; z-index: 20; max-height: 240px; overflow: auto; display: none; } .country-menu[data-open="true"] { display: block; } .country-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: transparent; border: 0; border-radius: 8px; color: var(--ink); font: inherit; font-size: 14px; text-align: left; } .country-menu button:hover { background: var(--bg-soft); } .country-menu button .flag { font-size: 16px; } .country-menu button .name { flex: 1; } .country-menu button .cc { color: var(--ink-3); font-variant-numeric: tabular-nums; } /* ─── Password strength meter ─────────────────────────── */ .strength { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .strength-bars { flex: 1; display: flex; gap: 4px; } .strength-bars span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background .2s; } .strength-bars[data-score="1"] span:nth-child(-n+1), .strength-bars[data-score="2"] span:nth-child(-n+2) { background: var(--danger); } .strength-bars[data-score="3"] span:nth-child(-n+3) { background: #c98c1f; } .strength-bars[data-score="4"] span { background: var(--success); } .strength-label { font-size: 11.5px; color: var(--ink-3); min-width: 56px; text-align: right; } /* ─── Step dots ───────────────────────────────────────── */ .steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 4px; } .steps span { width: 22px; height: 4px; border-radius: 2px; background: var(--line); } .steps span.done { background: var(--accent); opacity: 0.5; } .steps span.active { background: var(--accent); } /* ─── Spinner ─────────────────────────────────────────── */ .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* Submit-loading state — JS adds `is-loading` on submit */ .btn.is-loading { color: transparent; position: relative; } .btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--accent-fg); border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } /* ─── Icon circle (for empty states / completion) ────── */ .icon-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto; } .icon-circle.success { background: var(--success-bg); color: var(--success); } /* ─── Custom checkbox ─────────────────────────────────── */ .check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); cursor: pointer; user-select: none; } .check input { position: absolute; opacity: 0; pointer-events: none; } .check .box { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-strong); background: transparent; color: var(--accent-fg); transition: background .15s, border-color .15s; flex-shrink: 0; } .check input:checked + .box { background: var(--accent); border-color: var(--accent); } .check .box svg { opacity: 0; } .check input:checked + .box svg { opacity: 1; } .check input:focus-visible + .box { box-shadow: var(--shadow-focus); } /* ─── Option list (radio-as-card) ────────────────────── Stacked radio buttons styled as bordered cards. Used by the 2FA method picker and the logout-confirm two-action chooser. */ .option-list { display: flex; flex-direction: column; gap: 10px; } .option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--field-bg); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; } .option:hover { border-color: var(--line-strong); } .option input[type=radio] { flex-shrink: 0; margin-top: 3px; accent-color: var(--accent); } .option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .option-label { font-weight: 500; color: var(--ink); font-size: 15px; } .option-help { font-size: 13px; color: var(--ink-3); } .option:has(input:checked) { border-color: var(--accent); background: var(--field-bg-focus); box-shadow: var(--shadow-focus); } .option:has(input:disabled) { cursor: not-allowed; opacity: 0.55; } .option:has(input:disabled):hover { border-color: var(--line); } /* ─── Entry animation ─────────────────────────────────── */ @keyframes auth-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .auth-column > * { animation: auth-in .4s cubic-bezier(.2,.7,.2,1) both; } .auth-column > *:nth-child(2) { animation-delay: .04s; } .auth-column > *:nth-child(3) { animation-delay: .08s; } .auth-column > *:nth-child(4) { animation-delay: .12s; } .auth-column > *:nth-child(5) { animation-delay: .16s; } } /* ─── Selection ───────────────────────────────────────── */ ::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); } /* ─── Mobile ──────────────────────────────────────────── */ @media (max-width: 480px) { .auth-headline { font-size: 30px; } .auth-page { padding: 16px 20px 48px; } .auth-column { gap: 24px; } .otp-row { gap: 6px; } .otp-row input { width: 44px; height: 54px; font-size: 20px; } } /* ─── Article / Policy pages (long-form Markdown content) ─── Used by /public/policies/* — privacy, terms, etc. Shares the shell + topbar with auth pages but widens the column and adds prose typography for the rendered Markdown HTML. */ .policy-page { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 32px 24px 64px; } .policy-column { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 32px; } .policy-heading { text-align: left; } .policy-title { font-family: var(--font-display); font-weight: 500; font-size: 38px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink); } .policy-meta { font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .policy-meta .badge { display: inline-flex; align-items: center; padding: 2px 10px; font-size: 12px; font-weight: 500; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); background: var(--bg-soft); } .policy-footer { margin-top: 16px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: center; } .policy-footer .btn { max-width: 280px; } /* Prose typography for rendered Markdown. Scoped under .prose so the site's HTML rendering (commonmark) gets readable defaults without leaking to the rest of the page. */ .prose { color: var(--ink-2); font-size: 15.5px; line-height: 1.7; } .prose > * + * { margin-top: 1em; } .prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--font-display); font-weight: 500; color: var(--ink); letter-spacing: -0.015em; line-height: 1.25; } .prose h1 { font-size: 30px; margin-top: 1.5em; } .prose h2 { font-size: 24px; margin-top: 1.75em; } .prose h3 { font-size: 19px; margin-top: 1.5em; } .prose h4 { font-size: 16px; font-weight: 600; margin-top: 1.25em; } .prose p { margin: 0; } .prose ul, .prose ol { padding-left: 1.5em; margin: 0; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li + li { margin-top: 0.4em; } .prose li > ul, .prose li > ol { margin-top: 0.4em; } .prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .prose a:hover { color: var(--accent-hover); } .prose strong { color: var(--ink); font-weight: 600; } .prose em { font-style: italic; } .prose blockquote { border-left: 3px solid var(--line-strong); padding-left: 16px; color: var(--ink-3); font-style: italic; } .prose code { font-family: var(--font-mono); font-size: 0.9em; padding: 2px 6px; background: var(--bg-soft); border-radius: 5px; color: var(--ink); } .prose pre { font-family: var(--font-mono); font-size: 13px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; line-height: 1.55; } .prose pre code { background: transparent; padding: 0; } .prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; } .prose table { width: 100%; border-collapse: collapse; font-size: 14px; } .prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 12px; text-align: left; } .prose th { font-weight: 600; color: var(--ink); } @media (max-width: 480px) { .policy-page { padding: 16px 20px 48px; } .policy-title { font-size: 28px; } .prose { font-size: 15px; } .prose h1 { font-size: 24px; } .prose h2 { font-size: 20px; } }