/* ══════════════════════════════════════════════════════════════════════════
MAI SYSTEM — one design layer for every page except the dashboard.
Loaded LAST in so it wins over each page's legacy inline CSS on
equal specificity, and so redefining :root here re-tokenises the five
shared sheets (answers/laws/glossary/guides/checks) that already consume
var(--bg), var(--ink), var(--violet) …
Violet is the brand accent — it is what those 356 content pages already
use, so the homepage now matches them rather than the reverse.
Every animated property here is transform or opacity.
══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/familjen-400.woff2) format('woff2')}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/familjen-500.woff2) format('woff2')}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/familjen-700.woff2) format('woff2')}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/martianmono-300.woff2) format('woff2')}
:root{
--bg:#050509;
--bg-2:#0b0b14;
--panel:#0d0d18;
--panel-2:#131322;
--surface:#171728;
--line:#1e1e2e;
--line-2:#2b2b40;
--ink:#f0f0f8;
--ink-2:#a3a6bd;
--ink-3:#7a7e96;
--ink-4:#5a5e73;
--muted:#a3a6bd;
--dim:#7a7e96;
/* the brand accent */
--violet:#a855f7;
--violet2:#7c3aed;
--acc:#a855f7;
--acc-hot:#7c3aed;
--acc-soft:rgba(168,85,247,.14);
--acc-line:rgba(168,85,247,.38);
--crit:#ff5f52;
--high:#e0a32e;
--green:#16c784;
--ease:cubic-bezier(0.16,1,0.3,1);
--mai-t:.42s;
--display:'Familjen Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--mono:'Martian Mono',ui-monospace,monospace;
/* ── legacy token aliases ────────────────────────────────────────────────
562 hand-authored and generated pages consume their own token names.
Redefining them here (this sheet loads last) re-skins every one of them
without touching their markup. NOTE: --ui and --display are FONT tokens
on those pages, not timings — my duration token is --mai-t for exactly
that reason. */
--black:#050509;
--text:#f0f0f8;
--muted2:#7a7e96;
--faint:#5a5e73;
--surface:#131322;
--rule:#1e1e2e;
--border:#1e1e2e;
--border2:#2b2b40;
--v:#a855f7;
--v2:#7c3aed;
--accent:#a855f7;
--accent2:#7c3aed;
--red:#ff5f52;
--amber:#e0a32e;
--cyan:#4de0ff;
--ui:'Familjen Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--gutter:clamp(18px,4vw,44px);
--maxw:1320px;
}
html{-webkit-text-size-adjust:100%}
body{
background:var(--bg);color:var(--ink);
font-family:var(--display);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-x:hidden;
}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
img,svg,canvas,video{max-width:100%}
/* ── typography: the homepage scale, applied everywhere ─────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:1.02}
h1{font-size:clamp(34px,4.4vw,58px)}
h2{font-size:clamp(27px,3vw,42px)}
h3{font-size:clamp(19px,1.5vw,24px);letter-spacing:-.04em}
p,li,td,th{font-family:var(--display);letter-spacing:-.01em}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--acc-hot)}
code,kbd,pre,.mono{font-family:var(--mono)}
/* ── no invisible text ──────────────────────────────────────────────────────
66 pages paint headings with a gradient plus -webkit-text-fill-color:
transparent and background-clip:text. Where that fill fails to paint, the
text is INVISIBLE while still occupying space — measured on
/how-it-works.html: "in under 30 seconds." held a 240x107px blank block.
The system is flat/one-accent, so force glyphs to paint in their own
colour. Any gradient still clips behind the now-opaque text, harmlessly. */
h1,h2,h3,h4,h5,h6,p,li,a,span,em,b,strong,td,th,figcaption,blockquote{
-webkit-text-fill-color:currentColor!important; /* page rules like
`.hero-h1 .line2` outrank a bare element selector, so this needs the
override to actually take effect */
}
/* mono eyebrow/label treatment, matched to the homepage */
.kk,.eyebrow,.lbl,.tag,.kicker{
font-family:var(--mono)!important;font-weight:300!important;
font-size:10px!important;letter-spacing:.18em!important;text-transform:uppercase!important;
color:var(--ink-3)!important;
}
/* ── surfaces + rules inherited by the legacy sheets ────────────────────── */
nav{background:rgba(5,5,9,.86)!important;border-bottom:1px solid var(--line)!important;
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
nav .brand{font-family:var(--display)!important;font-weight:700!important;letter-spacing:-.05em!important}
hr{border:0;border-top:1px solid var(--line)}
/* ── buttons: one shape across every legacy class name ──────────────────── */
a.btn,button.btn,a.cta,button.cta,button.calc-btn,.convert a,.upgrade-band a,a.btn-primary,.hub-card .go{
font-family:var(--mono);font-weight:300;letter-spacing:.14em;text-transform:uppercase;
font-size:10.5px;border-radius:999px;
transition:background var(--mai-t) var(--ease),color var(--mai-t) var(--ease),
border-color var(--mai-t) var(--ease),transform var(--mai-t) var(--ease);
}
/* Scoped to real controls on purpose: `.cta` is a CONTAINER div on /laws/
and a button elsewhere, so styling the bare class turned a wrapper into a
purple slab and pushed the page 42px wider than the viewport. */
a.btn,button.btn,a.cta,button.cta,button.calc-btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:46px;padding:13px 26px;
background:var(--acc);color:#fff;border:0;
}
a.btn:hover,button.btn:hover,a.cta:hover,button.cta:hover,button.calc-btn:hover{
background:var(--acc-hot);color:#fff;transform:translateY(-2px)}
a.btn:active,button.btn:active,a.cta:active,button.cta:active,button.calc-btn:active{
transform:translateY(0) scale(.98)}
/* secondary buttons must stay secondary — the generic a.btn rule above would
otherwise paint ghost buttons the same solid violet as the primary */
a.btn-ghost,button.btn-ghost,a.btn-secondary,button.btn-secondary{
background:transparent!important;color:var(--ink)!important;
border:1px solid var(--line-2)!important}
a.btn-ghost:hover,button.btn-ghost:hover,a.btn-secondary:hover,button.btn-secondary:hover{
background:transparent!important;border-color:var(--acc)!important;color:var(--acc)!important}
/* ── cards / panels used across the content templates ─────────────────────
These were a flat #0d0d18 fill inside a flat 1px border — the same value
edge to edge, so a grid of them read as a wireframe rather than as
surfaces. Three cheap additions give them a body: a top-lit gradient (the
light in this system comes from above, same as the hero globe), an inset
hairline along the top edge, and a violet lift on hover to match the
accent. All compositable; nothing animates a paint property.
`background-image` needs its own `!important` because the `background`
shorthand below sets background-image to `none` at that weight. */
.tcard,.hub-card,.rel-c,.term,.faq-i,.decode,.related a{
background:var(--panel)!important;
background-image:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 46%)!important;
border:1px solid var(--line)!important;border-radius:14px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
transition:transform var(--mai-t) var(--ease),border-color var(--mai-t) var(--ease),
box-shadow var(--mai-t) var(--ease)}
.tcard:hover,.hub-card:hover,.rel-c:hover,.related a:hover,.decode:hover{
transform:translateY(-3px);border-color:var(--acc-line)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 42px -22px rgba(168,85,247,.55)}
/* ── shared page chrome injected by mai-motion.js ───────────────────────── */
.mai-bar{position:sticky;top:0;z-index:120;background:rgba(5,5,9,.78);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid transparent;transition:border-color var(--mai-t) var(--ease)}
.mai-bar.stuck{border-bottom-color:var(--line)}
.mai-bar-in{max-width:var(--maxw);margin:0 auto;padding:14px var(--gutter);
display:flex;align-items:center;gap:18px}
.mai-bar a.mai-logo{display:flex;align-items:center;gap:9px;font-family:var(--display);
font-weight:700;font-size:16px;letter-spacing:-.05em;color:var(--ink)}
.mai-bar a.mai-logo img{width:23px;height:23px;border-radius:5px}
.mai-bar nav.mai-nav{display:flex;gap:26px;margin-left:auto;font-family:var(--mono);
font-weight:300;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.mai-bar nav.mai-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-3)}
.mai-bar nav.mai-nav a:hover{color:var(--ink)}
.mai-bar .mai-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
padding:11px 20px;border-radius:999px;background:var(--acc);color:#fff;
font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
transition:background var(--mai-t) var(--ease),transform var(--mai-t) var(--ease)}
.mai-bar .mai-cta:hover{background:var(--acc-hot);color:#fff;transform:translateY(-2px)}
@media(max-width:820px){.mai-bar nav.mai-nav{display:none}}
/* ══════════════════════════════════════════════════════════════════════════
THE BRAND LOCKUP — one size, one face, one colour, on every page.
──────────────────────────────────────────────────────────────────────────
Measured before this rule existed: the wordmark rendered at 15px on
/login, 16px in the injected .mai-bar, 17px on the homepage, 18px on
/trust and /who-its-for, 19px on the /laws and /answers templates — in
FRAUNCES SERIF on the 531 pages that carry their own `--display`, in
FAMILJEN GROTESK on the homepage, and in accent VIOLET on /guides where
the wordmark anchor inherited the bare `a{color:var(--acc)}` above. The
name of the product was the least consistent and least legible piece of
type on the site.
`!important` throughout is not laziness: 19 of these anchors carry the
font stack in a `style=""` attribute, which nothing else can outrank.
The `nav > a[href="/"]` arm targets exactly those inline-styled anchors.
It is written as its own rule rather than folded into the list below so a
selector a browser dislikes cannot invalidate the whole declaration —
the same reason the `:has()` refinement sits alone further down.
══════════════════════════════════════════════════════════════════════════ */
.brand,nav .brand,.logo-box,.nav-brand,.mai-bar a.mai-logo,a.mai-logo{
display:inline-flex!important;align-items:center;gap:11px;
font-family:var(--display)!important;
font-size:clamp(20px,1.3vw,23px)!important;
font-weight:700!important;letter-spacing:-.035em!important;
color:var(--ink)!important;white-space:nowrap;line-height:1.1}
nav > a[href="/"]{
font-family:var(--display)!important;
font-size:clamp(20px,1.3vw,23px)!important;
font-weight:700!important;letter-spacing:-.035em!important;
color:var(--ink)!important;gap:11px!important;line-height:1.1}
/* A wordmark wrapped in its own element must not re-declare a smaller size or
a different weight. `b` and `em` are in the list because 363 pages mark the
second word up as `Main AI` and their sheet sets `nav .brand b
{font-weight:400}` — at (0,1,2) that outranks the parent and rendered the
name half-bold, half-light. */
.nav-wordmark,
.brand span,.brand b,.brand strong,.brand em,.brand i,
.logo-box span,.logo-box b,.logo-box strong,
.nav-brand span,.nav-brand b,.nav-brand strong,
a.mai-logo span,a.mai-logo b,
nav > a[href="/"] span,nav > a[href="/"] b,nav > a[href="/"] strong{
font-family:inherit!important;font-size:inherit!important;
font-weight:inherit!important;letter-spacing:inherit!important;color:inherit!important}
/* The mark scales with the word instead of sitting under it. The PNG carries
its own near-black plate, so it needs a radius once it is big enough to
read as a square. */
.brand img,.logo-box img,.nav-brand img,.nav-logo img,a.mai-logo img,
.mai-bar a.mai-logo img,nav > a[href="/"] > img{
width:clamp(29px,1.95vw,34px)!important;height:auto!important;aspect-ratio:1;
border-radius:8px!important;flex:0 0 auto}
.nav-logo{display:inline-flex;align-items:center}
/* hover must not repaint the wordmark violet — it is a brand mark, not a link */
.brand:hover,.logo-box:hover,.nav-brand:hover,a.mai-logo:hover,nav > a[href="/"]:hover{
color:var(--ink)!important;opacity:.82}
/* ── scroll reveal: visible by default, GSAP sets from-state when running ─ */
[data-reveal]{opacity:1}
/* ── custom cursor (desktop pointer only) ───────────────────────────────── */
.mai-cur{position:fixed;top:0;left:0;z-index:290;pointer-events:none;border-radius:50%;
opacity:0;transition:opacity .3s var(--ease)}
.mai-cur.on{opacity:1}
.mai-cur-dot{width:6px;height:6px;background:var(--acc);margin:-3px 0 0 -3px}
.mai-cur-ring{width:36px;height:36px;border:1px solid var(--line-2);margin:-18px 0 0 -18px;
transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),
border-color .25s var(--ease),opacity .3s var(--ease)}
.mai-cur-ring.hot{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--acc)}
@media(hover:none),(pointer:coarse){.mai-cur{display:none!important}}
/* ── mobile hygiene, site-wide ──────────────────────────────────────────── */
@media(max-width:640px){
body{font-size:16px}
h1{font-size:clamp(30px,8vw,38px)}
h2{font-size:clamp(24px,6.4vw,30px)}
/* full-width controls in content, never in the nav bar — stretching a nav
button is what pushed .site-nav to 412px at a 390px viewport */
main a.btn,main button.btn,main a.cta,main button.cta,main button.calc-btn{width:100%}
nav a.btn,nav button.btn,header a.btn,header button.btn,
.mai-bar a.btn,.nav-actions a.btn,.nav-r a.btn,.nav-actions .btn{width:auto!important}
/* legacy navs carry a brand + two CTAs; at 390px that needs shrinking or
the wordmark wraps and the last button clips off the edge */
nav,.site-nav,.mai-bar-in{flex-wrap:wrap;row-gap:8px}
/* was 15px — below the size the wordmark is legible at, and smaller than
the body copy underneath it. 18px still leaves room for two nav buttons
at 390px (measured: the bar lands at 372px inside a 390px viewport). */
nav .brand,.brand,.mai-bar a.mai-logo,.logo-box,.nav-brand,nav > a[href="/"]{
white-space:nowrap;font-size:18px!important}
.brand img,.logo-box img,.nav-brand img,.nav-logo img,a.mai-logo img,
nav > a[href="/"] > img{width:27px!important}
nav a.btn,nav button.btn,.nav-actions a.btn,.nav-actions .btn,.nav-r a.btn,.nav-r .btn{
min-height:40px!important;padding:9px 13px!important;font-size:9.5px!important;
letter-spacing:.08em!important}
.nav-actions,.nav-r{gap:6px!important;flex-shrink:1;min-width:0}
/* decorative full-bleed layers must never create a scrollbar */
.grid-bg,.hero-visual-glow,[class*="-glow"],[class*="glow-"]{max-width:100%!important}
.rel,.related,.rel-g{max-width:100%}
.rel>*,.related>*{max-width:100%}
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
pre{overflow-x:auto}
}
/* ══════════════════════════════════════════════════════════════════════════
SITE-WIDE FINISH
Everything below applies to all ~560 pages that carry this sheet. It is
deliberately restricted to properties whose value is legible on any of
them without knowing that page's layout: link affordance, surface depth,
rules, tables, form controls, scrollbar. Nothing here changes a container
width, a grid, or a vertical rhythm — those differ per template and a
blind global change to them is how a design layer breaks 560 pages at
once.
══════════════════════════════════════════════════════════════════════════ */
/* ── in-prose links get an affordance ─────────────────────────────────────
`a{color:var(--acc)}` was the only signal a link existed, and against
--ink-2 body copy on a near-black ground that is a hue shift of a few
percent — on /laws/habitability three inline citations were effectively
invisible. Scoped to DIRECT children of prose elements on purpose: card
links, nav links, buttons and breadcrumbs are all anchors too, and none
of them should grow an underline. */
p > a,li > a,dd > a,blockquote > a,td > a{
color:var(--acc);
text-decoration:underline;
text-decoration-color:rgba(168,85,247,.42);
text-decoration-thickness:1px;
text-underline-offset:.22em;
transition:color var(--mai-t) var(--ease),text-decoration-color var(--mai-t) var(--ease)}
p > a:hover,li > a:hover,dd > a:hover,blockquote > a:hover,td > a:hover{
color:#c99cff;text-decoration-color:currentColor}
/* an anchor that IS a button or a card never wants prose treatment */
p > a.btn,li > a.btn,p > a.cta,li > a.cta,p > a[class*="card"],li > a[class*="card"]{
text-decoration:none}
/* ── headings: stop the orphan ────────────────────────────────────────────
Long editorial headings on the content templates routinely broke with one
word alone on the last line. `balance` is ignored where unsupported. */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
/* ── rules and dividers ───────────────────────────────────────────────────
A flat 1px line across a 1320px container is the heaviest element on a
quiet page. Fading it at both ends makes it read as a division rather
than as a border someone forgot to remove. */
hr{border:0;height:1px;background:linear-gradient(90deg,
transparent,var(--line-2) 12%,var(--line-2) 88%,transparent)}
/* ── tables: the law pages are mostly tables ──────────────────────────────
Statute tables carried no consistent treatment, so column alignment and
row separation changed page to page. */
table{border-collapse:collapse;width:100%}
th{font-family:var(--mono);font-weight:300;font-size:10px;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3);text-align:left;
padding:12px 14px;border-bottom:1px solid var(--line-2);vertical-align:bottom}
td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);
vertical-align:top;letter-spacing:-.01em}
tbody tr{transition:background var(--mai-t) var(--ease)}
tbody tr:hover{background:rgba(168,85,247,.045)}
tbody tr:last-child td{border-bottom:0}
/* ── code and quoted document text ────────────────────────────────────────
These carry the quoted clause on the analyzer and answer templates, and
an unstyled on a dark ground is indistinguishable from bold. */
code,kbd{font-family:var(--mono);font-size:.88em;
background:rgba(168,85,247,.10);border:1px solid rgba(168,85,247,.18);
border-radius:5px;padding:.12em .38em;color:#d7bcff}
pre{background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:16px 18px;overflow-x:auto}
pre code{background:none;border:0;padding:0;color:var(--ink-2)}
blockquote{margin:22px 0;padding:4px 0 4px 20px;
border-left:2px solid var(--acc-line);color:var(--ink-2)}
/* ── form controls ────────────────────────────────────────────────────────
The free tools are the most-used pages that are not content, and their
selects and inputs were browser-default on a dark ground: light-on-light
in Chrome, near-invisible in Safari. */
input[type=text],input[type=email],input[type=number],input[type=search],
input[type=tel],input[type=url],select,textarea{
font-family:var(--display);font-size:15px;letter-spacing:-.01em;
color:var(--ink);background:var(--panel-2);
border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;
transition:border-color var(--mai-t) var(--ease),box-shadow var(--mai-t) var(--ease)}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,
input[type=search]:focus,input[type=tel]:focus,input[type=url]:focus,
select:focus,textarea:focus{
outline:none;border-color:var(--acc-line);
box-shadow:0 0 0 3px rgba(168,85,247,.16)}
select{appearance:none;-webkit-appearance:none;padding-right:38px;
background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
/* ── buttons keep their shape and gain a press ────────────────────────────
The primary was a flat fill. A top-lit gradient and a contained halo make
it the brightest object on the page, which is what a single primary
action should be. */
a.btn,button.btn,a.cta,button.cta,button.calc-btn{
background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));
box-shadow:0 8px 24px -12px rgba(168,85,247,.85)}
a.btn:hover,button.btn:hover,a.cta:hover,button.cta:hover,button.calc-btn:hover{
box-shadow:0 14px 34px -12px rgba(168,85,247,1)}
a.btn-ghost,button.btn-ghost,a.btn-secondary,button.btn-secondary{
background-image:none!important;box-shadow:none!important}
/* ── scrollbar ────────────────────────────────────────────────────────────
A default light scrollbar on a #050509 page is the brightest thing on the
screen. Firefox reads the two properties; WebKit reads the pseudos. */
html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;
border:3px solid var(--bg);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#3b3b56;background-clip:padding-box}
/* ── sticky bar depth ─────────────────────────────────────────────────────
`nav` is already opaque and blurred; it just had no edge once content
scrolled under it. */
nav{box-shadow:0 1px 0 rgba(255,255,255,.03),0 12px 30px -24px rgba(0,0,0,.9)}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
[data-reveal]{opacity:1!important;transform:none!important}
.mai-cur{display:none!important}
}