/* Mist: Arma Partners portal layer (2026-10-28). Linked last in <head>; restyles the existing DOM only.
   Dotted cream field, the misty stack of folders behind each page title (a referral is a file handed on),
   page titles at 300 weight, the partner's headline numbers as a mosaic of photographic wash tiles whose
   hairline strokes are drawn from the numbers on screen (partners-mist.js), every list and form a cream
   panel with hairlines, status as plain words, the lime dot only for the current tab and the latest point.
   No glass, no blur, no CSS gradient fills, no pills, no icon chips, no shadows on panels. Light only.
   Page hooks: <html data-mist="login|landing|admin|dashboard|leads|earnings|payouts|toolkit"> and
   .mist-shell on the five signed-in partner pages, set by one line in base.html before first paint. */

:root {
  --m-cream:#F3F1EC; --m-cream-2:#EBE8E1; --m-soft:#F8F7F3;
  --m-line:rgba(30,31,26,.12); --m-line-2:rgba(30,31,26,.22); --m-dots:rgba(30,31,26,.055);
  --m-ink:#1E1F1A; --m-ink-2:#4E4F48; --m-mute:#65665F;
  --m-forest:#1B4D47; --m-forest-2:#143B36; --m-lime:#D7F43A; --m-lime-ring:#8FA800;
  --m-good:#1C6B2E; --m-warn:#8A5A00; --m-bad:#A62A1E;
  --m-pjs:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --m-inter:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --m-ease:200ms ease-out;
  /* the app's own tokens, remapped so inline styles in the templates follow the look */
  --bg-page:var(--m-cream); --bg-card:#FFFFFF; --bg-soft:var(--m-soft); --bg-hover:var(--m-soft);
  --ink:var(--m-ink); --ink-dim:var(--m-ink-2); --mute:var(--m-mute);
  --line:var(--m-line); --line-2:var(--m-line-2);
  --green-900:var(--m-forest-2); --green-700:var(--m-forest); --green-500:var(--m-forest);
  --green-300:#8FB3A8; --green-100:#DCE6E1; --green-soft:rgba(27,77,71,.07);
  --gold:#C9962E; --gold-ink:var(--m-warn); --gold-soft:rgba(201,150,46,.12);
  --good:var(--m-good); --good-soft:rgba(28,107,46,.08); --warn:var(--m-warn); --warn-soft:rgba(201,150,46,.12);
  --bad:var(--m-bad); --bad-soft:rgba(166,42,30,.07); --info:var(--m-forest); --info-soft:rgba(27,77,71,.07);
  --r-sm:4px; --r-md:4px; --r-lg:4px;
  --sh-sm:none; --sh-md:none;
  --accent:var(--m-forest);
  --surface-glass:var(--m-cream); --glass-blur:0px; --glass-edge:none;
}

/* ============================================================ base */
html, body { background-color:var(--m-cream); }
body { font-family:var(--m-inter); font-size:15px; line-height:1.5; letter-spacing:0; color:var(--m-ink);
  background-image:radial-gradient(var(--m-dots) 1px, transparent 1.2px); background-size:12px 12px; }
a { color:var(--m-forest); text-underline-offset:2px; }
::selection { background:rgba(215,244,58,.6); color:var(--m-ink); }
:focus-visible { outline:2px solid var(--m-ink); outline-offset:2px; }
button, a, select, input, textarea { -webkit-tap-highlight-color:transparent; }
.empty { color:var(--m-mute); }
.footer { margin-top:56px; padding:0 16px 28px; font:400 13px/1.5 var(--m-inter); color:var(--m-mute); }
.footer a { color:var(--m-ink-2); }

/* ============================================================ type */
h1.page { margin:0; font:300 52px/1.06 var(--m-pjs); letter-spacing:-.02em; color:var(--m-ink); }
.sub { font:400 16px/1.55 var(--m-inter); color:var(--m-ink-2); }
.sect { margin-top:44px; }
.sect .slbl { font:500 13px/1.35 var(--m-inter); letter-spacing:0; text-transform:none; color:var(--m-ink-2); }
.sect h2 { margin:6px 0 6px; font:300 32px/1.15 var(--m-pjs); letter-spacing:-.015em; color:var(--m-ink); }
.sect .ssub { margin:0 0 16px; font:400 15px/1.55 var(--m-inter); color:var(--m-ink-2); max-width:72ch; }
.lbl { margin-bottom:10px; font:400 20px/1.3 var(--m-pjs); letter-spacing:-.005em; text-transform:none; color:var(--m-ink); }
.big { font:300 44px/1.05 var(--m-pjs); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--m-ink); }
.big .unit { font:400 15px/1 var(--m-inter); color:inherit; }
.cap { margin-top:8px; font:400 14px/1.45 var(--m-inter); color:var(--m-ink-2); }
.mono { font-family:var(--m-inter); font-variant-numeric:normal; color:var(--m-ink-2); }
label.f { margin:14px 0 6px; font:500 13px/1.3 var(--m-inter); letter-spacing:0; text-transform:none; color:var(--m-ink-2); }

