/* ===================================================================
AIOS. Design System (canonical stylesheet, v1.0)
--------------------------------------------------------------------
Every AIOS surface links this file. Future pages should NOT redefine
tokens; extend with utility classes or page-scoped CSS.
Brand essence: warm, trustworthy, plainspoken. A careful senior
engineer who happens to grow plants. Green on warm white.
──────── CANONICAL FONTS (load on every AIOS page) ────────
Every page MUST load these three Google Fonts in :
Roles:
• Geist , body, UI, headings (sans, weights 300–700)
• Geist Mono , code, eyebrows, meta, micro-labels
• Instrument Serif, italic accents inside headings & callouts
The AIOS wordmark (.wm-mini) renders A·I·[Haylo]·S in Geist 700.
It WILL fall back to system-sans (and look wrong) if Geist isn't
loaded. Always include the above.
──────── WORDMARK RULES. NON-NEGOTIABLE ────────
• The wordmark is .wm-mini and is ALWAYS HORIZONTAL. A, I, Haylo
face, S sitting on a single baseline. Never stack the letters.
Never wrap. Never put the face above or below the text.
• Do NOT pair .wm-mini with a separate "AIOS" text node, the
wordmark IS the AIOS lockup.
• On light surfaces use .wm-mini (default ink color). On dark
surfaces add .wm-mini.on-dark, the parenthesis arcs inherit
currentColor and will flip to white automatically.
• Default size in chrome (nav/topbar) is font-size:26px. In small
contexts (email avatar, footer-mini) it scales down with
font-size only, never change the structure.
=================================================================== */
/* ───────── 1. RESET ───────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}
/* ───────── 2. TOKENS ───────── */
:root{
/* Greens, soft, warm, slightly desaturated. */
--green-50:#ecfdf5;
--green-100:#d1fae5;
--green-200:#a7f3d0;
--green-300:#6ee7b7;
--green-400:#34d399;
--green-500:#10b981;
--green-600:#059669; /* primary accent */
--green-700:#047857; /* primary accent hover */
--green-800:#065f46;
--green-900:#064e3b;
/* Ink, warm near-black with a faint green undertone. */
--ink:#0a1f1a;
--ink-2:#1f2d29;
--ink-3:#2d3a36;
--muted:#5b6b66;
--muted-2:#7a8a85;
/* Surfaces, warm whites & off-whites. */
--bg:#ffffff;
--warm:#fbfdfa;
--surface:#f7faf8;
--surface-2:#eef4f1;
--line:#e7ecea;
--line-2:#eef2f0;
--line-3:#dde4e1;
/* Status colors (warn / gate). Used sparingly. */
--amber-50:#fffaeb;
--amber-100:#fef3c7;
--amber-200:#fde68a;
--amber-700:#b45309;
--amber-800:#92400e;
--rose-50:#fff1f1;
--rose-100:#fee2e2;
--rose-200:#fecaca;
--rose-700:#b91c1c;
--rose-800:#991b1b;
/* Type scale (modular ~1.2 with display jumps). */
--t-xs:12px;
--t-sm:13px;
--t-base:15px;
--t-md:16px;
--t-lg:18px;
--t-xl:22px;
--t-2xl:28px;
--t-3xl:36px;
--t-4xl:46px;
--t-5xl:60px;
--t-display:clamp(40px,5.6vw,68px);
/* Spacing, multiples of 4. */
--s-1:4px;
--s-2:8px;
--s-3:12px;
--s-4:16px;
--s-5:20px;
--s-6:24px;
--s-8:32px;
--s-10:40px;
--s-12:48px;
--s-16:64px;
--s-20:80px;
--s-24:96px;
--s-32:128px;
/* Radii. */
--r-xs:6px;
--r-sm:8px;
--r:12px;
--r-md:14px;
--r-lg:16px;
--r-xl:20px;
--r-2xl:24px;
--r-full:9999px;
/* Shadows, soft, layered, warm-tinted. */
--shadow-xs:0 1px 2px rgba(10,31,26,.04);
--shadow-sm:0 1px 2px rgba(10,31,26,.05), 0 1px 3px rgba(10,31,26,.04);
--shadow:0 4px 24px -8px rgba(10,31,26,.08), 0 2px 8px -4px rgba(10,31,26,.04);
--shadow-md:0 12px 32px -12px rgba(10,31,26,.14), 0 4px 12px -6px rgba(10,31,26,.06);
--shadow-lg:0 24px 60px -20px rgba(10,31,26,.18), 0 8px 24px -12px rgba(10,31,26,.08);
--shadow-glow-green:0 0 0 4px var(--green-50);
/* Motion. */
--ease:cubic-bezier(.2,.6,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--dur-fast:.15s;
--dur:.22s;
--dur-slow:.36s;
/* Layout. */
--container:1200px;
--container-narrow:840px;
--container-wide:1320px;
--nav-h:68px;
}
/* ───────── 3. BASE ───────── */
body{
font-family:'Geist','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
background:var(--bg);
color:var(--ink);
line-height:1.55;
font-feature-settings:"ss01","cv11";
font-size:var(--t-md);
}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.mono{font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
/* ───────── 4. LAYOUT ───────── */
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px}
.wrap--narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 32px}
.wrap--wide{max-width:var(--container-wide);margin:0 auto;padding:0 32px}
@media(min-width:900px){
.wrap,.wrap--narrow,.wrap--wide{padding:0 48px}
}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}
/* ───────── 5. NAV (page chrome) ───────── */
.aios-nav{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.82);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid var(--line);
}
.aios-nav-row{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em}
/* ── AIOS WORDMARK, .wm-mini ────────────────────────────────────────
Always horizontal: A · I · Haylo face · S on a single baseline.
Drop into any nav/topbar/footer. Size via inline font-size only.
Use .wm-mini.on-dark on dark surfaces (parenthesis arcs flip white).
NEVER stack, wrap, or pair with a separate "AIOS" text node.
*/
.wm-mini{
display:inline-flex !important;
flex-direction:row !important;
align-items:center;
gap:.05em;
font-family:'Geist','Inter',sans-serif;
font-weight:700;
letter-spacing:0;
line-height:.9;
color:var(--ink);
white-space:nowrap;
}
.wm-mini > *{flex:0 0 auto}
.wm-mini .o{width:.78em;height:1.06em;flex-shrink:0;display:inline-block}
.wm-mini.on-dark{color:#fff}
.brand-mark{
display:inline-flex;align-items:center;justify-content:center;
color:var(--ink);
}
.aios-wm{display:inline-flex;align-items:baseline;gap:0;color:var(--ink);line-height:1;font-family:'Geist',system-ui,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em}
.aios-wm-letter{display:inline-block}
.aios-wm-o{display:inline-flex;align-items:center;justify-content:center;width:.95em;height:.95em;margin:0 .02em;align-self:center;transform:translateY(.02em)}
.aios-wm-o svg{display:block;width:100%;height:100%}
.brand-name{font-size:15px;font-weight:600}
.brand-sub{font-family:'Geist Mono',monospace;font-size:11px;color:var(--muted);margin-left:6px}
/* ───────── 6. BUTTONS ───────── */
.btn{
display:inline-flex;align-items:center;gap:8px;
padding:10px 18px;
border-radius:10px;
font-size:14px;font-weight:500;
transition:all var(--dur) var(--ease);
border:1px solid transparent;
white-space:nowrap;line-height:1;
text-decoration:none;
}
.btn:focus-visible{outline:2px solid var(--green-500);outline-offset:2px}
.btn-lg{padding:14px 22px;font-size:15px;border-radius:12px}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-primary:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(10,31,26,.4)}
.btn-green{background:var(--green-600);color:#fff;border-color:var(--green-600)}
.btn-green:hover{background:var(--green-700);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(5,150,105,.45)}
.btn-ghost{color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--warm)}
.btn-link{padding:0;color:var(--green-700);border:none;background:none;font-weight:500;border-bottom:1px dashed var(--green-300)}
.btn-link:hover{color:var(--green-800);border-bottom-color:var(--green-600)}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(2px)}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
/* ───────── 7. BADGES ───────── */
.badge{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;
border-radius:99px;
font-size:12px;font-weight:600;
letter-spacing:.01em;
line-height:1.4;
}
.badge--beta{background:var(--green-100);color:var(--green-700);border:1px solid var(--green-200)}
.badge--info{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.badge--pass{background:var(--green-100);color:var(--green-700);border:1px solid var(--green-200)}
.badge--warn{background:var(--amber-100);color:var(--amber-800);border:1px solid var(--amber-200)}
.badge--gate{background:var(--rose-100);color:var(--rose-800);border:1px solid var(--rose-200)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
/* Eyebrow, small label with a leading bar. */
.eyebrow{
display:inline-flex;align-items:center;gap:8px;
font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;
color:var(--green-700);font-weight:600;
}
.eyebrow::before{content:"";width:24px;height:1.5px;background:var(--green-500)}
/* Pulse eyebrow, pill with pulsing dot, for live/beta states. */
.pulse-pill{
display:inline-flex;align-items:center;gap:8px;
padding:6px 12px 6px 8px;
border-radius:99px;
background:#fff;border:1px solid var(--green-200);
font-size:12.5px;font-weight:500;color:var(--green-700);
box-shadow:var(--shadow-sm);
}
.pulse-pill .pulse{
width:7px;height:7px;border-radius:50%;
background:var(--green-500);
box-shadow:0 0 0 3px var(--green-100);
animation:aios-pulse 2.4s ease-in-out infinite;
}
@keyframes aios-pulse{
0%,100%{box-shadow:0 0 0 3px var(--green-100)}
50%{box-shadow:0 0 0 6px transparent}
}
/* ───────── 8. CARDS ───────── */
.card{
background:#fff;
border:1px solid var(--line);
border-radius:var(--r-xl);
padding:28px;
transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card--interactive:hover{
border-color:var(--green-300);
transform:translateY(-2px);
box-shadow:var(--shadow);
}
.card--accent{background:linear-gradient(180deg,var(--green-50),#fff);border-color:var(--green-200)}
.card--elevated{box-shadow:var(--shadow-lg)}
.card--surface{background:var(--warm)}
/* Soft "blob" success card, used for confirmation states. */
.blob-card{
position:relative;
background:#fff;
border:1px solid var(--green-200);
border-radius:var(--r-2xl);
padding:48px 40px;
overflow:hidden;
}
.blob-card::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(circle at 90% -10%, var(--green-100), transparent 50%),
radial-gradient(circle at -10% 110%, var(--green-50), transparent 55%);
}
.blob-card > *{position:relative}
/* ───────── 9. CODE ───────── */
code,.code-inline{
font-family:'Geist Mono',ui-monospace,monospace;
font-size:.88em;
background:var(--surface);
padding:2px 6px;
border-radius:5px;
border:1px solid var(--line-2);
color:var(--ink-2);
}
pre.code-block{
background:var(--surface);
border:1px solid var(--line-2);
border-radius:var(--r);
padding:16px 18px;
font-family:'Geist Mono',monospace;
font-size:13px;
color:var(--ink);
line-height:1.6;
overflow:auto;
}
/* Dark terminal block, for copy-paste commands. */
.terminal{
position:relative;
background:#0d1411;
border:1px solid #1a2420;
border-radius:var(--r);
padding:18px 20px;
font-family:'Geist Mono',monospace;
font-size:13px;
color:#d4f5e0;
line-height:1.7;
overflow:auto;
}
.terminal .prompt{color:var(--green-400);user-select:none;margin-right:8px}
.terminal .comment{color:#5b8576}
.terminal .ok{color:var(--green-300)}
.terminal .err{color:#ff9b8a}
.terminal-head{
display:flex;align-items:center;justify-content:space-between;
padding:10px 14px;
background:#0a100e;
border:1px solid #1a2420;
border-bottom:none;
border-top-left-radius:var(--r);
border-top-right-radius:var(--r);
}
.terminal-head + .terminal{border-top-left-radius:0;border-top-right-radius:0}
.terminal-head .tlabel{font-family:'Geist Mono',monospace;font-size:11px;color:#7a948a;letter-spacing:.06em;text-transform:uppercase}
.copy-btn{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;
background:rgba(255,255,255,.06);
color:#d4f5e0;
border:1px solid rgba(255,255,255,.08);
border-radius:6px;
font-family:'Geist Mono',monospace;font-size:11px;
cursor:pointer;transition:all var(--dur) var(--ease);
}
.copy-btn:hover{background:rgba(16,185,129,.15);border-color:var(--green-500);color:var(--green-300)}
.copy-btn.copied{background:var(--green-600);color:#fff;border-color:var(--green-600)}
/* ───────── 10. CALLOUTS / ALERTS ───────── */
.callout{
display:flex;gap:14px;
padding:16px 18px;
border-radius:var(--r);
border:1px solid;
font-size:14px;line-height:1.55;
}
.callout .c-ico{width:22px;height:22px;flex-shrink:0;display:grid;place-items:center;border-radius:6px;margin-top:1px}
.callout .c-body{flex:1;min-width:0}
.callout .c-title{font-weight:600;margin-bottom:2px;color:var(--ink)}
.callout--info{background:var(--green-50);border-color:var(--green-200);color:var(--green-800)}
.callout--info .c-ico{background:var(--green-100);color:var(--green-700)}
.callout--info .c-title{color:var(--green-800)}
.callout--success{background:var(--green-50);border-color:var(--green-300);color:var(--green-800)}
.callout--success .c-ico{background:var(--green-500);color:#fff}
.callout--warn{background:var(--amber-50);border-color:var(--amber-200);color:var(--amber-800)}
.callout--warn .c-ico{background:var(--amber-100);color:var(--amber-700)}
.callout--error{background:var(--rose-50);border-color:var(--rose-200);color:var(--rose-800)}
.callout--error .c-ico{background:var(--rose-100);color:var(--rose-700)}
/* ───────── 11. FORMS ───────── */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:13px;font-weight:600;color:var(--ink)}
.label .opt{font-weight:400;color:var(--muted);margin-left:4px}
.input,.textarea{
width:100%;
padding:11px 14px;
background:#fff;
border:1px solid var(--line-3);
border-radius:10px;
font-size:15px;color:var(--ink);
transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:hover,.textarea:hover{border-color:var(--muted-2)}
.input:focus,.textarea:focus{
outline:none;
border-color:var(--green-500);
box-shadow:0 0 0 4px var(--green-50);
}
.input::placeholder,.textarea::placeholder{color:var(--muted-2)}
.textarea{min-height:96px;resize:vertical;line-height:1.55;font-family:inherit}
.field-hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.field-error{font-size:12.5px;color:var(--rose-700);line-height:1.5}
.field.has-error .input,.field.has-error .textarea{border-color:var(--rose-700);box-shadow:0 0 0 4px var(--rose-50)}
/* Segmented toggle (e.g. Full vs Minimal install). */
.seg{display:inline-flex;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;gap:4px}
.seg-opt{
padding:8px 14px;
border-radius:8px;
font-size:13px;font-weight:500;color:var(--muted);
cursor:pointer;border:none;background:none;
transition:all var(--dur) var(--ease);
}
.seg-opt:hover{color:var(--ink)}
.seg-opt[aria-pressed="true"],.seg-opt.is-active{
background:#fff;color:var(--ink);
box-shadow:var(--shadow-sm);
}
/* ───────── 12. AVATARS ───────── */
.av{
width:32px;height:32px;border-radius:50%;
border:2px solid #fff;
background:linear-gradient(135deg,var(--green-200),var(--green-500));
box-shadow:var(--shadow-sm);
display:grid;place-items:center;
color:#fff;font-size:12px;font-weight:600;
}
.av-stack{display:flex}
.av-stack .av + .av{margin-left:-10px}
/* ───────── 13. VERDICT PRIMITIVES ───────── */
.vpill{
display:inline-flex;align-items:center;gap:5px;
font-family:'Geist Mono',monospace;
font-size:11px;font-weight:600;letter-spacing:.06em;
padding:3px 8px;
border-radius:6px;
text-transform:uppercase;
}
.vpill--pass{background:var(--green-100);color:var(--green-700)}
.vpill--warn{background:var(--amber-100);color:var(--amber-800)}
.vpill--gate{background:var(--rose-100);color:var(--rose-800)}
.vicon{
width:24px;height:24px;border-radius:50%;
display:grid;place-items:center;flex-shrink:0;
}
.vicon--pass{background:var(--green-100);color:var(--green-700)}
.vicon--warn{background:var(--amber-100);color:var(--amber-700)}
.vicon--gate{background:var(--rose-100);color:var(--rose-700)}
.vrow{
display:flex;align-items:center;gap:12px;
padding:10px 12px;
border-radius:8px;
font-size:13.5px;
}
.vrow + .vrow{margin-top:2px}
.vrow:hover{background:var(--surface)}
.vrow--warn{background:var(--amber-50)}
.vrow--gate{background:var(--rose-50)}
.vrow .vfile{font-family:'Geist Mono',monospace;color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.vrow .vrule{color:var(--muted);font-size:12px;flex-shrink:0}
/* ───────── 14. DOT GRID BG ───────── */
.dotgrid{
background-image:radial-gradient(circle at 1px 1px, rgba(10,31,26,.06) 1px, transparent 0);
background-size:22px 22px;
}
.softwash{
background-image:
radial-gradient(circle at 50% 0%, var(--green-50), transparent 50%),
radial-gradient(circle at 1px 1px, rgba(10,31,26,.05) 1px, transparent 0);
background-size: auto, 22px 22px;
mask-image: linear-gradient(to bottom, black, transparent 80%);
-webkit-mask-image: linear-gradient(to bottom, black, transparent 80%);
}
/* ───────── 15. SECTION ───────── */
.sec{padding:96px 0;position:relative}
.sec--alt{background:var(--surface)}
.sec-head{margin-bottom:48px;max-width:720px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-title{
font-size:clamp(28px,3.4vw,42px);
line-height:1.1;letter-spacing:-.03em;
font-weight:600;margin-top:16px;
}
.sec-title .accent{color:var(--green-700)}
.sec-sub{font-size:17px;color:var(--muted);max-width:580px;margin-top:18px;line-height:1.6;text-wrap:pretty}
/* ───────── 16. FOOTER ───────── */
.aios-foot{padding:48px 0 56px;border-top:1px solid var(--line);background:var(--warm)}
.aios-foot a{color:var(--muted);font-size:13.5px;transition:color var(--dur) var(--ease)}
.aios-foot a:hover{color:var(--green-700)}
/* ───────── 17. UTILITY ───────── */
.muted{color:var(--muted)}
.ink{color:var(--ink)}
.accent{color:var(--green-700)}
.center{text-align:center}
.hide{display:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ───────── 99. MOBILE (≤760px), shared overrides ───────── */
/* Applies to every page that links aios.css. Goal: legible + tappable on
phones without changing layout intent. Doesn't touch desktop CSS, the
media query is bounded to ≤760px, the standard tablet-and-down breakpoint
used by the landing page's existing queries. */
@media(max-width: 760px) {
.wrap, .wrap--narrow, .wrap--wide { padding: 0 18px }
/* Stack any 2+ column grid to a single column on phones. Page-specific
grids that need a different mobile treatment can opt out with their
own narrower media query. */
.signup-shell,
.signup-grid,
.kp-hero,
.ts-layout,
.doc,
.key-page,
.key-wrap > .kp-hero,
.confirmed-card > .row,
.ps,
.row-2 { grid-template-columns: 1fr !important; display: block !important }
/* Hero / heading sizes, desktop uses clamp(40,5vw,68) etc. which is
already partially responsive, but cap further on phones so big hero
text doesn't overflow. */
h1, .ts-h1, .key-page h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.1 !important }
h2 { font-size: clamp(18px, 5vw, 22px) !important }
.lede, .card-sub { font-size: 15px !important; line-height: 1.55 !important }
/* Tap targets, minimum 44×44 per WCAG and iOS HIG. */
.btn, .btn-sm, .filter-chip, .detect-tool { min-height: 44px; padding-top: 12px; padding-bottom: 12px }
/* Code blocks, let long terminal commands scroll horizontally inside
the block (not push the page wider) and shrink font for mobile. */
.code, pre, .code-body { font-size: 12.5px !important; max-width: 100% }
.code-body { overflow-x: auto; -webkit-overflow-scrolling: touch }
pre { white-space: pre-wrap; word-break: break-word }
/* Cards / surfaces, tighter padding so content gets the room. */
.signup-card, .key-page .key-card, .confirmed-card, .ps-card,
.ts-haylo-card, .detect, .stuck { padding: 22px 18px !important }
/* Sign-up / key-issuance specific, center the form, stack the
marketing side beneath, eliminate side-by-side comparison. */
.signup-shell, .signup-grid { gap: 24px !important; padding: 24px 0 !important }
.signup-left { display: none !important } /* marketing column hidden on phones; primary action stays visible */
/* Hero CTAs, full-width buttons on phones, easier to tap. */
.hero-cta, .hero-ctas, .kp-cta-row, .key-page .cta-row { flex-direction: column !important; gap: 10px !important }
.hero-cta .btn, .hero-ctas .btn { width: 100% !important; justify-content: center }
/* Nav, collapse the link strip on phones; keep brand + primary CTA */
.aios-nav-row .nav-links,
.ab-nav-links { display: none !important }
/* Table chrome (Terms TOC, admin views), let tables horizontal-scroll
rather than break. */
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch }
/* Footer, stack columns */
footer .ft, footer ul { display: block !important }
footer ul li { margin-bottom: 6px }
/* Hide non-essential decorative mascots / SVGs on phones so the form
gets full width. They're aria-hidden so dropping them doesn't hurt
accessibility. */
.sh-haylo, .kp-mascot { display: none !important }
}