/* alg-brand.css — THE ASKMUSE CLOTHES. /assets/alg-brand.js decides, this dresses.
   ------------------------------------------------------------------------------------------
   Loaded by every page of the signup funnel, AFTER that page's own <style>, so these tokens win:

       <script src="/assets/alg-brand.js"></script>          <- in <head>, blocking, before any CSS
       ...the page's own styles...
       <link rel="stylesheet" href="/assets/alg-brand.css">  <- last

   WHY THIS IS A FILE AND NOT FOUR COPIES. The funnel is four pages -- the wizard, signup, the
   password reset and the dashboard -- and a visitor walks all of them in one sitting. The brand
   breaking halfway through is worse than not having it: a dark AskMuse wizard handing over to an
   orange Affordable Leads Generation signup tells the customer the two are different companies,
   at the exact moment they are typing a card number. Pasting the block into each page would have
   worked today and drifted by the weekend.

   WHAT A PAGE MUST PROVIDE to be dressed by this file:
     * the shared token names (--void --panel --edge --edge2 --org --org-ink --txt --dim --faint
       --fill --grad --ring --shadow, and the site-wide --bg --card --line --ink --mut --field),
       which every funnel page already declares because they share one skin;
     * two lockups in the header, <a class="logo alg"> and <a class="logo askmuse">. Both stay in
       the markup always and exactly one is in the layout -- so tests/header-theme.cjs still finds
       the ALG lockup it is contracted to find, and no page has to re-render its own header.

   THE HOST LIST LIVES IN THE .js, and a second copy decides what the CHAT calls itself
   (site/api/_chat-impl.mjs, BRAND_HOSTS). tests/setup-brand-askmuse.cjs asserts the two agree.

/* AskMuse LIGHT. He asked for both themes on every page ("Make sure dark and light team
   exist. On the top right, always."), which overrides my earlier call to hide the switch here.
   I had hidden it because AskMuse ships no light mode and inventing one is inventing brand --
   but a hidden control was the wrong half of that argument to keep. So this is a real light
   palette in the AskMuse hues rather than a fallback to the orange one: the same violet and
   teal, on paper instead of ink. */