/* ============================================================ panels, lists, forms: white paper, hairlines, square */
.card { background:#FFFFFF; border:1px solid var(--m-line); border-radius:4px; box-shadow:none; padding:22px; }
.grid { gap:12px; }
.tblwrap { background:#FFFFFF; border:1px solid var(--m-line); border-radius:4px; box-shadow:none; }
table { font-variant-numeric:tabular-nums; }
th { padding:12px 16px; font:500 13px/1.3 var(--m-inter); letter-spacing:0; text-transform:none; color:var(--m-mute);
  background:#FFFFFF; border-bottom:1px solid var(--m-line-2); white-space:nowrap; }
td { padding:14px 16px; font-size:15px; line-height:1.45; border-top:1px solid var(--m-line); }
td.mono { white-space:nowrap; }
tr:hover td { background:var(--m-soft); }
td b { font-weight:500; }
.note { background:#FFFFFF; border:1px solid var(--m-line); border-radius:4px; padding:16px 18px; font:400 15px/1.6 var(--m-inter); color:var(--m-ink); }
.note b { font-weight:600; }
.note.warn { background:#FBF6EA; border-color:rgba(138,90,0,.28); color:#5A3C00; }
input, select, textarea { min-height:44px; padding:10px 12px; border-radius:6px; border:1px solid var(--m-line-2); background:#FFFFFF;
  font:400 15px/1.4 var(--m-inter); color:var(--m-ink); box-shadow:none; transition:border-color var(--m-ease); }
textarea { min-height:88px; }
input[type=checkbox] { min-height:0; width:18px; height:18px; accent-color:var(--m-forest); }
input[type=file] { padding:9px 10px; }
input::placeholder, textarea::placeholder { color:#7A7B73; }
input:hover, select:hover, textarea:hover { border-color:rgba(30,31,26,.36); }
input:focus, select:focus, textarea:focus { border-color:var(--m-ink); box-shadow:none; outline:2px solid var(--m-ink); outline-offset:-1px; }
.btn { display:inline-flex !important; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:10px 18px;
  border:1px solid var(--m-forest); border-radius:6px; background:var(--m-forest); color:#FFFFFF;
  font:500 15px/1.2 var(--m-inter); letter-spacing:0; text-decoration:none; transition:background-color var(--m-ease), border-color var(--m-ease); }
.btn:hover { background:var(--m-forest-2); border-color:var(--m-forest-2); }
.btn.sec { background:#FFFFFF; color:var(--m-ink); border:1px solid var(--m-line-2); }
.btn.sec:hover { background:#FFFFFF; border-color:rgba(30,31,26,.45); }

/* status as plain words with a small dot in the status colour (no pills) */
.pill { display:inline-flex !important; align-items:center; gap:7px; padding:0 !important; border-radius:0; background:none !important;
  font:500 14px/1.3 var(--m-inter) !important; letter-spacing:0; color:var(--m-ink-2); }
.pill::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; }
.pill.good { color:var(--m-good); }
.pill.info { color:var(--m-forest); }
.pill.warn { color:var(--m-warn); }
.pill.bad { color:var(--m-bad); }
.pill.mute { color:var(--m-mute); }

/* ============================================================ top bar: cream, hairline, square tabs (current = paper tile + lime dot) */
.topbar { gap:12px 18px; padding:12px 28px; background:var(--m-cream); -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none; border-bottom:1px solid var(--m-line); }
.brand { gap:12px; }
.brand img { width:44px; height:44px; padding:6px; background:#FFFFFF; border:1px solid var(--m-line); border-radius:4px; }
.brand .bt { font:500 17px/1.15 var(--m-pjs); letter-spacing:-.01em; color:var(--m-ink); }
.brand .bs { margin-top:2px; font:400 13px/1.3 var(--m-inter); letter-spacing:0; text-transform:none; color:var(--m-mute); }
.nav { gap:4px; margin-left:18px; }
.nav a { position:relative; display:inline-flex; align-items:center; height:40px; padding:0 14px; border:1px solid transparent; border-radius:4px;
  font:400 15px/1 var(--m-inter); color:var(--m-ink-2); transition:background-color var(--m-ease), border-color var(--m-ease), color var(--m-ease); }
.nav a:hover { background:rgba(255,255,255,.75); color:var(--m-ink); }
.nav a.on { padding-left:28px; background:#FFFFFF; border-color:var(--m-line); color:var(--m-ink); font-weight:500; }
.nav a.on::before { content:""; position:absolute; left:12px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:var(--m-lime); box-shadow:0 0 0 1px var(--m-lime-ring); }
.topright { gap:12px; }
.who { font:400 14px/1.3 var(--m-inter); color:var(--m-ink-2); }
.who b { font-weight:500; color:var(--m-ink); }
.topright .btn.sec { min-height:40px; }

/* ============================================================ signed-in partner pages: the hero is the page head
   The folders sit top right inside the page column and fade into the dotted cream; the title runs at 300 weight. */
.mist-shell body, [data-mist=landing] body { isolation:isolate; }
.mist-shell body::before, [data-mist=landing] body::before { content:""; position:absolute; z-index:-1; top:0; right:0; width:min(48vw, 680px); height:400px; pointer-events:none;
  background:url(obj-folders-1200.webp?v=20261028mist) no-repeat 58% 44% / 100% auto;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 44%), linear-gradient(to bottom, #000 50%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 44%), linear-gradient(to bottom, #000 50%, transparent 100%);
  mask-composite:intersect; }
[data-mist=landing] body::before { width:min(52vw, 760px); height:680px; background-position:60% 52%; }
.mist-shell .wrap { position:relative; max-width:1140px; padding:0 28px 72px; }
.mist-shell .wrap > h1.page { max-width:56%; padding:68px 0 14px; }
.mist-shell .wrap > .sub { max-width:min(48ch, 52%); margin:0 0 52px; }

/* ---------- dashboard: the four headline numbers become the mosaic (2px cream gutters) */
[data-mist=dashboard] .wrap > .grid.g4 { gap:2px; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows:minmax(214px, auto); }
[data-mist=dashboard] .wrap > .grid.g4 > .card { position:relative; isolation:isolate; overflow:hidden; container-type:inline-size;
  display:flex; flex-direction:column; padding:20px 22px 18px; border:0; border-radius:0; color:var(--m-ink);
  background-color:#E4E0D6; background-repeat:no-repeat; background-size:cover; }
[data-mist=dashboard] .wrap > .grid.g4 > .card > :not(.mist-art):not(.mist-foot) { position:relative; z-index:1; }
[data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(1) { grid-row:span 2; color:#FFFFFF;
  background-image:url(wash-forest-1080.webp?v=20261028mist); background-position:18% 0; background-size:150% auto; }
[data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(2) { background-image:url(wash-ochre-720.webp?v=20261028mist); background-position:50% 8%; background-size:cover; }
[data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(3) { background-image:url(wash-sage-720.webp?v=20261028mist); background-position:40% 40%; }
[data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(4) { grid-column:2 / span 2; background-image:url(wash-slate-720.webp?v=20261028mist); background-position:0 0; background-size:cover; }
[data-mist=dashboard] .wrap > .grid.g4 .lbl { margin:0 0 10px; font:500 14px/1.35 var(--m-inter); color:inherit; }
[data-mist=dashboard] .wrap > .grid.g4 .big { font-size:min(52px, 17cqi); color:inherit; }
[data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(1) .big { font-size:min(76px, 19cqi); margin-top:4px; }
[data-mist=dashboard] .wrap > .grid.g4 .cap { margin-top:10px; font:500 14px/1.45 var(--m-inter); color:inherit; max-width:32ch; }
[data-mist=dashboard] .wrap > .grid.g4 > .card.mist-has-art { padding-bottom:116px; }
[data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(1).mist-has-art { padding-bottom:236px; }

/* line-art: hairline strokes that ARE the chart of the tile, drawn in the band under the text */
.mist-art { position:absolute; z-index:0; pointer-events:none; --m-stroke:rgba(30,31,26,.5); }
.mist-art svg { overflow:visible; }
.mist-art.mist-stack { right:16px; bottom:12px; width:120px; height:92px; }
.mist-art.mist-arcs { left:12px; bottom:12px; width:min(62%, 230px); height:92px; }
.mist-art.mist-wave { left:14px; right:14px; bottom:12px; height:90px; }
.mist-art.mist-light { --m-stroke:rgba(255,255,255,.66); }
/* the forest hero: a tall wave above a cream foot band that names the first and last period */
[data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(1) > .mist-art.mist-wave { left:20px; right:20px; bottom:62px; height:150px; }
.mist-foot { position:absolute !important; z-index:1; left:0; right:0; bottom:0; height:44px; display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; background:var(--m-cream); font:500 13px/1 var(--m-inter); color:var(--m-ink-2); font-variant-numeric:tabular-nums; }
.mist-foot b { font-weight:500; color:var(--m-ink); }

/* the funnel: five cream cells, thin numbers, hairline dividers */
[data-mist=dashboard] .sect .card[style*="flex-wrap"] { display:grid !important; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0 !important; padding:0 !important; }
[data-mist=dashboard] .sect .card[style*="flex-wrap"] > div { min-width:0 !important; padding:18px 20px 16px !important; border:0 !important;
  border-left:1px solid var(--m-line) !important; border-radius:0 !important; text-align:left !important; }
[data-mist=dashboard] .sect .card[style*="flex-wrap"] > div:first-child { border-left:0 !important; }
[data-mist=dashboard] .sect .card[style*="flex-wrap"] > div > div:first-child { font:300 40px/1.05 var(--m-pjs) !important; letter-spacing:-.02em; color:var(--m-ink); }
[data-mist=dashboard] .sect .card[style*="flex-wrap"] > div > div:last-child { margin-top:6px !important; font:500 14px/1.3 var(--m-inter) !important; color:var(--m-ink-2) !important; }
[data-mist=dashboard] .sect .card[style*="flex-wrap"] + div { margin-top:16px !important; }

/* ---------- payouts: the one headline number is a pinned reading in the hero, its leader ending in the lime dot */
[data-mist=payouts] .wrap > .grid.g2[style*="max-width"] { position:absolute; top:74px; left:56%; display:block; max-width:none !important; margin:0 !important; }
[data-mist=payouts] .wrap > .grid.g2[style*="max-width"] > .card { position:relative; display:flex; flex-direction:column-reverse; padding:0; background:none; border:0; }
[data-mist=payouts] .wrap > .grid.g2[style*="max-width"] .big { font-size:56px; line-height:1; }
[data-mist=payouts] .wrap > .grid.g2[style*="max-width"] .lbl { margin:8px 0 0; font:400 14px/1.3 var(--m-inter); color:var(--m-ink-2); }
[data-mist=payouts] .wrap > .grid.g2[style*="max-width"] > .card::after { content:""; position:absolute; top:30px; left:calc(100% + 18px); width:96px; height:1px; background:rgba(30,31,26,.4); }
[data-mist=payouts] .wrap > .grid.g2[style*="max-width"] > .card::before { content:""; position:absolute; top:26px; left:calc(100% + 112px); width:9px; height:9px; border-radius:50%;
  background:var(--m-lime); box-shadow:0 0 0 1px var(--m-lime-ring); }
[data-mist=payouts] .wrap > .sub { margin-bottom:64px; }

/* ---------- leads / earnings / toolkit panels */
.mist-shell .grid.g2, .mist-shell .grid.g3 { gap:12px; }
.mist-shell .grid > * { min-width:0; }
.mist-shell .card > .lbl:first-child { margin-bottom:12px; }
[data-mist=leads] .wrap > .note, [data-mist=earnings] .wrap > .note { max-width:none; }
[data-mist=leads] .note.warn { font-size:14px; }
[data-mist=toolkit] .card p[style] { font-size:15px !important; line-height:1.55; color:var(--m-ink-2) !important; }
[data-mist=toolkit] .card ul[style] { font-size:15px !important; line-height:1.75 !important; color:var(--m-ink); }
[data-mist=toolkit] .card ul[style*="ink-dim"] { color:var(--m-ink-2) !important; }
[data-mist=toolkit] .card div[style*="font-size:11.5px"], [data-mist=toolkit] .card div[style*="font-size:12px"] { font-size:14px !important; color:var(--m-mute) !important; }
[data-mist=toolkit] .card div[style*="font-size:14.5px"] { font:400 20px/1.3 var(--m-pjs) !important; letter-spacing:-.005em; }
[data-mist=toolkit] .card div[style*="font-size:13px; font-weight:600"] { font:500 15px/1.35 var(--m-inter) !important; }
[data-mist=toolkit] .card img[style*="aspect-ratio"], [data-mist=toolkit] video { border-radius:2px !important; border:1px solid var(--m-line) !important; }
[data-mist=toolkit] .card img[src^="/qr/"] { border-radius:2px !important; border:1px solid var(--m-line) !important; }
[data-mist=toolkit] .wrap > .sect > .lbl { font:500 14px/1.3 var(--m-inter); color:var(--m-ink-2); }
[data-mist=toolkit] .card .btn.sec[style*="font-size:11.5px"] { font-size:14px !important; min-height:40px; }
[data-mist=toolkit] .card li span[style*="font-size:12.5px"] { font-size:14px !important; }
/* the two visit counts on the landing page card: a pair of small wash tiles */
[data-mist=toolkit] .card > div[style*="gap:14px"] { gap:2px !important; margin-top:18px !important; }
[data-mist=toolkit] .card > div[style*="gap:14px"] > div { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; min-height:150px; padding:16px 18px 18px !important;
  border:0 !important; border-radius:0 !important; text-align:left !important; color:var(--m-ink);
  background:#E4E0D6 url(wash-sage-720.webp?v=20261028mist) no-repeat 40% 40% / cover; }
[data-mist=toolkit] .card > div[style*="gap:14px"] > div:nth-child(2) { background-image:url(wash-slate-720.webp?v=20261028mist); background-position:100% 0; background-size:170% auto; }
[data-mist=toolkit] .card > div[style*="gap:14px"] > div > div:not(.mist-art) { position:relative; z-index:1; }
[data-mist=toolkit] .card > div[style*="gap:14px"] > div > div:first-child { font:300 44px/1.05 var(--m-pjs) !important; letter-spacing:-.02em; }
[data-mist=toolkit] .card > div[style*="gap:14px"] > div > div:nth-child(2) { order:-1; margin-top:6px; font:500 14px/1.3 var(--m-inter) !important; color:var(--m-ink) !important; }
[data-mist=toolkit] .card > div[style*="gap:14px"] > div.mist-has-art { padding-bottom:92px !important; }
[data-mist=toolkit] .card > div[style*="gap:14px"] > div > .mist-art.mist-stack { right:12px; bottom:10px; width:100px; height:76px; }

/* ============================================================ sign-in: the hero zone alone */
[data-mist=login] body::before { content:""; position:fixed; z-index:-1; top:0; right:0; bottom:0; width:58vw; pointer-events:none;
  background:url(obj-folders-1200.webp?v=20261028mist) no-repeat 55% 42% / cover;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 40%); mask-image:linear-gradient(to right, transparent 0, #000 40%); }
[data-mist=login] body { isolation:isolate; min-height:100vh; }
[data-mist=login] body > .wrap { max-width:440px !important; margin:0 0 0 max(28px, 9vw); padding:16vh 0 0 !important; }
[data-mist=login] body > .wrap > div:first-child { text-align:left !important; margin-bottom:26px !important; }
[data-mist=login] body > .wrap > div:first-child img { width:52px !important; height:52px !important; padding:8px; background:#FFFFFF; border:1px solid var(--m-line); border-radius:4px; }
[data-mist=login] body > .wrap > div:first-child > div { margin-top:22px !important; font:500 14px/1.3 var(--m-inter) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--m-ink-2) !important; }
[data-mist=login] body > .wrap h1 { margin:6px 0 12px !important; font:300 44px/1.08 var(--m-pjs) !important; letter-spacing:-.02em; color:var(--m-ink); }
[data-mist=login] body > .wrap .sub { font-size:16px; }
[data-mist=login] body > .wrap .card { padding:26px !important; }
[data-mist=login] body > .wrap .card p[style] { font-size:14px !important; color:var(--m-mute) !important; }
[data-mist=login] body > .wrap > p[style] { text-align:left !important; font-size:14px !important; }
[data-mist=login] .footer { margin:64px 0 0 max(28px, 9vw); padding:0 0 28px; text-align:left; }

/* ============================================================ the public /go/ page */
[data-mist=landing] .topbar { justify-content:flex-start !important; }
[data-mist=landing] .topbar + .wrap { position:relative; max-width:1140px !important; min-height:540px; padding:84px 28px 64px !important; text-align:left !important; }
[data-mist=landing] .topbar + .wrap > * { max-width:min(600px, 54%) !important; }
[data-mist=landing] .topbar + .wrap > img { width:64px !important; height:64px !important; border:1px solid var(--m-line) !important; border-radius:4px !important; box-shadow:none !important; }
[data-mist=landing] .topbar + .wrap > div:first-of-type { font:500 14px/1.3 var(--m-inter) !important; letter-spacing:0 !important; text-transform:none !important; color:var(--m-ink-2) !important; }
[data-mist=landing] .topbar + .wrap > h1 { margin:14px 0 18px !important; font:300 52px/1.08 var(--m-pjs) !important; letter-spacing:-.02em; color:var(--m-ink); }
[data-mist=landing] .topbar + .wrap > p { margin:0 0 26px !important; font-size:17px !important; line-height:1.6 !important; color:var(--m-ink-2) !important; }
[data-mist=landing] .topbar + .wrap > div[style*="justify-content:center"] { justify-content:flex-start !important; gap:6px !important; }
[data-mist=landing] .topbar + .wrap .pill { padding:9px 14px !important; background:#FFFFFF !important; border:1px solid var(--m-line); border-radius:4px;
  font:500 14px/1.2 var(--m-inter) !important; color:var(--m-ink); }
[data-mist=landing] .topbar + .wrap .pill::before { display:none; }
[data-mist=landing] .topbar + .wrap > a.btn { min-height:52px; padding:14px 26px !important; font-size:16px !important; }
[data-mist=landing] .topbar + .wrap > div:last-child { font-size:14px !important; color:var(--m-mute) !important; }
[data-mist=landing] .wrap + .wrap { max-width:1140px !important; padding:0 28px 40px !important; }
[data-mist=landing] .wrap + .wrap > div:first-child { text-align:left !important; margin-bottom:16px !important; font:500 14px/1.3 var(--m-inter) !important;
  letter-spacing:0 !important; text-transform:none !important; color:var(--m-ink-2) !important; }
[data-mist=landing] .wrap + .wrap .grid.g3 { gap:12px; margin-bottom:12px !important; }
[data-mist=landing] .wrap + .wrap .grid.g3 .card { padding:22px !important; }
[data-mist=landing] .wrap + .wrap .grid.g3 .card > div[style*="font-weight:800"] { font:400 20px/1.3 var(--m-pjs) !important; letter-spacing:-.005em; color:var(--m-ink) !important; margin:0 0 6px !important; }
[data-mist=landing] .wrap + .wrap .grid.g3 .card > div[style*="line-height:1.6"] { font-size:15px !important; color:var(--m-ink-2) !important; }
/* step numbers: thin numerals, not coloured chips */
[data-mist=landing] .wrap + .wrap .grid.g3 .card > div[style*="width:30px"] { width:auto !important; height:auto !important; display:block !important;
  background:none !important; border-radius:0 !important; font:300 44px/1 var(--m-pjs) !important; color:var(--m-forest) !important; }
[data-mist=landing] .wrap + .wrap .grid.g3 .card > div[style*="width:30px"] + div { margin:14px 0 6px !important; }
/* the closing band is the forest wash, the one place white text sits */
[data-mist=landing] .wrap + .wrap > div[style*="background:var(--green-700)"] { margin-top:12px !important; padding:44px 32px !important; border-radius:0 !important; text-align:left !important;
  background:#1B4D47 url(wash-forest-1080.webp?v=20261028mist) no-repeat 18% 0 / 150% auto !important; }
[data-mist=landing] .wrap + .wrap > div[style*="background:var(--green-700)"] > div:first-child { font:300 36px/1.15 var(--m-pjs) !important; letter-spacing:-.015em; margin-bottom:10px !important; }
[data-mist=landing] .wrap + .wrap > div[style*="background:var(--green-700)"] > div:nth-child(2) { font:500 16px/1.5 var(--m-inter) !important; color:#FFFFFF !important; margin-bottom:22px !important; max-width:48ch; }
[data-mist=landing] .wrap + .wrap > div[style*="background:var(--green-700)"] .btn { border-color:#FFFFFF; min-height:48px; padding:12px 22px; }
[data-mist=landing] .wrap + .wrap > div[style*="background:var(--green-700)"] .btn:focus-visible { outline-color:#FFFFFF; }
[data-mist=landing] .footer { text-align:left; max-width:1140px; margin:40px auto 0; padding:0 28px 32px; }

/* ============================================================ admin: ERP grammar (sidebar of square tabs, hero header, KPI mosaic) */
[data-mist=admin] aside { background:var(--m-cream); border-right:1px solid var(--m-line); padding:20px 16px 16px; }
[data-mist=admin] .sb-brand { gap:12px; padding:0 4px 16px; }
[data-mist=admin] .sb-brand .tile { width:44px; height:44px; border-radius:4px; background:#FFFFFF; border:1px solid var(--m-line); }
[data-mist=admin] .sb-brand b { font:500 18px/1.15 var(--m-pjs); letter-spacing:-.01em; }
[data-mist=admin] .sb-brand small { display:block; margin-top:2px; font:400 13px/1.3 var(--m-inter); letter-spacing:0; text-transform:none; color:var(--m-mute); }
[data-mist=admin] .navsec { padding:18px 10px 8px; font:400 13px/1 var(--m-inter); letter-spacing:0; text-transform:none; color:var(--m-mute); }
[data-mist=admin] .snav a { position:relative; gap:12px; margin:0 0 2px 8px; padding:9px 10px; border:1px solid transparent; border-radius:4px;
  font:400 15px/1.2 var(--m-inter); color:var(--m-ink-2); transition:background-color var(--m-ease), border-color var(--m-ease), color var(--m-ease); }
[data-mist=admin] .snav a:hover { background:rgba(255,255,255,.7); color:var(--m-ink); }
[data-mist=admin] .snav a.on { background:#FFFFFF; border-color:var(--m-line); color:var(--m-ink); font-weight:500; }
[data-mist=admin] .snav a.on::before { content:""; position:absolute; left:-14px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:var(--m-lime); box-shadow:0 0 0 1px var(--m-lime-ring); }
[data-mist=admin] .snav a svg { width:17px; height:17px; stroke-width:1.6; }
[data-mist=admin] .nb { padding:0; border-radius:0; background:none; font:500 14px/1 var(--m-inter); color:var(--m-ink-2); font-variant-numeric:tabular-nums; }
[data-mist=admin] .nb.bad { color:var(--m-bad); }
[data-mist=admin] .nb.warn { color:var(--m-warn); }
[data-mist=admin] .sb-foot { padding:12px 8px 0; font:400 13px/1.5 var(--m-inter); color:var(--m-mute); border-top:1px solid var(--m-line); }
[data-mist=admin] .sb-foot b { margin:2px 0 6px; font-weight:500; color:var(--m-ink); }
[data-mist=admin] .sb-foot a { color:var(--m-forest); }
[data-mist=admin] main { padding:0 32px 44px; }
/* the header is the hero: 196px of dotted cream with the folders on the right; it scrolls up into a slim title strip */
[data-mist=admin] .phead { top:-120px; min-height:196px; align-items:flex-end; margin:0 -32px 24px; padding:0 32px 18px;
  background:var(--m-cream) radial-gradient(var(--m-dots) 1px, transparent 1.2px) 0 0 / 12px 12px;
  -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; border-bottom:1px solid var(--m-line); }
[data-mist=admin] .phead::before { content:""; position:absolute; z-index:-1; top:0; right:0; bottom:0; width:min(50%, 640px); pointer-events:none;
  background:url(obj-folders-1200.webp?v=20261028mist) no-repeat 64% 38% / 100% auto;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 42%), linear-gradient(to bottom, #000 58%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 42%), linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-composite:intersect; }
[data-mist=admin] .phead { isolation:isolate; }
[data-mist=admin] .phead > div:first-child { position:relative; }
[data-mist=admin] .eyebrow { margin-bottom:12px; font:400 13px/1.3 var(--m-inter); letter-spacing:0; text-transform:none; color:var(--m-ink-2); }
[data-mist=admin] .phead h1 { font:300 48px/1.05 var(--m-pjs); letter-spacing:-.02em; color:var(--m-ink); }
[data-mist=admin] .datechip { position:relative; height:44px; padding:0 14px; gap:8px; border-radius:6px; border:1px solid var(--m-line-2); background:#FFFFFF;
  font:400 14px/1 var(--m-inter); color:var(--m-ink-2); }
[data-mist=admin] .sect + .sect { margin-top:40px; }
[data-mist=admin] .sect h2 { margin-bottom:14px; }
[data-mist=admin] .lbl { margin-bottom:12px; font:400 19px/1.3 var(--m-pjs); }
[data-mist=admin] .card { padding:20px 22px; }
[data-mist=admin] td { font-size:15px; }
[data-mist=admin] td .btn, [data-mist=admin] td button.btn { min-height:34px; font-size:14px; }
[data-mist=admin] .tblwrap + p, [data-mist=admin] .sect > p[style] { font-size:14px !important; line-height:1.55; }
[data-mist=admin] .card > p[style], [data-mist=admin] .card > .cap { font-size:14px !important; line-height:1.55; }
[data-mist=admin] td div[style*="font-size:11px"], [data-mist=admin] td div[style*="font-size:10.5px"], [data-mist=admin] td div[style*="font-size:12px"] { font-size:13px !important; }
[data-mist=admin] td[style*="font-size:12px"] { font-size:14px !important; }
[data-mist=admin] td a { color:var(--m-forest); }
/* applications: the applicant's own words keep a readable column; long landing URLs wrap instead of widening the table */
[data-mist=admin] #v-applications td div[title] { min-width:220px; }
[data-mist=admin] #v-applications td .mono { overflow-wrap:anywhere; max-width:240px; }
[data-mist=admin] .menubtn { width:44px; height:44px; border-radius:6px; border:1px solid var(--m-line-2); background:#FFFFFF; color:var(--m-ink); }

/* KPI row: a mosaic of wash tiles (2px cream gutters); the forest tile is the screen's one headline */
[data-mist=admin] .kpis { gap:2px; margin-bottom:20px; grid-template-columns:repeat(5, minmax(0, 1fr)); }
[data-mist=admin] .kpis > .card { position:relative; isolation:isolate; overflow:hidden; container-type:inline-size; display:flex; flex-direction:column;
  min-height:220px; padding:18px 20px 16px; border:0; border-radius:0; box-shadow:none; color:var(--m-ink);
  background-color:#E4E0D6; background-repeat:no-repeat; background-size:cover; }
[data-mist=admin] .kpis > .card > :not(.mist-art) { position:relative; z-index:1; }
[data-mist=admin] .kpis > .card:nth-child(1) { background-image:url(wash-forest-720.webp?v=20261028mist); background-position:18% 0; background-size:cover; color:#FFFFFF; }
[data-mist=admin] .kpis > .card:nth-child(2) { background-image:url(wash-ochre-720.webp?v=20261028mist); background-position:50% 30%; background-size:cover; }
[data-mist=admin] .kpis > .card:nth-child(3) { background-image:url(wash-coral-slate-720.webp?v=20261028mist); background-position:50% 0; background-size:cover; }
[data-mist=admin] .kpis > .card:nth-child(4) { background-image:url(wash-sage-720.webp?v=20261028mist); background-position:40% 40%; }
[data-mist=admin] .kpis > .card:nth-child(5) { background-image:url(wash-slate-720.webp?v=20261028mist); background-position:80% 0; background-size:cover; }
[data-mist=admin] .kpis .lbl { order:0; margin:0 0 8px; font:500 13px/1.35 var(--m-inter); color:inherit; }
[data-mist=admin] .kpis .big { font-size:min(44px, 16cqi); color:inherit; }
[data-mist=admin] .kpis > .card:nth-child(1) .big { font-size:min(52px, 18cqi); }
[data-mist=admin] .kpis .cap { margin-top:8px; font:500 14px/1.4 var(--m-inter); color:inherit; max-width:30ch; }
[data-mist=admin] .kpis .cap span[style] { color:#7A1B12 !important; font-weight:600 !important; }
[data-mist=admin] .kpis > .card.mist-has-art { padding-bottom:110px; }

/* lower dashboard row: attention list and projection stay cream; commissions by month is a peach wash with the wave */
[data-mist=admin] .attn li { gap:12px; padding:12px 0; }
[data-mist=admin] .attn a { font:500 15px/1.4 var(--m-inter); color:var(--m-ink); }
[data-mist=admin] .attn a:hover { text-decoration:underline; }
[data-mist=admin] .attn .sub { margin-top:2px; font:400 14px/1.45 var(--m-inter); color:var(--m-ink-2); }
[data-mist=admin] .dot { width:8px; height:8px; margin-top:7px; flex:0 0 8px; }
[data-mist=admin] .dot.info { background:var(--m-forest); }
[data-mist=admin] .mini { padding:14px 14px 12px; border:1px solid var(--m-line); border-radius:4px; text-align:left; }
[data-mist=admin] .mini .n { font:300 26px/1.1 var(--m-pjs); letter-spacing:-.015em; }
[data-mist=admin] .mini .l { margin-top:4px; font:500 13px/1.3 var(--m-inter); color:var(--m-ink-2); }
[data-mist=admin] .spark div { background:var(--m-forest); border-radius:0; }
[data-mist=admin] .spark div span { font-size:12px; color:var(--m-mute); }
[data-mist=admin] .card.mist-wave-on { position:relative; isolation:isolate; overflow:hidden; min-height:236px; padding-bottom:132px; border:0; border-radius:0;
  background:#E9D9CC url(wash-peach-720.webp?v=20261028mist) no-repeat 30% 30% / 140% auto; }
[data-mist=admin] .card.mist-wave-on > :not(.mist-art):not(.mist-ticks) { position:relative; z-index:1; }
[data-mist=admin] .card.mist-wave-on .spark { display:none; }
[data-mist=admin] .card.mist-wave-on .cap { color:var(--m-ink); font-weight:500; }
[data-mist=admin] .card.mist-wave-on > .mist-art.mist-wave { position:absolute; z-index:0; left:16px; right:16px; bottom:40px; height:84px; }
.mist-ticks { position:absolute !important; z-index:1; left:16px; right:16px; bottom:12px; height:18px; font:500 13px/18px var(--m-inter); color:var(--m-ink); font-variant-numeric:tabular-nums; }
.mist-ticks span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.mist-ticks span:first-child { transform:none; }
.mist-ticks span:last-child { transform:translateX(-100%); }

/* motion: 200ms ease-out fades only; nothing moves when reduced motion is asked for */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

/* ============================================================ narrower screens */
@media (max-width:1180px) {
  [data-mist=admin] .kpis { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  [data-mist=admin] .kpis > .card:nth-child(1) { grid-column:span 2; }
}
@media (max-width:900px) {
  [data-mist=dashboard] .wrap > .grid.g4 { grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:auto; }
  [data-mist=dashboard] .wrap > .grid.g4 > .card { min-height:190px; }
  [data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(1) { grid-row:auto; grid-column:1 / -1; min-height:320px; }
  [data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(4) { grid-column:1 / -1; }
  [data-mist=admin] aside { left:-276px; width:260px; min-width:260px; box-shadow:none; transition:left var(--m-ease); }
  [data-mist=admin] aside.open { box-shadow:30px 0 60px -40px rgba(30,31,26,.5); }
  [data-mist=admin] .menubtn { top:10px; left:12px; }
  [data-mist=admin] main { padding:0 16px 28px; }
  [data-mist=admin] .phead { top:-92px; min-height:156px; margin:0 -16px 18px; padding:0 16px 10px 70px; }
  [data-mist=admin] .phead::before { width:62%; background-position:70% 36%; }
  [data-mist=admin] .phead h1 { font-size:34px; }
  [data-mist=admin] .eyebrow { margin-bottom:16px; }
  [data-mist=admin] .phead > div:first-child { min-width:0; }
  [data-mist=admin] .datechip { position:absolute; top:12px; right:16px; height:36px; padding:0 10px; font-size:13px; }
  [data-mist=admin] .kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  [data-mist=admin] .kpis > .card { min-height:176px; padding:14px 14px 12px; }
  [data-mist=admin] .kpis > .card:nth-child(1) { grid-column:1 / -1; }
  [data-mist=admin] .kpis > .card.mist-has-art { padding-bottom:84px; }
  [data-mist=admin] .btn, [data-mist=admin] .snav a, [data-mist=admin] td .btn, [data-mist=admin] td button.btn { min-height:44px; }
  /* touch screens up to tablet width: every control at least 44px tall */
  .btn, .btn.sec, .topright .btn.sec, [data-mist=toolkit] .card .btn.sec[style*="font-size:11.5px"] { min-height:44px; }
  .nav a { height:44px; }
  .mist-art.mist-stack { right:10px; width:92px; height:68px; bottom:8px; }
  .mist-art.mist-arcs { left:10px; height:70px; bottom:8px; }
}
@media (max-width:760px) {
  .topbar { padding:10px 16px; gap:10px; }
  .brand img { width:40px; height:40px; padding:5px; }
  .nav { order:3; width:100%; margin:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:2px; }
  .nav a { height:46px; padding:0 2px; justify-content:center; font-size:14px; }
  .nav a.on { padding-left:2px; }
  .nav a.on::before { left:50%; top:7px; margin:0 0 0 -3px; width:6px; height:6px; }
  /* phones: logo and Sign out share the first row, who is signed in sits on its own line, then the tabs */
  .mist-shell .topright { display:contents; }
  .mist-shell .topright .btn.sec { order:1; margin-left:auto; min-height:44px; }
  .mist-shell .who { order:2; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
  .who { max-width:100%; }
  .btn, .btn.sec { min-height:44px; }
  input, select, textarea { font-size:16px; }
  .mist-shell .wrap { padding:0 16px 56px; }
  .mist-shell body::before { width:64vw; height:300px; background-position:62% 44%; }
  [data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(4) { background-size:190% auto; background-position:0 0; }
  .mist-shell .wrap > h1.page { max-width:72%; padding:40px 0 12px; font-size:38px; }
  .mist-shell .wrap > .sub { max-width:none; margin-bottom:28px; font-size:15px; }
  .sect h2 { font-size:28px; }
  .card { padding:18px; }
  td { padding:12px 14px; }
  [data-mist=dashboard] .wrap > .grid.g4 > .card { padding:16px 16px 14px; }
  [data-mist=dashboard] .wrap > .grid.g4 .big { font-size:min(44px, 15cqi); }
  [data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(1) .big { font-size:min(64px, 18cqi); }
  [data-mist=dashboard] .wrap > .grid.g4 > .card.mist-has-art { padding-bottom:88px; }
  [data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(1).mist-has-art { padding-bottom:172px; }
  [data-mist=dashboard] .wrap > .grid.g4 > .card:nth-child(1) > .mist-art.mist-wave { left:14px; right:14px; bottom:56px; height:100px; }
  .mist-foot { height:40px; padding:0 16px; }
  /* the funnel reads as a list on phones: stage on the left, count on the right */
  [data-mist=dashboard] .sect .card[style*="flex-wrap"] { grid-template-columns:1fr; }
  [data-mist=dashboard] .sect .card[style*="flex-wrap"] > div { display:flex; align-items:baseline; justify-content:space-between; flex-direction:row-reverse;
    padding:12px 16px !important; border-left:0 !important; border-top:1px solid var(--m-line) !important; }
  [data-mist=dashboard] .sect .card[style*="flex-wrap"] > div:first-child { border-top:0 !important; }
  [data-mist=dashboard] .sect .card[style*="flex-wrap"] > div > div:first-child { font-size:30px !important; }
  [data-mist=dashboard] .sect .card[style*="flex-wrap"] > div > div:last-child { margin-top:0 !important; font-size:15px !important; }
  [data-mist=payouts] .wrap > .grid.g2[style*="max-width"] { position:static; margin:0 0 24px !important; }
  [data-mist=payouts] .wrap > .grid.g2[style*="max-width"] > .card { display:flex; flex-direction:column-reverse; padding:16px 18px; background:#FFFFFF; border:1px solid var(--m-line); }
  [data-mist=payouts] .wrap > .grid.g2[style*="max-width"] > .card::after { display:none; }
  [data-mist=payouts] .wrap > .grid.g2[style*="max-width"] > .card::before { display:none; }
  [data-mist=payouts] .wrap > .grid.g2[style*="max-width"] .big { font-size:44px; }
  [data-mist=payouts] .wrap > .sub { margin-bottom:24px; }
  [data-mist=toolkit] .card[style*="grid-column:span 2"] > div[style*="align-items:center"] { flex-wrap:wrap; }
  [data-mist=toolkit] .card .btn.sec[style*="font-size:11.5px"] { min-height:44px; }
  [data-mist=toolkit] .card > div[style*="gap:14px"] > div { min-height:132px; padding:14px 14px 16px !important; }
  [data-mist=toolkit] .card > div[style*="gap:14px"] > div > div:first-child { font-size:36px !important; }
  [data-mist=toolkit] .card > div[style*="gap:14px"] > div.mist-has-art { padding-bottom:78px !important; }
  [data-mist=toolkit] .card > div[style*="gap:14px"] > div > .mist-art.mist-stack { width:84px; height:62px; }
  [data-mist=login] body::before { position:absolute; left:0; bottom:auto; width:auto; height:300px; background-position:70% 40%; background-size:120% auto;
    -webkit-mask-image:linear-gradient(to bottom, #000 40%, transparent 100%); mask-image:linear-gradient(to bottom, #000 40%, transparent 100%); }
  [data-mist=login] body > .wrap { margin:0 16px; max-width:none !important; padding:56px 0 0 !important; }
  [data-mist=login] body > .wrap h1 { font-size:36px !important; }
  [data-mist=login] .footer { margin:48px 16px 0; padding:0 0 24px; }
  [data-mist=landing] .topbar + .wrap { min-height:0; padding:44px 16px 40px !important; }
  [data-mist=landing] body::before { width:70vw; height:360px; background-position:66% 46%; }
  [data-mist=landing] .topbar + .wrap > * { max-width:none !important; }
  [data-mist=landing] .topbar + .wrap > div:first-of-type, [data-mist=landing] .topbar + .wrap > img { max-width:62% !important; }
  [data-mist=landing] .topbar + .wrap > h1 { font-size:38px !important; max-width:88% !important; }
  [data-mist=landing] .topbar + .wrap > a.btn { width:100%; }
  [data-mist=landing] .wrap + .wrap { padding:0 16px 32px !important; }
  [data-mist=landing] .wrap + .wrap > div[style*="background:var(--green-700)"] { padding:32px 20px !important; background-size:cover !important; background-position:0 0 !important; }
  [data-mist=landing] .wrap + .wrap > div[style*="background:var(--green-700)"] > div:first-child { font-size:30px !important; }
  [data-mist=landing] .footer { padding:0 16px 28px; }
}
@media (max-width:520px) {
  [data-mist=admin] .phead { top:-80px; }
}