html[data-brand="askmuse"]{
  color-scheme:light;
  --void:#fbfbfe; --panel:#ffffff; --edge:#e6e6f2; --edge2:#cdcde6;
  /* ROYAL SAPPHIRE, his word for the white theme (2026-09-10: "we need to change the royal
     sapphire and white. Then we turn to theme white"). The landing page moved the same night,
     and a visitor who switches to light on the front page and clicks through to the wizard has
     to meet the same colour, not a second one. Dark keeps the violet. */
  --org:#0f52ba; --org-ink:#0a3a86; --txt:#12121c; --dim:#3c3c52; --faint:#5c5c74;
  /* --org-btn: THE ACCENT AT A DEPTH THAT CAN CARRY WHITE TEXT. Measured 2026-09-23 with
     tests/cta-contrast.cjs against askmuse.ca: white on --org read 2.91:1 where WCAG AA asks 4.5,
     on "Start free trial" in the nav of /ai-receptionist, /ai-receptionist/setup and
     /ai-receptionist/compare, on both CTAs of every /for/ trade page, and on the pressed EN/FR
     pill at /receptionist/signup. The primary call to action on the product's own pages.
     --org is NOT changed: it is right for text, borders, rings and glows on ink, and that is most
     of what it does. A fill under white text is a different pair, and it needed its own token —
     this is the same lesson as the compliance pills on /pricing an hour earlier, where an ink
     colour fixed against the CARD was assumed for a tinted PILL.
     Both brands' accents fail the same way (ALG's #F97316 reads 2.80), so both get one. */ 
  --org-btn:#0f52ba;   /* royal sapphire already carries white at 7.15:1 */
  --fill:#f4f6fb; --grid:rgba(15,82,186,.05);
  --grad:linear-gradient(100deg,#1565d8,#0f52ba 55%,#4f8ae8 135%);
  --gradtext:linear-gradient(92deg,#0f52ba,#1565d8 55%,#0f7f8e);
  --ring:0 0 0 4px rgba(15,82,186,.18);
  --shadow:0 1px 2px rgba(18,18,28,.05),0 14px 36px -14px rgba(15,82,186,.18);
  --bg:#fbfbfe; --card:#ffffff; --line:#e6e6f2; --ink:#12121c; --mut:#6b6b85; --field:#ffffff;
  font-family:'Outfit','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-brand="askmuse"][data-theme="dark"]{
  color-scheme:dark;
  --void:#07070b; --panel:#0e0e17; --edge:rgba(255,255,255,.085); --edge2:rgba(255,255,255,.16);
  --org:#8b8cf8; --org-ink:#cfcfff; --txt:#f5f5f8; --dim:#a6a6bb; --faint:#77778f;
  --org-btn:#5b5ce0;   /* the deep end of --grad; white reads 5.18:1 */
  --fill:rgba(255,255,255,.045); --grid:rgba(139,140,248,.06);
  --grad:linear-gradient(100deg,#8b8cf8,#5b5ce0 55%,#b89bfb 135%);
  --gradtext:linear-gradient(92deg,#b89bfb,#8b8cf8 45%,#2dd4bf);
  --ring:0 0 0 4px rgba(139,140,248,.28);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px -16px rgba(0,0,0,.7);
  --bg:#07070b; --card:#0e0e17; --line:rgba(255,255,255,.085); --ink:#f5f5f8;
  --mut:#a6a6bb; --field:#0a0a11;
  font-family:'Outfit','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-brand="askmuse"] body,
html[data-brand="askmuse"] h1,
html[data-brand="askmuse"] input,
html[data-brand="askmuse"] select,
html[data-brand="askmuse"] textarea,
html[data-brand="askmuse"] button{font-family:inherit}
/* the two lockups: exactly one of them is in the layout at any time */
html[data-brand="askmuse"] .logo.alg{display:none}
.logo.askmuse{display:none}
html[data-brand="askmuse"] .logo.askmuse{display:flex}
/* THE REACT WORDMARK. The fourteen prerendered receptionist pages render their brand as TEXT in a
   Tailwind span, not as the two .logo lockups above, so nothing here reached them and they read
   "Affordable Leads Generation" on askmuse.ca even with data-brand set correctly. Both names now
   ship in the markup (Navbar.tsx, Footer.tsx) and exactly one is shown — the same contract, in
   their class names. The default hide lives HERE so an ALG page never flashes the other name; the
   askmuse side is repeated in alg-brand.js's pre-paint style so the swap cannot lag the paint. */
/* ═══ THE LOCKUP ITSELF: OUR MARK, AND NOT THEIR TAGLINE ═════════════════════════════════════
   His 2026-09-10: "below our screens logo there is something like Leads... You are still not able
   to update them. Ours is AskMuse. Remove those."

   He means the strapline under the wordmark, LEADS THAT ANSWER, WORLDWIDE. That belongs to
   Affordable Leads Generation — askmuse.ca's own front page carries no strapline at all — and the
   fourteen proxied React pages were still printing it under the AskMuse name. The mark beside it
   was ALG's logo too. I had flagged both as owed and he has now asked for them.

   The tagline is HIDDEN rather than replaced, because inventing a strapline for this brand is
   inventing brand, and his front page does without one.

   `content:` on an <img> swaps the picture a CSS file cannot otherwise reach — the src is written
   by TSX and by a dozen static pages, and this is one rule instead of fourteen edits and a
   rebuild. The static pages' own two-lockup markup is untouched and keeps working as before. */
html[data-brand="askmuse"] .brand-tagline{display:none}
html[data-brand="askmuse"] a[data-brand-lockup] img[src*="alg-logo"]{
  content:url("/assets/askmuse-mark-96.png");border-radius:9px}

/* ═══ TWO LAYOUT FAULTS THAT ONLY APPEAR WHEN THE TEXT IS ENLARGED ═══════════════════════════
   He sent a screenshot of askmuse.ca scrolled sideways with the words clipped at BOTH edges, at
   a very large text size. At 390 and 360 these pages have no horizontal overflow at all, which is
   why the earlier sweeps said "ok" — the fault only appears once the page is zoomed or the phone's
   font size is turned up, which narrows the layout viewport. Measured at 280px, the equivalent of
   his zoom: EVERY one of the eight proxied pages overflowed, all by the same 22px.

   NEITHER OF THESE IS BRAND-SPECIFIC, so neither is scoped to a brand. They are bugs on
   affordableleadsgeneration.ca too and have been all along.

   1. THE HEADER ROW. The lockup will not shrink below its one-line width, so the lockup plus the
      right-hand control group is wider than the row's content box once the viewport is narrow
      enough, and the whole PAGE then scrolls sideways — which is what clips his text on both
      sides. Below 340px the wordmark is allowed to wrap and the lockup to shrink. Above 340 this
      changes nothing, so docs/SITE-HEADER-THEME-CONTRACT.md §1's one-line rule at 390 still holds.

   2. THE COMPARISON TABLES. /ai-receptionist/compare carries a 640px table and /pricing a 700px
      one, inside a 236px content box — 393px and 453px past the edge with nothing to scroll them.
      A wide table should scroll inside its own box rather than take the page with it. */
@media (max-width:340px){
  [data-brand-lockup]{min-width:0}
  [data-brand-lockup] span{min-width:0}
  a.items-center span.font-heading{white-space:normal;word-break:break-word}
}
/* the table scrolls inside itself, at every width, in both brands */
main table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ═══ THE APP'S ACCENT COLOURS FOLLOW THE BRAND TOO ═══════════════════════════════════════════
   His 2026-09-10, two screenshots side by side: "lot of discrepancy", "between pages", "theme
   colour correct it". askmuse.ca's own front page is violet and teal; the fourteen React pages it
   proxies were still painting ALG's ORANGE under the AskMuse name — an orange "Book a time", an
   orange chat bubble, orange headline accents. The brand swap reached the WORDS and stopped at
   the COLOURS.

   MY FIRST ATTEMPT AT THIS OVERRODE THE WRONG FAMILY and is replaced by what follows. I remapped
   --color-orange-* and found the page still orange. The browser explained it: the element painting
   orange carries the class `text-blue-600`. The React app already ships a brand skin of its own,
   src/styles/alg-orange-skin.css, which redefines the BLUE/INDIGO/SKY/VIOLET tokens to orange
   values — deliberately, so that every blue-family class in any component lands on ALG's orange
   without renaming anything. Class names still say "blue"; the tokens say what blue means.

   So the AskMuse skin is the same trick in this brand's colours: the same token list, violet and
   teal instead of orange and amber. Nothing in the TSX changes and no rebuild is needed.

   IT ALSO HAS TO REPEAT THAT FILE'S NINE LITERAL-HEX UTILITIES. Tailwind emits opacity variants
   (bg-blue-500/10 and friends) as literal hex rather than through a token, so a token override
   cannot reach them — the orange skin says so itself and lists them. They are repeated below at
   a higher specificity.

   CYAN AND AMBER are here too: they are the DARK theme's accents (ThemeContext sets
   primaryColor:'text-cyan-400' in dark, 'text-blue-600' in light), so both halves are needed for
   the brand to hold whichever theme he is in.

   EMERALD IS DELIBERATELY LEFT ALONE — it carries success meaning here (live badges, ticks,
   "booked" chips) and the standing rule is that a status colour never becomes a brand colour. */
/* LIGHT IS ROYAL SAPPHIRE, DARK IS VIOLET — the same split this file already applies to the
   funnel pages, and his own instruction ("we need to change the royal sapphire and white").
   My first pass painted violet in both themes; measured on white it came to 2.91:1, under the
   4.5 a body word needs. The sapphire is about 7:1 on the same ground, and it is the colour his
   own askmuse.ca front page uses in light. So this is not a contrast patch bolted on afterwards —
   matching the front page IS the accessible answer. */
html[data-brand="askmuse"]{
  --color-blue-50:#eaf1fb;    --color-blue-200:#bcd4f3;  --color-blue-300:#93b8ea;
  --color-blue-400:#4f8ae8;   --color-blue-500:#1565d8;  --color-blue-600:#0f52ba;
  --color-blue-700:#0a3a86;   --color-blue-800:#0a3172;  --color-blue-900:#08255a;
  --color-blue-950:#05172f;
  --color-indigo-400:#4f8ae8; --color-indigo-500:#1565d8; --color-indigo-600:#0f52ba;
  --color-indigo-700:#0a3a86; --color-indigo-950:#05172f;
  --color-sky-400:#0f7f8e;    --color-sky-500:#0b6a76;
  --color-violet-500:#0f7f8e; --color-violet-600:#0b6a76;
  --color-cyan-50:#eaf1fb;   --color-cyan-200:#bcd4f3;  --color-cyan-300:#93b8ea;
  --color-cyan-400:#0f52ba;  --color-cyan-500:#0f52ba;  --color-cyan-600:#0a3a86;
  --color-cyan-800:#08255a;  --color-cyan-950:#05172f;
  --color-amber-50:#e6f4f5;  --color-amber-200:#a9d9dd; --color-amber-300:#6bbcc3;
  --color-amber-400:#0f7f8e; --color-amber-500:#0b6a76; --color-amber-600:#095760;
  --color-amber-900:#053840; --color-amber-950:#032227;
  --color-orange-500:#0f52ba; --color-orange-600:#0a3a86;
}
/* DARK: the violet the brand is known by. On #07070b it measures well above the floor. */
html[data-brand="askmuse"][data-theme="dark"]{
  --color-blue-50:#f1f0ff;    --color-blue-200:#d9d6ff;  --color-blue-300:#c4bdfd;
  --color-blue-400:#b89bfb;   --color-blue-500:#a0a0fa;  --color-blue-600:#8b8cf8;
  --color-blue-700:#5b5ce0;   --color-blue-800:#4a4bb4;  --color-blue-900:#33347f;
  --color-blue-950:#1a1a44;
  --color-indigo-400:#b89bfb; --color-indigo-500:#a0a0fa; --color-indigo-600:#8b8cf8;
  --color-indigo-700:#5b5ce0; --color-indigo-950:#1a1a44;
  --color-sky-400:#2dd4bf;    --color-sky-500:#14b8a6;
  --color-violet-500:#2dd4bf; --color-violet-600:#14b8a6;
  --color-cyan-50:#f1f0ff;   --color-cyan-200:#d9d6ff;  --color-cyan-300:#c4bdfd;
  --color-cyan-400:#8b8cf8;  --color-cyan-500:#7a7bf0;  --color-cyan-600:#5b5ce0;
  --color-cyan-800:#33347f;  --color-cyan-950:#1a1a44;
  --color-amber-50:#ecfdf9;  --color-amber-200:#a7f3e4; --color-amber-300:#6ee7d4;
  --color-amber-400:#2dd4bf; --color-amber-500:#14b8a6; --color-amber-600:#0d9488;
  --color-amber-900:#134e4a; --color-amber-950:#042f2e;
  --color-orange-500:#8b8cf8; --color-orange-600:#5b5ce0;
}

/* ── ONE GROUND ACROSS THE DOMAIN ────────────────────────────────────────────────────────────
   His "lot of discrepancy / between pages" and "theme colour correct it". The accents were the
   half I fixed first. This is the other half, and it is the one you see before you read anything.
   Measured on the live domain, the background under each page and under its own footer:

       askmuse.ca/                 #07070b   footer #07070b
       askmuse.ca/pricing          #07070b   footer #07070b
       askmuse.ca/ai-receptionist  slate-950 (navy)   footer #060f20 (navy)
       askmuse.ca/websites         #07070b   footer #060f20  <- disagreeing inside one page
       askmuse.ca/for              #07070b   footer #0e0e17

   Four grounds on one domain. The AskMuse pages are black; the app pages are navy because the
   React tree paints itself Tailwind slate-950, and its footer was matched BY HAND to the old
   homepage's navy — Footer.tsx's own comment says so. On /websites the two disagree within a
   single page: a navy footer sitting on a black one.

   slate-950 is a token, so it moves with the other families rather than being chased element by
   element. The two navies Tailwind emits as literal hex get their own rules, the way the nine
   above do — verified against the built bundle, which emits exactly
   `.bg-[#060f20]{background-color:#060f20}`, rather than assumed from the JSX.
   ALG's own domain keeps every one of these: none of this is outside html[data-brand="askmuse"]. */
html[data-brand="askmuse"]{ --color-slate-950:#07070b; }
/* DARK ONLY, all three of these, and that is a measurement not a caution. The AskMuse home
   footer in LIGHT is #f6f6fa with #0e0e18 text — pale, not dark. Repainting every other
   footer #07070b without asking the theme would have put near-black under the light text
   these three footers hard-code, which is a worse discrepancy than the one being fixed and
   an unreadable one. In light they keep exactly what they have today.
   The #090d16 one is the app's SECOND ground, a step up from the first; it moves by the same
   step rather than flattening onto it, or the sections that alternate stop alternating.
   The last rule is for the two footers that are not Tailwind at all: /websites and the trade
   pages each declare `footer{background:...}` as a bare element rule, so no token and no
   utility override reaches them. Measured after the token change alone: /ai-receptionist went
   black and /websites still had a navy footer sitting on a black page. An element selector is
   (0,0,1); this is (0,3,1) and unlayered. */
html[data-brand="askmuse"][data-theme="dark"] .bg-\[\#060f20\]{ background-color:#07070b; }
html[data-brand="askmuse"][data-theme="dark"] .bg-\[\#090d16\]{ background-color:#0b0b12; }
html[data-brand="askmuse"][data-theme="dark"] footer{ background:#07070b; }

/* THE FOOTER'S ACCENT LINK, IN LIGHT. The trade pages', /websites' and /download's footer is navy
   (#060f20, alg-foot.css) in BOTH themes — the block above says why it stays so in light — but
   `.ft-more a` ("How we follow them →", "Every trade we answer for →") takes var(--org), and in light
   --org is royal sapphire: right for text on the pale ground, 2.68:1 on this navy. Measured by
   tests/cta-contrast.cjs the night light became the DEFAULT on askmuse.ca (2026-09-29,
   tests/one-theme-contract.cjs); it had been hidden for as long as these pages opened dark. The link
   keeps the dark theme's accent, the one drawn for this ground: #8b8cf8 on #060f20 reads 6.57:1. */
html[data-brand="askmuse"]:not([data-theme="dark"]) .ft-more a{ color:#8b8cf8; }

/* THE SMALL SLATE LABELS ON THE REACT PAGES, IN LIGHT. "or hear eight example calls first" is 11px/600
   text-slate-500 on the brand's pale ground — #f6f6fa here, not Tailwind's #f8fafc — and reads 4.42:1;
   the ground moved two steps and took the margin with it. One step darker, still slate, restores it
   (#5d6e88 on #f6f6fa: 4.81:1). Light only; dark keeps slate-400 on ink. Same night, same gate. */
html[data-brand="askmuse"]:not([data-theme="dark"]):not([data-surface="app"]) .text-slate-500{ color:#5d6e88; }

/* ── THE TWO BOOKING PAGES ────────────────────────────────────────────────────────────────────
   calendar.html and reschedule.html are the only pages a CUSTOMER of one of his clients ever
   sees, and they carry their own palette under page-local names — `--blue` and friends, which
   hold the ALG orange because a 2026-09-02 pass renamed the values and left the names. Those
   names are used by five files in this tree, so they are overridden here through the page's own
   data-page="booking" hook rather than globally; a bare `--blue` override would reach /v5 and the
   old app shell as well.
   His 2026-09-11 screenshot of askmuse.ca/calendar: the selected day ringed in ALG orange with
   orange "27 times" under it, on an AskMuse page. */
html[data-brand="askmuse"][data-page="booking"]{
  --blue:#0f52ba; --blue-d:#0a3a86; --indigo:#1565d8; --sky:#4f8ae8;
  /* THE REST OF THE BOOKING SKIN, 2026-09-29 — his "it is only black, like it's different, like it's
     new" of the appointment page. The page moved to the site's theme switch that night, and what the
     switch then revealed was every literal the orange skin had left behind under an AskMuse ground:
     an orange haze behind the page, a cream ground under the picked time, an orange hover ring, the
     ALG greys under a disabled button, the ALG red and green for a warning and a "moved" banner, and
     a placeholder at 1.5:1. Each is now the brand's own token — the ones this file already defines
     for the funnel and the dashboard — so nothing here is a colour that did not already exist.
     Measured by tests/reschedule-theme.cjs on every screen the page can draw, in both themes. */
  --nav-bg:rgba(246,246,250,.82);                             /* alg-head.css, the AskMuse bar */
  --glow-a:rgba(15,82,186,.06); --glow-b:rgba(79,138,232,.05); /* sapphire + --sky; .06 keeps --mut at 4.5 where the haze is */
  --on-ground:var(--alg-sapphire-tint); --hover-ground:var(--alg-card-hover); --hover-line:var(--color-blue-300);
  --ok:var(--alg-success); --bad:var(--alg-danger);
  --dis-bg:var(--fill); --dis-ink:var(--mut);
  --ph:var(--faint);
}
html[data-brand="askmuse"][data-page="booking"][data-theme="dark"]{
  --blue:#8b8cf8; --blue-d:#5b5ce0; --indigo:#a0a0fa; --sky:#b89bfb;
  --nav-bg:rgba(7,7,11,.72);
  --glow-a:rgba(139,140,248,.12); --glow-b:rgba(45,212,191,.07);   /* the violet and the teal the dark orbs already use */
  --hover-ground:rgba(255,255,255,.06); --hover-line:rgba(255,255,255,.28);   /* the page's own dark values, restated at this specificity */
  /* the accent AS INK on a picked chip and in the business-time line: --blue-d is the deep FILL here,
     and as text on the card it read 3.7:1; the light violet reads 5.7:1 on the picked ground */
  --on-accent:var(--blue);
  --ph:var(--dim);
}
/* the nine Tailwind emits as literal hex, so no token can reach them (alg-orange-skin.css §2) */
html[data-brand="askmuse"] .border-blue-500\/30{border-color:#1565d84d}
html[data-brand="askmuse"][data-theme="dark"] .border-blue-500\/30{border-color:#a0a0fa4d}
html[data-brand="askmuse"] .border-indigo-500\/30{border-color:#b89bfb4d}
html[data-brand="askmuse"] .bg-blue-500\/10{background-color:#a0a0fa1a}
html[data-brand="askmuse"] .bg-blue-500\/20{background-color:#a0a0fa33}
html[data-brand="askmuse"] .bg-indigo-500\/10{background-color:#b89bfb1a}
html[data-brand="askmuse"] .from-blue-600\/20{--tw-gradient-from:#8b8cf833}
html[data-brand="askmuse"] .via-indigo-500\/15{--tw-gradient-via:#b89bfb26}
html[data-brand="askmuse"] .shadow-blue-600\/20{--tw-shadow-color:#8b8cf833}
html[data-brand="askmuse"] .ring-blue-500\/40{--tw-ring-color:#a0a0fa66}
.brand-askmuse{display:none}
html[data-brand="askmuse"] .brand-alg{display:none}
html[data-brand="askmuse"] .brand-askmuse{display:inline}
.logo.askmuse .logomark{border-radius:9px;overflow:hidden;display:block}
.logo.askmuse .wm{font-weight:600;letter-spacing:-.2px}
.logo.askmuse .wm em{font-style:normal;color:var(--org)}
/* the ambient orbs are orange by default; in this brand they are the accent */
html[data-brand="askmuse"][data-theme="dark"] .orb.a{background:radial-gradient(circle,rgba(139,140,248,.30),transparent 70%)}
html[data-brand="askmuse"][data-theme="dark"] .orb.b{background:radial-gradient(circle,rgba(45,212,191,.20),transparent 70%)}

/* THE ORANGE THE TOKENS DO NOT REACH.
   Most of this page's colour goes through --org / --org-ink / --grad / --ring, so the block above
   moves it. These rules do not: they were written with the literal orange in them, months before
   there was a second brand, and a token swap cannot see them. The screenshot is what found them --
   the ground, the type and the lockup were all correct while REQUIRED badges, the progress rail
   and the selected plan card were still Affordable Leads orange. That is the failure this whole
   brand mode exists to avoid, so every one of them is listed here rather than left for the eye.
   tests/setup-brand-askmuse.cjs now sweeps every visible element's computed colours and fails on
   anything still in the orange family, which is the check that would have caught them. */
html[data-brand="askmuse"] .req,
/* SPLIT BY THEME 2026-09-11 — see the note on .k below. #cfcfff is a near-white violet:
   correct on the dark page it was written for, invisible on the light one. */
html[data-brand="askmuse"] .fl b,
html[data-brand="askmuse"] .pill{
  color:#0a3a86;border-color:rgba(15,82,186,.42);background:rgba(15,82,186,.10)}
html[data-brand="askmuse"][data-theme="dark"] .fl b,
html[data-brand="askmuse"][data-theme="dark"] .pill{
  color:#cfcfff;border-color:rgba(139,140,248,.42);background:rgba(139,140,248,.10)}
html[data-brand="askmuse"] .opt{border-color:rgba(255,255,255,.16)}
html[data-brand="askmuse"] #langsw button:focus-visible,
html[data-brand="askmuse"] .btn:focus-visible{outline-color:#b89bfb}
html[data-brand="askmuse"] .steps span.on::before,
html[data-brand="askmuse"] .steps span.done::before{background:linear-gradient(90deg,#2dd4bf,#8b8cf8)}
html[data-brand="askmuse"] .steps span.on i{box-shadow:0 6px 16px -6px rgba(139,140,248,.6)}
html[data-brand="askmuse"] .lang.on{background:rgba(139,140,248,.12)}
html[data-brand="askmuse"] .readbar{background:linear-gradient(90deg,transparent,#8b8cf8,transparent)}
html[data-brand="askmuse"] .readbar i{background:#8b8cf8}
/* the selected plan card was a cream panel (#FFF7ED) -- a white box in the middle of a dark page */
html[data-brand="askmuse"] .plan.on{
  border-color:#8b8cf8;background:rgba(139,140,248,.10);box-shadow:0 0 0 3px rgba(139,140,248,.18)}
html[data-brand="askmuse"] .plan.on .tick{border-color:#8b8cf8;background:#8b8cf8}
html[data-brand="askmuse"] .btn{box-shadow:0 10px 26px -8px rgba(91,92,224,.55)}
html[data-brand="askmuse"] .vplay.playing{background:rgba(139,140,248,.10)}
html[data-brand="askmuse"] .sumrow .gapv{color:#f5a623}

/* ── THE SIGNUP AND RESET PAGES' OWN LITERALS ────────────────────────────────────────────────
   Same class of leak as the wizard's, found the same way: a screenshot, then a sweep. These two
   pages were written with the orange typed in, so the trial badge, the gradient headline, the plan
   pill and the ambient orbs stayed Affordable Leads orange on a black AskMuse page while the
   ground, the type and the lockup were all correct.

   The EN/FR pill is NOT here and could not be: it was painted by JavaScript as an inline style,
   which beats every stylesheet. That one was fixed at its source, in /assets/i18n/ui-lang.js,
   which now reads --org instead of hard-coding #F97316 -- so it follows any brand and any theme,
   including the light palette, rather than needing a rule here per page. */
/* SPLIT BY THEME, 2026-09-11. This was one unconditional rule and #cfcfff is a near-white violet:
   right on the dark page it was written for, and INVISIBLE on the light one — his screenshot of
   askmuse.ca/receptionist/signup shows "7-DAY FREE TRIAL · $0 TODAY" as pale violet on pale
   violet. I closed this complaint once already after measuring it in DARK, where it reads 8.4:1,
   and he had to send it again: "still not fixed- asked you not visble under white them". Measure
   the theme he is standing in.
   Light is royal sapphire and violet is dark-only — his instruction, recorded at the top of this
   file — so light gets the sapphire ink rather than a darker violet. */
html[data-brand="askmuse"] .k{
  color:#0a3a86;border-color:rgba(15,82,186,.42);background:rgba(15,82,186,.10)}
html[data-brand="askmuse"][data-theme="dark"] .k{
  color:#cfcfff;border-color:rgba(139,140,248,.42);background:rgba(139,140,248,.10)}
/* THE HEADING FOLLOWS THE THEME. This gradient was typed in, unconditionally, so every AskMuse
   h1 em painted the DARK violet even on the light page - which is how his reset page ended up
   with a violet headline sitting on royal sapphire buttons. His words: "password is not
   according to colour design flow", and the mismatch is the heading, not the buttons.
   Royal sapphire in light is HIS instruction from earlier the same day, recorded at the top of
   this file, so the buttons were right and this was the odd one out. --gradtext already carries
   the correct gradient for each theme; reading it is the whole fix. */
html[data-brand="askmuse"] h1 em{
  background:var(--gradtext,linear-gradient(92deg,#b89bfb,#8b8cf8 45%,#2dd4bf));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* THE ONE HE PHOTOGRAPHED: "plan solo-39.99 where it shwos no redable under white theme".
   The wizard prints the chosen plan as a pill at the top of every step, so on the light
   theme a buyer arriving from /pricing could not read which plan they were buying. */
html[data-brand="askmuse"] .plan-pill{
  border-color:rgba(15,82,186,.42);background:rgba(15,82,186,.10);color:#0a3a86}
html[data-brand="askmuse"][data-theme="dark"] .plan-pill{
  border-color:rgba(139,140,248,.42);background:rgba(139,140,248,.10);color:#cfcfff}
html[data-brand="askmuse"] .steps span.on i{box-shadow:0 6px 16px -6px rgba(139,140,248,.55)}
html[data-brand="askmuse"] .gbtn:hover,
html[data-brand="askmuse"] .alt a{color:var(--org)}
/* the two ambient orbs on signup and reset carry their own orange gradients */
html[data-brand="askmuse"] .orb.a{
  background:radial-gradient(circle at 32% 32%,rgba(139,140,248,.30),rgba(45,212,191,.14) 55%,transparent 72%)}
html[data-brand="askmuse"] .orb.b{
  background:radial-gradient(circle at 60% 40%,rgba(45,212,191,.24),rgba(139,140,248,.12) 60%,transparent 75%)}

/* ── THE DASHBOARD ───────────────────────────────────────────────────────────────────────────
   site/receptionist/app-desktop/index.html has its own token namespace and no dark mode of its
   own. Under this brand the page is dark, because AskMuse is dark; the ALG dashboard is untouched
   and stays the light page it is today. Giving THAT one a light/dark switch is a separate job.

   Read against the AskMuse site's palette: ink #07070b, card white at ~3.5%, hairlines white at
   ~8.5%, text #f5f5f8, muted #a6a6bb, accent #8b8cf8 with #5b5ce0 deep and #b89bfb light, teal
   #2dd4bf. The status colours (success, danger, amber) keep their meaning and are only lifted for
   legibility on a dark ground -- a red that means "failed" must not become a brand colour. */
/* MEASURED, not assumed: html[data-brand="askmuse"] did not win these tokens on the dashboard,
   and :root[data-brand="askmuse"] does. Both were injected live and read back -- the first left
   --alg-bg at the light value, the second took it. There is no !important and no @layer in that
   file, so I cannot name the cause honestly; what I can say is which selector wins, and this is
   it. The funnel block above is left on html[...] because it is proven working there. */
/* ── THE --alg-* FAMILY, LIGHT ─────────────────────────────────────────────────────────────
   His 2026-09-10 photograph of askmuse.ca/hear with the light switch on: a white header bar
   sitting on a black page, and the header's own text still near-white on it.

   Cause, measured rather than reasoned about. The block below defined the whole --alg-* family
   as DARK with no theme condition, because it was written for the dashboard and the dashboard is
   dark-only. But /hear (site/receptionist/preview.html) is a LIGHT-FIRST page that reads the same
   tokens: its own `[data-theme="dark"]` rules correctly switched OFF when he chose light, while
   these tokens stayed dark underneath. Half the page obeyed him and half did not.

   Reading `--bg` proved nothing — that token was correctly light the whole time. `--alg-bg` is a
   different family and it was the one painting the page. When a page ignores a theme, find out
   which token IT reads before concluding the theme is broken.

   So: light first, dark qualified. The dashboard is unaffected because alg-brand.js stamps
   data-theme="dark" on this brand unless a light theme is stored. */
:root[data-brand="askmuse"]{
  --alg-bg:#fbfbfe;
  --alg-surface:#ffffff;
  --alg-surface-variant:#f4f6fb;
  --alg-card:#ffffff;
  --alg-card-hover:rgba(15,82,186,.045);
  --alg-card-border:#e6e6f2;
  --alg-border-glow:rgba(15,82,186,.22);
  --alg-subtle-border:#e6e6f2;
  --alg-text-primary:#12121c;
  --alg-text-secondary:#3c3c52;
  --alg-text-muted:#5c5c74;
  --alg-input-bg:#ffffff;
  --alg-input-border:#cdcde6;
  --alg-btn-border:#cdcde6;
  --alg-input-border-focus:#0f52ba;
  --alg-accent:#0f52ba;
  --alg-primary:#0f52ba;
  --alg-fill:#0f52ba;
  --alg-fill-ink:#ffffff;
  --alg-sapphire:#0f52ba;
  --alg-sapphire-light:#1565d8;
  --alg-cyan:#0f7f8e;
  --alg-cyan-glow:#0284c7;
  --alg-cyan-light:#0369a1;
  --alg-indigo-aura:#0a3a86;
  --alg-violet-aura:#4f8ae8;
  --alg-emerald:#059669;
  --alg-emerald-glow:#047857;
  --alg-amber:#b45309;
  --alg-amber-light:#d97706;
  --alg-amber-gold:#a16207;
  --alg-rose:#be123c;
  --alg-sapphire-tint:rgba(15,82,186,.08);
  --alg-success:#047857;
  --alg-danger:#be123c;
  --alg-success-surface:rgba(4,120,87,.10);
  --alg-danger-surface:rgba(190,18,60,.10);
  --alg-accent-surface:rgba(15,82,186,.10);
  --alg-shadow-toast:0 6px 20px rgba(18,18,28,.18);
  --alg-font:'Outfit','Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
/* EVERY DARK THEME, not just the one called "dark".
   The dashboard has its own theme system with its own vocabulary and its own storage key
   (alg_desktop_theme): "sapphire" is LIGHT and is his chosen default ("i need platnium and royal
   saphire as dwafult", 2026-08-23), and sapphire-dark, cyber, sunset and emerald are all dark.
   None of them is called "dark". A selector that only matches [data-theme="dark"] therefore never
   matches the dashboard at all, and an AskMuse customer who picked Cyber Indigo would have got
   this brand's LIGHT palette painted over a dark theme — the same defect as /hear, upside down.
   Found by probing the live attribute instead of trusting the name: it read "sapphire". */
:root[data-brand="askmuse"][data-theme="dark"],
:root[data-brand="askmuse"][data-theme="sapphire-dark"],
:root[data-brand="askmuse"][data-theme="cyber"],
:root[data-brand="askmuse"][data-theme="sunset"],
:root[data-brand="askmuse"][data-theme="emerald"]{
  --alg-bg:#07070b;
  --alg-surface:#0e0e17;
  --alg-surface-variant:#12121d;
  --alg-card:#0e0e17;
  --alg-card-hover:#16162340;
  --alg-card-border:rgba(255,255,255,.085);
  --alg-border-glow:rgba(139,140,248,.22);
  --alg-subtle-border:rgba(255,255,255,.085);
  --alg-text-primary:#f5f5f8;
  --alg-text-secondary:#a6a6bb;
  --alg-text-muted:#77778f;
  --alg-input-bg:#0a0a11;
  --alg-input-border:rgba(255,255,255,.16);
  --alg-btn-border:rgba(255,255,255,.22);
  --alg-input-border-focus:#8b8cf8;
  --alg-accent:#8b8cf8;
  /* --alg-primary is READ by the "is ready" wall and DEFINED BY NOBODY, so that heading falls
     back to a hard-coded #175CD3 -- a blue from a palette this product left behind in
     September. Defined here for AskMuse only: giving it a value on the ALG side would change
     a colour he has not asked me to change, so that one is his call and is flagged rather
     than quietly fixed. */
  --alg-primary:#8b8cf8;
  --alg-fill:#5b5ce0;
  --alg-fill-ink:#ffffff;
  --alg-sapphire:#8b8cf8;
  --alg-sapphire-light:#b89bfb;
  --alg-cyan:#2dd4bf;
  --alg-cyan-glow:#38bdf8;
  --alg-cyan-light:#7dd3fc;
  --alg-indigo-aura:#5b5ce0;
  --alg-violet-aura:#b89bfb;
  --alg-emerald:#34d399;
  --alg-emerald-glow:#6ee7b7;
  --alg-amber:#fbbf24;
  --alg-amber-light:#fcd34d;
  --alg-amber-gold:#f5a623;
  --alg-rose:#fb7185;
  --alg-sapphire-tint:rgba(139,140,248,.10);
  --alg-success:#34d399;
  --alg-danger:#fb7185;
  --alg-success-surface:rgba(52,211,153,.14);
  --alg-danger-surface:rgba(251,113,133,.14);
  --alg-accent-surface:rgba(139,140,248,.12);
  --alg-shadow-toast:0 6px 20px rgba(0,0,0,.55);
  --alg-font:'Outfit','Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
/* THE MARK, swapped at paint. content:url() on a replaced element means there is never a frame
   with the other brand's logo on screen, which a DOMContentLoaded swap cannot promise. The alt
   text is fixed in alg-brand.js, because CSS cannot reach it and nobody sees it painted. */
/* UNDER /assets/, and that path is load-bearing rather than tidy. The AskMuse site proxies an
   ALLOWLIST of paths to this deployment -- /receptionist, /api, /assets, /js and two named
   images -- so a brand asset at the root 404s on the new domain while working perfectly on
   the old one and in every local test. It did: /askmuse-mark-96.png answered 404 on
   askmuse.ca after a green deploy, which is the whole "the source is right and the artifact
   is wrong" family again. Anything this file references must live under a proxied prefix. */
html[data-brand="askmuse"] img[src="/alg-logo-96.png"]{content:url("/assets/askmuse-mark-96.png")}

/* ── THE TRADE PAGES (/for/*) ─────────────────────────────────────────────────────────────
   His 2026-09-10, about the AskMuse footer: "a lot of references are missing right now. All
   the trades are missing." They were missing because linking them would have shown the other
   company: eighteen generated pages (tools/gen-trade-pages.mjs) carrying only the ALG lockup
   and none of this file.

   They have their OWN token set (site/for/_page.css) — the funnel's names cover about half of
   it, so --org2, --org-deep, --navy, --ink2, --ink3, --mut2 and --mint are named here or the
   page comes out half orange. Everything below is a token; the five rules that paint a literal
   orange follow after, because a token swap cannot see a literal (rule 2 above). */
html[data-brand="askmuse"]{
  --navy:#0e1526; --org2:#0a3a86; --org-deep:#0f52ba; --mint:#0f7f8e;
  --ink2:#243449; --ink3:#3b4c66; --mut2:#5c6c85;
}
html[data-brand="askmuse"][data-theme="dark"]{
  --navy:#0e0e17; --org2:#5b5ce0; --org-deep:#b89bfb; --mint:#2dd4bf;
  --ink2:#d5deec; --ink3:#c0cbdc; --mut2:#a6a6bb;
}
html[data-brand="askmuse"] .m-menu .m-grid a.hot{
  background:rgba(15,82,186,.08); color:var(--org-ink); border-color:rgba(15,82,186,.34);
}
html[data-brand="askmuse"][data-theme="dark"] .m-menu .m-grid a.hot{
  background:rgba(139,140,248,.12); color:#cfcfff; border-color:rgba(139,140,248,.45);
}
html[data-brand="askmuse"] .btn{ box-shadow:0 6px 18px rgba(15,82,186,.28); }
html[data-brand="askmuse"][data-theme="dark"] .btn{ box-shadow:0 6px 18px rgba(139,140,248,.28); }
html[data-brand="askmuse"][data-theme="dark"] .turn.ava{
  background:rgba(139,140,248,.10); border-color:rgba(139,140,248,.35);
}

/* ── /websites ────────────────────────────────────────────────────────────────────────────
   Its own page, its own token names again (--grn/--grn2 for the accent, plus --org/--org2), and
   nine rules that paint the orange as a literal where no token reaches. Same drill as /for. */
html[data-brand="askmuse"]{
  --grn:#0f52ba; --grn2:#0a3a86; --amber:#b7791f;
}
html[data-brand="askmuse"][data-theme="dark"]{
  --grn:#8b8cf8; --grn2:#5b5ce0; --amber:#e0b054;
}
html[data-brand="askmuse"] :focus-visible{ outline-color:rgba(15,82,186,.55); }
html[data-brand="askmuse"][data-theme="dark"] :focus-visible{ outline-color:rgba(139,140,248,.55); }
html[data-brand="askmuse"] .btn:hover{ box-shadow:0 10px 26px rgba(15,82,186,.45); }
html[data-brand="askmuse"][data-theme="dark"] .btn:hover{ box-shadow:0 10px 26px rgba(139,140,248,.45); }
html[data-brand="askmuse"] .kicker{ background:rgba(15,82,186,.10); }
html[data-brand="askmuse"][data-theme="dark"] .kicker{ background:rgba(139,140,248,.14); }
html[data-brand="askmuse"] .plans tr.hot th,
html[data-brand="askmuse"] .plans tr.hot td{ background:rgba(15,82,186,.07); }
html[data-brand="askmuse"][data-theme="dark"] .plans tr.hot th,
html[data-brand="askmuse"][data-theme="dark"] .plans tr.hot td{ background:rgba(139,140,248,.12); }
html[data-brand="askmuse"] .tag{ color:var(--grn2); background:rgba(15,82,186,.10); border-color:rgba(15,82,186,.34); }
html[data-brand="askmuse"][data-theme="dark"] .tag{ color:#cfcfff; background:rgba(139,140,248,.12); border-color:rgba(139,140,248,.45); }
html[data-brand="askmuse"] .off{ background:rgba(15,82,186,.08); border-color:rgba(15,82,186,.35); }
html[data-brand="askmuse"][data-theme="dark"] .off{ background:rgba(139,140,248,.08); border-color:rgba(139,140,248,.35); }
html[data-brand="askmuse"] .inc li .ck{ background:rgba(15,82,186,.14); }
html[data-brand="askmuse"][data-theme="dark"] .inc li .ck{ background:rgba(139,140,248,.14); }
html[data-brand="askmuse"][data-theme="dark"] .kicker,
html[data-brand="askmuse"][data-theme="dark"] .off h3 em,
html[data-brand="askmuse"][data-theme="dark"] .inc li .ck{ color:#cfcfff; }   /* was orange-300 */

/* ── the mark talks, on every branded page ────────────────────────────────────────────────
   His "on all pages logo should me animated". Written against the structure the two lockup
   variants share — the three strokes inside .logomark and the dot after them — because the
   funnel pages already had the drawing inline and the rest have just been given it.

   Three periods, none a multiple of another: bars that rise together read as a level meter on
   a machine, and speech does not do that. */
html[data-brand="askmuse"] .logo.askmuse .logomark path{
  transform-box:fill-box; transform-origin:center;
  animation:am-talk 1.35s ease-in-out infinite alternate;
}
html[data-brand="askmuse"] .logo.askmuse .logomark path:nth-of-type(2){ animation-duration:.95s; animation-delay:-.4s; }
html[data-brand="askmuse"] .logo.askmuse .logomark path:nth-of-type(3){ animation-duration:1.75s; animation-delay:-.8s; }
html[data-brand="askmuse"] .logo.askmuse .logomark circle{ animation:am-dot 2.4s ease-in-out infinite; }
@keyframes am-talk{ from{ transform:scaleY(.42) } to{ transform:scaleY(1) } }
@keyframes am-dot{ 0%,100%{ opacity:1 } 50%{ opacity:.5 } }
@media (prefers-reduced-motion: reduce){
  html[data-brand="askmuse"] .logo.askmuse .logomark path,
  html[data-brand="askmuse"] .logo.askmuse .logomark circle{ animation:none; }
}
/* #uc-banner (the amber "This website is under construction." bar) was deleted
   2026-09-11 with the script that drew it — his condition was Stripe checkout
   working, and it does. */


/* ── /hear, the browser call simulator (site/receptionist/preview.html) ──────────────────
   His 2026-09-10: "hear it answer on trades page take old ui... orange one." It is the page
   the trade pages' main button leads to, and it was the last unbranded room in the house.

   A FOURTH token vocabulary — the --alg-* set — where the accent is confusingly NAMED
   --alg-sapphire and VALUED orange (#EA580C). Renaming that would touch the ALG side; naming
   it here does not. Then the literals: the headline gradient, the primary button (whose orange
   is spelled three different ways) and the dark-theme link colour. */
html[data-brand="askmuse"]{
  --alg-sapphire:#0f52ba; --alg-sapphire-light:#1565d8; --alg-sapphire-deep:#0a3a86;
  --alg-sapphire-tint:rgba(15,82,186,.12); --org-ink:#0a3a86; --grn:#0f52ba;
}
html[data-brand="askmuse"][data-theme="dark"]{
  --alg-sapphire:#8b8cf8; --alg-sapphire-light:#b89bfb; --alg-sapphire-deep:#5b5ce0;
  --alg-sapphire-tint:rgba(139,140,248,.14); --org-ink:#cfcfff; --grn:#8b8cf8;
}
html[data-brand="askmuse"] .hl{
  background-image:linear-gradient(92deg,#0f52ba,#1565d8 55%,#4f8ae8) !important;
}
html[data-brand="askmuse"][data-theme="dark"] .hl{
  background-image:linear-gradient(92deg,#b89bfb,#8b8cf8 55%,#2dd4bf) !important;
}
/* The simulator's primary button spells its orange as a literal gradient. `button.btn` and not
   `.btn`: the trade pages use <a class="btn"> and take their colour from a token, so this
   reaches the one page that needs it and leaves seventeen alone.

   :not(.ghost) — ADDED after screenshotting the journey rather than sweeping it. Every one of
   this page's SECONDARY buttons is a <button class="btn ghost">, so the rule above was filling
   them with the primary gradient too: "Search for a different business" and "Change my details"
   came out solid sapphire with #0a3a86 label text on it, 1.5:1, an unreadable button that also
   looked like a second primary. No colour sweep can see this — every colour on it is a correct
   AskMuse colour, in the wrong place. The old brand never had it: .btn.ghost is white with an
   orange rule there, which is what this now restores. */
/* SCOPED TO THE SIMULATOR'S OWN THREE SECTIONS — his 2026-09-11 "signout on this page no
   vsisble", photographing askmuse.ca/app.
   The comment above says this reaches "the one page that needs it". It did not. `button.btn` is
   an element and a class, not a page, and the DASHBOARD is built out of <button class="btn">
   too: every secondary control in it — Sign out on the trial gate among them — came out as a
   solid sapphire block with --alg-text-primary still on it, which is near-black navy on blue.
   Same mistake as the .ghost one this rule already carries a paragraph about, one level further
   out, and the same cause: a rule scoped by shape instead of by place.
   The three ids are exactly where preview.html keeps all eight of its buttons, and they are the
   scope the box-shadow rule below already uses. Nothing on the simulator changes. */
html[data-brand="askmuse"] #s-find button.btn:not(.ghost),
html[data-brand="askmuse"] #s-check button.btn:not(.ghost),
html[data-brand="askmuse"] #s-hear button.btn:not(.ghost){
  background:linear-gradient(100deg,#0f52ba,#0f52ba 60%,#0a3a86);
}
html[data-brand="askmuse"][data-theme="dark"] #s-find button.btn:not(.ghost),
html[data-brand="askmuse"][data-theme="dark"] #s-check button.btn:not(.ghost),
html[data-brand="askmuse"][data-theme="dark"] #s-hear button.btn:not(.ghost){
  background:linear-gradient(100deg,#5b5ce0,#8b8cf8 60%,#b89bfb);
}
/* and the ghost's own `box-shadow:none` back, which the two brand-wide .btn shadow rules above
   out-specify. Scoped to this page's three sections so the funnel's buttons keep theirs. */
html[data-brand="askmuse"] #s-find .btn.ghost,
html[data-brand="askmuse"] #s-check .btn.ghost,
html[data-brand="askmuse"] #s-hear .btn.ghost{ box-shadow:none; }

/* .k IS TWO DIFFERENT CONTROLS, and the brand only knew about one of them. Up in the signup
   block, `html[data-brand="askmuse"] .k` repaints the trial badge — a pale violet pill with
   near-white #cfcfff text, right on a dark page. This page's `.facts .k` is the little grey
   uppercase FIELD LABEL beside each looked-up detail ("NAME", "PHONE", "HOURS"), and it lost:
   (0,2,1) beats `.facts .k`'s (0,2,0). In light that put #cfcfff on a #f3f3fe pill — 1.1:1,
   a label a sighted visitor simply cannot read. Also invisible to a colour sweep, because
   #cfcfff is a perfectly good AskMuse colour. Handed back to the page's own muted token. */
html[data-brand="askmuse"] #s-check .facts .k,
html[data-brand="askmuse"] #s-hear .facts .k,
/* THE THIRD ONE, found 2026-09-16 by his screenshot: "why there is double box firld looks absurd".
   The fix above was written for preview.html's `.facts .k` and the setup wizard was missed — it
   builds the same field labels as `.sumrow .k` (start.html, the "What Google has on file" step),
   so NAME / ADDRESS / PHONE / HOURS each got the trial badge's filled pill. Worse on a phone than
   on a desktop: the label cell stretches to the row's height, so a listing with a full week of
   hours paints a tall empty blue block beside the text. Same class, same collision, same hand-back
   to the page's own muted token. */
html[data-brand="askmuse"] .sumrow .k{
  color:var(--alg-text-muted); background:none; border-color:transparent;
}

/* THE THREE THE FIRST PASS COULD NOT SEE, because they are not on the page when it loads.
   Found by driving the journey with every step revealed rather than by reading the file: the
   headline, the button and the token tables above were all already correct while steps 2 and 3
   were still Affordable Leads orange, and so was the ring on the very first field a visitor
   touches. A sweep of the resting page reports none of them.

     .card         a WARM DROP SHADOW, rgba(194,65,12,.18), under all six cards. Light only —
                   the page's own dark rule already paints a neutral one, and because these
                   selectors carry an id they would otherwise beat it, so dark is restated.
     input:focus   the focus ring, rgba(194,65,12,.18). The border beside it already reads
                   --org-ink and was right; only the halo was typed in.
     .alert.warn   the whole alert, three literals per theme (#FFF7ED/#FDBA74/#9A3412 light,
                   rgba(249,115,22,…)/#fdba74 dark) — #checkmsg, #hourswarn and #nohours.

   .warn goes to the BRAND ACCENT, not to a gold, because that is the faithful translation
   rather than a new decision: on the ALG side .warn *is* the brand orange, so on this side it
   is the brand sapphire, and it now matches .note, which sits beside it and always was. Severity
   still reads — .alert.bad stays red and .alert.good stays green, in both brands.

   Scoped to #s-find / #s-check / #s-hear, the three sections that exist only on this page,
   because `.card` is also six cards on start.html, two on reset and thirty-five on the
   dashboard, and none of them asked for a new shadow. */
html[data-brand="askmuse"] #s-find .card,
html[data-brand="askmuse"] #s-check .card,
html[data-brand="askmuse"] #s-hear .card{
  box-shadow:0 1px 2px rgba(18,18,28,.05),0 12px 30px -16px rgba(15,82,186,.20);
}
html[data-brand="askmuse"][data-theme="dark"] #s-find .card,
html[data-brand="askmuse"][data-theme="dark"] #s-check .card,
html[data-brand="askmuse"][data-theme="dark"] #s-hear .card{
  box-shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px -16px rgba(0,0,0,.6);
}
html[data-brand="askmuse"] #s-find :is(input,select):focus,
html[data-brand="askmuse"] #s-check :is(input,select):focus,
html[data-brand="askmuse"] #s-hear :is(input,select):focus{
  box-shadow:0 0 0 4px rgba(15,82,186,.18);
}
html[data-brand="askmuse"][data-theme="dark"] #s-find :is(input,select):focus,
html[data-brand="askmuse"][data-theme="dark"] #s-check :is(input,select):focus,
html[data-brand="askmuse"][data-theme="dark"] #s-hear :is(input,select):focus{
  box-shadow:0 0 0 4px rgba(139,140,248,.22);
}
html[data-brand="askmuse"] #s-check .alert.warn,
html[data-brand="askmuse"] #s-hear .alert.warn{
  background:rgba(15,82,186,.07);
  border-color:rgba(15,82,186,.30);
  color:#0a3a86;                       /* 9.6:1 on the tint over #ffffff, measured */
}
html[data-brand="askmuse"][data-theme="dark"] #s-check .alert.warn,
html[data-brand="askmuse"][data-theme="dark"] #s-hear .alert.warn{
  background:rgba(139,140,248,.12);
  border-color:rgba(139,140,248,.42);
  color:#cfcfff;                       /* 11.0:1 on the tint over #0e0e17, measured */
}

/* ── the legal pages' product line ────────────────────────────────────────────────────────
   His 2026-09-10: "the service update terms of servicw not anymore product of nova scotia."
   That top line is a PRODUCT credit, not the clause naming who you contracted with — the
   clause below it is untouched and still names the party, because renaming that would be a
   false statement rather than a rebrand. Two spans, exactly one in the layout, the same
   contract the two lockups use. */
.brand-askmuse{ display:none; }
html[data-brand="askmuse"] .brand-alg{ display:none; }
html[data-brand="askmuse"] .brand-askmuse{ display:inline; }

/* THE RESET PAGE'S TWO ACCENT-TINTED GLOWS. reset.html spelled the glow under its button and the
   ring on a focused input as raw rgba(249,115,22,...) — an orange halo under a sapphire button,
   which is the half-rebrand that reads as a page somebody took rather than built. The page names
   them now (--accent-glow, --accent-edge); this is where they follow the host. His 2026-09-11:
   "forgot your password buttin colout not matching design". */
html[data-brand="askmuse"]{
  --accent-glow:rgba(15,82,186,.42); --accent-edge:rgba(15,82,186,.55);
}
html[data-brand="askmuse"][data-theme="dark"]{
  --accent-glow:rgba(91,92,224,.5); --accent-edge:rgba(139,140,248,.6);
}

/* THE SOCIAL ICONS COME OFF askmuse.ca UNTIL THE HANDLES EXIST. His 2026-09-11: "make sure- all
   social media links= to askmuse- currently it links to affordableleads generation." He is right
   that askmuse.ca should not be sending people to a profile named after the retiring company.
   I am NOT guessing a handle. Checked before touching anything: instagram.com answers 200 for
   every string behind a login wall, so it proves nothing; facebook.com/askmuseca and
   /askmuse.ca both return Facebook's own not-found page, and facebook.com/askmuse resolves to a
   page that is almost certainly somebody else's. Pointing his customers at a stranger's profile
   is worse than the state he is complaining about.
   So they are hidden on the new host and untouched on the old one, which is reversible in one
   line the moment he sends me the real handles — the two URLs live in tools/sync-footer.mjs and
   in askmuse-front/index.html. */
/* LIFTED 2026-09-23 — THE CONDITION ABOVE IS MET, AND BY PROOF RATHER THAN BY A HANDLE HE
   TYPED. The note above hides these because the AskMuse handles were unknown and it was right
   to: "pointing his customers at a stranger's profile is worse than the state he is
   complaining about." They are known now, and both were checked against something only he
   controls rather than against a URL that loads:
     facebook.com/1285248694676997  ==  META_ASKMUSE_PAGE_ID in ~/.claude/alg.env, exactly.
     instagram.com/askmuse.ca       ==  @askmuse.ca, IG id 17841426792559662, the account
                                        tools/post-ig.py publishes to (site/NEXT.md:1505).
   That is the check the old note asked for: instagram.com answers 200 for any string behind
   its login wall, so a live URL proves nothing — a page id that matches his own credentials
   does.
   WHAT THIS ACTUALLY FIXES: the correct URLs had already been put into the markup by hand,
   so askmuse.ca has been shipping his real Instagram and Facebook links INSIDE A ROW THAT
   CSS HID. Both accounts exist, he posts to them, and nobody on his own site could see them.
   Revert knob: put the two selectors back. */

/* ONE GROUND ON EVERY PAGE, IN BOTH THEMES. His 2026-09-11: "there is diffence in background
   colour for all pages- https://askmuse.ca/ai-receptionist make it same like askmuse.ca".
   Measured at 1280 before touching anything, reading the colour actually PAINTED behind the
   middle of the viewport rather than <body>, because on the React pages body is not the surface:

     light   /                 rgb(246,246,250)
             /ai-receptionist  oklch(.984 .003 247.858)  = slate-50, rgb(248,250,252)
             /websites         rgb(255,255,255) on a rgb(251,251,254) body
     dark    /                 rgb(7,7,11)
             /ai-receptionist  rgb(7,7,11)
             /websites         rgb(14,23,48) — a navy panel on a near-black page

   Three light grounds and a navy panel in dark. The landing page's are the ones everything else
   follows, which is the same call as the footer and the bar.
   Brand-scoped: the old host keeps its own palette untouched. */
/* :not([data-surface="app"]) — THE SIGNED-IN DASHBOARD IS NOT A LANDING PAGE. Everything in this
   block is about the marketing documents, whose theme vocabulary is "dark" or nothing. The
   dashboard loads this sheet too (for the brand tokens) and its five themes are named sapphire,
   sapphire-dark, cyber, sunset and emerald — so `:not([data-theme="dark"])` was true in EVERY one
   of them and this line painted the app's ground #f6f6fa, under #f5f5f8 text in the dark ones.
   Scoped on what the page IS rather than on a list of theme names, which would rot the day a
   sixth theme is added. memory: selector-scope-is-not-page-scope, the second time. */
html[data-brand="askmuse"]:not([data-theme="dark"]):not([data-surface="app"]) body{ background:#f6f6fa; }
/* the React wrapper paints slate-50 as a Tailwind utility; an unlayered rule beats a layered one
   whatever the specificity, which is the same mechanism that made the footer headings stay Sora */
html[data-brand="askmuse"]:not([data-theme="dark"]) .bg-slate-50{ background-color:#f6f6fa; }
html[data-brand="askmuse"]:not([data-theme="dark"]) section.alt{ background:#fff; border-color:rgba(12,12,28,.10); }
/* and the alternating band in dark is a wash over the ground, not a different colour */
html[data-brand="askmuse"][data-theme="dark"] section.alt{
  background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.085); }
html[data-brand="askmuse"][data-theme="dark"] .bg-slate-50{ background-color:#07070b; }

/* FRENCH IS HIDDEN FOR NOW — his 2026-09-11: "mame sure fr is hidden for now".
   ONE RULE, AND UNHIDING IS DELETING IT. Four controls carry data-lang-switch: the bar's EN/FR
   pill, the same pill inside the phone menu with its "LANGUAGE" label, the footer's legal-row
   link, and the .lang-sw pill added to the landing page earlier today.
   HIDDEN, NOT DELETED, and the distinction matters: the href, hreflang and lang attributes stay
   in the markup, so the seven French pages keep their hreflang pairing and Google keeps seeing
   /fr as a translation rather than as pages that vanished. The French pages themselves still
   answer — nothing is unpublished, there is just no longer a button pointing at them.
   He also asked separately that the home page's FR translate the page you are ON rather than
   jumping to /fr/receptionniste-ia. It cannot yet: askmuse.ca/ is an English-only document with
   no French twin. That is a build, and this hide is what he wants until it exists. */
[data-lang-switch]{ display:none !important; }
.lang-sw{ display:none !important; }

/* THE ACCENTED HALF OF THE WORDMARK FOLLOWS THE THEME. His 2026-09-11: "muse written not acvording
   to theme color". Measured across nine pages in both themes: the landing page and the static
   family both render "Muse" sapphire in light and violet in dark, because they read var(--org).
   The React lockup hard-codes Tailwind's text-violet-400, so it stayed violet on a white page —
   the only one of the three that did not follow the theme. .wm-em is the hook the React markup
   carries now; .logo.askmuse .wm em is the static family's existing one. One rule, both. */
html[data-brand="askmuse"] .wm-em,
html[data-brand="askmuse"] .logo.askmuse .wm em{ font-style:normal; color:var(--org); }

/* THE LOCKUP MARK ON THE REACT PAGES. They load this sheet and NOT /assets/alg-head.css, which is
   where the other twenty pages get their 46/40. Tailwind would not generate the arbitrary sizes
   (the built CSS contained no 21.12px and no 46px), and an inline style cannot carry a media
   query — so the size belongs here, in plain CSS, next to the rest of the brand. */
img[data-brand-mark]{ width:46px; height:46px; border-radius:11px; flex:0 0 auto; }
@media(max-width:430px){ img[data-brand-mark]{ width:40px; height:40px; } }

/* AND IT HAS TO OUT-SPECIFY THE SWAP. `html[data-brand="askmuse"] img[src="/alg-logo-96.png"]`
   above is (0,3,1); a bare `img[data-brand-mark]` at (0,1,1) loses to whatever also sizes that
   element, which is why the React pages kept a 34px mark after the rule went live. Matched
   specificity, both hosts. */
html[data-brand="askmuse"] img[data-brand-mark],
html img[data-brand-mark]{ width:46px !important; height:46px !important; border-radius:11px; }
@media(max-width:430px){
  html[data-brand="askmuse"] img[data-brand-mark],
  html img[data-brand-mark]{ width:40px !important; height:40px !important; }
}
/* the wizard family writes its own bar CSS and sets the mark at 30 below 430 */
html nav .logo .logomark{ width:46px; height:46px; border-radius:11px; }
@media(max-width:430px){ html nav .logo .logomark{ width:40px; height:40px; } }

/* ═══ THE LIGHT/DARK SWITCH, ONE LOOK ON ASKMUSE.CA ═════════════════════════════════════════════
   His 2026-09-15 phone screenshots, home vs /ai-receptionist/setup in dark: "still button different
   when on dark ... should follow home page". Measured live at 390px, both themes:
     askmuse.ca/                 dark shows a SUN, light shows a MOON (what a click will do);
                                 38px box, r12, faint fill rgba(255,255,255,.04), hairline .16
     /ai-receptionist/* (React)  dark shows a MOON, light a SUN (the current state); 40px, r10,
                                 Tailwind slate-900 / slate-700
     /receptionist/security      already the home page's since this morning's alg-head.css rules
   The React ThemeToggle renders BOTH icons (svg.sun and svg.moon) and leaves the choice to CSS, so
   this is fixable here without rebuilding the bundle. alg-brand.css is loaded by the React pages
   and by every static page, which alg-head.css is not. So the switch rules live here, unscoped from
   `nav`, and alg-head.css no longer carries its own copy. (0,3,1) and up, unlayered, which beats
   the bundle's `[data-theme=dark] .theme-sw .sun{display:none}` (0,3,0) and every Tailwind
   utility on the button. The numbers are the home page's. */
html[data-brand="askmuse"] .theme-sw{width:38px;height:38px;border-radius:12px;border:1px solid rgba(12,12,28,.20);background:rgba(12,12,28,.042);color:#0e0e18}
html[data-brand="askmuse"][data-theme="dark"] .theme-sw{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#f5f5f8}
html[data-brand="askmuse"] .theme-sw svg{width:17px;height:17px}
html[data-brand="askmuse"] .theme-sw .sun{display:none}
html[data-brand="askmuse"] .theme-sw .moon{display:block}
html[data-brand="askmuse"][data-theme="dark"] .theme-sw .sun{display:block}
html[data-brand="askmuse"][data-theme="dark"] .theme-sw .moon{display:none}
html[data-brand="askmuse"] .theme-sw:hover{border-color:#0f52ba}
html[data-brand="askmuse"][data-theme="dark"] .theme-sw:hover{border-color:#8b8cf8}
/* the React bar's menu button, the home page's box (42px, r11, the softer hairline). It has no class
   of its own (`p-2 rounded-xl border bg-slate-…`) and its aria-label is translated, so it is found as
   the button right after the span that holds the switch, which is how Navbar.tsx lays the pair out.
   The static pages' .burger gets the same numbers from alg-head.css. */
html[data-brand="askmuse"] span:has(> .theme-sw) + button[aria-expanded]{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:11px;border:1px solid rgba(12,12,28,.10);background:rgba(12,12,28,.042);color:#0e0e18}
html[data-brand="askmuse"][data-theme="dark"] span:has(> .theme-sw) + button[aria-expanded]{border-color:rgba(255,255,255,.085);background:rgba(255,255,255,.04);color:#f5f5f8}
html[data-brand="askmuse"] span:has(> .theme-sw) + button[aria-expanded] svg{width:18px;height:18px}

/* THE REACT PAGES' MENU SHEET, THE LANDING PAGE'S (his 2026-09-15 "hamburger menu design, size of tabs
   not same, even colour combination"). Measured at 390px in dark with the sheet open on
   /ai-receptionist/setup: ground bg-slate-950, tabs 34px at 12px on slate-900 with a cyan border for
   the current page, and cyan/indigo/emerald buttons. The landing page's sheet: tabs 46px at
   14.08px/600 on rgba(255,255,255,.06) with a .085 hairline, r12, and one gradient pill. No classes of
   our own exist in that markup (Navbar.tsx is Tailwind), so the hooks are its structure inside the bar:
   the scrolling sheet (.overscroll-contain), the two-column grid of tabs, and the button column after it.
   The static pages' .m-menu gets the same numbers from alg-head.css. */
html[data-brand="askmuse"] nav .overscroll-contain{background:rgba(255,255,255,.98) !important;border-color:rgba(12,12,28,.10) !important;box-shadow:none !important}
html[data-brand="askmuse"][data-theme="dark"] nav .overscroll-contain{background:rgba(7,7,11,.97) !important;border-color:rgba(255,255,255,.085) !important}
html[data-brand="askmuse"] nav .overscroll-contain .grid.grid-cols-2{gap:9px}
html[data-brand="askmuse"] nav .overscroll-contain .grid.grid-cols-2 > a{display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 13px;font-size:14.08px;font-weight:600;line-height:1.25;
  border-radius:12px;background:rgba(12,12,28,.05);color:#0e0e18;border:1px solid rgba(12,12,28,.10)}
html[data-brand="askmuse"][data-theme="dark"] nav .overscroll-contain .grid.grid-cols-2 > a{background:rgba(255,255,255,.06);color:#f5f5f8;border-color:rgba(255,255,255,.085)}
html[data-brand="askmuse"] nav .overscroll-contain .grid.grid-cols-2 > a[aria-current],
html[data-brand="askmuse"] nav .overscroll-contain .grid.grid-cols-2 > a:hover{border-color:#0f52ba}
html[data-brand="askmuse"][data-theme="dark"] nav .overscroll-contain .grid.grid-cols-2 > a[aria-current],
html[data-brand="askmuse"][data-theme="dark"] nav .overscroll-contain .grid.grid-cols-2 > a:hover{border-color:#8b8cf8}
html[data-brand="askmuse"] nav .overscroll-contain > div:last-child a{min-height:46px;border-radius:999px;font-size:14.4px;font-weight:600;
  background:rgba(12,12,28,.05);color:#0e0e18;border:1px solid rgba(12,12,28,.20);box-shadow:none}
html[data-brand="askmuse"][data-theme="dark"] nav .overscroll-contain > div:last-child a{background:rgba(255,255,255,.04);color:#f5f5f8;border-color:rgba(255,255,255,.16)}
html[data-brand="askmuse"] nav .overscroll-contain > div:last-child a:first-child{background:linear-gradient(100deg,#0f52ba,#0f52ba 40%,#1565d8);color:#fff;border-color:transparent;box-shadow:0 10px 34px -12px rgba(139,140,248,.75)}
html[data-brand="askmuse"][data-theme="dark"] nav .overscroll-contain > div:last-child a:first-child{background:linear-gradient(100deg,#8b8cf8,#8b8cf8 40%,#b89bfb);color:#08080d}
html[data-brand="askmuse"] nav .overscroll-contain > div:last-child a svg{color:inherit}

/* NO "MARKETING" IN ASKMUSE'S MENUS. His 2026-09-15 (Discord, phone screenshot of the menu): "why it
   says marketing still? on hamburger menu as it does not make sense". Meta-ads marketing is Affordable
   Leads Generation's service, not the receptionist's. The React bar's phone sheet carries a Marketing
   tile (Navbar.tsx pathFor('marketing')), and changing that needs a bundle rebuild, so on the AskMuse
   brand every in-bar link to the marketing page is hidden here instead. The page itself still answers
   at its address. askmuse.ca's own home menu drops its tile in askmuse-front/index.html. */
html[data-brand="askmuse"] nav a[href$="/ai-receptionist/marketing"],
html[data-brand="askmuse"] nav a[href$="/fr/marketing"],
html[data-brand="askmuse"] .m-menu a[href$="/marketing"]{display:none !important}

/* THE LANDING PAGE'S LOCKUP AND BAR, on every dressed page. 2026-09-17, his screenshot of
   askmuse.ca/hear: "logo at top… and askmuse not as per landing page". Each funnel page sizes its
   own .logo (Sora 800 at 17px and a 34px mark on /hear; Outfit at 21px on signup), and the shared
   rules above only recoloured the "Muse". Measured on askmuse.ca itself: .wordmark is Outfit 600
   at 1.32rem (18.5px), letter-spacing -.2px, the tile 40px with a 12px radius, the bar 72px on
   --head-bg (rgba(7,7,11,.72) dark, rgba(246,246,250,.82) light) under a 16px blur. Outfit itself
   is injected by alg-brand.js, so the family is loaded wherever this rule applies. Scoped to the
   brand and to the page's own header (body > nav) so a dashboard side-nav is not repainted. */
html[data-brand="askmuse"] .logo.askmuse{font-family:'Outfit','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:600;font-size:18.5px;letter-spacing:-.2px;gap:11px;line-height:1.1}
html[data-brand="askmuse"] .logo.askmuse .logomark{width:40px;height:40px;border-radius:12px}
html[data-brand="askmuse"] body > nav{background:rgba(246,246,250,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
html[data-brand="askmuse"][data-theme="dark"] body > nav{background:rgba(7,7,11,.72);border-bottom-color:var(--line)}
html[data-brand="askmuse"] body > nav .nav-in{min-height:72px}

/* ==========================================================================================
   WHITE TEXT NEEDS 4.5:1, AND THE BRAND ACCENT DOES NOT GIVE IT (2026-09-23)

   tests/cta-contrast.cjs, run against the live site: four distinct labels, all white on
   rgb(139,140,248) = --org, all 2.91:1 against a 4.5 floor.

       Start free trial        /ai-receptionist, /ai-receptionist/setup, /ai-receptionist/compare
       Hear it answer →        every /for/ trade page
       Start free for 7 days   every /for/ trade page
       EN                      /receptionist/signup (the pressed language pill)

   That is the primary call to action on the product's own pages. --org is not touched — it is
   correct for text, borders, rings and glows on ink. A FILL under white text is a different pair,
   so it gets --org-btn, defined beside --org in both palettes above.

   SCOPED TO FILLS, never to text. `.btn.ghost` keeps its transparent face; the preview page's
   three sections set their own gradient with an id and out-specify this, which is deliberate —
   nothing on the simulator moves.
   ========================================================================================== */
/* :not([data-surface="app"]) — AND THIS WAS A REGRESSION I SHIPPED, on 2026-09-23, hours after
   fixing the identical mistake on the `body` rule above. He found it on his phone within the hour:
   "blue hutton cant rrad text inside it".
   The signed-in dashboard styles .btn as a NEUTRAL surface with dark text —
       .btn{ background:var(--alg-surface-variant); color:var(--alg-text-primary) }
   — so repainting only the BACKGROUND sapphire left the dark label on top of it. Unreadable, on
   his Copied button, live.
   The lesson is the one already written two rules up and evidently not learned: a selector scoped
   by SHAPE (.btn) is not scoped by PLACE. Everything in this block is about the marketing pages
   and has to say so. memory: selector-scope-is-not-page-scope. */
html[data-brand="askmuse"]:not([data-surface="app"]) .btn:not(.ghost){
  background:var(--org-btn); border-color:var(--org-btn); }
html[data-brand="askmuse"]:not([data-surface="app"]) .btn:not(.ghost):hover{ background:var(--org-btn); }
/* THE BOOKING PAGES' STATE BUTTONS ARE NOT THE PRIMARY. The rule above is scoped by shape, and on
   /r/<code> two more shapes wear .btn: the DISABLED primary ("Pick a new time first" until a time is
   picked) and the ARMED cancel (.danger — red, "Yes, cancel it — tap again"). Both keep their own
   colour tokens for the ink, so the fill above put grey on violet (measured 1.19:1 in dark — the button
   in his 2026-09-29 screenshot) and red on violet. (0,5,1) with the page hook, so these win whatever
   the order; :hover restated because the fill rule has one. The ghost's box-shadow:none is restored
   too — the brand-wide .btn shadow was putting a sapphire glow under the grey "Cancel this appointment". */
html[data-brand="askmuse"]:not([data-surface="app"])[data-page="booking"] .btn[disabled],
html[data-brand="askmuse"]:not([data-surface="app"])[data-page="booking"] .btn[disabled]:hover{
  background:var(--dis-bg); border-color:var(--line); color:var(--dis-ink); box-shadow:none; }
html[data-brand="askmuse"]:not([data-surface="app"])[data-page="booking"] .btn.danger,
html[data-brand="askmuse"]:not([data-surface="app"])[data-page="booking"] .btn.danger:hover{
  background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); box-shadow:none; }
html[data-brand="askmuse"][data-page="booking"] .btn.ghost{ box-shadow:none; }

/* The React nav's CTA is a Tailwind gradient, not a solid: `bg-gradient-to-r from-blue-600
   via-indigo-600 to-cyan-500`, and the brand override maps all three of those tokens into the
   light violet — so the button is light violet end to end under white text. The stops move to the
   deep end of the same gradient the brand already uses (--grad), which keeps it a violet button
   and not a new colour. */
/* SET THE WHOLE background-image, NOT Tailwind's stop VARIABLES. The first attempt wrote
   `--tw-gradient-from:#5b5ce0 var(--tw-gradient-from-position)`, copying the shape Tailwind
   generates — but `--tw-gradient-from-position` is not defined in this build, so the whole
   declaration was invalid and the gradient resolved to
   `linear-gradient(..., rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)`: a button with NO fill at all,
   which is worse than the low-contrast one it replaced. Caught by measuring the deployed page
   instead of the stylesheet. Declaring the image outright cannot be broken by Tailwind internals.
   Same violet family, deep end of --grad. */
html[data-brand="askmuse"]:not([data-surface="app"]) .bg-gradient-to-r.from-blue-600.via-indigo-600.to-cyan-500{
  background-image:linear-gradient(to right,#5b5ce0,#5b5ce0 55%,#4f50c9);
}
/* The SECOND "Start free trial" on the same page — the full-width one, a solid `bg-blue-600`
   rather than a gradient, which the brand maps to the light violet. Scoped to `.text-white`
   because this is only wrong where white sits ON it; bg-blue-600 behind dark text is fine. */
html[data-brand="askmuse"]:not([data-surface="app"]) .bg-blue-600.text-white{ background-color:var(--org-btn); }