/* ══════════════════════════════════════════════════════════════════════════════
   geo-2026.css - THE SKIN. Loaded after Tailwind and geo-ui.css, before nothing.

   WHY IT EXISTS (Edward, 22 Sep): a competitor's entry is "clean and had amazing
   effects"; "we have to be 2026 design"; "some colours don't flow and some buttons
   are not in line"; "some backgrounds don't match"; "we need full harmony".

   WHERE EVERY VALUE COMES FROM - three sources, measured, never picked by eye:
     1. OUR NAVIGATION CANVAS (claude.ai/artifact/3H2mzG6Xdy4Lcfkjkc6WZm)
        the system font stack, 40px controls, 10px corners, primary = green-on-dark-ink
     2. geophii.com, read off the live page
        the ground people arrive from: near-black, body text rgb(156,163,175),
        the lavender rgb(179,161,199) with rgb(113,94,139) as its deeper partner
     3. THE REFERENCE TEMPLATE Edward sent (Requests & Approvals, src/index.css)
        a card is the ground plus a HAIRLINE (0 0% 14%), brightening to 0 1% 28%
        under the pointer; muted surface 0 0% 12%; text 98% over 55%; calm status
        colours; a dot grid at 5%; press 0.98; fade-up staggered 50ms
   And one decision of Edward's own: the BUTTON is the logo's teal #00B8B5, with
   dark ink - measured 6.9:1, where the same teal under white text is 2.46:1.

   THE RULES THIS FILE KEEPS
     surfaces  the ground, a hairline, one muted step. Nothing else.
     teal      the one action on a screen. Never decoration.
     lavender  the second voice: a link, a mark, the second line on a chart.
     green     a good score. Not a button.
     red       destroying something, and a failed state. Nothing else.
     every control is 40px on a laptop, 44 on a phone.

   HOW IT IS SAFE: the app is built from Tailwind's grey and accent utilities.
   This file redefines what those utilities PAINT, one level more specific
   (html[data-theme=...] .class), so the cascade settles it whichever order the
   stylesheets load in, and no page markup has to change.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --geo-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Headings (Edward, 26 Sep: "the bold font is a bit bulky ... a better font for our
     header"). Inter, self-hosted: the system face at 700-800 is heavy, and it's a different
     face on every device. Change this one line to try another. */
  --geo-font-head: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Light, taken from the reference template's own light theme (Edward, 23 Sep:
     "the light mode needs that feel - we have the styling from Lovable"), its HSL
     values converted: background 210 20% 98%, card 100%, muted 210 15% 93%,
     border 210 15% 88%, border-hover 210 15% 70%, foreground 220 20% 15%,
     muted-foreground 220 10% 45%. Cooler and cleaner than the warm greys I had,
     and structurally identical to the dark side. */
  --geo-bg:       #f7f9fb;
  --geo-panel:    #ffffff;
  --geo-surface:  #ffffff;
  --geo-surface2: #e9edf1;
  --geo-border:   #dde2e8;
  --geo-border2:  #adb6c2;
  /* D-011 (19 Oct, Edward: "let the contrast be very clear"): a control's edge at 3:1 or more on the
     page and on a card (#7d8693: 3.15:1 measured), and a quiet but clear edge for cards and inner boxes. */
  --geo-edge:      #7d8693;
  --geo-card-edge: #aeb7c3;   /* D-012: one step firmer (was #b9c1cc, 1.55:1); still well under a field edge */
  --geo-text:     #1f242e;
  --geo-text2:    #3d4452;
  --geo-muted:    #5b6472;   /* 4.11:1 measured at #6a7180 on white */
  --geo-accent:   #00696a;          /* the logo teal, deep enough to read ON white: #00807e measured 3.7:1 */
  --geo-accent-ink: #ffffff;
  /* The accent at low alpha, for a chosen chip or a quiet highlight. It must be built from
     THIS theme's accent: the roast CSS used a bright-teal tint in both, which is the dark
     theme's colour sitting on a white card. */
  --geo-accent-soft: rgba(0, 105, 106, .10);
  /* Not a colour, so it is the same in both themes - but it was used with var() and never
     defined, which is how a font stack silently becomes the browser default. */
  --geo-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --geo-good:     #15803d;
  --geo-warn:     #b45309;
  --geo-bad:      #b91c1c;
  --geo-good-ink: #14532d;
  --geo-warn-ink: #7c2d12;
  --geo-bad-ink:  #7f1d1d;
  --geo-second-ink: #4b3e5c;
  --geo-second:   #715e8b;          /* the site's lavender, deep step: 5.6:1 on light */
  --geo-second-deep: #4b3e5c;
  --geo-info:     #715e8b;

  --geo-r-card: 14px;
  --geo-r-ctrl: 8px;                /* 10 -> 8 with the flat buttons (26 Sep) */
  --geo-ctrl-h: 40px;
  /* Buttons (26 Sep, Edward: "more like high quality saas button"): flat, a hairline edge a
     shade darker than the fill and a one-pixel top highlight, instead of a glow underneath. */
  --geo-btn-edge:    color-mix(in oklab, var(--geo-accent) 78%, #000);
  --geo-btn-lift:    inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 24, 40, .12);
  --geo-btn-quiet:   0 1px 2px rgba(16, 24, 40, .06);
  --geo-btn-hover:   color-mix(in oklab, var(--geo-accent) 90%, #fff);
  /* A card lifted on hover: a soft shadow under it (the billing mock-up, 15 Oct). */
  --geo-lift-shadow: 0 10px 24px -18px rgba(16, 24, 40, .35);
  --geo-dur:    .18s;
  --geo-ease:   cubic-bezier(.2, .8, .2, 1);
  --geo-nav-w:  260px;
}

html[data-theme="dark"] {
  --geo-btn-lift:  inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .35);
  --geo-btn-quiet: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .3);
  --geo-lift-shadow: 0 10px 24px -18px rgba(0, 0, 0, .6);
  --geo-bg:       #030303;
  --geo-panel:    #000000;
  --geo-surface:  #0a0a0a;
  --geo-surface2: #1f1f1f;
  --geo-border:   #242424;
  --geo-border2:  #474747;
  --geo-edge:      #6f7d90;   /* D-011: 4.13:1 measured on the navy card, 4.25:1 on the navy ground */
  --geo-card-edge: #3a4658;
  --geo-text:     #fafafa;
  --geo-text2:    #d9d9d9;
  --geo-muted:    #9a9a9a;   /* measured: #8c8c8c on the muted surface was 4.37:1 */
  --geo-accent:   #00b8b5;
  --geo-accent-ink: #04201f;
  --geo-accent-soft: rgba(0, 184, 181, .13);
  --geo-good:     #33cc99;
  --geo-warn:     #eaa61a;
  --geo-bad:      #d94f4f;
  /* Ink for text sitting ON a 16% tint of its own colour: the status colours
     themselves measured 3.62:1 there, so the pill gets a lighter step. */
  --geo-good-ink: #5fe3b2;
  --geo-warn-ink: #f2c14e;
  --geo-bad-ink:  #f5a3a3;   /* one step lighter: a red label measured 4.07:1 live */
  --geo-second-ink: #cbbcdb;
  --geo-second:   #b3a1c7;
  --geo-second-deep: #715e8b;
  --geo-info:     #b3a1c7;
}

/* ── The face ────────────────────────────────────────────────────────────────
   The system stack: it is already on the person's device, so the first paint is
   the real one - no flash of a different typeface while a web font downloads. */
body, .font-sans, button, input, select, textarea { font-family: var(--geo-font); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { letter-spacing: -.011em; }
.main-content .text-2xl, .main-content .text-3xl, .main-content .text-4xl { letter-spacing: -.02em; font-weight: 700; }

/* The heading face. Self-hosted (one 48KB variable file, Latin), swap so text shows at once in
   the system face and settles into Inter; nothing blocks the first paint. Headings take it and
   come down a step in weight: Inter at 650 reads as firmly as the system face at 800, without
   the bulk. Body text keeps the system face. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
h1, h2, h3, h4 { font-family: var(--geo-font-head); }
h1, h2 { font-weight: 650; }
h3, h4 { font-weight: 600; }
:is(h1, h2, h3, h4):is(.font-extrabold, .font-black) { font-weight: 700; }
:is(h1, h2, h3, h4).font-bold { font-weight: 650; }
:is(h1, h2, h3, h4).font-semibold { font-weight: 600; }
.main-content :is(h1, h2, h3).text-2xl, .main-content :is(h1, h2, h3).text-3xl, .main-content :is(h1, h2, h3).text-4xl { font-weight: 650; }

/* ── The ground, with texture ─────────────────────────────────────────────────
   A dot grid at 5%, 10px pitch (the reference template's). It gives the page
   substance from across the room and disappears at reading distance. */
html[data-theme="dark"] body {
  background-color: var(--geo-bg);
  background-image: radial-gradient(circle at center, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 10px 10px;
  background-attachment: fixed;
}
html:not([data-theme="dark"]) body {
  background-color: var(--geo-bg);
  background-image: radial-gradient(circle at center, rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 10px 10px;
  background-attachment: fixed;
}

/* ── Surfaces: ground · card · one muted step ───────────────────────────────── */
/* Transparent ONLY inside the page, never on the page itself: a transparent
   wrapper on a page that never got a theme shows the browser's white body through
   it - which is exactly what "the background on many pages is still white" looked
   like (Edward, 23 Sep). The ground is always painted explicitly, below. */
html[data-theme="dark"] #main-content .bg-gray-900,
html[data-theme="dark"] #main-content.main-content { background-color: transparent; }
html[data-theme="dark"] body, html[data-theme="dark"] html { background-color: var(--geo-bg); }
html[data-theme="dark"] .bg-gray-950   { background-color: var(--geo-panel); }
html[data-theme="dark"] .bg-gray-800   { background-color: var(--geo-surface); }
html[data-theme="dark"] .bg-gray-700   { background-color: var(--geo-surface2); }
html[data-theme="dark"] .bg-gray-800\/50,
html[data-theme="dark"] .bg-gray-900\/50 { background-color: var(--geo-surface); }
html[data-theme="dark"] .border-gray-600,
html[data-theme="dark"] .border-gray-700,
html[data-theme="dark"] .border-gray-800,
html[data-theme="dark"] .divide-gray-700 > * + * { border-color: var(--geo-border); }
html[data-theme="dark"] .text-gray-100,
html[data-theme="dark"] .text-gray-200 { color: var(--geo-text); }
html[data-theme="dark"] .text-gray-300,
html[data-theme="dark"] .text-gray-400 { color: var(--geo-text2); }
html[data-theme="dark"] .text-gray-500 { color: var(--geo-muted); }
html[data-theme="dark"] .sidebar       { background-color: var(--geo-panel); border-color: var(--geo-border); }

html:not([data-theme="dark"]) .main-content  { background-color: transparent; }
html:not([data-theme="dark"]) .bg-white      { background-color: var(--geo-surface); }
html:not([data-theme="dark"]) .bg-gray-50,
html:not([data-theme="dark"]) .bg-gray-100   { background-color: var(--geo-surface2); }
html:not([data-theme="dark"]) .border-gray-100,
html:not([data-theme="dark"]) .border-gray-200,
html:not([data-theme="dark"]) .border-gray-300 { border-color: var(--geo-border); }
html:not([data-theme="dark"]) .text-gray-500 { color: var(--geo-muted); }
html:not([data-theme="dark"]) .text-gray-600,
html:not([data-theme="dark"]) .text-gray-700 { color: var(--geo-text2); }
html:not([data-theme="dark"]) .sidebar { background-color: var(--geo-surface); border-color: var(--geo-border); }
/* A dark card marooned in a light menu (the credits box) had its own palette. */
html:not([data-theme="dark"]) .sidebar [class*="bg-gray-8"]:not([style*="width:"]),
html:not([data-theme="dark"]) .sidebar [class*="bg-gray-9"]:not([style*="width:"]){ background-color: var(--geo-surface2) !important; }
html:not([data-theme="dark"]) .sidebar [class*="bg-gray-8"] *,
html:not([data-theme="dark"]) .sidebar [class*="bg-gray-9"] * { color: var(--geo-text2) !important; }

/* A card is the ground plus a hairline, and the hairline answers the pointer. */
html[data-theme="dark"] .main-content .bg-gray-800,
html[data-theme="dark"] .main-content .bg-white { border: 1px solid var(--geo-border); }
@media (hover: hover) {
  html[data-theme="dark"] .main-content .bg-gray-800:hover,
  html[data-theme="dark"] .main-content .bg-white:hover,
  html:not([data-theme="dark"]) .main-content .bg-white:hover { border-color: var(--geo-border2); }
}
.rounded-xl, .rounded-2xl { border-radius: var(--geo-r-card); }
.rounded-lg { border-radius: var(--geo-r-ctrl); }
html[data-theme="dark"] .shadow-sm, html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-md, html[data-theme="dark"] .shadow-lg { box-shadow: none; }

/* ── One accent, not five ─────────────────────────────────────────────────────
   Purple and indigo were decoration - an icon tile, a counter, a gradient behind
   a set of initials - competing with the one thing to press. They go quiet. The
   brand's own green-to-blue gradient is left alone: it means "Geophii". */
html[data-theme="dark"] .main-content [class*="bg-purple-"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-indigo-"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-violet-"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-purple-5"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-indigo-5"]:not([style*="width:"]){
  background-color: var(--geo-surface2) !important;
}
html[data-theme="dark"] .main-content [class*="text-purple-"],
html[data-theme="dark"] .main-content [class*="text-indigo-"],
html[data-theme="dark"] .main-content [class*="text-violet-"],
html[data-theme="dark"] .main-content [class*="text-pink-"] { color: var(--geo-text2) !important; }
html[data-theme="dark"] body [class*="from-indigo-"], html[data-theme="dark"] body [class*="from-purple-"],
html[data-theme="dark"] body [class*="from-violet-"], html[data-theme="dark"] body [class*="via-purple-"],
html[data-theme="dark"] body [class*="to-purple-"],   html[data-theme="dark"] body [class*="to-indigo-"],
html:not([data-theme="dark"]) body [class*="from-indigo-"], html:not([data-theme="dark"]) body [class*="to-purple-"],
html[data-theme="dark"] .site-head-avatar {
  background-image: none !important;
  background-color: var(--geo-surface2) !important;
  color: var(--geo-text) !important;
}
/* ...but a bar that MEASURES something keeps a colour, or it says nothing. */
html[data-theme="dark"] body [class*="from-indigo-"][class*="h-2"],
html[data-theme="dark"] body [class*="from-indigo-"][class*="h-full"] { background-color: var(--geo-accent) !important; }
/* The freshness ring draws its gap in the page's own colour. */
.site-head-avatar { box-shadow: 0 0 0 2px var(--geo-bg) !important; }

/* ══ BUTTONS - exactly two, and one for destroying ════════════════════════════
   PRIMARY    filled teal, dark ink, weight 700. One per area of a screen.
   SILVER     transparent with a hairline. Everything else - including the solid
              blues that used to shout as loudly as the primary.
   DESTRUCTIVE red, and only for removing something.
   40px tall, 44 on a phone, 10px corners, and a press you can feel. */
.geo-btn, button, .btn,
a[class*="bg-green-"]:not([style*="width:"]), a[class*="bg-blue-"]:not([style*="width:"]), a[class*="bg-emerald-"]:not([style*="width:"]), a[class*="bg-teal-"]:not([style*="width:"]),
button[class*="bg-green-"]:not([style*="width:"]), button[class*="bg-blue-"]:not([style*="width:"]), button[class*="bg-emerald-"]:not([style*="width:"]){
  border-radius: var(--geo-r-ctrl);
  transition: transform .06s var(--geo-ease), filter var(--geo-dur) var(--geo-ease),
              background-color var(--geo-dur) var(--geo-ease), border-color var(--geo-dur) var(--geo-ease),
              color var(--geo-dur) var(--geo-ease);
}
a[class*="bg-green-5"]:not([style*="width:"]), a[class*="bg-green-6"]:not([style*="width:"]), a[class*="bg-emerald-6"]:not([style*="width:"]), a[class*="bg-teal-6"]:not([style*="width:"]),
button[class*="bg-green-5"]:not([style*="width:"]), button[class*="bg-green-6"]:not([style*="width:"]), button[class*="bg-emerald-6"]:not([style*="width:"]),
input[type="submit"][class*="bg-green-"]:not([style*="width:"]), .geo-btn-primary {
  background-color: var(--geo-brand) !important;
  color: var(--geo-brand-ink) !important;
  border: 0 !important;
  font-weight: 700;
  box-shadow: none !important;
}
a[class*="bg-green-5"]:hover, button[class*="bg-green-5"]:hover,
a[class*="bg-green-6"]:hover, button[class*="bg-green-6"]:hover, .geo-btn-primary:hover { filter: brightness(1.08); }

/* A SOLID blue button was this app's primary action long before the teal existed
   ("+ Add Task", "Save", "Apply"). Turning every blue into the silver outline
   demoted them below the grey secondaries beside them - seen on the task board,
   23 Sep. A solid blue is a primary now; only the TINTED blues stay quiet. */
a[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]),
a[class*="bg-blue-7"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-blue-7"]:not([class*="/"]):not([style*="width:"]){
  background-color: var(--geo-brand) !important;
  color: var(--geo-brand-ink) !important;
  border: 0 !important;
  font-weight: 700;
}
a[class*="bg-blue-5"]:not([style*="width:"]), a[class*="bg-blue-6"][class*="/"]:not([style*="width:"]), button[class*="bg-blue-5"]:not([style*="width:"]), button[class*="bg-blue-6"][class*="/"]:not([style*="width:"]),
button[class*="bg-gray-7"]:not([style*="width:"]), a[class*="bg-gray-7"]:not([style*="width:"]), input[type="submit"][class*="bg-blue-"]:not([style*="width:"]),
.geo-btn-silver, .geo-tt-btn, .btn-sm.secondary {
  background-color: transparent !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-edge) !important;   /* D-012: an outline button's edge at 3:1 (was --geo-border2, 1.7 to 2.4:1) */
  box-shadow: none !important;
}
a[class*="bg-blue-6"]:hover, button[class*="bg-blue-6"]:hover, .geo-btn-silver:hover, .geo-tt-btn:hover {
  border-color: var(--geo-accent) !important;
}
button[class*="bg-red-6"]:not([style*="width:"]), a[class*="bg-red-6"]:not([style*="width:"]), .btn-sm.danger, .geo-btn-danger {
  background-color: var(--geo-bad) !important; color: #fff !important; border: 0 !important; font-weight: 600;
}
button:active, .btn:active, a[class*="bg-green-"]:active, a[class*="bg-blue-"]:active { transform: scale(.98); }

/* Heights. A finger is not a pointer. */
.geo-btn, .btn-sm, .geo-tt-btn, .rec-tab,
a[class*="bg-green-5"], button[class*="bg-green-5"], a[class*="bg-blue-6"], button[class*="bg-blue-6"] { min-height: 36px; }
@media (max-width: 767px) {
  .main-content button, .main-content a[class*="bg-"], .geo-btn, .btn-sm, .geo-tt-btn, .rec-tab { min-height: 44px; }
}
/* A row action is never the page's primary colour. */
td a[class*="bg-green-"]:not([style*="width:"]), td button[class*="bg-green-"]:not([style*="width:"]), td a[class*="bg-blue-"]:not([style*="width:"]), td button[class*="bg-blue-"]:not([style*="width:"]){
  background-color: var(--geo-surface2) !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border) !important;
  font-weight: 600;
}
td a[class*="bg-green-"]:hover, td button[class*="bg-green-"]:hover { border-color: var(--geo-accent) !important; }
/* A tab or a chip is not a button. */
.site-tab-btn, .geo-pill, [role="tab"] { border-radius: 999px; }

/* ── The chip, from the reference template ───────────────────────────────────
   A 40px chip whose ACTIVE state is a brighter border, not a coloured slab.
   Ready for the filters on the work lists (Type · Impact · Effort). */
.geo-chip {
  height: 40px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px; font-size: 14px; font-weight: 500;
  background: var(--geo-surface); color: var(--geo-muted);
  border: 1px solid var(--geo-border); border-radius: 999px;
  transition: border-color var(--geo-dur) var(--geo-ease), color var(--geo-dur) var(--geo-ease);
}
.geo-chip:hover { border-color: var(--geo-border2); color: var(--geo-text); }
.geo-chip[aria-pressed="true"], .geo-chip.is-on { border-color: var(--geo-text); color: var(--geo-text); }
@media (max-width: 767px) { .geo-chip { height: 44px; } }

/* ── Status: a tint of its own colour, with that colour as the ink ────────────
   Edward, 22 Sep: "keep the different colour of bubbles, it helps break the
   site - change them slightly to harmonise". So they stay, as soft pills. */
html[data-theme="dark"] .main-content [class*="bg-green-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-emerald-1"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-green-5"][class*="/"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-good) 16%, var(--geo-bg)) !important; color: var(--geo-good-ink) !important;
}
html[data-theme="dark"] .main-content [class*="bg-yellow-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-amber-1"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-amber-5"][class*="/"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-yellow-5"][class*="/"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-warn) 16%, var(--geo-bg)) !important; color: var(--geo-warn-ink) !important;
}
html[data-theme="dark"] .main-content [class*="bg-red-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-rose-1"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-red-5"][class*="/"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-bad) 16%, var(--geo-bg)) !important; color: var(--geo-bad-ink) !important;
}
html[data-theme="dark"] .main-content [class*="bg-blue-1"]:not([style*="width:"]), html[data-theme="dark"] .main-content [class*="bg-blue-5"][class*="/"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-second) 16%, var(--geo-bg)) !important; color: var(--geo-second-ink) !important;
}
html[data-theme="dark"] .main-content [class*="text-green-"], html[data-theme="dark"] .main-content [class*="text-emerald-"] { color: var(--geo-good) !important; }
html[data-theme="dark"] .main-content [class*="text-red-"], html[data-theme="dark"] .main-content [class*="text-rose-"] { color: var(--geo-bad) !important; }
html[data-theme="dark"] .main-content [class*="text-yellow-"], html[data-theme="dark"] .main-content [class*="text-amber-"] { color: var(--geo-warn) !important; }
/* A tinted button (bg-green-600/20, bg-indigo-600/20 and friends) measured 1.20:1 -
   its ink was nearly its own fill. A button is one of the two shapes; a tint is for
   a STATE, never for something you press. */
html .main-content button[class*="/20"], html .main-content a[class*="/20"],
html .main-content button[class*="/10"], html .main-content a[class*="/10"],
html .main-content button[class*="/15"], html .main-content a[class*="/15"],
html .main-content button[class*="/30"], html .main-content a[class*="/30"] {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border2) !important;
  border-radius: var(--geo-r-ctrl) !important;
}
html:not([data-theme="dark"]) .main-content button[class*="/20"], html:not([data-theme="dark"]) .main-content a[class*="/20"],
html:not([data-theme="dark"]) .main-content button[class*="/10"], html:not([data-theme="dark"]) .main-content a[class*="/10"],
html:not([data-theme="dark"]) .main-content button[class*="/15"], html:not([data-theme="dark"]) .main-content a[class*="/15"],
html:not([data-theme="dark"]) .main-content button[class*="/30"], html:not([data-theme="dark"]) .main-content a[class*="/30"] {
  background-color: var(--geo-surface) !important;
  border-color: var(--geo-border) !important;
}
html .main-content button[class*="/20"]:hover, html .main-content a[class*="/20"]:hover,
html .main-content button[class*="/10"]:hover, html .main-content a[class*="/10"]:hover {
  border-color: var(--geo-accent) !important;
}
/* Anything else still wearing a leftover slab grey takes the card surface. */
html[data-theme="dark"] .main-content [class*="bg-gray-8"]:not(.bg-gray-800):not([style*="width:"]){ background-color: var(--geo-surface) !important; }

/* A grey chip still has to be readable ("Not set" measured 2.11:1). */
html[data-theme="dark"] .main-content [class*="bg-gray-1"], html[data-theme="dark"] .main-content [class*="bg-gray-2"] { color: var(--geo-text) !important; }

/* ── The second voice ─────────────────────────────────────────────────────────
   A link is the site's lavender. Measured: 8.2:1 on the dark ground, and the
   deeper step at 5.6:1 on the light one. Teal and lavender sit at almost the
   same lightness (1.04:1), so they never appear as two flat blocks side by side. */
.main-content a:not([class*="bg-"]):not(.site-tab-btn):not([class*="text-gray"]):not([class*="text-green"]):not([class*="text-red"]) { color: var(--geo-second); }

/* ── The menu ─────────────────────────────────────────────────────────────────
   The row you are on is the accent on a whisper of the accent. */
html[data-theme="dark"] .sidebar a.bg-gray-700, html[data-theme="dark"] .sidebar a[aria-current="page"], html[data-theme="dark"] .sidebar .bg-gray-700 {
  background-color: color-mix(in oklab, var(--geo-accent) 12%, transparent) !important;
  color: var(--geo-accent) !important;
}
html[data-theme="dark"] .sidebar a:hover { background-color: var(--geo-surface2) !important; }
/* A menu row is a row, not a card: no outline until it is the one you are on. */
html[data-theme="dark"] .sidebar a, html[data-theme="dark"] .sidebar summary,
html:not([data-theme="dark"]) .sidebar a, html:not([data-theme="dark"]) .sidebar summary { border-color: transparent !important; }

/* A gradient BUTTON is still a button: it takes the one action colour. The
   brand's green-to-blue gradient stays where it is decoration, not an action. */
a[class*="bg-gradient"][class*="from-green-"]:not([style*="width:"]), button[class*="bg-gradient"][class*="from-green-"]:not([style*="width:"]),
a[class*="bg-gradient"][class*="from-emerald-"]:not([style*="width:"]), button[class*="bg-gradient"][class*="from-emerald-"]:not([style*="width:"]),
.ob-grad {
  background-image: none !important;
  background-color: var(--geo-brand) !important;
  color: var(--geo-brand-ink) !important;
  font-weight: 700;
}
/* The welcome card's wash: the brand's two colours, at a whisper. */
#ob-card .ob-hero, html[data-theme="dark"] #ob-card .ob-hero {
  background: linear-gradient(92deg, rgba(179,161,199,.12), rgba(0,184,181,.09)) !important;
}

/* ══ THE MENU THAT FOLDS AWAY ═════════════════════════════════════════════════
   Edward, on the reference: "great style, even how it hides the sidebar". On a
   laptop the menu is 260px of permanent furniture; a work list wants that space.
   One button folds it to a 68px rail of icons and gives the page 192px back, and
   the choice is remembered. A rail, not a disappearance: every door stays on
   screen, one tap wide, and says its name on hover. */
@media (min-width: 768px) {
  .sidebar, .main-content { transition: width .22s var(--geo-ease), margin-left .22s var(--geo-ease); }
  body.geo-rail .sidebar { width: 68px; overflow-x: hidden; }
  body.geo-rail .main-content { margin-left: 68px; }

  /* The labels are plain text inside each row - not spans - so hiding spans left
     them rendering and clipped (browser check, 22 Sep). Zeroing the row's font
     size removes the words and keeps the icon, which is sized back explicitly. */
  body.geo-rail .sidebar a,
  body.geo-rail .sidebar summary,
  body.geo-rail .sidebar button {
    font-size: 0 !important;
    justify-content: center !important;
    gap: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    position: relative;
  }
  body.geo-rail .sidebar a svg, body.geo-rail .sidebar summary svg, body.geo-rail .sidebar button svg {
    width: 20px !important; height: 20px !important; flex: none; margin: 0 !important;
  }
  /* The wordmark and any label with its own size: zeroed too, or they spill past
     the rail (browser check, 22 Sep). */
  body.geo-rail .sidebar a span, body.geo-rail .sidebar a div,
  body.geo-rail .sidebar summary span { font-size: 0 !important; }
  /* Anything in the menu pinned at 260px - the account bar at the foot - follows
     the rail's width rather than hanging out of it. */
  body.geo-rail .sidebar > *, body.geo-rail .sidebar [style*="width: 260"] { max-width: 68px !important; overflow: hidden; }

  /* The logo keeps its mark in the rail, at icon size. */
  body.geo-rail .sidebar img { width: 28px !important; height: auto !important; object-fit: contain; }

  /* Group headings, the account line and any summary text step aside entirely. */
  body.geo-rail .sidebar p,
  body.geo-rail .sidebar .text-xs.uppercase,
  body.geo-rail .sidebar summary > svg:last-child { display: none !important; }
  /* A count becomes a dot in the corner of its own icon. */
  body.geo-rail .sidebar [class*="rounded-full"] {
    position: absolute; top: 6px; right: 12px;
    width: 8px !important; height: 8px !important; min-width: 0 !important;
    padding: 0 !important; font-size: 0 !important; line-height: 0; overflow: hidden;
  }
  /* And the row says its name when the pointer rests on it. */
  body.geo-rail .sidebar a[data-geo-name]:hover::after {
    content: attr(data-geo-name);
    position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
    background: var(--geo-surface2); color: var(--geo-text); border: 1px solid var(--geo-border2);
    border-radius: 8px; padding: 6px 10px; font-size: 13px; white-space: nowrap; z-index: 60;
  }
}
#geo-rail-bar { display: none; position: relative; z-index: 3; }
@media (min-width: 768px) { #geo-rail-bar { display: flex; justify-content: flex-end; padding: 10px 12px 0; } }
body.geo-rail #geo-rail-bar { justify-content: center; padding: 10px 0 0; }
#geo-rail-btn {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--geo-surface); color: var(--geo-muted);
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-ctrl);
  transition: color var(--geo-dur) var(--geo-ease), border-color var(--geo-dur) var(--geo-ease);
}
#geo-rail-btn:hover { color: var(--geo-text); border-color: var(--geo-border2); }

/* ── Dropdowns and fields ─────────────────────────────────────────────────────
   A browser's own select is the one control that still looks like 2009 in a
   screenshot. Same height, corner and hairline as a silver button. */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  min-height: var(--geo-ctrl-h);
  padding: 8px 38px 8px 12px;
  border-radius: var(--geo-r-ctrl);
  background-color: var(--geo-surface);
  color: var(--geo-text);
  border: 1px solid var(--geo-border2);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238c8c8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color var(--geo-dur) var(--geo-ease);
}
select:hover, input:hover, textarea:hover { border-color: var(--geo-accent); }
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="number"], input[type="password"], input:not([type]), textarea {
  border-radius: var(--geo-r-ctrl);
  transition: border-color var(--geo-dur) var(--geo-ease);
}
html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input:not([type]), html[data-theme="dark"] textarea {
  /* A step lighter than the card with an edge you can see (30 Sep, Edward: text boxes were "just
     dark"; --geo-surface2 is within a shade of the navy card). Mixed from the text colour, so it
     sits above whatever surface the skin uses. */
  background-color: color-mix(in srgb, var(--geo-text) 8%, var(--geo-surface)) !important;
  border-color: var(--geo-edge) !important;   /* D-011: was text 22% over the surface, 1.76:1 */
  color: var(--geo-text) !important;
}
html[data-theme="dark"] input[type="text"]:focus, html[data-theme="dark"] input[type="email"]:focus,
html[data-theme="dark"] input[type="url"]:focus, html[data-theme="dark"] input[type="search"]:focus,
html[data-theme="dark"] input[type="number"]:focus, html[data-theme="dark"] input[type="password"]:focus,
html[data-theme="dark"] input:not([type]):focus, html[data-theme="dark"] textarea:focus {
  border-color: var(--geo-accent) !important;
}
input::placeholder, textarea::placeholder { color: var(--geo-muted); }
/* Native controls follow the theme (26 Sep, Edward: the calendar icon was black on the dark
   page). Without color-scheme the browser draws date pickers, their pop-up calendar, time and
   number spinners and scrollbars in its light style whatever the page's theme. */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
/* The calendar icon in the app's colours, not the browser's: the muted text colour at rest,
   the accent on hover and focus, drawn from one mask so both themes get it. (Firefox draws its
   own icon, which color-scheme above already makes light on dark.) */
input::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: 1; width: 16px; height: 16px; padding: 2px; border-radius: 4px;
  background: var(--geo-muted);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
          mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
input:is(:hover, :focus)::-webkit-calendar-picker-indicator { background: var(--geo-accent); }
@media (max-width: 767px) { select, input, textarea { min-height: 44px; } }

/* ── A page that ships its own light-only stylesheet ─────────────────────────
   Integrations was written light-only: in dark mode its text measured 1.10:1.
   Its own file now uses these tokens; this is the safety net for anything else. */
html[data-theme="dark"] .main-content pre,
html[data-theme="dark"] .main-content code { background-color: var(--geo-panel) !important; color: var(--geo-text) !important; }
html[data-theme="dark"] .main-content summary,
html[data-theme="dark"] .main-content .muted { color: var(--geo-text2) !important; }
html[data-theme="dark"] .main-content th { color: var(--geo-text2) !important; }

/* ── Motion ───────────────────────────────────────────────────────────────────
   Blocks arrive once, staggered; a press answers in 60ms; a wait has a shape.
   Every rule is inside a reduced-motion guard, and the arrival only runs with
   JavaScript on (html.geo-anim), so a stylesheet can never leave a page blank. */
@media (prefers-reduced-motion: no-preference) {
  /* backwards, not both: a fill that outlives the animation keeps a transform on the page, and
     every position:fixed popup inside it then opens against the page, off screen (29 Sep). */
  html.geo-anim #main-content > * { animation: geoUp .34s var(--geo-ease) backwards; }
  html.geo-anim #main-content > *:nth-child(2) { animation-delay: .05s; }
  html.geo-anim #main-content > *:nth-child(3) { animation-delay: .1s; }
  html.geo-anim #main-content > *:nth-child(n+4) { animation-delay: .15s; }
}
@keyframes geoUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.geo-skel {
  background: linear-gradient(90deg, var(--geo-surface2) 25%, var(--geo-border2) 37%, var(--geo-surface2) 63%);
  background-size: 400% 100%; border-radius: 8px; color: transparent !important;
}
@media (prefers-reduced-motion: no-preference) { .geo-skel { animation: geoSkel 1.4s ease infinite; } }
@keyframes geoSkel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.geo-lift { transition: transform var(--geo-dur) var(--geo-ease), border-color var(--geo-dur) var(--geo-ease); }
@media (hover: hover) { .geo-lift:hover { transform: translateY(-2px); border-color: var(--geo-border2); } }
:focus-visible { outline: 2px solid color-mix(in oklab, var(--geo-accent) 65%, transparent); outline-offset: 2px; border-radius: 6px; }
.geo-num, [data-geo-count], td, .tabular { font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { * { scrollbar-width: thin; scrollbar-color: var(--geo-border2) transparent; } }

/* ── One corner ───────────────────────────────────────────────────────────────
   Two pills in the same corner covered the page's own content. Help moves into
   the same dock as a quiet round icon, clear of the phone bar. */
#geo-dock {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9969; display: flex; align-items: center; gap: 8px;
}
@media (max-width: 767px) { #geo-dock { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
#geo-dock > * { position: static !important; inset: auto !important; margin: 0 !important; }
#geo-dock .geo-dock-help {
  width: 40px !important; height: 40px !important; padding: 0 !important;
  border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--geo-surface) !important; color: var(--geo-text2) !important;
  border: 1px solid var(--geo-border2) !important; box-shadow: none !important; font-size: 0 !important;
}
#geo-dock .geo-dock-help:hover { color: var(--geo-text) !important; border-color: var(--geo-accent) !important; }
#geo-dock .geo-dock-help svg { width: 18px !important; height: 18px !important; }
body:has(.sidebar.open) #geo-dock, body:has(.site-sections-m[open]) #geo-dock, body.gfd-panel-open #geo-dock { display: none !important; }
/* The chat launcher and the phone bar's Ask are the same one action as every
   other primary button, so they wear the same colour. */
#gfd-launch { background: var(--geo-brand) !important; color: var(--geo-brand-ink) !important; }
/* Phones without the phone bar (client logins, 27 Sep): two floating pills sat on top of every
   page's own content. The chat button becomes a round ✦ in the corner (its words stay for screen
   readers); "Need help?" is in the menu's ? (the same form); pages leave room at the bottom. Up to
   767px, where the dock rule above assumes a phone bar clients don't have. Pages WITH the phone
   bar (agency) are untouched: their launcher is hidden and "Need help?" stays (27 Sep review). */
@media (max-width: 767px) {
  body:not(:has(#geo-phonebar)) #geo-dock { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  body:not(:has(#geo-phonebar)) #geo-dock #gfd-launch { width: 56px; height: 56px; padding: 0; justify-content: center; font-size: 22px; position: relative !important; }
  body:not(:has(#geo-phonebar)) #geo-dock #gfd-launch > span:nth-child(2) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body:not(:has(#geo-phonebar)) #geo-dock #gfd-launch #gfd-badge { position: absolute !important; top: -2px; right: -2px; }
  body:not(:has(#geo-phonebar)) #geo-dock:has(#gfd-launch) #support-fab { display: none !important; }
  /* The round ✦ floats on a client's phone (no phone-bar Ask), so the page keeps room under it: the last row always
     scrolls clear of the button, the phone's own bottom edge included (design window, 18 Oct). */
  body:has(#gfd-launch):not(:has(#geo-phonebar)) main:not(main main) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* One floating button (18 Oct, Edward: "logical, highest level"). Where the chat is on the page,
   or the phone bar's Ask opens it, the chat is the one door: "Need help?" is in its menu and in
   the account menu's ?, so the floating pill goes. It stays only on pages with no chat. Pages
   leave room at the bottom, so the last line always scrolls clear of what floats. */
body:has(#gfd-launch) #geo-dock #support-fab { display: none !important; }
@media (max-width: 767px) { body:has(#geo-phonebar [data-geo-ask]) #geo-dock #support-fab { display: none !important; } }
@media (min-width: 768px) { body:has(#support-fab):not(:has(#gfd-launch)) #main-content { padding-bottom: 88px; } }
/* The page keeps a clear strip down the right for the floating button, the same way it makes
   room for the docked chat: content never scrolls under it (18 Oct: it covered the AI Brand
   Strength score at 1920). The button's width plus its 16px margin and a 16px gap. */
@media (min-width: 768px) {
  body:has(#gfd-launch):not(.gfd-article-page) #main-content { padding-right: calc(var(--geo-fab-w, 156px) + 32px) !important; }
  body:has(#support-fab):not(:has(#gfd-launch)) #main-content { padding-right: calc(var(--geo-fab-w, 126px) + 32px) !important; }
}
/* Up to 1599px that strip would squeeze the page, so the buttons go round (as on a client's phone; the design window, 18 Oct):
   the chat's ✦ at 56px and help's icon at 44px, their words kept for screen readers. */
@media (min-width: 768px) and (max-width: 1599px) {
  body { --geo-fab-w: 56px; }
  body:has(#support-fab):not(:has(#gfd-launch)) { --geo-fab-w: 44px; }
  #geo-dock #gfd-launch { width: 56px; height: 56px; padding: 0 !important; justify-content: center; font-size: 22px; position: relative !important; }
  #geo-dock #gfd-launch > span:nth-child(2) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #geo-dock #gfd-launch #gfd-badge { position: absolute !important; top: -2px; right: -2px; }
  body #geo-dock #support-fab.geo-dock-help { width: 44px !important; height: 44px !important; padding: 0 !important; justify-content: center; font-size: 0 !important; gap: 0 !important; }
}
#geo-phonebar .geo-pb-ask { background: var(--geo-fill, var(--geo-accent)) !important; }
#geo-phonebar .geo-pb-ask svg { stroke: var(--geo-fill-ink, var(--geo-brand-ink)) !important; }

/* ── The menu's own chips ─────────────────────────────────────────────────────
   Edward, 22 Sep, pointing at a mustard "SOON" beside White-Label: "see the
   yellow". The counts and the state chips in the menu keep their meaning, in the
   same tints and inks as every other status on the app - not Tailwind's raw
   yellow-300 on a near-black rail. */
.sidebar [class*="bg-yellow-"]:not([style*="width:"]), .sidebar [class*="bg-amber-"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-warn) 20%, var(--geo-bg)) !important;
  color: var(--geo-warn-ink) !important;
}
.sidebar [class*="bg-blue-"]:not([style*="width:"]), .sidebar [class*="bg-violet-"]:not([style*="width:"]), .sidebar [class*="bg-indigo-"]:not([style*="width:"]), .sidebar [class*="bg-purple-"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-second) 22%, var(--geo-bg)) !important;
  color: var(--geo-second-ink) !important;
}
.sidebar [class*="bg-green-"]:not([style*="width:"]), .sidebar [class*="bg-emerald-"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-good) 20%, var(--geo-bg)) !important;
  color: var(--geo-good-ink) !important;
}
.sidebar [class*="bg-orange-"]:not([style*="width:"]), .sidebar [class*="bg-red-"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-bad) 20%, var(--geo-bg)) !important;
  color: var(--geo-bad-ink) !important;
}

/* The light page keeps its own ground under the cards (it was taking a utility's
   grey and matching them exactly). */
html:not([data-theme="dark"]) body { background-color: var(--geo-bg) !important; }

/* ══ THE SITE SWITCHER ════════════════════════════════════════════════════════
   One control at the top of the menu: the website you are on, and two taps to
   another. The shape is the navigation canvas's; the list behind it is decided by
   the server, per role. ⌘K opens it from anywhere. */
#geo-switch { padding: 10px 12px 6px; }
#geo-switch-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 10px; text-align: left;
  background: var(--geo-surface); color: var(--geo-text);
  border: 1px solid var(--geo-border); border-radius: 12px;
  transition: border-color var(--geo-dur) var(--geo-ease);
}
#geo-switch-btn:hover { border-color: var(--geo-accent); }
.geo-switch-mark {
  width: 30px; height: 30px; flex: none; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--geo-accent) 18%, var(--geo-surface));
  color: var(--geo-accent); font-size: 12px; font-weight: 700;
}
.geo-switch-words { flex: 1 1 auto; min-width: 0; display: block; }
.geo-switch-domain { display: block; font-size: 14px; font-weight: 600; color: var(--geo-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-switch-sub { display: block; font-size: 12px; color: var(--geo-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-switch-chev { flex: none; color: var(--geo-muted); }

/* In the rail it is the mark alone - still the first thing, still one tap. */
@media (min-width: 768px) {
  body.geo-rail #geo-switch { padding: 10px 0 6px; }
  body.geo-rail #geo-switch-btn { justify-content: center; padding: 8px 0; min-height: 44px; }
  body.geo-rail .geo-switch-words, body.geo-rail .geo-switch-chev { display: none !important; }
  body.geo-rail .geo-switch-mark { font-size: 12px !important; }
}

/* The panel: a sheet from the top on a laptop, the whole screen on a phone. */
#geo-switch-panel {
  position: fixed; inset: 0; z-index: 9975;
  background: rgba(0, 0, 0, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 16px 16px;
}
#geo-switch-panel[hidden] { display: none; }
#geo-switch-card {
  width: 100%; max-width: 560px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--geo-surface); border: 1px solid var(--geo-border2); border-radius: var(--geo-r-card);
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  #geo-switch-card { animation: geoUp .18s var(--geo-ease) both; }
}
#geo-switch-head { padding: 14px 14px 10px; border-bottom: 1px solid var(--geo-border); }
#geo-switch-title { display: block; font-size: 12px; font-weight: 600; color: var(--geo-muted);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
#geo-switch-q {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--geo-surface2); color: var(--geo-text);
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-ctrl); font-size: 15px;
}
.geo-switch-scope { margin: 8px 2px 0; font-size: 12px; color: var(--geo-muted); }
#geo-switch-list { overflow-y: auto; padding: 6px; margin: 0; list-style: none; }
#geo-switch-list .geo-switch-group {
  padding: 10px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--geo-muted);
}
#geo-switch-list li[role="option"] a {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px;
  border-radius: var(--geo-r-ctrl); color: var(--geo-text); text-decoration: none;
}
#geo-switch-list li[aria-selected="true"] a,
#geo-switch-list li[role="option"] a:hover { background: var(--geo-surface2); }
#geo-switch-empty { padding: 16px; margin: 0; color: var(--geo-muted); font-size: 14px; }

/* On a phone the switcher rides in the top bar: the website you are in IS the
   title (the navigation canvas's shape). In the drawer it would be two taps deep
   and behind an overlay - measured, 22 Sep. */
#geo-switch[data-in-header] { flex: 1 1 auto; min-width: 0; padding: 0 0 0 10px; }
#geo-switch[data-in-header] #geo-switch-btn {
  min-height: 44px; padding: 4px 8px; border-color: transparent; background: transparent;
}
#geo-switch[data-in-header] #geo-switch-btn:hover { border-color: var(--geo-border); }
#geo-switch[data-in-header] .geo-switch-sub { display: none; }
/* Below 480px, when the top bar also carries the balance, the chooser is its mark alone (a globe, or the open site's
   initials), so neither is cut to "Choo…". Its name stays in the button's aria-label (design window, 19 Oct). */
@media (max-width: 479px) {
  #mobile-header:has(.geo-bal-phone) > #geo-switch[data-in-header] { flex: 0 0 auto; }
  #mobile-header:has(.geo-bal-phone) > #geo-switch[data-in-header] .geo-switch-words,
  #mobile-header:has(.geo-bal-phone) > #geo-switch[data-in-header] .geo-switch-chev { display: none; }
}
@media (max-width: 767px) { #geo-switch-panel { padding: 8px; align-items: flex-start; } #geo-switch-card { max-height: 86vh; } }
/* ── A full-height wrapper is the GROUND, not a card ──────────────────────────
   Measured live, 22 Sep, across 13 pages: /, /notifications, /leads and /widgets
   wrap everything in <div class="min-h-screen bg-gray-50 py-8">. In dark mode that
   utility became the muted surface, so those pages showed a big lighter slab where
   every other page showed the ground - Edward: "that white background and the dark
   bg seem a different css... many pages odd like that". A wrapper that tall is the
   page itself, so it takes no fill at all. */
html[data-theme="dark"] .main-content [class*="min-h-screen"][class*="bg-gray-5"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="min-h-screen"][class*="bg-gray-1"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="min-h-"][class*="bg-white"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="min-h-screen"][class*="bg-gray-5"]:not([style*="width:"]){
  background-color: transparent !important;
}
/* The same for a wash behind a whole section (analytics' purple-to-blue). */
html[data-theme="dark"] .main-content [class*="bg-gradient"][class*="/5"]:not([style*="width:"]){
  background-image: none !important; background-color: transparent !important;
}

/* ── The brand row: logo and the fold button on ONE line ──────────────────────
   Edward, 22 Sep: "the logo needs to be top, next to the icon that opens and
   closes the menu". */
#geo-brandrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 2px; }
#geo-brandrow > a { flex: 1 1 auto; min-width: 0; }
body.geo-rail #geo-brandrow { flex-direction: column; gap: 6px; padding: 10px 0 2px; }
/* ══ WHAT THE LIVE SWEEP MEASURED, 22 Sep (design_sweep.cjs, 22 pages) ════════
   Each rule answers a measured number, not an impression. */

/* 1. The initials tile on /clients and /tasks: white on bg-gray-600 was 3.18:1. */
html[data-theme="dark"] .main-content [class*="bg-gray-6"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-gray-5"]:not([class*="min-h"]):not([style*="width:"]){
  background-color: var(--geo-surface2) !important;
  color: var(--geo-text) !important;
}

/* 2. Amber and yellow BUTTONS ("Mark as client" measured 1.02:1, "Change
      Password" was pure yellow). Amber is a state; a button is one of the two
      shapes. */
html[data-theme="dark"] button[class*="bg-amber-5"]:not([style*="width:"]), html[data-theme="dark"] a[class*="bg-amber-5"]:not([style*="width:"]),
html[data-theme="dark"] button[class*="bg-yellow-5"]:not([style*="width:"]), html[data-theme="dark"] a[class*="bg-yellow-5"]:not([style*="width:"]),
html[data-theme="dark"] button[class*="bg-orange-5"]:not([style*="width:"]), html[data-theme="dark"] a[class*="bg-orange-5"]:not([style*="width:"]){
  background-color: transparent !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border2) !important;
}
html[data-theme="dark"] button[class*="bg-amber-5"]:hover, html[data-theme="dark"] button[class*="bg-yellow-5"]:hover {
  border-color: var(--geo-accent) !important;
}

/* 3. Small chips that were unreadable on their own fill ("Premium unlock" 1.60:1,
      "No Permission" 2.98:1): a chip takes the page's ink unless it is a status,
      and a status takes its own lighter ink (set further up). */
/* A chip takes the page ink - unless its fill is bright, where the ink must stay
   dark. This rule is more specific than the bright-chip rule below it, so without
   these exclusions it won: "Premium unlock" measured 1.60:1 live, 22 Sep. */
html[data-theme="dark"] .main-content span[class*="px-2"][class*="text-xs"]:not([class*="text-green"]):not([class*="text-red"]):not([class*="text-yellow"]):not([class*="text-amber"]):not([class*="bg-amber-4"]):not([class*="bg-amber-3"]):not([class*="bg-yellow-4"]):not([class*="bg-yellow-3"]):not([class*="bg-lime-4"]):not([class*="bg-green-4"]) {
  color: var(--geo-text) !important;
}

/* 4. Buttons the sweep measured at 24 and 30px tall. */
.work-buy, .kit-copy-btn, .main-content button[class*="py-0.5"], .main-content button[class*="py-1 "] { min-height: 36px; }
@media (max-width: 767px) { .work-buy, .kit-copy-btn { min-height: 44px; } }

/* 5. A bold run inside a tinted note kept its own dark ink from the note's light
      original (integrations, 2.18:1). Inside the app's own surfaces it inherits. */
html[data-theme="dark"] .main-content [style*="color-mix"] strong,
html[data-theme="dark"] .main-content [style*="var(--geo"] strong { color: inherit !important; }
/* ══ NEXT ACTIONS ═════════════════════════════════════════════════════════════
   The work list on a site's Fixes tab. Borrowed shapes from the competitor screen
   Edward sent (states with counts, impact and effort as three bars, one progress
   number, an export); our colours, and our "Solve it". */
.geo-na-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--geo-muted); display: inline-block; }
.geo-na-dot--todo { background: var(--geo-warn); }
.geo-na-dot--done { background: var(--geo-good); }
.geo-na-dot--ignored { background: var(--geo-muted); }
.geo-na-count { font-variant-numeric: tabular-nums; color: var(--geo-muted); }
.geo-chip[aria-pressed="true"] .geo-na-count { color: var(--geo-text); }

.geo-na-progress { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--geo-muted); }
.geo-na-progress-track { width: 90px; height: 6px; border-radius: 999px; background: var(--geo-surface2); overflow: hidden; }
.geo-na-progress-fill { display: block; height: 100%; background: var(--geo-accent); transition: width .3s var(--geo-ease); }
.geo-na-showing { font-size: 12px; color: var(--geo-muted); }

/* Impact and effort: three bars AND the word, because colour alone is not a label. */
.geo-na-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; }
.geo-na-pair { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.geo-na-key { color: var(--geo-muted); }
.geo-na-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.geo-na-bars i { width: 3px; height: 6px; border-radius: 1px; background: var(--geo-border2); display: block; }
.geo-na-bars i:nth-child(2) { height: 9px; }
.geo-na-bars i:nth-child(3) { height: 12px; }
.geo-na-bar--high i.on { background: var(--geo-good); }
.geo-na-bar--mid  i.on { background: var(--geo-warn); }
.geo-na-bar--low  i.on { background: var(--geo-muted); }
.geo-na-level { font-size: 12px; color: var(--geo-text2); }
.geo-na-quickwin {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in oklab, var(--geo-accent) 16%, var(--geo-bg)); color: var(--geo-accent);
}
[data-na-row][hidden], [data-na-group][hidden] { display: none !important; }
@media (max-width: 767px) { #geo-actions-bar select { width: 100%; } }
/* ── Tip banners ──────────────────────────────────────────────────────────────
   Measured live, 22 Sep: the "Getting started" banner was bg-blue-950/40 -
   rgba(23,37,84,.4), a blue slab on a neutral page (Edward: "so many
   inconsistencies in style"). A tip is a quiet note, not a colour event. */
html[data-theme="dark"] .main-content .bp-banner,
html[data-theme="dark"] .main-content [class*="bg-blue-9"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-indigo-9"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-slate-9"]:not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  border-color: var(--geo-border) !important;
  color: var(--geo-text2) !important;
}
html[data-theme="dark"] .main-content .bp-banner strong,
html[data-theme="dark"] .main-content .bp-banner b { color: var(--geo-text) !important; }
html[data-theme="dark"] .main-content .bp-banner a { color: var(--geo-second) !important; }
/* ── Every grey, including the ones with an opacity suffix ────────────────────
   The sweep (widened to catch hue 200-230 on 22 Sep) found Tailwind's blue-tinted
   greys still painting inputs, table heads and panels: bg-gray-700/50 rgb(55,65,81),
   bg-gray-900 rgb(17,24,39), bg-gray-950 rgb(3,7,18). Those are a different
   temperature from our neutrals, which is exactly what "some backgrounds don't
   match" looks like. One mapping, every variant. */
html[data-theme="dark"] .main-content [class*="bg-gray-7"]:not([style*="width:"]){ background-color: var(--geo-surface2) !important; }
html[data-theme="dark"] .main-content [class*="bg-gray-8"]:not([style*="width:"]){ background-color: var(--geo-surface) !important; }
html[data-theme="dark"] .main-content [class*="bg-gray-9"]:not([style*="width:"]){ background-color: var(--geo-panel) !important; }
html[data-theme="dark"] .main-content [class*="min-h-screen"][class*="bg-gray-9"]:not([style*="width:"]){ background-color: transparent !important; }
html[data-theme="dark"] .main-content input[class*="bg-gray-"]:not([style*="width:"]),
html[data-theme="dark"] .main-content select[class*="bg-gray-"]:not([style*="width:"]),
html[data-theme="dark"] .main-content textarea[class*="bg-gray-"]:not([style*="width:"]),
html[data-theme="dark"] .main-content select, html[data-theme="dark"] .main-content input:not([type="checkbox"]):not([type="radio"]) {
  /* The same lift as the base dark rule (30 Sep): a step lighter than the card, a visible edge. */
  background-color: color-mix(in srgb, var(--geo-text) 8%, var(--geo-surface)) !important;
  border-color: var(--geo-edge) !important;   /* D-011: was text 22% over the surface, 1.76:1 */
  color: var(--geo-text) !important;
}
html[data-theme="dark"] .main-content select:focus, html[data-theme="dark"] .main-content input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="dark"] .main-content textarea:focus { border-color: var(--geo-accent) !important; }
/* D-011: a form field's edge at 3:1 in both themes (light was 1.31:1, from the remapped border-gray
   classes; a few dark selects lost to more specific rules at 1.71:1). Hover shows the accent, focus keeps its
   own accent rules. In light, error, warning, success and deliberately borderless fields are left alone (the
   dark field rules above never had exclusions). */
html :is(input[type="text"], input[type="email"], input[type="url"], input[type="search"],
  input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"],
  input[type="month"], input[type="week"], input[type="color"], input:not([type]), select, textarea):not(:focus):not([aria-invalid="true"]):not([class*="border-red"]):not([class*="border-amber"]):not([class*="border-yellow"]):not([class*="border-green"]):not([class~="border-transparent"]):not([class*="border-accent"]) { border-color: var(--geo-edge) !important; }
html :is(input[type="text"], input[type="email"], input[type="url"], input[type="search"],
  input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"],
  input[type="month"], input[type="week"], input[type="color"], input:not([type]), select, textarea):hover:not(:focus):not([aria-invalid="true"]):not([class*="border-red"]):not([class*="border-amber"]):not([class*="border-yellow"]):not([class*="border-green"]):not([class~="border-transparent"]):not([class*="border-accent"]) { border-color: var(--geo-accent) !important; }
/* D-012 (19 Oct, Edward: "clear boxes"): a card's edge is clearly visible in both themes (it was --geo-border, 1.12:1 light,
   1.18:1 dark). Colour only, so a box without a border stays borderless; coloured, warning and transparent borders keep theirs
   (matched as whole classes, so a hover:border-* variant doesn't count). */
html .main-content :is(.bg-white, .bg-gray-800):is(.rounded-lg, .rounded-xl, .rounded-2xl):not([class^="border-amber"]):not([class*=" border-amber"]):not([class^="border-red"]):not([class*=" border-red"]):not([class^="border-green"]):not([class*=" border-green"]):not([class^="border-yellow"]):not([class*=" border-yellow"]):not([class^="border-blue"]):not([class*=" border-blue"]):not([class^="border-purple"]):not([class*=" border-purple"]):not([class^="border-emerald"]):not([class*=" border-emerald"]):not([class^="border-teal"]):not([class*=" border-teal"]):not([class^="border-indigo"]):not([class*=" border-indigo"]):not([class^="border-cyan"]):not([class*=" border-cyan"]):not([class^="border-accent"]):not([class*=" border-accent"]):not([class~="border-transparent"]) { border-color: var(--geo-card-edge) !important; }
/* The home set-up box (partials/agency_onboarding.php) sets its own edge with an id rule; the same card edge, and its quiet buttons the outline edge. */
html .main-content #ob-card { border-color: var(--geo-card-edge) !important; }
html .main-content #ob-card .ob-quiet { border-color: var(--geo-edge) !important; }
/* Clients list (clients/index.php) and Sites (sites/index.php, 19 Oct): the table is wider than the card on a laptop (min 1100px)
   and scrolls, but nothing showed it did and the actions ("Give access", view, edit) were the
   part cut off (design window, 19 Oct). The actions column stays pinned at the right edge while
   the rest scrolls under it, with a hairline and a soft shadow so the edge reads as an edge. */
:is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table tr:not(.geo-table-gap) > :is(th, td):last-child {
  position: sticky; right: 0; z-index: 1;
  box-shadow: -1px 0 0 var(--geo-border), -10px 0 12px -10px rgba(0, 0, 0, .25);
}
/* The pinned cell is solid so the scrolled columns pass under it, in the colour its row shows: the card's
   surface for a plain row (light stripes are a faint see-through tint), the row's own colour where it sets a
   solid one (Sites' main-website rows), the header's colour in the header. Rows and gap bands keep theirs. */
:is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table tbody tr:not(.geo-table-gap) > :is(th, td):last-child { background-color: var(--geo-surface) !important; }
:is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table tbody tr:is([class^="bg-"], [class*=" bg-"]):not(.geo-table-gap) > :is(th, td):last-child { background-color: inherit !important; }
:is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table thead tr { background-color: inherit; }
:is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table thead th:last-child { background-color: inherit !important; }
html[data-theme="dark"] :is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table tbody tr:not(.geo-table-gap) > :is(th, td):last-child { background-color: var(--geo-surface2) !important; }
/* From 1200px wide there's room for the whole table, so it fits its card: tighter cell padding, and
   names, dates and headings may wrap. Badges and the client tile stay on one line. Below 1200px it
   still scrolls under the pinned actions column (design window, 19 Oct). */
@media (min-width: 1200px) {
  :is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table { min-width: 0 !important; width: 100%; }
  :is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table :is(th, td) { padding-left: 10px !important; padding-right: 10px !important; }
  :is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table :is(th, td):not(:last-child),
  :is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table :is(th, td):not(:last-child) :is(p, a, div, span):not([class*="rounded"]) { white-space: normal !important; }
  :is([data-tour="clients-table"], [data-tour="sites-table"]) .geo-table td:not(:last-child) [class*="rounded"] { white-space: nowrap !important; }
  [data-tour="sites-table"] .geo-table td[data-cell="Domain"] > .flex { flex-wrap: wrap; row-gap: 2px; }
}
/* 1200 to 1439px (most agency laptops): still too wide, so the columns agencies need least on a list step out.
   Clients: Prompts and Competitors (counts that now belong to each website and show on its page). Sites: Industry /
   Location (shown under the name on each website's page), and cells pad 8px. Counted from the end, so the
   Agency column a super admin sees at the start doesn't shift them. */
@media (min-width: 1200px) and (max-width: 1439.98px) {
  [data-tour="clients-table"] .geo-table tr > :is(:nth-last-child(4), :nth-last-child(5)):not(:only-child),
  [data-tour="sites-table"] .geo-table tr > :nth-last-child(4):not(:only-child) { display: none !important; }
  [data-tour="sites-table"] .geo-table :is(th, td) { padding-left: 8px !important; padding-right: 8px !important; }
}
/* Add client (clients/create.php): email and phone side by side were both cut off on a phone; one column below 640px. */
@media (max-width: 639.98px) { .ca-contact-row { grid-template-columns: minmax(0, 1fr) !important; } }
html[data-theme="dark"] .main-content thead, html[data-theme="dark"] .main-content th { background-color: transparent !important; }
/* An icon tile in a solid brand blue or pink is decoration, not a state. */
html[data-theme="dark"] .main-content [class*="bg-blue-6"]:not(a):not(button):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-pink-6"]:not(a):not(button):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-cyan-6"]:not(a):not(button):not([style*="width:"]){
  background-color: var(--geo-surface2) !important; color: var(--geo-text) !important;
}
/* ── The last thirteen, each one measured ─────────────────────────────────────
   Dashboard quick links still carried a teal-black and a pink-black tint
   (rgb(12,42,46) and rgb(42,15,30)); "Watch client tutorial video" wore the pink
   one too; the site's sandwich button kept a blue-grey (rgb(31,41,55)); "Reset"
   was 34px with 4px corners; and the workspace buttons were 36px on a phone. */
html[data-theme="dark"] .main-content a[class*="bg-teal-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content a[class*="bg-pink-9"]:not([style*="width:"]),
html[data-theme="dark"] .main-content a[class*="bg-cyan-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content a[class*="bg-fuchsia-9"]:not([style*="width:"]),
html[data-theme="dark"] .main-content button[class*="bg-pink-9"]:not([style*="width:"]), html[data-theme="dark"] .main-content button[class*="bg-teal-9"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-rose-9"]:not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border) !important;
}
html[data-theme="dark"] .site-sections-m > summary,
html[data-theme="dark"] .site-sections-m { background-color: var(--geo-surface) !important; border-color: var(--geo-border) !important; }
.main-content button, .main-content a[class*="bg-"], .geo-btn { border-radius: var(--geo-r-ctrl); }
.main-content button[class*="py-1.5"], .main-content button[class*="py-1 "] { min-height: 36px; }
@media (max-width: 767px) { .work-buy, .main-content button[class*="py-1.5"] { min-height: 44px !important; } }
/* The GHL mark measured 4.32:1 - one step brighter clears 4.5. */
html[data-theme="dark"] .int-card .ghl-mark, html[data-theme="dark"] .int-card.featured h3 .ghl-mark,
html[data-theme="dark"] .ghl-mark { color: var(--geo-text) !important; background: var(--geo-surface2) !important; }
/* ── A bright chip keeps its dark ink ─────────────────────────────────────────
   "Premium unlock" is bg-amber-400 with text-gray-900: a light-mode chip, dark ink
   on a bright fill. The dark theme flipped that ink to near-white and it measured
   1.60:1 live. On a bright fill the ink stays dark, whatever the theme. */
html[data-theme="dark"] .main-content span[class*="bg-amber-4"],
html[data-theme="dark"] .main-content span[class*="bg-yellow-4"],
html[data-theme="dark"] .main-content span[class*="bg-lime-4"],
html[data-theme="dark"] .main-content span[class*="bg-green-4"],
html[data-theme="dark"] .main-content span[class*="bg-amber-3"],
html[data-theme="dark"] .main-content span[class*="bg-yellow-3"],
html[data-theme="dark"] .main-content div[class*="bg-amber-4"] { color: #1a1305 !important; }
/* ...but a BUTTON in those classes has had its fill removed (it is the silver
   outline now), so it takes the page ink. Two of my own rules were fighting and
   the result measured 1.14:1 live, 22 Sep. */
html[data-theme="dark"] .main-content button[class*="bg-amber-"],
html[data-theme="dark"] .main-content button[class*="bg-yellow-"],
html[data-theme="dark"] .main-content a[class*="bg-amber-"],
html[data-theme="dark"] .main-content button[class*="text-amber-9"] { color: var(--geo-text) !important; }
/* A red text-only label ("Delete") measured 4.07:1: the mapped ink was still one
   step too dark for 12px. Text-only reds take the lighter step. */
html[data-theme="dark"] .main-content button[class*="text-red-"]:not([class*="bg-"]),
html[data-theme="dark"] .main-content a[class*="text-red-"]:not([class*="bg-"]) { color: #ffb4b4 !important; }
/* ══ A STATE IS AN EDGE AND A CHIP, NEVER A WASH ══════════════════════════
   Edward, 23 Sep, on /actions: "even here has worn colours", and "the styling for
   every page needs to be universal". He is right on both counts. Cards carrying a
   status tint (bg-amber-50, bg-red-50 and friends) washed the WHOLE card in that
   colour, so a list of notices read as a row of muddy brown slabs.

   The rule, for every page at once: a card is always the card surface. Its state
   shows as a 3px edge on the left and the chip it already carries. Nothing else
   changes - the chips, the icons and the words keep their meaning.

   WHO THIS REACHES, and why it is written this way (rewritten 23 Sep). It used to say
   [class*="rounded-"][class*="bg-blue-5"]:not([style*="width:"]), which is not a description of a card:

     - [class*="rounded-"] also matches rounded-full, so the FILLED part of the
       "Checks Passing" progress bar was treated as a status card and painted the card
       surface. The surface is the page colour, so an 8/10 bar drew as almost empty.
       The number on screen was wrong, not just the styling.
     - [class*="bg-blue-5"] also matches the SOLID bg-blue-500. A solid 500 is a filled
       element - a bar:not([style*="width:"]), a dot, a badge - not a pale wash, so it never belonged here.

   Both are named now: [class~="..."] matches a whole token in the class list, and the
   see-through forms are matched by the trailing SLASH (bg-blue-500/), which the solid
   class does not have. A round-ended element is a pill, a dot or a bar, and is excluded
   outright - it is never a status card. Third time a [class*=] substring has done real
   damage, so this family is now named, not guessed. */
/* dark */
html[data-theme="dark"] .main-content [class~="bg-amber-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class~="bg-amber-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class*="bg-amber-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-amber-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-amber-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class~="bg-yellow-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class~="bg-yellow-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class*="bg-yellow-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-yellow-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-yellow-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class~="bg-orange-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class~="bg-orange-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class*="bg-orange-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-orange-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-orange-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  border-left: 3px solid var(--geo-warn) !important;
}
html[data-theme="dark"] .main-content [class~="bg-red-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class~="bg-red-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class*="bg-red-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-red-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-red-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class~="bg-rose-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class~="bg-rose-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class*="bg-rose-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-rose-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-rose-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  border-left: 3px solid var(--geo-bad) !important;
}
html[data-theme="dark"] .main-content [class~="bg-green-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class~="bg-green-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class*="bg-green-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-green-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-green-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class~="bg-emerald-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class~="bg-emerald-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class*="bg-emerald-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-emerald-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-emerald-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  border-left: 3px solid var(--geo-good) !important;
}
html[data-theme="dark"] .main-content [class~="bg-blue-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class~="bg-blue-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class*="bg-blue-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-blue-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-blue-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class~="bg-indigo-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class~="bg-indigo-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html[data-theme="dark"] .main-content [class*="bg-indigo-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-indigo-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="bg-indigo-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  border-left: 3px solid var(--geo-second) !important;
}
/* the same in light mode, where the wash was a pastel slab */
html:not([data-theme="dark"]) .main-content [class~="bg-amber-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class~="bg-amber-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class*="bg-amber-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-amber-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-amber-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class~="bg-yellow-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class~="bg-yellow-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class*="bg-yellow-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-yellow-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-yellow-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class~="bg-orange-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class~="bg-orange-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class*="bg-orange-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-orange-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-orange-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  border-left: 3px solid var(--geo-warn) !important;
}
html:not([data-theme="dark"]) .main-content [class~="bg-red-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class~="bg-red-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class*="bg-red-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-red-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-red-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class~="bg-rose-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class~="bg-rose-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class*="bg-rose-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-rose-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-rose-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  border-left: 3px solid var(--geo-bad) !important;
}
html:not([data-theme="dark"]) .main-content [class~="bg-green-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class~="bg-green-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class*="bg-green-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-green-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-green-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class~="bg-emerald-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class~="bg-emerald-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class*="bg-emerald-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-emerald-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-emerald-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  border-left: 3px solid var(--geo-good) !important;
}
html:not([data-theme="dark"]) .main-content [class~="bg-blue-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class~="bg-blue-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class*="bg-blue-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-blue-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-blue-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class~="bg-indigo-50"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class~="bg-indigo-100"]:not(span):not(button):not(a):not([class~="rounded-full"]),
html:not([data-theme="dark"]) .main-content [class*="bg-indigo-400/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-indigo-500/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-indigo-600/"]:not(span):not(button):not(a):not([class~="rounded-full"]):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  border-left: 3px solid var(--geo-second) !important;
}


/* ── A page that never sets a theme ───────────────────────────────────────────
   The sign-in, apply, partner and public pages render their own <html> without a
   data-theme, so every rule above skipped them: they kept the old blue-grey and,
   wherever a wrapper was transparent, the browser's white body showed through.
   They are dark by design, so they take the dark ground and ink directly. */
html:not([data-theme]) body {
  background-color: #030303;
  color: #fafafa;
  font-family: var(--geo-font);
}
html:not([data-theme]) .bg-gray-900, html:not([data-theme]) .bg-gray-950 { background-color: #030303 !important; }
html:not([data-theme]) .bg-gray-800 { background-color: #0a0a0a !important; }
html:not([data-theme]) .bg-gray-700 { background-color: #1f1f1f !important; }
html:not([data-theme]) .border-gray-700, html:not([data-theme]) .border-gray-800 { border-color: #242424 !important; }
html:not([data-theme]) .text-gray-300, html:not([data-theme]) .text-gray-400 { color: #d9d9d9 !important; }
html:not([data-theme]) .text-gray-500 { color: #9a9a9a !important; }
html:not([data-theme]) a[class*="bg-green-5"]:not([style*="width:"]), html:not([data-theme]) button[class*="bg-green-5"]:not([style*="width:"]),
html:not([data-theme]) a[class*="bg-blue-6"]:not([style*="width:"]), html:not([data-theme]) button[class*="bg-blue-6"]:not([style*="width:"]),
html:not([data-theme]) button[type="submit"][class*="bg-"]:not([style*="width:"]){
  background-image: none !important;
  background-color: var(--geo-brand) !important;   /* D-014: the brand fill with white text (was #00b8b5 with dark ink) */
  color: var(--geo-brand-ink) !important;
  font-weight: 700;
}

/* ══ THE COMPONENT LAYER ══════════════════════════════════════════════════════
   Edward, 23 Sep: "many inconsistency, let's get it right", "the links white too -
   we need this universal to the style we have". These are the shapes that repeat
   on every page, so they are settled once, here, rather than page by page. */

/* 1. A LINK looks like a link. Anywhere in the page, a link that is not a button,
      a tab or a status carries the second voice - the site's lavender. Underline
      only on hover, so a list of links does not become a fence. */
.main-content a:not([class*="bg-"]):not(.site-tab-btn):not([role="tab"]):not([class*="text-green"]):not([class*="text-red"]):not([class*="text-amber"]):not([class*="text-yellow"]):not(.geo-chip):not([data-na-solve]) {
  color: var(--geo-second);
  text-decoration: none;
}
.main-content a:not([class*="bg-"]):not(.site-tab-btn):hover { text-decoration: underline; text-underline-offset: 3px; }
/* ...but a link that IS the row's title stays ink, with the lavender on hover, so
   a table does not read as a wall of coloured text. */
.main-content td a:not([class*="bg-"]), .main-content th a:not([class*="bg-"]),
.main-content h1 a, .main-content h2 a, .main-content h3 a { color: var(--geo-text); }
.main-content td a:not([class*="bg-"]):hover { color: var(--geo-second); }

/* 2. A ROW OF BUTTONS is one height and one shape. Three buttons side by side at
      36, 40 and 44px (View Results · View Site · Run Audit, 23 Sep) reads as three
      unrelated things. */
/* NOT a link that is itself a row. A whole-row link (Home's Client Health, list rows) carries
   a background and its own `flex`/`grid`/`block` layout; made inline-flex it sized to its
   content, and one long client name pushed the page 499px wide on a 390px phone (25 Sep).
   Nor a CARD that is a link (padding on every side, p-5): its title, number and "View
   billing" were laid out side by side in one row. */
.main-content button:not(.geo-chip):not(.geo-own-colour):not([class*="rounded-full"]),
.main-content a[class*="bg-"]:not(.geo-chip):not([class*="rounded-full"]):not(.flex):not(.grid):not(.block):not([class^="p-"]):not([class*=" p-"]),
.main-content input[type="submit"] {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--geo-r-ctrl);
  font-size: 14px;
}
@media (max-width: 767px) {
  .main-content button:not(.geo-chip):not(.geo-own-colour), .main-content a[class*="bg-"]:not(.geo-chip):not(.geo-own-colour) { min-height: 44px; }
}

/* 3. A STATUS PILL keeps its words on one line, with the date beside it rather
      than wrapped inside it ("Active (Sep 7, 2026)" was three lines, 23 Sep). */
.main-content [class*="rounded-full"][class*="px-"],
.main-content .geo-pill {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.main-content [class*="rounded-full"] small,
.main-content [class*="rounded-full"] .geo-pill-when { color: var(--geo-muted); font-size: 11px; }

/* 4. THE SUPPORT BUTTON says what it is. An unlabelled circle in a corner is a
      guess; a word above it is an invitation (Edward: "the support icon needs the
      text above where it says here to help"). */
#geo-dock { flex-direction: column; align-items: flex-end; gap: 10px; }
#geo-dock .geo-dock-help { position: relative; }
#geo-dock .geo-dock-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--geo-muted);
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 2px;
  white-space: nowrap;
}
@media (hover: hover) { #geo-dock:hover .geo-dock-label { color: var(--geo-text); border-color: var(--geo-border2); } }

/* ══ LIGHT MODE, THE SAME RULES ═══════════════════════════════════════════════
   Edward, 23 Sep: "this light mode looks bad", on the services marketplace - a
   mid-grey slab behind the price, and four buttons in four different colours
   (teal, amber, grey, red) on one card. The rules are the dark ones, applied. */

/* A block behind a figure is the quiet surface, not a grey slab. */
html:not([data-theme="dark"]) .main-content [class*="bg-gray-4"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-5"]:not([class*="min-h"]):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-6"]:not([style*="width:"]){
  background-color: var(--geo-surface2) !important;
  color: var(--geo-text) !important;
}
html:not([data-theme="dark"]) .main-content [class*="bg-gray-4"] [class*="text-gray-"],
html:not([data-theme="dark"]) .main-content [class*="bg-gray-5"] [class*="text-gray-"] { color: var(--geo-text2) !important; }

/* Buttons: one primary, the rest silver, and destroying is an OUTLINE - a filled
   red block beside three other colours is the loudest thing on a calm card. */
html:not([data-theme="dark"]) button[class*="bg-amber-"]:not([style*="width:"]), html:not([data-theme="dark"]) a[class*="bg-amber-"]:not([style*="width:"]),
html:not([data-theme="dark"]) button[class*="bg-yellow-"]:not([style*="width:"]), html:not([data-theme="dark"]) a[class*="bg-yellow-"]:not([style*="width:"]),
html:not([data-theme="dark"]) button[class*="bg-gray-2"]:not([style*="width:"]), html:not([data-theme="dark"]) button[class*="bg-gray-3"]:not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border2) !important;
}
button[class*="bg-red-5"]:not([style*="width:"]), button[class*="bg-red-6"]:not([style*="width:"]), a[class*="bg-red-5"]:not([style*="width:"]), a[class*="bg-red-6"]:not([style*="width:"]),
button[class*="bg-rose-5"]:not([style*="width:"]), button[class*="bg-rose-6"]:not([style*="width:"]){
  background-color: transparent !important;
  color: var(--geo-bad) !important;
  border: 1px solid color-mix(in oklab, var(--geo-bad) 45%, var(--geo-border)) !important;
  font-weight: 600;
}
button[class*="bg-red-5"]:hover:not([style*="width:"]), button[class*="bg-red-6"]:hover:not([style*="width:"]), a[class*="bg-red-6"]:hover:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-bad) 14%, transparent) !important;
}
/* A "featured" state is a star and a quiet mark, never a filled amber button. */
html:not([data-theme="dark"]) .main-content [class*="text-amber-"],
html:not([data-theme="dark"]) .main-content [class*="text-yellow-"] { color: var(--geo-warn) !important; }

/* A card's top edge in light mode follows the same rule as dark: a hairline, and
   the state on the left edge only. */
html:not([data-theme="dark"]) .main-content [class*="border-t-4"],
html:not([data-theme="dark"]) .main-content [class*="border-t-2"] { border-top-width: 1px !important; border-top-color: var(--geo-border) !important; }


/* ── Light mode: the same shapes as dark ──────────────────────────────────────
   Edward's screens, 23 Sep: a "Run Audit" button so faint it read as disabled,
   and a row of buttons at three weights. In light, a secondary button is a white
   surface with a visible hairline and full-strength ink - never grey-on-grey. */
/* ...but never an accent button: this rule was stealing the ink off the teal
   ("Add the business details" measured 2.73:1 in light, 23 Sep). */
/* ...and only on something DRAWN as a button (it has a fill or a border). A bare <button> is
   a row, a tab or a disclosure - the Start here steps, list items, "Show more" - and got a white
   box with a grey border in light only, so every accordion looked like a stack of cards and the
   open step split in two (Edward, 26 Sep: "the light mode seems off"). Dark never boxed them. */
html:not([data-theme="dark"]) .main-content button:is([class*="bg-"], [class*=" border"], [class^="border"]):not([class*="bg-green"]):not([class*="bg-blue-6"]):not([class*="bg-teal"]):not([class*="bg-emerald"]):not([class*="bg-transparent"]):not([class~="border-transparent"]):not(.ob-grad):not(.geo-btn-primary):not(.geo-chip):not(.geo-own-colour):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content a[class*="bg-gray-"]:not(.ob-grad):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content a[class*="bg-white"]:not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border2) !important;
}
html:not([data-theme="dark"]) .main-content button:is([class*="bg-"], [class*=" border"], [class^="border"]):hover:not([class*="bg-green"]):not([class*="bg-blue-6"]):not([class*="bg-transparent"]):not([class~="border-transparent"]) {
  border-color: var(--geo-accent) !important;
}
/* A link-styled action ("View Site") keeps the second voice rather than fading. */
html:not([data-theme="dark"]) .main-content a:not([class*="bg-"]):not(.site-tab-btn) { color: var(--geo-second); }

/* The logo mark is drawn for a dark ground; on a light one it needs its own
   contrast rather than sitting in a teal square that vanishes (Edward: "check
   light mode logo too"). */
html:not([data-theme="dark"]) .sidebar img[src*="logo"],
html:not([data-theme="dark"]) #geo-brandrow img { filter: none; }
html:not([data-theme="dark"]) #geo-brandrow, html:not([data-theme="dark"]) .sidebar a[href="/"] { color: var(--geo-text); }

/* ── A progress bar is the accent on the quiet surface ────────────────────────
   Edward, 23 Sep, quoting the markup: a bar drawn as bg-blue-600 inside a
   bg-gray-700 track. A bar that MEASURES something takes the accent; its track is
   the muted surface. (The tinted-blue rule above leaves it alone because a bar is
   neither a button nor a link.) */
html[data-theme="dark"] .main-content [class*="rounded-full"] > [class*="bg-blue-"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="rounded-full"] > [class*="bg-indigo-"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="rounded-full"] > [class*="bg-purple-"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="rounded-full"] > [class*="bg-blue-"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="rounded-full"] > [class*="bg-indigo-"]:not([style*="width:"]){
  background-color: var(--geo-accent) !important;
}
html[data-theme="dark"] .main-content [class*="rounded-full"][class*="bg-gray-7"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="rounded-full"][class*="bg-gray-8"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="rounded-full"][class*="bg-gray-2"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="rounded-full"][class*="bg-gray-3"]:not([style*="width:"]){
  background-color: var(--geo-surface2) !important;
}
/* A bar that reports a STATE keeps that state's colour. */
html[data-theme="dark"] .main-content [class*="rounded-full"] > [class*="bg-green-"]:not([style*="width:"]){ background-color: var(--geo-good) !important; }
html[data-theme="dark"] .main-content [class*="rounded-full"] > [class*="bg-red-"]:not([style*="width:"]){ background-color: var(--geo-bad) !important; }
html[data-theme="dark"] .main-content [class*="rounded-full"] > [class*="bg-amber-"]:not([style*="width:"]),
html[data-theme="dark"] .main-content [class*="rounded-full"] > [class*="bg-yellow-"]:not([style*="width:"]){ background-color: var(--geo-warn) !important; }


/* ── The same mappings, on the light side ─────────────────────────────────────
   The status, link and decoration rules above were written under
   html[data-theme="dark"], so on the light side none of them ran: the sweep in
   light mode reported 343 findings against 0 in dark (23 Sep). These are the same
   rules, in light values. */
html:not([data-theme="dark"]) .main-content [class*="text-green-"],
html:not([data-theme="dark"]) .main-content [class*="text-emerald-"] { color: var(--geo-good-ink) !important; }
html:not([data-theme="dark"]) .main-content [class*="text-red-"],
html:not([data-theme="dark"]) .main-content [class*="text-rose-"] { color: var(--geo-bad-ink) !important; }
html:not([data-theme="dark"]) .main-content [class*="text-yellow-"],
html:not([data-theme="dark"]) .main-content [class*="text-amber-"],
html:not([data-theme="dark"]) .main-content [class*="text-orange-"] { color: var(--geo-warn-ink) !important; }
html:not([data-theme="dark"]) .main-content [class*="text-blue-"],
html:not([data-theme="dark"]) .main-content [class*="text-indigo-"],
html:not([data-theme="dark"]) .main-content [class*="text-purple-"],
html:not([data-theme="dark"]) .main-content [class*="text-violet-"],
html:not([data-theme="dark"]) .main-content [class*="text-pink-"] { color: var(--geo-second) !important; }
html:not([data-theme="dark"]) .main-content [class*="bg-indigo-"]:not(button):not(a):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-purple-"]:not(button):not(a):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-violet-"]:not(button):not(a):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-pink-"]:not(button):not(a):not([style*="width:"]){
  background-color: var(--geo-surface2) !important; color: var(--geo-text) !important;
}
html:not([data-theme="dark"]) .main-content [class*="bg-green-1"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-green-5"][class*="/"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-good) 14%, #fff) !important; color: var(--geo-good-ink) !important;
}
html:not([data-theme="dark"]) .main-content [class*="bg-amber-1"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-yellow-1"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-warn) 14%, #fff) !important; color: var(--geo-warn-ink) !important;
}
html:not([data-theme="dark"]) .main-content [class*="bg-red-1"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-rose-1"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-bad) 14%, #fff) !important; color: var(--geo-bad-ink) !important;
}
html:not([data-theme="dark"]) .main-content .text-gray-400,
html:not([data-theme="dark"]) .main-content .text-gray-500 { color: var(--geo-muted) !important; }
html:not([data-theme="dark"]) .main-content pre,
html:not([data-theme="dark"]) .main-content code { background-color: var(--geo-surface2) !important; color: var(--geo-text) !important; }

/* Every control is 44px on a phone, in both themes - some rules were losing to a
   later one and the sweep measured 40px. */
@media (max-width: 767px) {
  .main-content button:not(.geo-chip):not(.geo-own-colour), .main-content a[class*="bg-"]:not(.geo-chip):not(.geo-own-colour),
  .main-content input[type="submit"], .geo-btn, .btn-sm, .geo-tt-btn { min-height: 44px !important; }
}


/* The one action keeps its own ink in BOTH themes, whatever else a page's classes
   say. Written last so nothing later can take it back. */
.ob-grad, .geo-btn-primary,
a[class*="bg-green-5"]:not([class*="/"]):not([style*="width:"]), a[class*="bg-green-6"]:not([class*="/"]):not([style*="width:"]),
button[class*="bg-green-5"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-green-6"]:not([class*="/"]):not([style*="width:"]),
a[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]),
a[class*="bg-teal-5"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-teal-5"]:not([class*="/"]):not([style*="width:"]),
a[class*="bg-emerald-6"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-emerald-6"]:not([class*="/"]):not([style*="width:"]){
  background-color: var(--geo-brand) !important;
  background-image: none !important;
  color: var(--geo-brand-ink) !important;
  border: 0 !important;
}


/* ══ LIGHT MODE: the dark slabs, and the blue that is not our blue ════════════
   The light sweep on the live site, 23 Sep, still reported 393 findings against 0
   in dark, and they were two shapes repeated:

     1. A DARK SLAB SURVIVED INTO LIGHT. bg-gray-700/800/900/950 had a dark-mode
        rule and no light one, so panels came through as near-black rgb(3,7,18)
        and rgb(17,24,39) on a white page - Edward: "also see that white background
        and the dark bg seems a different css, you missed many pages odd like that".
        Their white and pale-grey children have to come with them, or the fix
        writes white text onto a white card.
     2. TAILWIND BLUE. Dots, avatars, bars and /20 chips are mapped in dark and
        nowhere in light. Our blue is the accent.

   Written once for light, mirroring rules that already exist for dark. */
html:not([data-theme="dark"]) .main-content [class*="bg-gray-7"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-8"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-9"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-slate-7"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-slate-8"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-slate-9"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-zinc-8"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-zinc-9"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-neutral-8"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-neutral-9"]:not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  color: var(--geo-text) !important;
  border-color: var(--geo-border) !important;
}
/* One step down for a panel nested inside another - otherwise two white cards
   share an edge and the inner one disappears. */
html:not([data-theme="dark"]) .main-content [class*="bg-gray-8"] [class*="bg-gray-9"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-9"] [class*="bg-gray-8"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-9"] [class*="bg-gray-9"]:not([style*="width:"]){
  background-color: var(--geo-surface2) !important;
}
/* The ink that used to sit on those slabs - but NOT a button or a painted thing
   inside one. This rule reached "Copy message" (a teal action inside a bg-gray-800
   card) and put the card's ink on the teal: 2.39:1, measured 23 Sep. A descendant
   that paints itself decides its own ink. */
html:not([data-theme="dark"]) .main-content [class*="bg-gray-7"] .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-8"] .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-9"] .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-slate-8"] .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-slate-9"] .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-7"][class*="text-white"]:not(button):not(a),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-8"][class*="text-white"]:not(button):not(a),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-9"][class*="text-white"]:not(button):not(a) {
  color: var(--geo-text) !important;
}
html:not([data-theme="dark"]) .main-content [class*="bg-gray-7"] [class*="text-gray-3"]:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-8"] [class*="text-gray-3"]:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-9"] [class*="text-gray-3"]:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-7"] [class*="text-gray-2"]:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-8"] [class*="text-gray-2"]:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-gray-9"] [class*="text-gray-2"]:not(button):not(a):not([class*="bg-"]) {
  color: var(--geo-text2) !important;
}

/* Blue is the accent, at every weight. A flat blue block becomes the accent; a
   pale blue becomes a lighter step of it; a /10-/30 chip becomes a tint. */
/* A small MARK - a dot, an avatar tile, a bar - keeps the accent. Written for BOTH
   themes: the accent and its ink flip on their own, and a Tailwind blue dot was just
   as wrong on the dark side (the sweep only stopped hiding it on 23 Sep). */
html .main-content [class*="rounded-full"][class*="bg-blue-"]:not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="rounded-sm"][class*="bg-blue-"]:not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="rounded-lg"][class*="bg-blue-6"][class*="w-"]:not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="rounded-full"][class*="bg-cyan-"]:not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="rounded-full"][class*="bg-indigo-"]:not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="rounded-full"][class*="bg-sky-"]:not([class*="/"]):not(button):not(a):not([style*="width:"]){
  background-color: var(--geo-accent) !important;
  color: var(--geo-accent-ink) !important;
}
/* A PANEL is a tint of the accent, and its words stay page ink. */
html .main-content [class*="bg-blue-"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="w-"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="bg-cyan-"]:not([class*="rounded-full"]):not([class*="w-"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="bg-sky-"]:not([class*="rounded-full"]):not([class*="w-"]):not(button):not(a):not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-accent) 11%, var(--geo-bg)) !important;
  color: var(--geo-text) !important;
  border-color: color-mix(in oklab, var(--geo-accent) 30%, var(--geo-border)) !important;
}
html:not([data-theme="dark"]) .main-content [class*="bg-blue-2"]:not(button):not(a):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-blue-3"]:not(button):not(a):not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-blue-4"]:not(button):not(a):not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-accent) 45%, var(--geo-surface)) !important;
}
html:not([data-theme="dark"]) .main-content [class*="bg-blue-1"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-blue-5"][class*="/"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-blue-6"][class*="/"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-cyan-5"][class*="/"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content [class*="bg-sky-5"][class*="/"]:not([style*="width:"]){
  background-color: color-mix(in oklab, var(--geo-accent) 14%, #fff) !important;
  color: var(--geo-accent) !important;
}
/* Cyan and sky text follow the accent too (they were only mapped in dark). */
html:not([data-theme="dark"]) .main-content [class*="text-cyan-"],
html:not([data-theme="dark"]) .main-content [class*="text-sky-"],
html:not([data-theme="dark"]) .main-content [class*="text-teal-"] { color: var(--geo-accent) !important; }
/* A purple button is not one of the two shapes (teal or silver), and a filled
   lavender takes different ink in each theme - so it becomes the silver one.
   Measured 1.18:1 in light before this. */
html .main-content a[class*="bg-purple-"]:not([class*="/"]):not([style*="width:"]), html .main-content button[class*="bg-purple-"]:not([class*="/"]):not([style*="width:"]),
html .main-content a[class*="bg-violet-"]:not([class*="/"]):not([style*="width:"]), html .main-content button[class*="bg-violet-"]:not([class*="/"]):not([style*="width:"]),
html .main-content a[class*="bg-fuchsia-"]:not([class*="/"]):not([style*="width:"]), html .main-content button[class*="bg-fuchsia-"]:not([class*="/"]):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  background-image: none !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border2) !important;
}
html .main-content a[class*="bg-purple-"]:hover, html .main-content button[class*="bg-purple-"]:hover {
  border-color: var(--geo-accent) !important;
}

/* ══ LIGHT MODE: the dark-native classes, in tokens ═══════════════════════════
   These rules used to live in a <style> block inside app/views/layouts/main.php,
   written as raw Tailwind hexes with !important. Because that block loads after the
   stylesheets, it beat everything here - which is why light mode kept measuring the
   same wrong inks however many token rules were added (23 Sep 2026). They now live
   with the rest of the palette, and say the same thing in tokens.

   Many views are written dark-native (bg-gray-800 cards, text-gray-400 captions).
   The mapping mirrors what those classes MEAN in dark:
       gray-900/950  the page ground      gray-800  a card
       gray-700/600  the muted step       white/100 primary ink
       gray-200/300  secondary ink        gray-400/500  quiet ink              */
html:not([data-theme="dark"]) .main-content .bg-gray-900,
html:not([data-theme="dark"]) .main-content .bg-gray-950,
html:not([data-theme="dark"]) .main-content [class*="bg-gray-9"][class*="/"]:not([style*="width:"]){ background-color: var(--geo-bg) !important; }
html:not([data-theme="dark"]) .main-content .bg-gray-800 {
  background-color: var(--geo-surface) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
}
html:not([data-theme="dark"]) .main-content .bg-gray-700,
html:not([data-theme="dark"]) .main-content .bg-gray-600,
html:not([data-theme="dark"]) .main-content [class*="bg-gray-7"][class*="/"]:not([style*="width:"]){ background-color: var(--geo-surface2) !important; }
/* Borders and dividers */
html:not([data-theme="dark"]) .main-content [class*="border-gray-7"],
html:not([data-theme="dark"]) .main-content [class*="border-gray-8"],
html:not([data-theme="dark"]) .main-content [class*="border-gray-9"] { border-color: var(--geo-border) !important; }
html:not([data-theme="dark"]) .main-content [class*="border-gray-6"],
html:not([data-theme="dark"]) .main-content [class*="border-gray-5"] { border-color: var(--geo-border2) !important; }
html:not([data-theme="dark"]) .main-content [class*="divide-gray-7"] > * + *,
html:not([data-theme="dark"]) .main-content [class*="divide-gray-8"] > * + * { border-color: var(--geo-border) !important; }
html:not([data-theme="dark"]) .main-content [class*="border-blue-8"],
html:not([data-theme="dark"]) .main-content [class*="border-teal-8"],
html:not([data-theme="dark"]) .main-content [class*="border-cyan-8"] { border-color: color-mix(in oklab, var(--geo-accent) 34%, var(--geo-border)) !important; }
html:not([data-theme="dark"]) .main-content [class*="border-purple-8"],
html:not([data-theme="dark"]) .main-content [class*="border-indigo-8"] { border-color: color-mix(in oklab, var(--geo-second) 34%, var(--geo-border)) !important; }
/* Ink. Named utilities, not [class*=...]: the substring form also matches
   group-hover:text-gray-300, which is how a text-gray-500 caption ended up
   wearing the secondary ink (23 Sep). A button or a painted element is left
   OUT - its own rule decides its ink. */
html:not([data-theme="dark"]) .main-content .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content .text-gray-50:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content .text-gray-100:not(button):not(a):not([class*="bg-"]) { color: var(--geo-text) !important; }
html:not([data-theme="dark"]) .main-content .text-gray-200:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content .text-gray-300:not(button):not(a):not([class*="bg-"]) { color: var(--geo-text2) !important; }
html:not([data-theme="dark"]) .main-content .text-gray-400:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content .text-gray-500:not(button):not(a):not([class*="bg-"]) { color: var(--geo-muted) !important; }
/* ...but ink sitting ON something painted follows that thing, or a label turns
   page-coloured on its own fill. White on a COLOURED block stays white (in light the
   accent's own ink is white too); inside a button or a link-button it follows the
   button, which may have become the silver or the outline shape. */
html:not([data-theme="dark"]) .main-content [class*="bg-"]:not([class*="bg-gray-"]):not([class*="bg-white"]):not([class*="bg-transparent"]):not([class*="/"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]) { color: #fff !important; }
html:not([data-theme="dark"]) .main-content button [class*="text-gray-"],
html:not([data-theme="dark"]) .main-content button .text-white,
html:not([data-theme="dark"]) .main-content a[class*="bg-"] .text-white { color: inherit !important; }
/* Hovers that were written for a dark ground */
html:not([data-theme="dark"]) .main-content [class*="hover:bg-gray-7"]:hover,
html:not([data-theme="dark"]) .main-content [class*="hover:bg-gray-6"]:hover { background-color: var(--geo-surface2) !important; }
html:not([data-theme="dark"]) .main-content [class*="hover:text-white"]:hover { color: var(--geo-text) !important; }
html:not([data-theme="dark"]) .main-content [class*="hover:border-gray-4"]:hover { border-color: var(--geo-accent) !important; }
/* A select written for a dark card */
html:not([data-theme="dark"]) .main-content select[class*="bg-gray-7"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content select[class*="bg-gray-8"]:not([style*="width:"]){
  background-color: var(--geo-panel) !important;
  border-color: var(--geo-border2) !important;
  color: var(--geo-text) !important;
}
/* The sidebar's own bottom panel */
html:not([data-theme="dark"]) .sidebar .fixed.bottom-0 {
  background-color: var(--geo-panel) !important;
  border-color: var(--geo-border) !important;
}

/* The words on a tinted blue panel are page ink - written last so the
   "white stays white on a coloured fill" rule above cannot reach them. */
html:not([data-theme="dark"]) .main-content [class*="bg-blue-"]:not([class*="rounded-full"]):not([class*="w-"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-cyan-"]:not([class*="rounded-full"]):not([class*="w-"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="bg-sky-"]:not([class*="rounded-full"]):not([class*="w-"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]) {
  color: var(--geo-text) !important;
}

/* White ink on a TINT is white on a pale ground in light (measured 1.28:1 on a
   chip, 23 Sep). A tint is a state; its words are page ink. */
html:not([data-theme="dark"]) .main-content [class*="/10"].text-white,
html:not([data-theme="dark"]) .main-content [class*="/15"].text-white,
html:not([data-theme="dark"]) .main-content [class*="/20"].text-white,
html:not([data-theme="dark"]) .main-content [class*="/30"].text-white,
html:not([data-theme="dark"]) .main-content [class*="/10"] .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="/15"] .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="/20"] .text-white:not(button):not(a):not([class*="bg-"]),
html:not([data-theme="dark"]) .main-content [class*="/30"] .text-white:not(button):not(a):not([class*="bg-"]) {
  color: var(--geo-text) !important;
}

/* ══ LAST WORD: the ink on the one action ═════════════════════════════════════
   Written at the very end of the file because three later blocks were reaching it
   and putting the page's ink on the teal: "Write this for me" measured 2.39:1 in
   light. A filled action carries its own ink, and nothing after this can say
   otherwise.

   NAMED CLASSES, not [class*="bg-blue-5"]: that substring also matches bg-blue-50:not([style*="width:"]),
   and the dashboard's "Add Client" quick-action - a pale bg-blue-50 CARD with grey
   words inside - was turned into a solid teal block with grey ink on it, 1.50:1
   (found in the light sweep, 23 Sep). An exact class token also excludes the
   alpha forms (bg-green-600/20) on its own, because a class list is tokens. */
.main-content a.bg-green-500, .main-content button.bg-green-500,
.main-content a.bg-green-600, .main-content button.bg-green-600,
.main-content a.bg-green-700, .main-content button.bg-green-700,
.main-content a.bg-emerald-500, .main-content button.bg-emerald-500,
.main-content a.bg-emerald-600, .main-content button.bg-emerald-600,
.main-content a.bg-teal-500, .main-content button.bg-teal-500,
.main-content a.bg-teal-600, .main-content button.bg-teal-600,
.main-content a.bg-blue-500, .main-content button.bg-blue-500,
.main-content a.bg-blue-600, .main-content button.bg-blue-600,
.main-content a.bg-blue-700, .main-content button.bg-blue-700,
.main-content .ob-grad, .main-content .geo-btn-primary, .main-content .work-buy {
  background-color: var(--geo-brand) !important;
  background-image: none !important;
  border: 0 !important;
  color: var(--geo-brand-ink) !important;
}
.main-content a.bg-green-500 *, .main-content button.bg-green-500 *,
.main-content a.bg-green-600 *, .main-content button.bg-green-600 *,
.main-content a.bg-emerald-600 *, .main-content button.bg-emerald-600 *,
.main-content a.bg-teal-500 *, .main-content button.bg-teal-500 *,
.main-content a.bg-blue-500 *, .main-content button.bg-blue-500 *,
.main-content a.bg-blue-600 *, .main-content button.bg-blue-600 *,
.main-content a.bg-blue-700 *, .main-content button.bg-blue-700 *,
.main-content .ob-grad *, .main-content .geo-btn-primary *, .main-content .work-buy * {
  color: var(--geo-brand-ink) !important;
}

/* ══ "What this page is for" ══════════════════════════════════════════════════
   One strip at the top of a tool page, rendered by app/views/partials/tool_intro.php.
   Edward, 23 Sep: "so many good things but seems like users won't even know ... make
   sure it's easy to understand how to use". Open the first time, folded after, and
   remembered per person. Tokens only, so it is the same strip on every page. */
.geo-intro {
  margin: 0 0 16px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card);
  background: var(--geo-surface); overflow: hidden;
}
.geo-intro > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  min-height: var(--geo-ctrl-h); padding: 12px 18px; color: var(--geo-text);
}
.geo-intro > summary::-webkit-details-marker { display: none; }
.geo-intro > summary::after {
  content: "\25be"; margin-left: auto; flex: 0 0 auto; color: var(--geo-muted); font-size: 12px;
  transition: transform var(--geo-dur) var(--geo-ease);
}
.geo-intro[open] > summary::after { transform: rotate(180deg); }
.geo-intro-title { font-size: 14px; font-weight: 600; }
.geo-intro-lede { font-size: 12.5px; color: var(--geo-muted); }
.geo-intro[open] .geo-intro-lede { display: none; }
.geo-intro-steps { list-style: none; margin: 0; padding: 0 18px 16px; display: grid; gap: 9px; }
.geo-intro-steps li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--geo-text2); line-height: 1.58; }
.geo-intro-steps li > b:first-child {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--geo-accent) 16%, var(--geo-bg));
  color: var(--geo-accent); font-size: 11px; font-weight: 700;
}
@media (max-width: 767px) {
  .geo-intro > summary { min-height: 44px; padding: 12px 14px; flex-wrap: wrap; }
  .geo-intro-steps { padding: 0 14px 14px; }
}

/* ══ A FLAT COLOURED SLAB IS NOT A STAT TILE ══════════════════════════════════
   The Leads page, 23 Sep: four tiles in four flat colours on one row - green,
   blue, grey, orange - with their labels almost lost in the fill ("Total Revenue"
   measured under 3:1 on its own green). Edward has said this twice, about the
   services marketplace and the celebration banner: a state is an EDGE and a chip,
   never a wash.

   So a painted BLOCK (not a button, not a small round mark, not a /10-/30 tint)
   takes the card surface, page ink, and its own colour as a left edge. The number
   inside keeps the colour, which is where it was doing useful work all along. */
html .main-content [class*="bg-green-5"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="bg-green-6"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="bg-emerald-5"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="bg-emerald-6"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  background-image: none !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border) !important;
  border-left: 3px solid var(--geo-good) !important;
}
html .main-content [class*="bg-orange-5"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="bg-orange-6"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="bg-amber-5"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="bg-yellow-5"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  background-image: none !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border) !important;
  border-left: 3px solid var(--geo-warn) !important;
}
html .main-content [class*="bg-red-5"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="bg-red-6"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]),
html .main-content [class*="bg-rose-5"]:not([class*="rounded-full"]):not([class*="rounded-sm"]):not([class*="/"]):not(button):not(a):not([style*="width:"]){
  background-color: var(--geo-surface) !important;
  background-image: none !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border) !important;
  border-left: 3px solid var(--geo-bad) !important;
}
/* Their words come with them - white ink on a card is not ink. */
html .main-content [class*="bg-green-5"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]),
html .main-content [class*="bg-green-6"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]),
html .main-content [class*="bg-emerald-6"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]),
html .main-content [class*="bg-orange-5"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]),
html .main-content [class*="bg-amber-5"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]),
html .main-content [class*="bg-red-5"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]),
html .main-content [class*="bg-red-6"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]) {
  color: var(--geo-text) !important;
}
/* ...and their quieter labels, which were white at 80% on the fill. */
html .main-content [class*="bg-green-5"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) [class*="text-green-"],
html .main-content [class*="bg-green-6"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) [class*="text-green-"],
html .main-content [class*="bg-orange-5"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) [class*="text-orange-"],
html .main-content [class*="bg-red-5"]:not([class*="rounded-full"]):not([class*="/"]):not(button):not(a) [class*="text-red-"] {
  color: var(--geo-text2) !important;
}

/* ══ A GRADIENT SLAB IS STILL A SLAB ══════════════════════════════════════════
   The four Leads tiles are gradients (bg-gradient-to-br from-green-500 ...), so
   the rule above - which reads bg-<hue>- - never touched them. Same decision,
   keyed on the gradient's own class. */
html .main-content [class*="from-green-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-emerald-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-teal-"]:not([class*="rounded-full"]):not(button):not(a) {
  background-image: none !important; background-color: var(--geo-surface) !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border) !important; border-left: 3px solid var(--geo-good) !important;
}
html .main-content [class*="from-blue-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-sky-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-cyan-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-indigo-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-purple-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-violet-"]:not([class*="rounded-full"]):not(button):not(a) {
  background-image: none !important; background-color: var(--geo-surface) !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border) !important; border-left: 3px solid var(--geo-accent) !important;
}
html .main-content [class*="from-orange-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-amber-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-yellow-"]:not([class*="rounded-full"]):not(button):not(a) {
  background-image: none !important; background-color: var(--geo-surface) !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border) !important; border-left: 3px solid var(--geo-warn) !important;
}
html .main-content [class*="from-red-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-rose-"]:not([class*="rounded-full"]):not(button):not(a),
html .main-content [class*="from-pink-"]:not([class*="rounded-full"]):not(button):not(a) {
  background-image: none !important; background-color: var(--geo-surface) !important;
  color: var(--geo-text) !important;
  border: 1px solid var(--geo-border) !important; border-left: 3px solid var(--geo-bad) !important;
}
/* The words on a slab that is now a card. A label written as text-<hue>-100 was
   picked to sit on a saturated fill; on the card it is the quiet ink. */
html .main-content [class*="from-"]:not([class*="rounded-full"]):not(button):not(a) .text-white:not(button):not(a):not([class*="bg-"]),
html .main-content [class*="from-"]:not([class*="rounded-full"]):not(button):not(a) [class*="text-green-1"],
html .main-content [class*="from-"]:not([class*="rounded-full"]):not(button):not(a) [class*="text-blue-1"],
html .main-content [class*="from-"]:not([class*="rounded-full"]):not(button):not(a) [class*="text-orange-1"],
html .main-content [class*="from-"]:not([class*="rounded-full"]):not(button):not(a) [class*="text-red-1"],
html .main-content [class*="from-"]:not([class*="rounded-full"]):not(button):not(a) [class*="text-purple-1"],
html .main-content [class*="from-"]:not([class*="rounded-full"]):not(button):not(a) [class*="text-indigo-1"] {
  color: var(--geo-text2) !important;
}

/* An icon tile or an avatar is not a slab (design window, 18 Oct). The slab rules above key on the
   colour class alone, so every 32-48px icon square and the site header's avatar got the 3px coloured
   left edge meant for full-width cards: a "half border" on the dashboard, the welcome pop-up and the
   site header. A small square keeps one even hairline; the avatar inside its freshness ring, none. */
#main-content :is(.w-6, .w-7, .w-8, .w-9, .w-10, .w-11, .w-12, .w-14):is([class*="bg-"], [class*="from-"]):not(button):not([class*="rounded-full"]) {
  border-left-width: 1px !important; border-left-color: var(--geo-border) !important;
}
#main-content .site-head-ring > .site-head-avatar { border: 0 !important; }

/* ══ THE LOGO IN LIGHT MODE ═══════════════════════════════════════════════════
   There is one logo file and it is white (public/images/geophiiwhite.png), so on a
   light sidebar the wordmark disappeared and only the mark showed - Edward, 23 Sep:
   "in light mode check the logo too". Until there is a dark version of the artwork
   it sits on a dark plate, which is how a white lockup is normally used on light. */
html:not([data-theme="dark"]) .sidebar img[src*="geophii"],
html:not([data-theme="dark"]) #mobile-header img[src*="geophii"],
html:not([data-theme="dark"]) #geo-brandrow img[src*="geophii"] {
  background-color: var(--geo-text);
  padding: 7px 11px;
  border-radius: var(--geo-r-ctrl);
  box-sizing: content-box;
}

/* ══ CONVERSION TAB ═══════════════════════════════════════════════════════════
   UX_WIN_PLAN item 4. Tokens only, both themes. Worst finding first, because the
   point of the page is what to change - a wall of green is not a report. */
.cv { max-width: 920px; font-family: var(--geo-font); color: var(--geo-text); }
.cv-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--geo-accent); }
.cv-head h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.22; letter-spacing: -.01em; text-wrap: balance; }
.cv-lede { margin: 0; color: var(--geo-text2); font-size: 14.5px; line-height: 1.62; max-width: 62ch; }

.cv-form { margin: 22px 0 0; padding: 18px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); background: var(--geo-surface); }
.cv-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.cv-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cv-row input {
  flex: 1 1 320px; min-width: 0; min-height: var(--geo-ctrl-h); padding: 10px 13px;
  font: inherit; font-size: 15px; color: var(--geo-text); background: var(--geo-panel);
  border: 1px solid var(--geo-border2); border-radius: var(--geo-r-ctrl);
}
.cv-row input:focus { outline: 0; border-color: var(--geo-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--geo-accent) 22%, transparent); }
.cv-go {
  min-height: var(--geo-ctrl-h); padding: 0 20px; border: 0; border-radius: var(--geo-r-ctrl);
  background: var(--geo-brand); color: var(--geo-brand-ink); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--geo-brand) 85%, transparent);
}
.cv-go:disabled { opacity: .6; cursor: progress; box-shadow: none; }
.cv-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--geo-muted); line-height: 1.55; }

.cv-out { margin-top: 20px; display: grid; gap: 12px; }
.cv-wait { margin: 0; color: var(--geo-muted); font-size: 14px; }
.cv-note { margin: 0; padding: 12px 16px; border-radius: var(--geo-r-ctrl); border: 1px solid var(--geo-border); border-left: 3px solid var(--geo-warn); background: var(--geo-surface); font-size: 13px; color: var(--geo-text2); }
.cv-error { padding: 16px 18px; border: 1px solid color-mix(in oklab, var(--geo-bad) 40%, var(--geo-border)); border-left: 3px solid var(--geo-bad); border-radius: var(--geo-r-card); background: var(--geo-surface); }
.cv-error p { margin: 0; font-size: 14px; }
.cv-quiet { margin-top: 6px !important; color: var(--geo-muted); font-size: 12.5px; }

.cv-score { display: flex; align-items: center; gap: 20px; padding: 20px 22px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); background: var(--geo-surface); }
.cv-ring {
  flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%;
  display: inline-flex; align-items: baseline; justify-content: center; gap: 1px; padding-top: 28px;
  background: color-mix(in oklab, var(--geo-accent) 14%, var(--geo-bg));
  border: 2px solid color-mix(in oklab, var(--geo-accent) 45%, transparent);
}
.cv-num { font-size: 30px; font-weight: 700; line-height: 1; color: var(--geo-accent); }
.cv-pct { font-size: 12px; color: var(--geo-muted); }
.cv-band { margin: 0; font-size: 18px; font-weight: 700; }
.cv-url { margin: 4px 0 0; font-size: 12.5px; color: var(--geo-muted); overflow-wrap: anywhere; }
.cv-tally { margin: 8px 0 0; font-size: 13px; color: var(--geo-text2); }
.cv-band-losing-people .cv-ring, .cv-band-leaking .cv-ring {
  background: color-mix(in oklab, var(--geo-bad) 14%, var(--geo-bg));
  border-color: color-mix(in oklab, var(--geo-bad) 45%, transparent);
}
.cv-band-losing-people .cv-num, .cv-band-leaking .cv-num { color: var(--geo-bad); }

.cv-card { padding: 16px 18px; border: 1px solid var(--geo-border); border-left: 3px solid var(--geo-border2); border-radius: var(--geo-r-card); background: var(--geo-surface); }
.cv-card.cv-good { border-left-color: var(--geo-good); }
.cv-card.cv-warn { border-left-color: var(--geo-warn); }
.cv-card.cv-bad  { border-left-color: var(--geo-bad); }
.cv-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cv-card-head h3 { margin: 0; font-size: 15px; font-weight: 650; }
.cv-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--geo-border2); }
.cv-good .cv-dot { background: var(--geo-good); }
.cv-warn .cv-dot { background: var(--geo-warn); }
.cv-bad .cv-dot  { background: var(--geo-bad); }
.cv-state { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.cv-good .cv-state { background: color-mix(in oklab, var(--geo-good) 16%, var(--geo-bg)); color: var(--geo-good-ink); }
.cv-warn .cv-state { background: color-mix(in oklab, var(--geo-warn) 16%, var(--geo-bg)); color: var(--geo-warn-ink); }
.cv-bad .cv-state  { background: color-mix(in oklab, var(--geo-bad) 16%, var(--geo-bg));  color: var(--geo-bad-ink); }
.cv-found { margin: 9px 0 0; font-size: 14px; color: var(--geo-text); line-height: 1.6; overflow-wrap: anywhere; }
.cv-why { margin: 5px 0 0; font-size: 13.5px; color: var(--geo-text2); line-height: 1.6; }
.cv-act { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--geo-border); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cv-do { margin: 0; flex: 1 1 260px; font-size: 13.5px; color: var(--geo-text); line-height: 1.55; }
.cv-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--geo-ctrl-h); padding: 0 16px;
  border-radius: var(--geo-r-ctrl); border: 1px solid var(--geo-border2); background: var(--geo-surface);
  color: var(--geo-text); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.cv-btn:hover { border-color: var(--geo-accent); }
@media (max-width: 767px) {
  .cv-row input, .cv-go, .cv-btn { min-height: 44px; width: 100%; }
  .cv-score { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ══ FULL SITE AUDIT (UX_WIN_PLAN item 3) ═════════════════════════════════════
   Lives inside the Technical tab. Same shapes as the Conversion cards, because
   they answer the same kind of question and a person should not have to learn a
   second layout. */
.cw-crawl { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--geo-border); font-family: var(--geo-font); }
.cr-head h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--geo-text); }
.cr-head p { margin: 0 0 14px; font-size: 13.5px; color: var(--geo-text2); }
.cr-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-row label { font-size: 13px; font-weight: 600; color: var(--geo-text2); }
.cr-row select {
  min-height: var(--geo-ctrl-h); padding: 0 12px; font: inherit; font-size: 14px;
  color: var(--geo-text); background: var(--geo-panel);
  border: 1px solid var(--geo-border2); border-radius: var(--geo-r-ctrl);
}
.cr-go {
  min-height: var(--geo-ctrl-h); padding: 0 20px; border: 0; border-radius: var(--geo-r-ctrl);
  background: var(--geo-brand); color: var(--geo-brand-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.cr-go:disabled { opacity: .6; cursor: progress; }
.cr-out { margin-top: 16px; display: grid; gap: 10px; }
.cr-wait, .cr-read { margin: 0; font-size: 13.5px; color: var(--geo-muted); }
.cr-clean { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--geo-good); }
.cr-note { margin: 0; padding: 11px 15px; border-radius: var(--geo-r-ctrl); border: 1px solid var(--geo-border); border-left: 3px solid var(--geo-warn); background: var(--geo-surface); font-size: 13px; color: var(--geo-text2); }
.cr-error { padding: 15px 17px; border: 1px solid color-mix(in oklab, var(--geo-bad) 40%, var(--geo-border)); border-left: 3px solid var(--geo-bad); border-radius: var(--geo-r-card); background: var(--geo-surface); }
.cr-error p { margin: 0; font-size: 14px; color: var(--geo-text); }
.cr-card { padding: 15px 17px; border: 1px solid var(--geo-border); border-left: 3px solid var(--geo-border2); border-radius: var(--geo-r-card); background: var(--geo-surface); }
.cr-card.cr-bad { border-left-color: var(--geo-bad); }
.cr-card.cr-warn { border-left-color: var(--geo-warn); }
.cr-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cr-card-head h4 { margin: 0; font-size: 15px; font-weight: 650; color: var(--geo-text); }
.cr-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--geo-border2); }
.cr-bad .cr-dot { background: var(--geo-bad); }
.cr-warn .cr-dot { background: var(--geo-warn); }
.cr-count { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--geo-surface2); color: var(--geo-text2); }
.cr-bad .cr-count { background: color-mix(in oklab, var(--geo-bad) 16%, var(--geo-bg)); color: var(--geo-bad-ink); }
.cr-warn .cr-count { background: color-mix(in oklab, var(--geo-warn) 16%, var(--geo-bg)); color: var(--geo-warn-ink); }
.cr-why { margin: 8px 0 0; font-size: 13.5px; color: var(--geo-text2); line-height: 1.6; }
.cr-which { margin-top: 10px; }
.cr-which > summary { cursor: pointer; font-size: 12.5px; color: var(--geo-second); min-height: 28px; display: flex; align-items: center; }
.cr-which ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.cr-which li { font-size: 12.5px; color: var(--geo-muted); overflow-wrap: anywhere; }
.cr-which a { color: var(--geo-second); }
.cr-more { color: var(--geo-muted); }
.cr-act { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--geo-border); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cr-do { margin: 0; flex: 1 1 240px; font-size: 13.5px; color: var(--geo-text); line-height: 1.55; }
.cr-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--geo-ctrl-h); padding: 0 16px;
  border-radius: var(--geo-r-ctrl); border: 1px solid var(--geo-border2); background: var(--geo-surface);
  color: var(--geo-text); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.cr-btn:hover { border-color: var(--geo-accent); }
@media (max-width: 767px) {
  .cr-row select, .cr-go, .cr-btn { min-height: 44px; }
  .cr-go, .cr-btn { width: 100%; }
}
/* The specifics on a crawl card: what to paste, how long, where to read more. */
.cr-snip { margin-top: 11px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-ctrl); background: var(--geo-panel); overflow: hidden; }
.cr-snip-bar { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--geo-border); }
.cr-snip-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--geo-muted); }
.cr-copy {
  margin-left: auto; min-height: 30px; padding: 0 12px; font: inherit; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--geo-border2); border-radius: 999px; background: transparent; color: var(--geo-text); cursor: pointer;
}
.cr-copy:hover { border-color: var(--geo-accent); }
.cr-copy.is-said { color: var(--geo-good); border-color: var(--geo-good); }
.cr-snip pre {
  margin: 0; padding: 12px 14px; overflow-x: auto; white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
  line-height: 1.6; color: var(--geo-text2); background: var(--geo-panel);
}
.cr-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 0; font-size: 12.5px; color: var(--geo-muted); }
.cr-effort::before { content: "\23F1  "; }
.cr-docs { color: var(--geo-second); text-decoration: none; }
.cr-docs:hover { text-decoration: underline; }
@media (max-width: 767px) { .cr-copy { min-height: 36px; } }
/* How much of the site this covers. A sample that does not say it is a sample gets
   read as the whole site. */
.cr-partial { margin: 8px 0 0; padding: 11px 15px; border-radius: var(--geo-r-ctrl); border: 1px solid var(--geo-border); border-left: 3px solid var(--geo-warn); background: var(--geo-surface); font-size: 13.5px; color: var(--geo-text2); line-height: 1.6; }
.cr-partial strong { color: var(--geo-text); }
/* A closed <details> needs something to say it opens. The marker was removed and
   nothing put back, so "Which pages" read as an empty heading (23 Sep). */
.cr-which > summary { list-style: none; }
.cr-which > summary::-webkit-details-marker { display: none; }
.cr-which > summary::before { content: "\25b8"; display: inline-block; margin-right: 7px; transition: transform var(--geo-dur) var(--geo-ease); }
.cr-which[open] > summary::before { transform: rotate(90deg); }

/* ══ HOW MUCH OF THE SITE WAS SCANNED ═════════════════════════════════════════
   Above the Action Plan. Edward, 23 Sep: "we need to easy show 10 out of 200
   pages scanned, then the button scan and fix the rest". */
.ta-pages {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 14px 18px;
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-card);
  background: var(--geo-surface);
}
.ta-pages-count { margin: 0; font-size: 14px; color: var(--geo-text2); white-space: nowrap; }
.ta-pages-count strong { color: var(--geo-text); font-weight: 700; }
.ta-pages-bar { flex: 1 1 140px; min-width: 100px; height: 6px; border-radius: 999px; background: var(--geo-surface2); overflow: hidden; }
.ta-pages-bar i { display: block; height: 6px; border-radius: 999px; background: var(--geo-accent); }
.ta-pages-do { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.ta-rest, .ta-download {
  min-height: var(--geo-ctrl-h); padding: 0 16px; border-radius: var(--geo-r-ctrl);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ta-rest { border: 0; background: var(--geo-brand); color: var(--geo-brand-ink); }
.ta-rest:disabled { opacity: .5; cursor: not-allowed; }
.ta-download { border: 1px solid var(--geo-border2); background: var(--geo-surface); color: var(--geo-text); }
.ta-download:hover { border-color: var(--geo-accent); }
@media (max-width: 767px) {
  .ta-pages-do { margin-left: 0; width: 100%; }
  .ta-rest, .ta-download { min-height: 44px; flex: 1 1 100%; }
}
/* Add to tasks, on a fix in the Action Plan. */
.ta-task {
  min-height: 34px; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--geo-border2); border-radius: var(--geo-r-ctrl);
  background: transparent; color: var(--geo-text); cursor: pointer;
}
.ta-task:hover { border-color: var(--geo-accent); }
.ta-task:disabled { opacity: .6; cursor: progress; }
.ta-task.is-said { color: var(--geo-good); border-color: var(--geo-good); cursor: default; }
.ta-task-see { margin-left: 12px; font-size: 13px; color: var(--geo-second); text-decoration: none; }
.ta-task-see:hover { text-decoration: underline; }
@media (max-width: 767px) { .ta-task { min-height: 44px; width: 100%; } }

/* Shown only when a tick could not be saved on the server. The tick still works on
   this device, so this warns rather than alarms - it is not a lost fix. */
.ta-save-warn {
  margin-top: 8px; font-size: 13px; line-height: 1.5;
  color: var(--geo-warn-ink);
  background: color-mix(in oklab, var(--geo-warn) 16%, var(--geo-bg));
  border-radius: var(--geo-r-ctrl); padding: 8px 12px;
}

/* ══ A METER FILL KEEPS ITS MEANING ══════════════════════════════════════
   A bar whose width is a percentage is DATA, not decoration. Every other rule in this
   file is about surfaces, edges and ink, and several of them reasonably flatten a
   coloured block to the card surface - which, applied to a bar, paints the filled part
   the same colour as the page and makes 8/10 look like 2/10 (found 23 Sep on Checks
   Passing, then on three more bars by the sweep's new check).

   So a meter is described here once, for the whole app: an element whose width is set
   inline, carrying a colour class, and not a button or a link. 47 bars across the views
   at last count, in 17 colour spellings - naming each one where it sits would be 47
   patches waiting to rot. The colour keeps its MEANING rather than its hex, which is
   what the palette is for.

   This sits at the end of the file on purpose: it is the last word on a bar. */
/* it went well */
.main-content [style*="width:"].bg-green-300:not(button):not(a),
.main-content [style*="width:"].bg-green-400:not(button):not(a),
.main-content [style*="width:"].bg-green-500:not(button):not(a),
.main-content [style*="width:"].bg-green-600:not(button):not(a),
.main-content [style*="width:"].bg-green-700:not(button):not(a),
.main-content [style*="width:"].bg-emerald-300:not(button):not(a),
.main-content [style*="width:"].bg-emerald-400:not(button):not(a),
.main-content [style*="width:"].bg-emerald-500:not(button):not(a),
.main-content [style*="width:"].bg-emerald-600:not(button):not(a),
.main-content [style*="width:"].bg-emerald-700:not(button):not(a),
.main-content [style*="width:"].bg-teal-300:not(button):not(a),
.main-content [style*="width:"].bg-teal-400:not(button):not(a),
.main-content [style*="width:"].bg-teal-500:not(button):not(a),
.main-content [style*="width:"].bg-teal-600:not(button):not(a),
.main-content [style*="width:"].bg-teal-700:not(button):not(a) {
  background-color: var(--geo-good) !important;
  background-image: none !important;
}
/* it went badly */
.main-content [style*="width:"].bg-red-300:not(button):not(a),
.main-content [style*="width:"].bg-red-400:not(button):not(a),
.main-content [style*="width:"].bg-red-500:not(button):not(a),
.main-content [style*="width:"].bg-red-600:not(button):not(a),
.main-content [style*="width:"].bg-red-700:not(button):not(a),
.main-content [style*="width:"].bg-rose-300:not(button):not(a),
.main-content [style*="width:"].bg-rose-400:not(button):not(a),
.main-content [style*="width:"].bg-rose-500:not(button):not(a),
.main-content [style*="width:"].bg-rose-600:not(button):not(a),
.main-content [style*="width:"].bg-rose-700:not(button):not(a) {
  background-color: var(--geo-bad) !important;
  background-image: none !important;
}
/* it needs attention */
.main-content [style*="width:"].bg-amber-300:not(button):not(a),
.main-content [style*="width:"].bg-amber-400:not(button):not(a),
.main-content [style*="width:"].bg-amber-500:not(button):not(a),
.main-content [style*="width:"].bg-amber-600:not(button):not(a),
.main-content [style*="width:"].bg-amber-700:not(button):not(a),
.main-content [style*="width:"].bg-yellow-300:not(button):not(a),
.main-content [style*="width:"].bg-yellow-400:not(button):not(a),
.main-content [style*="width:"].bg-yellow-500:not(button):not(a),
.main-content [style*="width:"].bg-yellow-600:not(button):not(a),
.main-content [style*="width:"].bg-yellow-700:not(button):not(a),
.main-content [style*="width:"].bg-orange-300:not(button):not(a),
.main-content [style*="width:"].bg-orange-400:not(button):not(a),
.main-content [style*="width:"].bg-orange-500:not(button):not(a),
.main-content [style*="width:"].bg-orange-600:not(button):not(a),
.main-content [style*="width:"].bg-orange-700:not(button):not(a) {
  background-color: var(--geo-warn) !important;
  background-image: none !important;
}
/* the plain measure */
.main-content [style*="width:"].bg-blue-300:not(button):not(a),
.main-content [style*="width:"].bg-blue-400:not(button):not(a),
.main-content [style*="width:"].bg-blue-500:not(button):not(a),
.main-content [style*="width:"].bg-blue-600:not(button):not(a),
.main-content [style*="width:"].bg-blue-700:not(button):not(a),
.main-content [style*="width:"].bg-cyan-300:not(button):not(a),
.main-content [style*="width:"].bg-cyan-400:not(button):not(a),
.main-content [style*="width:"].bg-cyan-500:not(button):not(a),
.main-content [style*="width:"].bg-cyan-600:not(button):not(a),
.main-content [style*="width:"].bg-cyan-700:not(button):not(a),
.main-content [style*="width:"].bg-sky-300:not(button):not(a),
.main-content [style*="width:"].bg-sky-400:not(button):not(a),
.main-content [style*="width:"].bg-sky-500:not(button):not(a),
.main-content [style*="width:"].bg-sky-600:not(button):not(a),
.main-content [style*="width:"].bg-sky-700:not(button):not(a) {
  background-color: var(--geo-accent) !important;
  background-image: none !important;
}
/* the second series */
.main-content [style*="width:"].bg-purple-300:not(button):not(a),
.main-content [style*="width:"].bg-purple-400:not(button):not(a),
.main-content [style*="width:"].bg-purple-500:not(button):not(a),
.main-content [style*="width:"].bg-purple-600:not(button):not(a),
.main-content [style*="width:"].bg-purple-700:not(button):not(a),
.main-content [style*="width:"].bg-indigo-300:not(button):not(a),
.main-content [style*="width:"].bg-indigo-400:not(button):not(a),
.main-content [style*="width:"].bg-indigo-500:not(button):not(a),
.main-content [style*="width:"].bg-indigo-600:not(button):not(a),
.main-content [style*="width:"].bg-indigo-700:not(button):not(a),
.main-content [style*="width:"].bg-violet-300:not(button):not(a),
.main-content [style*="width:"].bg-violet-400:not(button):not(a),
.main-content [style*="width:"].bg-violet-500:not(button):not(a),
.main-content [style*="width:"].bg-violet-600:not(button):not(a),
.main-content [style*="width:"].bg-violet-700:not(button):not(a) {
  background-color: var(--geo-second) !important;
  background-image: none !important;
}
/* nothing yet */
.main-content [style*="width:"].bg-gray-300:not(button):not(a),
.main-content [style*="width:"].bg-gray-400:not(button):not(a),
.main-content [style*="width:"].bg-gray-500:not(button):not(a),
.main-content [style*="width:"].bg-gray-600:not(button):not(a),
.main-content [style*="width:"].bg-gray-700:not(button):not(a),
.main-content [style*="width:"].bg-grey-300:not(button):not(a),
.main-content [style*="width:"].bg-grey-400:not(button):not(a),
.main-content [style*="width:"].bg-grey-500:not(button):not(a),
.main-content [style*="width:"].bg-grey-600:not(button):not(a),
.main-content [style*="width:"].bg-grey-700:not(button):not(a),
.main-content [style*="width:"].bg-slate-300:not(button):not(a),
.main-content [style*="width:"].bg-slate-400:not(button):not(a),
.main-content [style*="width:"].bg-slate-500:not(button):not(a),
.main-content [style*="width:"].bg-slate-600:not(button):not(a),
.main-content [style*="width:"].bg-slate-700:not(button):not(a),
.main-content [style*="width:"].bg-zinc-300:not(button):not(a),
.main-content [style*="width:"].bg-zinc-400:not(button):not(a),
.main-content [style*="width:"].bg-zinc-500:not(button):not(a),
.main-content [style*="width:"].bg-zinc-600:not(button):not(a),
.main-content [style*="width:"].bg-zinc-700:not(button):not(a),
.main-content [style*="width:"].bg-neutral-300:not(button):not(a),
.main-content [style*="width:"].bg-neutral-400:not(button):not(a),
.main-content [style*="width:"].bg-neutral-500:not(button):not(a),
.main-content [style*="width:"].bg-neutral-600:not(button):not(a),
.main-content [style*="width:"].bg-neutral-700:not(button):not(a) {
  background-color: var(--geo-muted) !important;
  background-image: none !important;
}

/* A chart box with nothing in it. Written by geoChartEmpty / geoChartFailed in
   geo-2026.js - see the note there for why a blank box was the bug. */
.geo-chart-note {
  display: flex; align-items: center; justify-content: center;
  height: 100%; margin: 0; padding: 0 16px;
  text-align: center; font-size: 14px; line-height: 1.5;
  color: var(--geo-muted);
}
.geo-chart-note[data-tone="warn"] { color: var(--geo-warn-ink); }


/* ── "I paint myself" ─────────────────────────────────────────────────────────
   The blanket button rules above turn any button that has not claimed a colour into a
   plain surface button, with !important. Their exclusion lists had become a record of
   everything ever caught by them - a patch list with a selector around it - and the
   Content board's filter chip was next: in light mode the selected chip was forced
   white while its count kept the ink meant for teal, so "19" was white on white.

   A component that paints itself now says so once, here, by carrying .geo-own-colour.
   Nothing about the blanket rules changes for anything that does not. */

/* ══ CONTENT BOARD ════════════════════════════════════════════════════════════
   /content — everything written for an agency's clients.

   Rewritten 23 Sep 2026. The old page let each row size itself, so the right edge
   zigzagged down the screen and no two rows lined up; two row shapes were mixed in one
   list; and about 40% of the width was empty. One row shape here, full width, and the
   only thing that moves between rows is the words.

   Built at 390 first, because that is where nearly everybody is. */
.cb-wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }

.cb-head h1 { font-size: 28px; font-weight: 700; color: var(--geo-text); margin: 0; letter-spacing: -.01em; }
.cb-head p  { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--geo-text2); max-width: 62ch; }

/* ── Nothing here yet ─────────────────────────────────────────────────────── */
.cb-none {
  margin-top: 24px; padding: 48px 24px; text-align: center;
  background: var(--geo-surface); border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-card);
}
.cb-none-t { font-size: 17px; font-weight: 600; color: var(--geo-text); margin: 0 0 8px; }
.cb-none p:last-child { margin: 0 auto; max-width: 46ch; color: var(--geo-muted); font-size: 14px; line-height: 1.6; }

/* ── The filter along the top ─────────────────────────────────────────────── */
.cb-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 4px; }
.cb-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--geo-ctrl-h); padding: 0 14px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--geo-text2); background: var(--geo-surface);
  border: 1px solid var(--geo-border); border-radius: 999px;
  cursor: pointer; transition: border-color var(--geo-dur) var(--geo-ease), color var(--geo-dur) var(--geo-ease);
}
.cb-chip i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--geo-muted); font-size: 13px; }
.cb-chip:hover { border-color: var(--geo-border2); color: var(--geo-text); }
.cb-chip.is-on {
  color: var(--geo-brand-ink); background: var(--geo-brand); border-color: var(--geo-brand); font-weight: 600;
}
.cb-chip.is-on i { color: var(--geo-brand-ink); opacity: .75; }
.cb-scope { margin: 8px 0 0; font-size: 13px; color: var(--geo-muted); }

/* ── One client ───────────────────────────────────────────────────────────── */
.cb-group { margin-top: 28px; }
.cb-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cb-group-head h2 {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--geo-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-group-head a { font-size: 13px; color: var(--geo-accent); text-decoration: none; white-space: nowrap; }
.cb-group-head a:hover { text-decoration: underline; }

.cb-list {
  background: var(--geo-surface); border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-card); overflow: hidden;
}

/* ── One row. Every row is this shape ─────────────────────────────────────── */
.cb-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  width: 100%; padding: 14px 16px; text-decoration: none;
  border-top: 1px solid var(--geo-border);
  transition: background var(--geo-dur) var(--geo-ease);
}
.cb-row:first-child { border-top: 0; }
a.cb-row:hover { background: var(--geo-surface2); }
a.cb-row:hover .cb-row-go { color: var(--geo-accent); }
.cb-row.is-shut { cursor: default; }
.cb-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cb-row-title { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--geo-text); }
.cb-row.is-shut .cb-row-title { color: var(--geo-text2); font-weight: 500; }
.cb-row-meta { font-size: 13px; color: var(--geo-muted); }
.cb-row-missing { font-size: 13px; color: var(--geo-warn-ink); }
.cb-row-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cb-row-go { font-size: 13px; color: var(--geo-muted); white-space: nowrap; }

/* ── The state, as a tinted pill ──────────────────────────────────────────── */
.cb-pill {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
}
.cb-pill[data-tone="go"]    { color: var(--geo-accent); background: color-mix(in oklab, var(--geo-accent) 15%, var(--geo-bg)); }
.cb-pill[data-tone="good"]  { color: var(--geo-good-ink); background: color-mix(in oklab, var(--geo-good) 15%, var(--geo-bg)); }
.cb-pill[data-tone="warn"]  { color: var(--geo-warn-ink); background: color-mix(in oklab, var(--geo-warn) 15%, var(--geo-bg)); }
.cb-pill[data-tone="busy"]  { color: var(--geo-second); background: color-mix(in oklab, var(--geo-second) 15%, var(--geo-bg)); }
.cb-pill[data-tone="quiet"] { color: var(--geo-muted); background: var(--geo-surface2); }

.cb-empty-filter { margin: 24px 0 0; text-align: center; color: var(--geo-muted); font-size: 14px; }

.cb-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.cb-pager a { font-size: 14px; color: var(--geo-text2); text-decoration: none; padding: 8px 4px; }
.cb-pager a:hover { color: var(--geo-accent); }
.cb-pager-at { font-size: 13px; color: var(--geo-muted); }

/* ── On a phone the pill and the date go under the title, not beside it ───── */
@media (max-width: 640px) {
  .cb-wrap { padding: 20px 16px 56px; }
  .cb-head h1 { font-size: 24px; }
  .cb-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 16px; }
  .cb-row-right { justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; flex-shrink: 1; min-width: 0; }
  .cb-row-go, .cb-row-again { white-space: normal; }
  .cb-chip { min-height: 40px; }
  .cb-group-head { flex-wrap: wrap; }
}

/* On a wide screen the title can run long without pushing the pill off the row. */
@media (min-width: 641px) {
  .cb-row-main { flex: 1 1 auto; }
  .cb-row-title { overflow-wrap: anywhere; }
  .cb-row-right { min-width: 190px; justify-content: flex-end; }
}
/* A row that went wrong still leads somewhere. */
.cb-row-again { font-size: 13px; color: var(--geo-accent); text-decoration: none; white-space: nowrap; }
.cb-row-again:hover { text-decoration: underline; }

/* ══ SEARCH AND "SHOW MORE" FOR A CARD LIST ══════════════════════════════════
   Written by geo-cards.js. /clients rendered 104 client cards on a phone with no
   search and no paging - 24,172 pixels, about 29 screens. */
.gc-bar { margin-bottom: 12px; }
.gc-search {
  width: 100%; min-height: 44px; padding: 0 14px;
  font: inherit; font-size: 16px;                 /* 16px or a phone zooms on focus */
  color: var(--geo-text); background: var(--geo-surface);
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-ctrl);
}
.gc-search::placeholder { color: var(--geo-muted); }
.gc-search:focus { outline: none; border-color: var(--geo-accent); }
.gc-count { margin: 8px 0 0; font-size: 13px; color: var(--geo-muted); }
.gc-more {
  display: block; width: 100%; min-height: 44px; margin-top: 12px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--geo-text); background: var(--geo-surface);
  border: 1px solid var(--geo-border2); border-radius: var(--geo-r-ctrl);
  cursor: pointer;
}
.gc-more:hover { border-color: var(--geo-accent); color: var(--geo-accent); }

/* The line under "Scan the next 25 pages" - what it will do, and what happened after. */
.ta-pages-note {
  margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--geo-muted);
  max-width: 62ch;
}

/* The way out of a finding: "We can do this for you", beside "Add to tasks".
   Same metrics as .ta-task so the two read as one row of choices - but this one is
   the TEAL filled button, because it is the one action on the card and Add to tasks
   is the quieter alternative. Quote is quieter still: it is what we say when nothing
   the agency offers fits yet. */
.ta-fixer {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--geo-brand); border-radius: var(--geo-r-ctrl);
  background: var(--geo-brand); color: var(--geo-brand-ink);
}
.ta-fixer:hover { filter: brightness(1.08); }
.ta-fixer:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 2px; }
.ta-fixer-quote { background: transparent; color: var(--geo-accent); }
.ta-fixer-quote:hover { filter: none; background: rgba(20, 184, 166, .12); }
@media (max-width: 767px) { .ta-fixer { min-height: 44px; width: 100%; justify-content: center; } }

/* ── Roast my site: the paid opinion, under the free check ─────────────────
   Teal is the one action, so the button wears it and nothing else here does. The points
   are tinted by the route, matching the three doors used everywhere else. */
.cv-roast-offer { margin-top: 18px; padding: 18px; border: 1px dashed var(--geo-border2);
  border-radius: var(--geo-r-card); text-align: center; }
.cv-roast-lede { margin: 0 0 12px; font-size: 15px; color: var(--geo-text); }

/* ── What is this page for ────────────────────────────────────────────────────
   The offer box is centred, and a list of choices centred is unreadable - the eye has no
   left edge to come back to. So this block goes back to left-aligned inside it, sits on
   its own surface, and keeps the whole thing feeling like one card rather than a form
   bolted underneath an advert.
   The question is already answered from the page we just read, so most people will glance
   at it and press. It is a confirmation, not an interview, and it is styled like one. */
.cv-goal { margin: 0 0 16px; padding: 14px 16px; text-align: left;
  background: var(--geo-surface2); border-radius: var(--geo-r-card); }
/* HOW WE READ THE PAGE, as a sentence they can correct. It replaced a heading
   ("What should this page make someone do?"), five visible radios and a line admitting we
   had pre-ticked one - six things, in front of one button. A statement plus one quiet way
   to disagree does the same job in one line. */
.cv-goal-read { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--geo-text); }

/* "Not right?" is a text button, not a button-shaped button. It sits inside a sentence, so
   anything with a background or a border would read as the main action - and the main action
   on this block is Roast it. Teal is the one action colour, so it borrows that and nothing
   else. */
.cv-goal-fix { padding: 0; border: 0; background: none; font: inherit; font-size: 13px;
  color: var(--geo-accent); text-decoration: underline; cursor: pointer; }
.cv-goal-fix:hover { text-decoration: none; }
.cv-goal-fix:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 2px;
  border-radius: 2px; }

/* The choices, once somebody has said we got it wrong. Hidden by the `hidden` attribute, so
   the checked radio still reaches the server while it is folded away. */
.cv-goal-pick { margin: 10px 0 12px; }

.cv-goal-row { display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  font-size: 13px; color: var(--geo-text2); cursor: pointer; min-height: 32px; }
.cv-goal-row input { accent-color: var(--geo-accent); width: 16px; height: 16px; flex: none; }
.cv-goal-row:hover { color: var(--geo-text); }
.cv-goal textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit;
  font-size: 13px; line-height: 1.5; color: var(--geo-text); background: var(--geo-surface);
  border: 1px solid var(--geo-border2); border-radius: var(--geo-r-ctrl); resize: vertical; }
.cv-goal textarea:focus { outline: 2px solid var(--geo-accent); outline-offset: 1px;
  border-color: var(--geo-accent); }
.cv-goal-link { margin: 10px 0 0; font-size: 12px; color: var(--geo-muted, var(--geo-second)); }
.cv-goal-link a { color: var(--geo-accent); text-decoration: none; }
.cv-goal-link a:hover { text-decoration: underline; }
/* On a phone the choices need the whole width and a bigger target. 97% are on one. */
@media (max-width: 767px) {
  .cv-goal { padding: 12px; }
  .cv-goal-row { min-height: 40px; font-size: 14px; }
  /* "Not right?" sits inside a sentence, so it cannot have a 44px box without breaking the
     line. Padding grows the target in both directions instead, and the negative margin keeps
     the sentence spacing it had. It is a small target either way - the cost of putting it in
     the sentence rather than on its own row, which is the right trade because the sentence is
     the point and the correction is the exception. */
  .cv-goal-fix { padding: 8px 4px; margin: -8px -4px; font-size: 14px; }
}
.cv-roast-go { min-height: 44px; padding: 0 20px; font: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid var(--geo-brand); border-radius: var(--geo-r-ctrl);
  background: var(--geo-brand); color: var(--geo-brand-ink); cursor: pointer; }
.cv-roast-go:hover { filter: brightness(1.08); }
.cv-roast-go:disabled { opacity: .7; cursor: progress; }
.cv-roast-note { margin: 10px 0 0; font-size: 12px; color: var(--geo-second); }

.cv-roast { margin-top: 18px; }
.cv-roast-verdict { margin: 0 0 14px; font-size: 18px; font-weight: 600; line-height: 1.4;
  color: var(--geo-text); }
.cv-roast-point { padding: 14px 16px; margin-bottom: 10px; border-radius: var(--geo-r-card);
  border: 1px solid var(--geo-border2); border-left-width: 3px; }
.cv-roast-point h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
/* The one witty line, under the name. docs/roast-flow.md: "Name first, joke second. The card
   title says what it is. The roast line sits underneath. A joke never replaces the name." */
.cv-roast-line { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--geo-text);
  font-style: italic; }

/* Their words and ours, side by side, when the finding is about writing. The replacement is the
   one they act on, so it is the one that reads as text rather than as a quote. */
.cv-roast-now, .cv-roast-try { margin: 8px 0 0; font-size: 13px; line-height: 1.5; }
.cv-roast-now { color: var(--geo-second); text-decoration: line-through;
  text-decoration-color: var(--geo-border2); }
.cv-roast-try { color: var(--geo-text); }
.cv-roast-now strong, .cv-roast-try strong { text-decoration: none; color: var(--geo-muted, var(--geo-second));
  font-weight: 600; }

/* What's working. It was being thrown away - a roast that only says what is wrong is harder to
   read than it needs to be, and these are the lines that make it feel like a review. */
.cv-roast-good { margin: 16px 0 0; padding: 13px 15px; border-radius: var(--geo-r-card);
  background: var(--geo-surface2); }
.cv-roast-good h4 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--geo-text); }
.cv-roast-good-row { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--geo-second); }
.cv-roast-good-row:last-child { margin-bottom: 0; }
.cv-roast-good-row strong { color: var(--geo-text); font-weight: 600; }

.cv-roast-seen { margin: 0 0 6px; font-size: 13px; color: var(--geo-second); }
.cv-roast-why { margin: 0 0 8px; font-size: 13px; color: var(--geo-second); }
.cv-roast-do { margin: 0; font-size: 13px; }
/* Take it away. Quiet - it is the other route out, not the one we are selling - but it
   has a real target size, because half the people who want it are on a phone. */
.cv-take { margin: 14px 0 0; text-align: center; }
.cv-download { display: inline-block; min-height: 40px; line-height: 40px; padding: 0 14px;
  font-size: 13px; color: var(--geo-accent); text-decoration: none; }
.cv-download:hover { text-decoration: underline; }
/* THE RULE BEHIND THE FIX. Quieter than the action and set apart from it, because it is
   the thing they keep rather than the thing they do today. A left rule and a little space
   so the eye can skip it on the first read and find it on the second. */
.cv-roast-rule { margin: 8px 0 0; padding-left: 10px; font-size: 12px; line-height: 1.5;
  color: var(--geo-muted, var(--geo-second)); border-left: 2px solid var(--geo-border2); }
.cv-roast-diy  { border-left-color: var(--geo-second); }
.cv-roast-ai   { border-left-color: var(--geo-accent); }
.cv-roast-team { border-left-color: var(--geo-warn, #eab308); }
@media (max-width: 767px) { .cv-roast-go { width: 100%; } }

/* ═══ ROAST MY SITE · Set up ══════════════════════════════════════════════════
   docs/roast-flow.md §1, built to the prototype's structure on Geophii's own tokens rather
   than the prototype's palette - it is one app, and a screen that brings its own colours reads
   as a bolted-on page. Sizes, spacing and the shape of every control follow the demo.
   Mobile first: 97% of people are on a phone, so the one-column stack is the base and the
   wider layout is the override. */
.rm-setup { display: flex; flex-direction: column; gap: 28px; max-width: 40rem;
  font-size: 16px; }
.rm-head { display: flex; flex-direction: column; }
.rm-eyebrow { margin: 0 0 10px; font-family: var(--geo-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--geo-accent); }
.rm-h1 { margin: 0; font-size: clamp(28px, 5vw, 40px); line-height: 1.1; font-weight: 700;
  letter-spacing: -.02em; color: var(--geo-text); text-wrap: balance; max-width: 18em; }

.rm-form { display: flex; flex-direction: column; gap: 22px; }
.rm-field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0;
  min-width: 0; }
.rm-field > label, .rm-field > legend { padding: 0; font-size: 15px; font-weight: 600;
  color: var(--geo-text); }
.rm-opt { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--geo-muted); }
.rm-hint { margin: 0; font-size: 14px; color: var(--geo-muted); }

.rm-field input[type="url"], .rm-field textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 16px;
  color: var(--geo-text); background: var(--geo-surface); border: 1px solid var(--geo-border2);
  border-radius: 10px; }
.rm-field textarea { resize: vertical; min-height: 3.2em; line-height: 1.5; }
.rm-field input::placeholder, .rm-field textarea::placeholder { color: var(--geo-muted); }
.rm-field input:focus, .rm-field textarea:focus { outline: 2px solid var(--geo-accent);
  outline-offset: 1px; border-color: var(--geo-accent); }

/* Chips, not radios in a list. One tap, and the whole pill is the target. */
.rm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.rm-chip { display: inline-block; }
.rm-chip input { position: absolute; opacity: 0; pointer-events: none; }
/* Measured against the prototype at 390px: mine came out 60px tall against its 43px. The
   min-height and the line-height I had added were both fighting the padding, and padding on
   its own is all the demo uses. A chip that tall reads as a button, and five buttons in a row
   is a different screen. */
.rm-chip span { display: inline-block; padding: 9px 15px; border-radius: 99px;
  border: 1px solid var(--geo-border2); background: var(--geo-surface);
  font-size: 15px; font-weight: 500; color: var(--geo-text2); cursor: pointer; }
.rm-chip input:checked + span { background: var(--geo-accent-soft);
  border-color: var(--geo-accent); color: var(--geo-text); }
.rm-chip input:focus-visible + span { outline: 2px solid var(--geo-accent); outline-offset: 2px; }

.rm-rowcard { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  justify-content: space-between; padding: 14px 16px; background: var(--geo-surface);
  border: 1px solid var(--geo-border2); border-radius: 12px; }
.rm-rowcard strong { font-weight: 600; color: var(--geo-text); }
/* INLINE, so "Want it sharper? Check what we know about the business." is one sentence that
   wraps, not two stacked lines. Mine had display:block and read as a heading with a caption
   under it - a different shape from the demo, from one word of CSS.
   The walkthrough toggle gets its line break from its own `strong`, which is block there on
   purpose, so both places read the way the prototype does. */
.rm-sub { font-size: 15px; color: var(--geo-text2); }
.rm-linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--geo-accent); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; }
.rm-linkbtn:hover { text-decoration: none; }

.rm-toggle { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start;
  padding: 14px 16px; background: var(--geo-surface); border: 1px solid var(--geo-border2);
  border-radius: 12px; cursor: pointer; }
.rm-toggle input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--geo-accent); }
.rm-toggle strong { display: block; font-weight: 600; color: var(--geo-text); }
.rm-price-tag { padding-top: 2px; font-family: var(--geo-mono, ui-monospace, monospace);
  font-size: 13px; color: var(--geo-text2); white-space: nowrap; }

.rm-getbox { display: flex; flex-direction: column; gap: 8px; }
.rm-getlabel { margin: 0; font-family: var(--geo-mono, ui-monospace, monospace); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--geo-muted); }
.rm-gets { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 6px 18px;
  font-size: 15px; color: var(--geo-text2); }
.rm-gets li::before { content: "\2713"; margin-right: 8px; font-weight: 800;
  color: var(--geo-accent); }

.rm-gorow { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.rm-go { padding: 14px 22px; border: 0; border-radius: var(--geo-r-ctrl); font: inherit; font-size: 16px;
  font-weight: 600; background: var(--geo-brand); color: var(--geo-brand-ink);
  cursor: pointer; min-height: 52px; }
.rm-go:hover { filter: brightness(1.08); }
.rm-go:disabled { opacity: .7; cursor: progress; }
.rm-bal { font-size: 14px; color: var(--geo-muted); }
/* Not enough credits is a fact they act on, so it reads as one rather than as an error. */
.rm-bal.short { color: var(--geo-warn, #d7a75c); font-weight: 600; }

@media (max-width: 767px) {
  .rm-setup { gap: 24px; }
  .rm-go { width: 100%; }
  .rm-gets { grid-template-columns: 1fr; }
}

/* ═══ ROAST MY SITE · Working, the report, the popup ═════════════════════════════
   docs/roast-prototype.html, on Geophii's tokens. Muted text is the grey (--geo-muted), never
   the lavender: at phone width the lavender read as a link on every line of a finding. */
.rm-note { display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--geo-warn); border-radius: 12px;
  background: var(--geo-surface); color: var(--geo-text); font-size: 15px; }
.rm-note[hidden] { display: none; }
.rm-note p { margin: 0; }

.rm-work { display: flex; flex-direction: column; gap: 24px; max-width: 34rem; font-size: 16px; }
.rm-work[hidden], .rm-report[hidden], .rm-setup[hidden] { display: none; }
.rm-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rm-steps li { display: flex; gap: 12px; align-items: center; color: var(--geo-muted); }
.rm-dot { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--geo-border2); display: grid; place-items: center;
  font-size: 12px; font-weight: 800; }
.rm-steps li.now { color: var(--geo-text); }
.rm-steps li.now .rm-dot { border-color: var(--geo-accent); border-top-color: transparent;
  animation: rm-spin .8s linear infinite; }
.rm-steps li.done { color: var(--geo-text2); }
.rm-steps li.done .rm-dot { background: var(--geo-brand); border-color: var(--geo-brand);
  color: var(--geo-brand-ink); }
@keyframes rm-spin { to { transform: rotate(360deg); } }
.rm-bar { height: 6px; border-radius: 99px; background: var(--geo-border2); overflow: hidden; }
.rm-bar span { display: block; height: 100%; width: 0; background: var(--geo-accent);
  transition: width .5s ease; }
.rm-quip { margin: 0; font-size: 18px; font-weight: 500; min-height: 1.6em; color: var(--geo-text); }

.rm-report { display: flex; flex-direction: column; gap: 32px; font-size: 16px; }
.rm-h2 { margin: 0 0 14px; font-family: var(--geo-mono, ui-monospace, monospace); font-size: 13px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--geo-muted); }
.rm-scorerow { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-end; }
.rm-score { display: flex; align-items: baseline; gap: 2px; font-weight: 700; font-family: var(--geo-font-head); letter-spacing: -.03em; }
.rm-n { font-size: clamp(64px, 12vw, 96px); line-height: .9; font-variant-numeric: tabular-nums; }
.rm-n.good, .rm-n.up { color: var(--geo-good); }
.rm-n.teal { color: var(--geo-accent); }
.rm-n.warn { color: var(--geo-warn); }
.rm-n.bad { color: var(--geo-bad); }
.rm-of { font-size: 22px; font-weight: 600; color: var(--geo-muted); }
.rm-was { margin-right: 10px; font-size: clamp(36px, 7vw, 52px); font-weight: 700;
  color: var(--geo-muted); text-decoration: line-through; }
.rm-arrow { margin-right: 10px; font-size: clamp(28px, 5vw, 40px); font-weight: 600; color: var(--geo-muted); }
.rm-verdict { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; min-width: 0; }
.rm-pill { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 99px;
  font-family: var(--geo-mono, ui-monospace, monospace); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; }
.rm-pill.bad  { background: color-mix(in srgb, var(--geo-bad) 14%, transparent); color: var(--geo-bad-ink); }
.rm-pill.warn { background: color-mix(in srgb, var(--geo-warn) 14%, transparent); color: var(--geo-warn-ink); }
.rm-pill.good { background: color-mix(in srgb, var(--geo-good) 14%, transparent); color: var(--geo-good-ink); }
.rm-pill.teal { background: color-mix(in srgb, var(--geo-accent) 14%, transparent); color: var(--geo-accent); }
.rm-goalline { margin: 0; font-size: 14px; color: var(--geo-muted); overflow-wrap: anywhere; }
.rm-oneliner { margin: 0; max-width: 24em; font-size: clamp(22px, 3.6vw, 30px); font-weight: 700;
  line-height: 1.25; letter-spacing: -.015em; color: var(--geo-text); text-wrap: balance; }

.rm-findings { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rm-finding { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px;
  background: var(--geo-surface); border: 1px solid var(--geo-border2); border-radius: 14px; }
.rm-f-head { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.rm-f-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--geo-text); }
.rm-f-head .rm-pill { margin-left: auto; }
.rm-num { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: grid;
  place-items: center; font-size: 12px; font-weight: 800; background: var(--geo-bad); color: #fff; }
.rm-num.warn { background: var(--geo-warn); color: #1d1402; }
.rm-roast { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--geo-text);
  text-wrap: pretty; }
.rm-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 15px; }
.rm-facts dt { padding-top: 3px; font-family: var(--geo-mono, ui-monospace, monospace); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--geo-muted); white-space: nowrap; }
.rm-facts dd { margin: 0; color: var(--geo-text2); }
.rm-rewrite { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; padding: 12px 14px;
  background: var(--geo-surface2); border: 1px solid var(--geo-border2); border-radius: 10px; }
.rm-rw-k { padding-top: 3px; font-family: var(--geo-mono, ui-monospace, monospace); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--geo-muted); }
.rm-rewrite p { margin: 0; }
.rm-rw-now { color: var(--geo-muted); text-decoration: line-through; text-decoration-color: var(--geo-bad); }
.rm-rw-try { color: var(--geo-text); font-weight: 600; }
.rm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rm-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 15px;
  border-radius: 10px; border: 1px solid var(--geo-border2); background: transparent;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--geo-text); text-decoration: none;
  cursor: pointer; }
.rm-btn:hover { border-color: var(--geo-muted); }
.rm-btn.rm-solid { background: var(--geo-brand); border-color: var(--geo-brand); color: var(--geo-brand-ink); }
.rm-btn[aria-pressed="true"] { border-color: var(--geo-good); color: var(--geo-good-ink); }
/* The app paints every link in .main-content lavender, with selectors specific enough to beat
   .rm-btn. A link that is a button here keeps the button's colours; the tab's id outranks them. */
#site-tab-conversion a.rm-btn { color: var(--geo-text); text-decoration: none; }
#site-tab-conversion a.rm-btn.rm-solid { color: var(--geo-brand-ink); }

.rm-details { padding: 4px 18px; background: var(--geo-surface); border: 1px solid var(--geo-border2);
  border-radius: 14px; }
.rm-details summary { padding: 12px 0; font-size: 17px; font-weight: 700; color: var(--geo-text); cursor: pointer; }
.rm-details[open] summary { margin-bottom: 10px; border-bottom: 1px solid var(--geo-border2); }
.rm-minis { display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; }
.rm-mini { display: flex; flex-direction: column; gap: 6px; }
.rm-mini + .rm-mini { padding-top: 16px; border-top: 1px solid var(--geo-border2); }
.rm-mini .rm-f-head h3 { font-size: 16px; }
.rm-working { list-style: none; margin: 0; padding: 0 0 14px; display: flex; flex-direction: column; gap: 10px; }
.rm-working li { display: flex; gap: 10px; align-items: baseline; color: var(--geo-text2); }
.rm-working b { font-weight: 600; color: var(--geo-text); }
.rm-tick { font-weight: 800; color: var(--geo-good); }

.rm-choice { display: flex; flex-direction: column; gap: 14px; }
.rm-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 14px; }
.rm-opt-card { display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: var(--geo-surface); border: 1px solid var(--geo-border2); border-radius: 14px; }
.rm-opt-card h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--geo-text); }
.rm-body { margin: 0; font-size: 15px; color: var(--geo-text2); }
.rm-todo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rm-todo label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--geo-border2); border-radius: 10px; color: var(--geo-text); cursor: pointer; }
.rm-todo input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--geo-accent); }
.rm-todo input:checked + span { text-decoration: line-through; color: var(--geo-muted); }
.rm-again { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
  justify-content: space-between; padding: 14px 16px; border: 1px dashed var(--geo-border2); border-radius: 14px; }
.rm-again p { margin: 0; max-width: 34em; color: var(--geo-text2); }
.rm-again strong { color: var(--geo-text); }

/* The page on a phone, beside the findings (stacked on a phone), as in the prototype. */
.rm-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; align-items: start; }
.rm-shot { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rm-cap { margin: 0; max-width: 15em; font-size: 13px; text-align: center; color: var(--geo-muted); }
.rm-phone { width: 240px; max-width: 100%; aspect-ratio: 390 / 844; padding: 10px; border-radius: 32px;
  background: #040606; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.rm-screen { position: relative; height: 100%; overflow: hidden; border-radius: 23px; background: #fff; }
.rm-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rm-pin { position: absolute; width: 28px; height: 28px; min-height: 0; padding: 0; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; background: #d2402e;
  color: #fff; font: 800 13px/1 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer; }
.rm-pin.warn { background: #e3a52a; color: #1d1402; }
.rm-pin-tag { position: absolute; transform: translate(-50%, 0); padding: 2px 6px; border-radius: 4px;
  border: 1px dashed #d2402e; background: #fff; color: #2b2621; font: 700 10px/1.4 system-ui, sans-serif;
  white-space: nowrap; }
.rm-finding, .rm-mini { scroll-margin-top: 80px; }
.rm-flash { animation: rm-flash 1.2s ease; }
@keyframes rm-flash { 0%, 40% { border-color: var(--geo-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--geo-accent) 25%, transparent); } }

.rm-walk { display: flex; flex-direction: column; gap: 14px; }
.rm-walk .rm-h2 { margin: 0; }
.rm-walk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  align-items: end; }
.rm-wstep { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.rm-wstep p { margin: 0; max-width: 16em; font-size: 15px; color: var(--geo-text2); }
.rm-wstep-n { font-family: var(--geo-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--geo-muted); }
.rm-phone-mini { width: 130px; padding: 6px; border-radius: 18px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.rm-phone-mini .rm-screen { border-radius: 13px; }

.rm-upgrade { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px;
  border: 1px solid var(--geo-accent); border-radius: 14px;
  background: color-mix(in srgb, var(--geo-accent) 12%, transparent); }
.rm-upgrade h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--geo-text); }
.rm-traffic-card { margin-top: 4px; }
.rm-traffic-card.is-hold { border-color: var(--geo-warn);
  background: color-mix(in srgb, var(--geo-warn) 10%, transparent); }
.rm-traffic-card.is-active { border-color: var(--geo-good);
  background: color-mix(in srgb, var(--geo-good) 10%, transparent); }
.rm-traffic-card .rm-eyebrow { margin: 0; }

/* Fix this for me: the popup's list, the status at the top of the report, "We fix it". */
.rm-fix-step { display: flex; flex-direction: column; gap: 14px; }
.rm-fix-step[hidden] { display: none; }
.rm-fixlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rm-fixlist label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--geo-border2); border-radius: 10px; color: var(--geo-text); }
.rm-fixlist label.hl { border-color: var(--geo-accent); background: color-mix(in srgb, var(--geo-accent) 12%, transparent); }
.rm-fixlist input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--geo-accent); }
.rm-fix-err { margin: 0; color: var(--geo-bad-ink); font-weight: 600; }
.rm-status { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--geo-accent); background: color-mix(in srgb, var(--geo-accent) 12%, transparent); color: var(--geo-text); }
.rm-status[hidden] { display: none; }
.rm-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px;
  color: var(--geo-muted); }
.rm-track li::before { content: "\25CB"; margin-right: 6px; }
.rm-track li.done { color: var(--geo-text2); }
.rm-track li.done::before { content: "\2713"; color: var(--geo-good); font-weight: 800; }
.rm-track li.now { color: var(--geo-text); font-weight: 600; }
.rm-track li.now::before { content: "\25CF"; color: var(--geo-accent); }
.rm-opt-card.rm-pick { border-color: var(--geo-accent); }

/* Impact bars: what a fix does for the business (RoastImpact). One calm fill, a tick when a
   lane is full. The motion is the reward, so it is short and it respects reduced motion. */
.rm-imp { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--geo-border2); background: color-mix(in srgb, var(--geo-accent) 5%, transparent); }
.rm-imp:empty { display: none; }
.rm-imp-h { margin: 0; font-size: 13px; font-weight: 650; color: var(--geo-text2); }
.rm-imp-row { --c: var(--geo-accent); display: flex; flex-direction: column; gap: 0; }
.rm-imp-row[data-lane="trust"]   { --c: #e0a93b; }
.rm-imp-row[data-lane="clarity"] { --c: #8f8cf5; }
.rm-imp-row[data-lane="speed"]   { --c: #4ea8f0; }
.rm-imp-top { display: grid; grid-template-columns: 9.8rem minmax(48px, 1fr) 20px; align-items: center; gap: 10px; }
.rm-imp-name { font-size: 14.5px; font-weight: 650; color: var(--geo-text); white-space: nowrap; }
.rm-imp-tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  font-weight: 800; color: #06201f; background: var(--c); opacity: 0; transform: scale(.4);
  transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.rm-imp-row.full .rm-imp-tick { opacity: 1; transform: scale(1); }
.rm-imp-line { margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--geo-muted); max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s ease, opacity .35s ease, margin .35s ease; }
.rm-imp-row.full .rm-imp-line { max-height: 3.2em; opacity: 1; margin-top: 3px; }
.rm-imp-bar { height: 8px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--geo-text) 10%, transparent); }
.rm-imp-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c);
  transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.rm-imp-say { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--geo-text); }
/* On the report's status box: part-way and gently moving while we work, full when live. */
.rm-imp-status { background: transparent; border-color: color-mix(in srgb, var(--geo-accent) 35%, transparent); }
.rm-imp-status:not(.is-live) .rm-imp-fill { background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,.28) 50%, transparent 100%);
  background-size: 200% 100%; animation: rm-imp-shimmer 2.4s linear infinite; }
.rm-imp-status.is-live .rm-imp-fill { transition-duration: 1.1s; }
@keyframes rm-imp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.rm-imp-tag { margin: 0; align-self: flex-start; font-size: 13px; font-weight: 650; padding: 3px 10px; border-radius: 99px;
  color: color-mix(in srgb, var(--c) 72%, var(--geo-text)); background: color-mix(in srgb, var(--c) 14%, transparent);
  --c: var(--geo-accent); }
.rm-imp-tag.lane-trust   { --c: #e0a93b; }
.rm-imp-tag.lane-clarity { --c: #8f8cf5; }
.rm-imp-tag.lane-speed   { --c: #4ea8f0; }
.rm-imp-dot { flex: 0 0 auto; width: 10px; height: 10px; margin: 6px 0 0 auto; border-radius: 50%; background: var(--geo-accent); }
.rm-imp-dot.lane-trust   { background: #e0a93b; }
.rm-imp-dot.lane-clarity { background: #8f8cf5; }
.rm-imp-dot.lane-speed   { background: #4ea8f0; }
.rm-imp-name::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%;
  background: var(--c); vertical-align: 0; }
@media (prefers-reduced-motion: reduce) {
  .rm-imp-fill, .rm-imp-tick, .rm-imp-line { transition: none; }
  .rm-imp-status .rm-imp-fill { animation: none; }
}
.rm-wefix-count { margin: 0; font-weight: 600; color: var(--geo-text); }

.rm-scrim { position: fixed; inset: 0; z-index: 10000; /* over the help dock (9969) as well as the phone bar */ display: grid; place-items: center; padding: 16px;
  background: rgba(3, 6, 6, .62); }
.rm-scrim[hidden] { display: none; }
.rm-modal { width: 100%; max-width: 34rem; max-height: calc(100% - 32px); overflow: auto;
  display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 18px;
  background: var(--geo-surface); border: 1px solid var(--geo-border2); color: var(--geo-text); }
.rm-modal h3 { margin: 0; font-size: 22px; font-weight: 700; }
.rm-modal-body, .rm-modal-wait { margin: 0; color: var(--geo-text2); }
.rm-traffic-modal { max-width: 48rem; }
#rm-traffic-ask, #rm-traffic-status { display: flex; flex-direction: column; gap: 16px; }
#rm-traffic-ask[hidden], #rm-traffic-status[hidden] { display: none; }
.rm-traffic-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin: 0; overflow: hidden; border: 1px solid var(--geo-border2); border-radius: 12px;
  background: var(--geo-border2); }
.rm-traffic-facts div { min-width: 0; padding: 12px; background: var(--geo-surface); }
.rm-traffic-facts dt { margin-bottom: 4px; color: var(--geo-muted); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; }
.rm-traffic-facts dd { margin: 0; overflow-wrap: anywhere; color: var(--geo-text); font-weight: 600; }
.rm-traffic-included { margin: 0; color: var(--geo-text); }
.rm-traffic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: -6px 0 0; padding: 0; }
.rm-traffic-fields { display: grid; grid-template: "audience budget" auto "audience goal" auto / minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; }
.rm-traffic-audience { grid-area: audience; }
.rm-traffic-budget-field { grid-area: budget; }
.rm-traffic-goal-field { grid-area: goal; }
.rm-traffic-fields label { display: grid; gap: 5px; color: var(--geo-text); font-size: 13px; font-weight: 650; }
.rm-traffic-fields textarea, .rm-traffic-fields input, .rm-traffic-fields select {
  width: 100%; border: 1px solid var(--geo-border2); border-radius: 10px; padding: 10px 12px;
  background: var(--geo-bg); color: var(--geo-text); font: inherit; font-weight: 400; }
.rm-traffic-fields textarea:focus, .rm-traffic-fields input:focus, .rm-traffic-fields select:focus {
  border-color: var(--geo-accent); outline: 2px solid color-mix(in srgb, var(--geo-accent) 24%, transparent); }
.rm-traffic-fields small { color: var(--geo-muted); font-weight: 400; line-height: 1.4; }
.rm-money-input { position: relative; }
.rm-money-input > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--geo-muted); }
.rm-money-input input { padding-left: 26px; }
.rm-traffic-audience textarea { min-height: 118px; height: 100%; resize: vertical; }
#rm-traffic-form { margin: 0; }
.rm-biz-frame { width: 100%; height: calc(100dvh - 300px); min-height: 280px; border: 1px solid var(--geo-border2);
  border-radius: 10px; background: #fff; }
.rm-row-end { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rm-toast { position: fixed; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  z-index: 10001; width: fit-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 10px 16px;
  border-radius: 10px; background: var(--geo-text); color: var(--geo-surface); font-size: 15px; font-weight: 600; }
.rm-toast[hidden] { display: none; }

/* A new screen scrolls to the tab's top; on a phone the fixed 64px header must not sit on it. */
#site-tab-conversion { scroll-margin-top: 16px; }
@media (max-width: 1023px) {
  .rm-split { grid-template-columns: 1fr; }
  .rm-shot { position: static; justify-self: center; }
}
@media (max-width: 767px) {
  #site-tab-conversion { scroll-margin-top: 80px; }
  /* At the top on a phone, under the fixed header: the bottom already holds the phone bar and
     the help dock, and a toast there landed on top of them. */
  .rm-toast { top: calc(env(safe-area-inset-top, 0px) + 76px); bottom: auto; }
  .rm-modal { padding: 16px; }
  .rm-traffic-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-traffic-list { grid-template-columns: 1fr; }
  .rm-traffic-fields { grid-template: none; grid-template-columns: 1fr; }
  .rm-traffic-audience, .rm-traffic-budget-field, .rm-traffic-goal-field { grid-area: auto; }
  .rm-traffic-audience textarea { min-height: 88px; }
}
@media (max-width: 520px) {
  .rm-facts, .rm-rewrite { grid-template-columns: 1fr; }
  .rm-facts dd { margin-bottom: 6px; }
  .rm-traffic-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-flash { animation: none; }
  .rm-steps li.now .rm-dot { animation: none; border-top-color: var(--geo-accent); }
  .rm-bar span { transition: none; }
}

/* ── The navy ground (25 Sep 2026, Edward's colours; "you decide what's best") ─────────
   The dark theme's ground moves from near-black to a deep navy (#0F1827) with #121B28 cards,
   and the sidebar on the same navy (Edward, 25 Sep: "change the black to the same background
   as the chat"), set apart by its hairline; the accents stay exactly as they are - so the app
   and the chat read as one surface. The old black is
   one attribute away: <html data-palette="classic">. */
html[data-theme="dark"]:not([data-palette="classic"]) {
  --geo-bg:       #0F1827;
  --geo-panel:    #0F1827;
  --geo-surface:  #121B28;
  --geo-surface2: #1A2432;
  --geo-border:   #1D2736;
  --geo-border2:  #3B424D;
}

/* ── The help button, one pill (25 Sep 2026) ──────────────────────────────────────
   Edward: "the support chat, the layout and button is not right". It was three loose
   pieces - the green launcher, a small tag, a faint circle that looked switched off. Now
   one quiet pill (icon + words) under the launcher, in the app's own surface and border,
   on every screen size; a phone keeps it clear of the bottom bar. */
#geo-dock { flex-direction: column; align-items: flex-end; gap: 10px; }
#geo-dock .geo-dock-label { display: none !important; }
#geo-dock #support-fab.geo-dock-help {
  width: auto !important; height: 40px !important; padding: 0 15px 0 13px !important; gap: 8px !important;
  font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 0;
  color: var(--geo-text2) !important; background: var(--geo-surface) !important;
  border: 1px solid var(--geo-border2) !important; border-radius: 999px !important;
  box-shadow: 0 10px 26px -14px rgba(0,0,0,.6) !important; font-family: var(--geo-font) !important;
}
#geo-dock #support-fab.geo-dock-help svg { width: 17px !important; height: 17px !important; color: var(--geo-accent); }
#geo-dock #support-fab.geo-dock-help:hover { color: var(--geo-text) !important; border-color: var(--geo-accent) !important; transform: none !important; }

/* The window: the app's surface and ink, the one teal action - no gradient. */
#support-modal .sup-card { width: 100%; max-width: 480px; background: var(--geo-surface); border: 1px solid var(--geo-border2);
  border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7); font-family: var(--geo-font); }
#support-modal .sup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 0; }
#support-modal .sup-title { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 17px; font-weight: 700; color: var(--geo-text); }
#support-modal .sup-title svg { width: 18px; height: 18px; color: var(--geo-accent); }
#support-modal .sup-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--geo-muted); }
#support-modal .sup-close { flex: none; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--geo-border); background: transparent; color: var(--geo-muted); cursor: pointer; }
#support-modal .sup-close:hover { color: var(--geo-text); border-color: var(--geo-border2); }
#support-modal .sup-form { padding: 16px 22px 22px; }
#support-modal .sup-field { width: 100%; min-width: 0; box-sizing: border-box; background: var(--geo-bg); border: 1px solid var(--geo-border2);
  border-radius: 10px; padding: 11px 13px; color: var(--geo-text); font-size: 14px; outline: none; font-family: inherit; }
#support-modal .sup-field:focus { border-color: var(--geo-accent); }
#support-modal textarea.sup-field { resize: vertical; min-height: 120px; }
#support-modal .sup-send { width: 100%; margin-top: 12px; min-height: 44px; border: 0; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 700; background: var(--geo-brand); color: var(--geo-brand-ink); }
#support-modal .sup-send:disabled { opacity: .6; cursor: default; }
#support-modal .sup-fb { display: none; margin-top: 10px; padding: 10px 13px; border-radius: 10px; font-size: 13px; line-height: 1.6; }
#support-modal .sup-fb.is-ok { display: block; background: color-mix(in oklab, var(--geo-good) 12%, transparent); border: 1px solid color-mix(in oklab, var(--geo-good) 40%, transparent); color: var(--geo-good-ink); }
#support-modal .sup-fb.is-bad { display: block; background: color-mix(in oklab, var(--geo-bad) 12%, transparent); border: 1px solid color-mix(in oklab, var(--geo-bad) 40%, transparent); color: var(--geo-bad-ink); }
#support-modal .sup-bridge { margin-top: 8px; padding: 7px 14px; border-radius: 8px; background: transparent; border: 1px solid currentColor; color: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
@media (max-width: 640px) { #support-modal { align-items: flex-end !important; padding: 0 !important; } #support-modal .sup-card { border-radius: 16px 16px 0 0; } }


/* ══ BUTTONS, 2026 ═══════════════════════════════════════════════════════════════════════
   Edward, 26 Sep: "make the buttons better, maybe flat, higher quality - they look like old
   school style, we want more like high quality saas buttons". The old look was 700-weight system
   type, 10-12px corners and a coloured glow under every primary. Now, everywhere:
     PRIMARY  the accent, a hairline edge a shade darker, a 1px top highlight, Inter 600.
              Hover lightens the fill; nothing lifts, nothing glows.
     QUIET    the surface, a hairline, a barely-there shadow, Inter 500.
   Written last in the file so it settles every earlier primary/quiet rule the same way. */
button, .btn, .geo-btn, input[type="submit"], input[type="button"] { font-family: var(--geo-font-head); }

.geo-btn-primary,
a[class*="bg-green-5"]:not([style*="width:"]), a[class*="bg-green-6"]:not([style*="width:"]), a[class*="bg-emerald-6"]:not([style*="width:"]), a[class*="bg-teal-6"]:not([style*="width:"]),
button[class*="bg-green-5"]:not([style*="width:"]), button[class*="bg-green-6"]:not([style*="width:"]), button[class*="bg-emerald-6"]:not([style*="width:"]),
input[type="submit"][class*="bg-green-"]:not([style*="width:"]),
a[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]),
a[class*="bg-blue-7"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-blue-7"]:not([class*="/"]):not([style*="width:"]),
#ob-card .ob-grad, .rm-go, .rm-btn.rm-solid, #support-modal .sup-send, .ix-send,
.cw-start, .cw-open.is-primary, .cw-door-btn, #gs-academy-modal .gs-action-btn:not(.gs-secondary):not(.gs-ghost),
.pw .pw-primary, .pw form > button[type="submit"] {
  border: 1px solid var(--geo-btn-edge) !important;
  box-shadow: var(--geo-btn-lift) !important;
  font-family: var(--geo-font-head) !important;
  font-weight: 600 !important;
  letter-spacing: -.005em;
  transform: none;
}
.geo-btn-primary:hover, a[class*="bg-green-5"]:hover, a[class*="bg-green-6"]:hover, button[class*="bg-green-5"]:hover:not(:disabled), button[class*="bg-green-6"]:hover:not(:disabled),
a[class*="bg-blue-6"]:not([class*="/"]):hover, button[class*="bg-blue-6"]:not([class*="/"]):hover:not(:disabled),
#ob-card a.ob-grad:hover, .rm-go:hover:not(:disabled), .rm-btn.rm-solid:hover, #support-modal .sup-send:hover:not(:disabled), .ix-send:hover,
.cw-start:hover, .cw-open.is-primary:hover, .cw-door-btn:hover, #gs-academy-modal .gs-action-btn:not(.gs-secondary):not(.gs-ghost):hover,
.pw .pw-primary:hover:not(:disabled), .pw form > button[type="submit"]:hover:not(:disabled) {
  background-color: var(--geo-btn-hover) !important; background-image: none !important;
  filter: none !important; transform: none !important;
  box-shadow: var(--geo-btn-lift) !important;
}
.geo-btn-silver, .geo-tt-btn, .btn-sm.secondary, #ob-card .ob-quiet, .rm-btn:not(.rm-solid),
.cw-open:not(.is-primary), .cw-back, .pw .pw-quiet, #gs-academy-modal .gs-action-btn.gs-secondary {
  box-shadow: var(--geo-btn-quiet) !important;
  font-family: var(--geo-font-head) !important;
  font-weight: 500 !important;
}
html:not([data-theme="dark"]) .main-content button:is([class*="bg-"], [class*=" border"], [class^="border"]):not([class*="bg-green"]):not([class*="bg-blue-6"]):not([class*="bg-teal"]):not([class*="bg-emerald"]):not([class*="bg-transparent"]):not([class~="border-transparent"]):not(.ob-grad):not(.geo-btn-primary):not(.geo-chip):not(.geo-own-colour):not([style*="width:"]) {
  box-shadow: var(--geo-btn-quiet) !important; font-weight: 500;
}
:is(button, a):focus-visible { outline: 2px solid color-mix(in oklab, var(--geo-accent) 70%, transparent); outline-offset: 2px; }
button:active, .btn:active, a[class*="bg-green-"]:active, a[class*="bg-blue-"]:active { transform: none; }
.geo-btn-primary:active, #ob-card .ob-grad:active, .rm-go:active, .cw-start:active, .cw-door-btn:active,
.pw .pw-primary:active, #gs-academy-modal .gs-action-btn:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18) !important; }
/* The roast's one button is the page's whole point: a step larger than an ordinary button. */
#site-tab-conversion .rm-go { font-size: 15px; min-height: 48px; padding: 0 22px; }

/* ═══ ROAST MY SITE · set-up card and past roasts (30 Sep) ════════════════════════
   Edward: "border, layout, separation ... think like a designer ... smooth and addictive".
   The form is ONE card: the questions, then quieter rows (business details, walkthrough) split by
   hairlines, then a tinted footer with what you get and the button. Past roasts sit beside it on
   a wide screen and under it on a phone: the newest as a card with its score ring, the rest as
   rows, and any of them opens its highlights in a popup. */
#site-tab-conversion .rm-setup { max-width: none; }
.rm-layout { display: grid; gap: 28px; align-items: start; }
.rm-layout > .rm-form { max-width: 40rem; }
/* One column (Edward, 30 Sep: "not sure why we're forcing two columns"): the form, then past
   roasts under it, at one width. */
.rm-layout > .rm-past { max-width: 40rem; }
.rm-card { gap: 0; border: 1px solid var(--geo-border); border-radius: 16px; background: var(--geo-surface);
  overflow: hidden; }
.rm-card-body { display: flex; flex-direction: column; gap: 22px; padding: 22px 22px 6px; }
.rm-card-foot { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px; margin-top: 16px;
  border-top: 1px solid var(--geo-border);
  background: color-mix(in srgb, var(--geo-accent) 4%, var(--geo-surface)); }
/* Inside the card the two option rows stop being boxes of their own: one hairline each. */
.rm-card .rm-rowcard, .rm-card .rm-toggle { background: transparent; border: 0; border-top: 1px solid var(--geo-border);
  border-radius: 0; padding: 16px 0 10px; margin-top: -6px; }
.rm-card .rm-toggle + .rm-card-foot, .rm-card .rm-rowcard + .rm-card-foot { margin-top: 0; }
.rm-card .rm-field input[type="url"], .rm-card .rm-field textarea { background: var(--geo-bg); }
.rm-card .rm-chip span { background: var(--geo-bg); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.rm-card .rm-chip span:hover { border-color: var(--geo-accent); }
.rm-card .rm-chip input:checked + span { background: var(--geo-accent-soft); transform: translateY(-1px); }
.rm-go { transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.rm-go:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px var(--geo-accent); }
@media (max-width: 767px) {
  .rm-card-body { padding: 18px 16px 4px; }
  .rm-card-foot { padding: 16px; }
}

/* Past roasts panel. */
.rm-past { display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--geo-border);
  border-radius: 16px; background: var(--geo-surface); min-width: 0; }
.rm-past-head { display: flex; align-items: center; gap: 8px; }
.rm-past-head .rm-h2 { margin: 0; }
.rm-past-count { min-width: 22px; padding: 1px 7px; border-radius: 99px; font-size: 12px; font-weight: 700; text-align: center;
  color: var(--geo-text2); background: color-mix(in srgb, var(--geo-text) 8%, transparent); font-variant-numeric: tabular-nums; }
.rm-past .tone-good { --t: var(--geo-good); }
.rm-past .tone-teal { --t: var(--geo-accent); }
.rm-past .tone-warn { --t: var(--geo-warn); }
.rm-past .tone-bad  { --t: var(--geo-bad); }
.rm-past-hero, .rm-past-row { width: 100%; font: inherit; text-align: left; cursor: pointer; color: inherit;
  border: 1px solid var(--geo-border); background: var(--geo-bg);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.rm-past-hero:hover, .rm-past-row:hover { border-color: color-mix(in srgb, var(--t, var(--geo-accent)) 55%, var(--geo-border));
  transform: translateY(-1px); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .6); }
.rm-past-hero:focus-visible, .rm-past-row:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 2px; }
.rm-past-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--t) 10%, var(--geo-bg)), var(--geo-bg) 70%); }
/* The score ring: the verdict's colour, drawn to the score. */
.rm-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: conic-gradient(var(--t) calc(var(--p) * 1%), color-mix(in srgb, var(--geo-text) 10%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 0 25px, #000 26px); mask: radial-gradient(circle, transparent 0 25px, #000 26px);
  position: relative; }
.rm-past-hero .rm-ring { -webkit-mask: none; mask: none; }
.rm-past-hero .rm-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--geo-bg); }
.rm-ring b { position: relative; font-family: var(--geo-font-head); font-size: 22px; font-weight: 700; color: var(--t);
  font-variant-numeric: tabular-nums; }
.rm-past-hero-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rm-past-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 1px 8px; border-radius: 99px;
  color: var(--t); background: color-mix(in srgb, var(--t) 14%, transparent); margin-bottom: 2px; }
.rm-past-page { font-size: 15.5px; font-weight: 650; color: var(--geo-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-past-verdict { font-size: 14px; color: var(--geo-text2); }
.rm-past-when { font-size: 13px; color: var(--geo-muted); }
.rm-past-go { font-size: 22px; color: var(--geo-muted); transition: transform .18s ease, color .18s ease; }
.rm-past-hero:hover .rm-past-go { transform: translateX(3px); color: var(--t); }
.rm-delta { font-weight: 650; font-variant-numeric: tabular-nums; }
.rm-delta.is-up { color: var(--geo-good); }
.rm-delta.is-down { color: var(--geo-bad); }
.rm-delta.is-same { color: var(--geo-muted); }
.rm-past-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rm-past-list li[hidden] { display: none; }
.rm-past-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px; }
.rm-chipscore { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 15px;
  color: var(--t); background: color-mix(in srgb, var(--t) 13%, transparent); font-variant-numeric: tabular-nums; }
.rm-past-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rm-past-main b { color: var(--geo-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-past-main .rm-sub { font-size: 13px; color: var(--geo-muted); }
.rm-past-row .rm-delta { font-size: 13px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, currentColor 12%, transparent); }
.rm-past-toggle { align-self: flex-start; font-size: 14px; }
.rm-past-all { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--geo-accent); text-decoration: underline; text-underline-offset: 3px; }

/* The highlights popup: fades and lifts in, scrolls inside itself. */
#rm-pop { background: color-mix(in srgb, #000 55%, transparent); opacity: 0; transition: opacity .2s ease; }
#rm-pop.open { opacity: 1; }
.rm-pop { position: relative; max-width: 40rem; display: flex; flex-direction: column; gap: 16px; padding: 24px;
  transform: translateY(10px) scale(.985); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
#rm-pop.open .rm-pop { transform: none; }
.rm-pop-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--geo-text2); background: color-mix(in srgb, var(--geo-text) 7%, transparent); }
.rm-pop-x:hover { color: var(--geo-text); }
.rm-pop-eyebrow { margin: 0; padding-right: 40px; font-size: 13px; font-weight: 600; color: var(--geo-muted); }
.rm-pop .rm-n { font-size: clamp(52px, 10vw, 72px); }
.rm-pop .rm-oneliner { font-size: clamp(18px, 2.6vw, 22px); }
.rm-pop .rm-h2 { margin: 6px 0 0; }
.rm-pop-list { display: flex; flex-direction: column; gap: 10px; }
.rm-pop-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--geo-border); border-radius: 12px;
  background: var(--geo-bg); }
.rm-pop-card .rm-f-head h4 { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--geo-text); }
.rm-pop-card .rm-roast { font-size: 16px; }
.rm-pop-fix { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--geo-accent) 7%, transparent);
  border-left: 3px solid var(--geo-accent); }
.rm-pop-k { display: block; font-size: 12.5px; font-weight: 650; color: var(--geo-text2); margin-bottom: 2px; }
.rm-pop-fix p { margin: 0; color: var(--geo-text); }
.rm-pop-more { margin: 0; font-size: 14px; color: var(--geo-muted); }
.rm-pop .rm-working { padding-bottom: 0; }
.rm-pop-foot { position: sticky; bottom: -24px; margin: 4px -24px -24px; padding: 14px 24px;
  border-top: 1px solid var(--geo-border); background: var(--geo-surface); }
@media (max-width: 767px) {
  .rm-pop { padding: 18px; }
  .rm-pop-foot { bottom: -18px; margin: 4px -18px -18px; padding: 12px 18px; }
  .rm-pop-foot .rm-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  #rm-pop, .rm-pop, .rm-past-hero, .rm-past-row, .rm-go { transition: none; }
}

/* ROAST MY SITE in the app's own type and lines (26 Sep, Edward: "the fonts seem different
   from the rest of the site ... needs to look high quality, layers, design, font sizes and
   flow like the rest of the site"). That answers the open question on the mono capitals: the
   roast now speaks like every other screen.
   - Labels: sentence case in the app's font, not spaced-out monospace capitals.
   - Headings: the heading font at 650, like every page's h1 and card title, not 700 system.
   - Sizes: 15px body like the app's cards (inputs stay 16px so phones don't zoom).
   - Lines: cards and panels use --geo-border like every other card. Controls follow the app's
     own inputs: --geo-border2 in light, --geo-border in dark (the global dark rule). */
#site-tab-conversion :is(.rm-eyebrow, .rm-getlabel, .rm-facts dt, .rm-rw-k, .rm-wstep-n, .rm-pill, .rm-price-tag) {
  font-family: var(--geo-font); text-transform: none; letter-spacing: -.003em; }
#site-tab-conversion :is(.rm-eyebrow, .rm-getlabel) { font-size: 13px; font-weight: 600; }
#site-tab-conversion :is(.rm-facts dt, .rm-rw-k, .rm-wstep-n) { font-size: 12.5px; font-weight: 600; }
#site-tab-conversion .rm-pill { font-size: 12.5px; font-weight: 600; }
#site-tab-conversion .rm-price-tag { font-variant-numeric: tabular-nums; }
#site-tab-conversion .rm-h2 { font-family: var(--geo-font-head); text-transform: none; letter-spacing: -.005em;
  font-size: 16px; font-weight: 650; color: var(--geo-text); }
#site-tab-conversion :is(.rm-h1, .rm-oneliner, .rm-f-head h3, .rm-score) { font-family: var(--geo-font-head); font-weight: 650; }
#site-tab-conversion .rm-h1 { font-size: clamp(24px, 4.2vw, 32px); line-height: 1.15; letter-spacing: -.015em; }
#site-tab-conversion .rm-oneliner { font-size: clamp(20px, 3vw, 26px); letter-spacing: -.01em; }
#site-tab-conversion .rm-f-head h3 { font-size: 16px; }
#site-tab-conversion .rm-mini .rm-f-head h3 { font-size: 15px; }
#site-tab-conversion :is(.rm-setup, .rm-work, .rm-report) { font-size: 15px; }
#site-tab-conversion .rm-field > :is(label, legend) { font-size: 14.5px; }
#site-tab-conversion .rm-hint { font-size: 13.5px; }
#site-tab-conversion :is(.rm-sub, .rm-gets, .rm-chip span) { font-size: 14.5px; }
#site-tab-conversion :is(.rm-finding, .rm-rewrite, .rm-details, .rm-opt-card, .rm-todo label, .rm-again, .rm-fixlist label,
  .rm-imp, .rm-modal, .rm-rowcard, .rm-toggle, .rm-past-row, .rm-biz-frame) { border-color: var(--geo-border); }
#site-tab-conversion .rm-details[open] summary, #site-tab-conversion .rm-mini + .rm-mini { border-color: var(--geo-border); }
html[data-theme="dark"] #site-tab-conversion :is(.rm-chip span, .rm-btn) { border-color: var(--geo-border); }
html[data-theme="dark"] #site-tab-conversion .rm-chip input:checked + span { border-color: var(--geo-accent); }

/* Roast reports on /reports (26 Sep): the audit table's look, with the app's tokens. */
.rp-roasts { margin-top: 32px; scroll-margin-top: 80px; }
.rp-roasts-h { margin: 0 0 4px; font-family: var(--geo-font-head); font-size: 20px; font-weight: 650; color: var(--geo-text); }
.rp-roasts-line { margin: 0 0 14px; font-size: 14px; color: var(--geo-muted); }
.rp-roasts-table td { font-size: 14px; color: var(--geo-text); vertical-align: middle; }
.rp-sub { margin-top: 2px; font-size: 12.5px; color: var(--geo-muted); overflow-wrap: anywhere; }
.rp-page { color: var(--geo-text2); overflow-wrap: anywhere; }
.rp-score, .rp-date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-date { color: var(--geo-text2); }
.rp-open { display: inline-block; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--geo-accent) !important; text-decoration: underline; text-underline-offset: 3px; }
.rp-none { margin: 0; padding: 16px 24px; font-size: 14px; color: var(--geo-muted); }
.rp-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rp-dl { font-weight: 500; color: var(--geo-text2) !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   THE VIOLET LAYER (26 Sep 2026)

   Edward: "I like the mixture of the purple and the green ... add a layer of it, a strip of
   gloss gradient ... and maybe some places use the colour again like 5-10% so it's giving the
   more coloured feel beyond the green and dark bg ... the light mode is bad, the green is
   awful ... the theme is not good quality in light mode." His references: a header gradient
   #00000D -> #060241 -> #241F3C -> #591361 -> #8B0A85 -> #A10297, and purples around #6C459F.

   What it does, and what it deliberately doesn't:
     - Teal stays the ONE action. Violet is the second voice: it takes over from the old
       lavender (--geo-second, used in 62 places for links, marks and the second chart line),
       so the colour spreads evenly without touching any markup.
     - One glossy strip across the top of the app: teal flowing into violet and magenta.
     - A faint violet wash (6-8%) at the top of the page and the sidebar. Never on cards.
     - Light mode: a cleaner teal (the old #00696a read as murky green) and a ground with a
       breath of violet instead of flat grey.
   Contrast, measured: light teal #0B7F7B 4.84:1 under white text, 4.53:1 as text on the
   ground; light violet #6B3FA0 7.38:1 on white; dark violet #B38BE6 6.57:1 on the navy.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  --geo-violet:      #6B3FA0;
  --geo-violet-deep: #4E2C7A;
  --geo-violet-soft: rgba(107, 63, 160, .10);
  --geo-magenta:     #A10297;
  /* The strip: our teal into Edward's violets and magenta. */
  --geo-aurora: linear-gradient(90deg, #00B8B5 0%, #2F6FB8 22%, #4B3A9E 42%, #6C459F 62%, #8B0A85 84%, #A10297 100%);

  /* Light, rebuilt: a ground with a breath of violet, not flat grey. */
  --geo-bg:       #F6F5FB;
  --geo-surface2: #EEECF5;
  --geo-border:   #E2DFEC;
  --geo-border2:  #A9A4BA;
  --geo-muted:    #5A6070;
  --geo-accent:   #0B7F7B;
  --geo-accent-soft: rgba(11, 127, 123, .10);

  --geo-second:      var(--geo-violet);
  --geo-second-ink:  var(--geo-violet-deep);
  --geo-second-deep: var(--geo-violet-deep);
  --geo-info:        var(--geo-violet);
}
html[data-theme="dark"] {
  --geo-violet:      #B38BE6;
  --geo-violet-deep: #6C459F;
  --geo-violet-soft: rgba(140, 90, 205, .14);
  --geo-second:      var(--geo-violet);
  --geo-second-ink:  #D6C2F2;
  --geo-second-deep: var(--geo-violet-deep);
  --geo-info:        var(--geo-violet);
}

/* The strip. Fixed to the top of the window, over the phone header too; it never takes a
   click. A top highlight gives it the gloss. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 10001; pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 75%), var(--geo-aurora);
  box-shadow: 0 1px 12px rgba(108, 69, 159, .45);
}
/* ...and its light falling a little way down the page: the same colours, blurred and faint. */
body::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 90px; z-index: 0; pointer-events: none;
  background-image: var(--geo-aurora); opacity: .07;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent);
}
html[data-theme="dark"] body::after { opacity: .11; }

/* The wash: a little violet where the page begins, a little teal opposite, then the ground. */
body {
  background-image:
    radial-gradient(1100px 420px at 100% -120px, var(--geo-violet-soft), transparent 70%),
    radial-gradient(900px 360px at 0% -160px, var(--geo-accent-soft), transparent 70%);
  background-repeat: no-repeat;
}
.sidebar { background-image: radial-gradient(420px 260px at 0% 0%, var(--geo-violet-soft), transparent 75%); }

/* The chosen item in the sidebar carries the same two voices: a violet wash, a teal mark. */
html[data-theme] .sidebar a.bg-gray-700, html:not([data-theme]) .sidebar a.bg-gray-700 {
  background-color: color-mix(in srgb, var(--geo-violet) 13%, transparent) !important;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--geo-violet) 10%, transparent), transparent) !important;
  box-shadow: inset 3px 0 0 var(--geo-accent);
  color: var(--geo-text) !important;
}
html[data-theme] .sidebar a.bg-gray-700 svg, html:not([data-theme]) .sidebar a.bg-gray-700 svg { color: var(--geo-second) !important; }

/* Section eyebrows (the small capitals over a heading) speak in the second voice. */
.gs-eyebrow, .rm-eyebrow, .cw-door-eyebrow, .pw-eyebrow { color: var(--geo-second) !important; }

@media (prefers-reduced-motion: reduce) { body::before { box-shadow: none; } }

/* ── Light mode at the dark mode's standard (26 Sep 2026) ─────────────────────────────
   Edward: "the dark mode looks awesome, how can we get the same quality for the light mode"
   and "that button colour green, is that the best colour?". Dark mode gets its quality from
   layered surfaces, soft light and the bright logo teal. Light mode had flat grey, rows painted
   as panels and a heavy dark-teal button. So:
     1. THE BUTTON FILL is the logo teal with dark ink in both themes (6.9:1), the same button
        that works in dark mode. The deeper teal stays for text and links, where it must read on
        white (--geo-accent). Compared side by side with violet and ink-navy: this one is the brand.
     2. ROWS ARE NOT PANELS. The light rule that turns dark slabs white matched the class
        "hover:bg-gray-700/30" too, so every table row was painted all the time. A class that
        only applies on hover is left alone; hover gets a breath of violet.
     3. DEPTH FROM LIGHT, NOT LINES: cards lift with a soft violet-tinted shadow. */
:root { --geo-fill: #00B8B5; --geo-fill-ink: #04201f; }   /* superseded: Edward, 19 Oct ~11:10 ('the font should be white on it'); see D-014 at the end */
html[data-theme="dark"] { --geo-fill: var(--geo-accent); --geo-fill-ink: var(--geo-accent-ink); }   /* superseded by D-014 at the end of this file */
html:not(#geo-no-such-id) :is(
.geo-btn-primary,
a[class*="bg-green-5"]:not([style*="width:"]), a[class*="bg-green-6"]:not([style*="width:"]), a[class*="bg-emerald-6"]:not([style*="width:"]), a[class*="bg-teal-6"]:not([style*="width:"]),
button[class*="bg-green-5"]:not([style*="width:"]), button[class*="bg-green-6"]:not([style*="width:"]), button[class*="bg-emerald-6"]:not([style*="width:"]),
input[type="submit"][class*="bg-green-"]:not([style*="width:"]),
a[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]),
a[class*="bg-blue-7"]:not([class*="/"]):not([style*="width:"]), button[class*="bg-blue-7"]:not([class*="/"]):not([style*="width:"]),
#ob-card .ob-grad, .rm-go, .rm-btn.rm-solid, #support-modal .sup-send, .ix-send,
.cw-start, .cw-open.is-primary, .cw-door-btn, #gs-academy-modal .gs-action-btn:not(.gs-secondary):not(.gs-ghost),
.pw .pw-primary, .pw form > button[type="submit"]
) {
  background-color: var(--geo-fill) !important; background-image: none !important;
  color: var(--geo-fill-ink) !important;
  border-color: color-mix(in oklab, var(--geo-fill) 72%, #000) !important;
}
html:not(#geo-no-such-id) :is(
.geo-btn-primary:hover,
a[class*="bg-green-5"]:not([style*="width:"]):hover,
a[class*="bg-green-6"]:not([style*="width:"]):hover,
a[class*="bg-emerald-6"]:not([style*="width:"]):hover,
a[class*="bg-teal-6"]:not([style*="width:"]):hover,
button[class*="bg-green-5"]:not([style*="width:"]):hover,
button[class*="bg-green-6"]:not([style*="width:"]):hover,
button[class*="bg-emerald-6"]:not([style*="width:"]):hover,
input[type="submit"][class*="bg-green-"]:not([style*="width:"]):hover,
a[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]):hover,
button[class*="bg-blue-6"]:not([class*="/"]):not([style*="width:"]):hover,
a[class*="bg-blue-7"]:not([class*="/"]):not([style*="width:"]):hover,
button[class*="bg-blue-7"]:not([class*="/"]):not([style*="width:"]):hover,
#ob-card .ob-grad:hover,
.rm-go:hover,
.rm-btn.rm-solid:hover,
#support-modal .sup-send:hover,
.ix-send:hover,
.cw-start:hover,
.cw-open.is-primary:hover,
.cw-door-btn:hover,
#gs-academy-modal .gs-action-btn:not(.gs-secondary):not(.gs-ghost):hover,
.pw .pw-primary:hover,
.pw form > button[type="submit"]:hover
) {
  background-color: color-mix(in oklab, var(--geo-fill) 88%, #fff) !important;
}
html:not([data-theme="dark"]) .main-content [class*="hover:bg-gray-"]:not([class^="bg-gray-"]):not([class*=" bg-gray-"]):not(:hover) {
  background-color: transparent !important;
}
html:not([data-theme="dark"]) .main-content tr[class*="hover:bg-"]:hover,
html:not([data-theme="dark"]) .main-content [class*="hover:bg-gray-"]:not([class^="bg-gray-"]):not([class*=" bg-gray-"]):hover {
  background-color: color-mix(in srgb, var(--geo-violet) 5%, transparent) !important;
}
html:not([data-theme="dark"]) .main-content thead { background-color: #FAF9FD !important; }
html:not([data-theme="dark"]) .main-content th { color: var(--geo-muted) !important; }
html:not([data-theme="dark"]) .main-content :is(.rounded-xl, .rounded-2xl)[class*="bg-gray-8"]:not([style*="width:"]),
html:not([data-theme="dark"]) .main-content :is(.rounded-xl, .rounded-2xl)[class*="bg-white"]:not([style*="width:"]) {
  box-shadow: 0 1px 2px rgba(23, 16, 56, .04), 0 8px 24px -14px rgba(60, 40, 120, .18);
}

/* ── Slick, not 1980 (26 Sep 2026) ─────────────────────────────────────────────────────
   Edward: "make it slick and not 1980 design". What dated it most: 470 labels in spaced-out
   capitals ("WELCOME BACK, EDWARD", "WHAT TO DO", "DO THIS NOW", "AGENCY"), text triangles for
   toggles, and hard focus outlines. Modern product UI (Linear, Stripe, Vercel) speaks in quiet
   sentence case, uses real chevrons and soft focus rings. One rule each, in both themes.
   The roast used to keep its mono capitals; Edward asked for it to match the app (26 Sep),
   so it's under the same rule now. */
:is(.main-content, .sidebar, #geo-switch, #gs-academy-modal, #ob-card, #support-modal) :is(
  .uppercase, [class*="tracking-wide"], .cv-eyebrow, .cv-state, .cb-group-head h2, .gs-eyebrow, .gs-steps-h,
  .gs-stage-h, .gs-upnext .gs-un-l, .cw-sec-h, .cw-door-eyebrow, .pw-eyebrow, .pw h3, .site-sections-group
):not([class*="text-[9px]"]) {
  text-transform: none !important;
  letter-spacing: -.003em !important;
  font-size: max(12.5px, .92em) !important;
  font-weight: 600 !important;
}
#gs-academy-modal .gs-stage-h, #gs-academy-modal .gs-upnext .gs-un-l { font-size: 12.5px !important; }
/* The chat panel's and the intake's small labels, wherever they sit. */
.gfd-kicker, .ix-eyebrow { text-transform: none !important; letter-spacing: -.003em !important; font-size: 12.5px !important; font-weight: 600 !important; }
/* Labels inside small shapes (the set-up ring) keep their size. */
#ob-card [class*="text-[9px]"].uppercase { text-transform: none !important; letter-spacing: 0 !important; font-size: 10px !important; }

/* Toggles: a drawn chevron, not a ▼ character. The span keeps its own rotation. */
.ob-chev, .ol-chev {
  font-size: 0 !important; width: 18px; height: 18px; display: inline-grid !important; place-items: center;
  transition: transform var(--geo-dur) var(--geo-ease);
}
.ob-chev::before, .ol-chev::before {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg); border-radius: 1px;
}

/* Fields: a soft ring on focus, the border in the accent. */
:is(.main-content, #support-modal, #ob-card) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
  outline: none !important;
  border-color: var(--geo-accent) !important;
  box-shadow: 0 0 0 3px var(--geo-accent-soft) !important;
}

/* Small status pills: soft, sentence case, no shouting. */
.main-content .rounded-full:is([class*="text-xs"], [class*="text-[10px]"], [class*="text-[11px]"]) {
  letter-spacing: 0 !important; font-weight: 600;
}

/* ── Billing & usage (26 Sep 2026) ────────────────────────────────────────────────────
   Edward: "this page needs to make sense and show usage", with OpenRouter's Activity page
   as the model. Four figures with a comparison, credits spent each day by feature, where
   they went and for which client, then the activity. One colour per feature: none of them
   is pass-green, fail-red or warning-amber (test_chart_colours). */
:root {
  --geo-series-audits:   #0B7F7B;
  --geo-series-pages:    #6B3FA0;
  --geo-series-fixes:    #2F6FB8;
  --geo-series-roasts:   #A10297;
  --geo-series-chat:     #3F8FB0;
  --geo-series-research: #5B6B8C;
  --geo-series-services: #7A5C3E;
  --geo-series-other:    #A9A4BA;
}
html[data-theme="dark"] {
  --geo-series-audits:   #00B8B5;
  --geo-series-pages:    #B38BE6;
  --geo-series-fixes:    #6FA8F0;
  --geo-series-roasts:   #E07AD8;
  --geo-series-chat:     #8CC6DE;
  --geo-series-research: #A5B4D4;
  --geo-series-services: #C9A27E;
  --geo-series-other:    #6B6B78;
}
.bu { margin-bottom: 2rem; }
.bu-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bu-range { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 1rem; border: 1px solid var(--geo-border); border-radius: 10px; background: var(--geo-surface); }
.bu-range-btn { padding: 6px 12px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--geo-muted); text-decoration: none; }
.bu-range-btn:hover { color: var(--geo-text); }
.bu-range-btn.is-on { background: var(--geo-accent-soft); color: var(--geo-accent); }
.bu-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1024px) { .bu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bu-card, .bu-box { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.bu-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bu-card-l { font-size: 13px; font-weight: 600; color: var(--geo-muted); }
.bu-card-n { margin-top: 6px; font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--geo-text); font-variant-numeric: tabular-nums; }
.bu-card-s { margin-top: 6px; font-size: 12.5px; color: var(--geo-muted); }
.bu-vs.is-up::before, .bu-vs.is-down::before { content: ""; display: inline-block; width: 0; height: 0; margin-right: 5px; vertical-align: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; }
.bu-vs.is-up::before { border-bottom: 6px solid currentColor; }
.bu-vs.is-down::before { border-top: 6px solid currentColor; }
.bu-spark { width: 84px; height: 28px; flex: none; }
.bu-spark polyline { fill: none; stroke: var(--geo-second); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bu-box { margin-bottom: 12px; }
.bu-h { margin: 0 0 12px; font-size: 16px; font-weight: 650; color: var(--geo-text); }
.bu-h-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* An inline link inside a sentence. The app had no generic one - the only two in the whole
   codebase were mine, styled `underline`, which renders in the browser's default purple. Teal is
   the one action colour in this palette, so a purple link is the one thing on the page claiming
   to be an action while not looking like one. Uses the token, so it follows both themes. */
.geo-inline-link { color: var(--geo-accent); text-decoration: underline; text-underline-offset: 3px; }
.geo-inline-link:hover { text-decoration-thickness: 2px; }

.bu-link { font-size: 13px; font-weight: 600; color: var(--geo-accent); text-decoration: underline; text-underline-offset: 3px; }
.bu-empty, .bu-note { margin: 0; font-size: 13.5px; color: var(--geo-muted); }
.bu-note { margin-top: 10px; }
/* the answer to a form in its own box (Billing → Your bank details): said where the page lands, in both themes */
.bu-msg { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--geo-border); border-left-width: 4px; font-size: 14px; color: var(--geo-text); }
.bu-msg-bad { border-left-color: var(--geo-bad); color: var(--geo-bad-ink); }
.bu-msg-ok { border-left-color: var(--geo-good); color: var(--geo-good-ink); }
.bu-help { margin: 4px 0 0; font-size: 13px; color: var(--geo-muted); }
.bd-summary::-webkit-details-marker { display: none; }
.bu-chart { position: relative; height: 240px; }
.bu-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bu-two .bu-box { margin-bottom: 12px; }
@media (max-width: 800px) { .bu-two { grid-template-columns: 1fr; } }
.bu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bu-li-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.bu-li-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--geo-text); font-weight: 550; }
.bu-li-sub { font-size: 12.5px; color: var(--geo-muted); white-space: nowrap; }
.bu-li-n { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--geo-text); min-width: 3ch; text-align: right; }
.bu-rank { width: 18px; font-size: 12.5px; color: var(--geo-muted); font-variant-numeric: tabular-nums; }
.bu-bar { margin-top: 6px; height: 6px; border-radius: 99px; background: var(--geo-surface2); overflow: hidden; }
.bu-bar > span { display: block; height: 100%; border-radius: 99px; }
.bu-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
/* "Through Claude": a row started by asking Claude through the connector (Edward's nine points #6). */
.bu-via-wrap { display: inline-block; white-space: nowrap; }
.bu-via { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 11.5px; font-weight: 600; line-height: 1.5;
  vertical-align: 1px; color: var(--geo-muted); background: var(--geo-surface2); border: 1px solid var(--geo-border); }
.bu-f-audits { background: var(--geo-series-audits); }
.bu-f-pages { background: var(--geo-series-pages); }
.bu-f-fixes { background: var(--geo-series-fixes); }
.bu-f-roasts { background: var(--geo-series-roasts); }
.bu-f-chat { background: var(--geo-series-chat); }
.bu-f-research { background: var(--geo-series-research); }
.bu-f-services { background: var(--geo-series-services); }
.bu-f-other { background: var(--geo-series-other); }
.bu-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; }
.bu-people li { display: flex; gap: 8px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--geo-border); }
/* The rows that make a list add up ("No client", "3 other clients"): quieter than a name. */
.bu-li-muted .bu-li-name, .bu-people .bu-li-muted .bu-li-name { color: var(--geo-muted); font-weight: 500; }
.bu-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 12px; }
.bu-price-card { padding: 12px 14px; border: 1px solid var(--geo-border); border-radius: 10px; background: var(--geo-surface2); }
.bu-price-h { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 650; color: var(--geo-text); }
.bu-price-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--geo-text2); }
/* Your partnership terms (billing): a group's lines stack with a little air; the note under the groups. */
.pt-card .bu-price-body + .bu-price-body { margin-top: 8px; }
.pt-note { margin-top: 12px; }
.pt-list { margin: 4px 0 0; padding-left: 18px; list-style: disc; font-size: 14px; line-height: 1.5; color: var(--geo-text2); }
.bu-plan .bu-li-name { display: inline-flex; align-items: center; gap: 4px; overflow: visible; }
.bu-table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
.bu-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bu-table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--geo-muted); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--geo-border); white-space: nowrap; }
.bu-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--geo-border); color: var(--geo-text); vertical-align: top; }
.bu-table tr:last-child td { border-bottom: 0; }
.bu-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bu-num.is-in { color: var(--geo-accent); font-weight: 600; }
.bu-nowrap { white-space: nowrap; }
@media (max-width: 640px) {
  .bu-card { padding: 14px; }
  .bu-card-n { font-size: 24px; }
  .bu-spark { width: 64px; }
  .bu-table .bu-c-who, .bu-table .bu-c-bal { display: none; }
}
/* Group headings: "Your earnings", "Plan and settings". */
.geo-group-h { margin: 2.25rem 0 .25rem; font-size: 19px; font-weight: 650; color: var(--geo-text); }
.geo-group-intro { margin: 0 0 1rem; font-size: 14px; color: var(--geo-muted); }
.geo-group-h + .bg-white, .geo-group-h + div { margin-top: .75rem; }
.bu .bu-range-btn { color: var(--geo-muted) !important; text-decoration: none !important; }
.bu .bu-range-btn:hover { color: var(--geo-text) !important; }
.bu .bu-range-btn.is-on { color: var(--geo-accent) !important; }
.bu .bu-link { color: var(--geo-accent) !important; }
@media (max-width: 640px) { .bu-spark { display: none; } }
.bu-sub-client { display: none; }
@media (max-width: 640px) {
  /* A phone reads date, what (with the client under it) and credits. */
  .bu-table .bu-c-client { display: none; }
  .bu-sub-client { display: block; margin-top: 2px; font-size: 12.5px; color: var(--geo-muted); }
  .bu-table td:first-child { font-size: 12.5px; color: var(--geo-muted); }
}

/* Tooltips (public/js/geo-tip.js): a small ⓘ beside a label; one bubble, kept on screen. */
.geo-tip { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; padding: 0; vertical-align: -2px;
  border: 1.25px solid currentColor; border-radius: 50%; background: transparent; color: var(--geo-muted);
  font: 700 10px/1 ui-serif, Georgia, serif; font-style: italic; cursor: help; opacity: .85; }
.geo-tip:hover, .geo-tip:focus-visible, .geo-tip[aria-expanded="true"] { color: var(--geo-accent); opacity: 1; outline: none; }
.geo-tip:focus-visible { box-shadow: 0 0 0 3px var(--geo-accent-soft); }
/* A bigger tap area on a phone without a bigger mark. */
@media (pointer: coarse) { .geo-tip { position: relative; } .geo-tip::before { content: ""; position: absolute; inset: -12px; } }
.geo-tip-bubble { position: absolute; z-index: 10050; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; font-weight: 450;
  background: var(--geo-text); color: var(--geo-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .22); pointer-events: none; }

/* Billing & usage: whose wallet, and the filter row. */
.bu-wallet { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 3px 10px; border-radius: 99px;
  font-size: 12.5px; font-weight: 650; color: var(--geo-second-ink, var(--geo-second)); background: var(--geo-violet-soft); }
.bu-wallet-note { margin: 0 0 12px; font-size: 13px; color: var(--geo-muted); }
.bu-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 1rem; }
.bu-controls .bu-range { margin-bottom: 0; }
.bu-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bu-filter select { min-height: 36px; max-width: 220px; padding: 6px 30px 6px 10px; border: 1px solid var(--geo-border); border-radius: 8px;
  background-color: var(--geo-surface); color: var(--geo-text); font-size: 13.5px; }
.bu-filter .bu-apply { min-height: 36px; padding: 6px 14px; border: 1px solid var(--geo-border); border-radius: 8px; background: var(--geo-surface);
  color: var(--geo-text); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.bu-filter .bu-apply:hover { border-color: var(--geo-accent); color: var(--geo-accent); }
.bu-filter-on { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: -4px 0 12px; font-size: 13.5px; color: var(--geo-text); }
.bu-filter-on .bu-empty { font-size: 13px; }
@media (max-width: 640px) { .bu-filter, .bu-filter select { width: 100%; max-width: none; } .bu-filter select { flex: 1 1 100%; } }
/* The bits that say the filter needs no script: the button stays for keyboard and no-JS. */
/* The phone rule that makes every button 44px tall must not stretch the ⓘ: its tap area is the ::before. */
html .main-content button.geo-tip.geo-tip:not(.geo-chip), .geo-tip { width: 16px !important; height: 16px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; line-height: 1 !important; }

/* Analytics: the header row and the top section (26 Sep). */
.ai-controls { align-items: flex-end; }
.ai-dates .ai-date { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--geo-muted); font-weight: 600; }
.ai-dates input[type="date"] { min-height: 36px; padding: 5px 8px; border: 1px solid var(--geo-border); border-radius: 8px; background: var(--geo-surface); color: var(--geo-text); font-size: 13.5px; }
.ai-export { margin-left: auto; }
.ai-top { margin-bottom: 1.5rem; }
.ai-intro { margin: -6px 0 12px; }
.ai-attention .ai-group { border-top: 1px solid var(--geo-border); padding: 10px 0; }
.ai-attention .ai-group:first-of-type { border-top: 0; padding-top: 0; }
.ai-attention summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--geo-text); list-style: none; }
.ai-attention summary::-webkit-details-marker { display: none; }
.ai-attention summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; vertical-align: 3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.ai-attention details[open] > summary::after { transform: rotate(-135deg); vertical-align: 0; }
.ai-rows { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-rows li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.ai-rows .bu-link { font-size: 12.5px; white-space: nowrap; }
.ai-more { display: inline-block; margin-top: 8px; }
@media (max-width: 640px) { .ai-export { margin-left: 0; } .ai-dates .ai-date { flex: 1 1 40%; } .ai-dates input[type="date"] { width: 100%; } }
/* The range switch keeps its own colours wherever it sits (Analytics has no .bu around it). */
.bu-range .bu-range-btn { color: var(--geo-muted) !important; text-decoration: none !important; }
.bu-range .bu-range-btn:hover { color: var(--geo-text) !important; }
.bu-range .bu-range-btn.is-on { color: var(--geo-accent) !important; }
.bu-filter-on .bu-link, .ai-rows .bu-link { color: var(--geo-accent) !important; }
@media (max-width: 640px) {
  /* A phone shows the whole client name, with the note and the link under it. */
  .ai-rows li { flex-wrap: wrap; gap: 2px 10px; }
  .ai-rows .bu-li-name { flex: 1 1 100%; white-space: normal; }
}
.ai-rows { max-height: 320px; overflow-y: auto; }

/* One intake's answer cards (design window, 19 Oct): the page's card surface and edge in both themes,
   so the struck-through suggestion stays readable in light. */
.ob-answer { background: var(--geo-surface2) !important; border-color: var(--geo-border) !important; }

/* Leads (19 Oct): on a phone the search box takes its own row, so its hint isn't cut off. */
@media (max-width: 639px) { .ld-search { flex-basis: 100% !important; } }

/* A client's Scheduled checks, "How often?" (design window, 19 Oct): the chosen option is a solid
   accent fill with a ring, the others a quiet border, as on the agency's Repeat audits form.
   Native radios underneath, so arrow keys and screen readers work as usual. */
#scheduleForm .csc-freq input[type="radio"] + div { border-color: var(--geo-border2) !important;
  background-color: var(--geo-surface) !important; color: var(--geo-text2) !important; box-shadow: none !important; }
#scheduleForm .csc-freq input[type="radio"]:checked + div { background-color: var(--geo-brand) !important;
  border-color: var(--geo-brand) !important; color: var(--geo-brand-ink) !important; box-shadow: 0 0 0 1px var(--geo-brand) !important; }
#scheduleForm .csc-freq input[type="radio"]:focus-visible + div { outline: 2px solid var(--geo-text); outline-offset: 2px; }

/* ═══ A CLIENT'S HOME (26 Sep 2026) ══════════════════════════════════════════════════
   Edward: "feel like home ... gamified and simplified". Calm cards on the app's tokens, one
   accent for the thing to do, soft colour for progress, nothing shouting. Phone first. */
.ch { max-width: 60rem; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; font-size: 15px; color: var(--geo-text); }
.ch-head { padding: 4px 2px 6px; }
.ch-h1 { margin: 0; font-family: var(--geo-font-head); font-size: clamp(24px, 4.4vw, 32px); font-weight: 650; letter-spacing: -.015em; line-height: 1.15; }
.ch-line { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--geo-text2); max-width: 40em; }
.ch-site { margin: 6px 0 0; font-size: 13.5px; color: var(--geo-muted); }
.ch-card { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: 16px; padding: 18px 18px 16px; min-width: 0; }
.ch-card-h { margin: 0 0 8px; font-family: var(--geo-font-head); font-size: 17px; font-weight: 650; color: var(--geo-text); display: flex; align-items: center; gap: 8px; }
.ch-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.ch-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--geo-text2); }
.ch-big { margin: 2px 0 4px; font-family: var(--geo-font-head); font-size: 24px; font-weight: 650; }
.ch-ok { margin: 8px 0; font-size: 14px; font-weight: 600; color: var(--geo-good-ink, var(--geo-accent)); }
.ch-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px;
  background: var(--geo-brand); color: var(--geo-brand-ink); font-size: 13px; font-weight: 700; }
.ch-msg { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; border: 1px solid var(--geo-border); background: var(--geo-surface2); }
.ch-msg.is-ok { border-color: color-mix(in srgb, var(--geo-good) 40%, transparent); }
.ch-msg.is-bad { border-color: color-mix(in srgb, var(--geo-bad) 40%, transparent); }
.ch-waiting { border-color: color-mix(in srgb, var(--geo-accent) 45%, var(--geo-border)); background: color-mix(in srgb, var(--geo-accent) 5%, var(--geo-surface)); }
.ch-waiting.is-empty { border-color: var(--geo-border); background: var(--geo-surface); }
.ch-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.ch-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--geo-border); }
.ch-row:first-child { border-top: 0; }
.ch-row-t { flex: 1 1 14rem; min-width: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ch-dot { width: 8px; height: 8px; border-radius: 99px; flex: none; background: var(--geo-accent); }
.ch-dot-fix { background: var(--geo-warn); } .ch-dot-note { background: var(--geo-muted); }
.ch-tag { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--geo-surface2); color: var(--geo-text2); white-space: nowrap; }
.ch-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px;
  font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--geo-border2);
  background: var(--geo-surface); color: var(--geo-text) !important; }
.ch-btn:hover { border-color: var(--geo-accent); }
.ch-btn-sm { min-height: 38px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; }
.ch-btn-quiet { border-color: transparent; background: transparent; color: var(--geo-text2) !important; }
.ch-btn-go { border: 0; background: var(--geo-brand); color: var(--geo-brand-ink) !important; margin-top: 12px; width: 100%; }
.ch-btn-go:hover { filter: brightness(1.06); }
.ch-btn[disabled] { opacity: .6; cursor: default; }
.ch-link { display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--geo-accent) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.ch-side { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 820px) { .ch-grid { grid-template-columns: 1fr; } }
.ch-score-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 6px 0 4px; }
.ch-score-side { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ch-ring { --ch-c: var(--geo-accent); width: 112px; height: 112px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--ch-c) calc(var(--ch-p) * 1%), var(--geo-surface2) 0); }
.ch-ring::before { content: ""; grid-area: 1 / 1; width: 88px; height: 88px; border-radius: 50%; background: var(--geo-surface); }
.ch-ring-n { grid-area: 1 / 1; position: relative; font-family: var(--geo-font-head); font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.ch-ring-n small { font-size: 15px; font-weight: 600; color: var(--geo-muted); margin-left: 1px; }
.ch-ring.ch-band-good { --ch-c: var(--geo-good); } .ch-ring.ch-band-warn { --ch-c: var(--geo-warn); } .ch-ring.ch-band-low { --ch-c: var(--geo-accent); }
.ch-delta { margin: 0; font-size: 14px; font-weight: 600; color: var(--geo-text2); }
.ch-delta.is-up { color: var(--geo-good-ink, var(--geo-good)); } .ch-delta.is-down { color: var(--geo-text2); }
.ch-mini-h { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--geo-muted); }
.ch-engines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ch-engines li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 4px 10px; align-items: center; font-size: 14px; }
.ch-eng-n { grid-column: 2; font-size: 12.5px; color: var(--geo-muted); }
.ch-bar { display: block; height: 8px; border-radius: 99px; background: var(--geo-surface2); overflow: hidden; }
.ch-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--geo-accent); }
.ch-bar-lg { height: 10px; margin: 6px 0 12px; }
.ch-bar .ch-band-good { background: var(--geo-good); } .ch-bar .ch-band-warn { background: var(--geo-warn); } .ch-bar .ch-band-low { background: var(--geo-accent); }
.ch-band-good-t { color: var(--geo-good-ink, var(--geo-good)); } .ch-band-warn-t { color: var(--geo-warn-ink, var(--geo-warn)); }
.ch-ms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 8px; }
.ch-ms li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--geo-border);
  font-size: 14px; color: var(--geo-muted); }
.ch-ms-mark { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--geo-border2); display: grid; place-items: center; }
.ch-ms li.is-done { color: var(--geo-text); background: color-mix(in srgb, var(--geo-good) 8%, var(--geo-surface)); border-color: color-mix(in srgb, var(--geo-good) 30%, var(--geo-border)); }
.ch-ms li.is-done .ch-ms-mark { border-color: var(--geo-good); background: var(--geo-good); }
.ch-ms li.is-done .ch-ms-mark::after { content: ""; width: 6px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ch-ms li.is-next { color: var(--geo-text); border-style: dashed; border-color: var(--geo-accent); }
.ch-ms-next { margin-top: 10px; }
.ch-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.ch-stat { padding: 10px 6px; border-radius: 12px; background: var(--geo-surface2); text-align: center; display: flex; flex-direction: column; gap: 2px; }
.ch-stat-n { font-family: var(--geo-font-head); font-size: 22px; font-weight: 650; }
.ch-stat-l { font-size: 12.5px; color: var(--geo-muted); }
@media (max-width: 420px) { .ch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ch-running { display: flex; align-items: center; gap: 14px; }
.ch-spin { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 3px solid var(--geo-surface2); border-top-color: var(--geo-accent); animation: ch-spin 1s linear infinite; }
@keyframes ch-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ch-spin { animation: none; } }
.ch-more > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--geo-text2); min-height: 32px; }
.ch-more[open] > summary { margin-bottom: 10px; }
.ch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── The growth plan on a client's home (26 Sep): _plan.php ─────────────────────── */
.gp { display: flex; flex-direction: column; gap: 12px; border-color: color-mix(in srgb, var(--geo-accent) 30%, var(--geo-border)); }
/* Which website the plan is for: the design-system chip, one per website, wraps on a phone. */
.gp-sites { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.gp-sites-l { font-size: 13px; color: var(--geo-muted); }
.gp-site-chip { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.gp-h3 { margin: 6px 0 0; font-family: var(--geo-font-head); font-size: 15.5px; font-weight: 650; color: var(--geo-text); }
.gp-focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .gp-focus { grid-template-columns: 1fr; } }
.gp-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border: 1px solid var(--geo-border); border-radius: 14px; background: var(--geo-surface2); }
.gp-card.is-focus { background: var(--geo-surface); border-color: color-mix(in srgb, var(--geo-accent) 40%, var(--geo-border)); }
.gp-card[hidden] { display: none; }
.gp-area { margin: 0; font-size: 12px; font-weight: 650; letter-spacing: .02em; color: var(--geo-accent); }
.gp-title { margin: 0; font-family: var(--geo-font-head); font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--geo-text); overflow-wrap: anywhere; }
.gp-why { margin: 0; font-size: 14px; line-height: 1.5; color: var(--geo-text2); overflow-wrap: anywhere; }
.gp-gain { margin: 0; font-size: 14px; line-height: 1.5; color: var(--geo-text); }
.gp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 6px; }
.gp-acts .ch-btn-go { margin-top: 0; width: auto; flex: 1 1 100%; }
.gp-acts .ch-link { margin-top: 0; }
.gp-inline { display: contents; }
.gp-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--geo-muted); }
.gp-msg { margin: 0; font-size: 13.5px; font-weight: 600; }
.gp-msg.is-ok { color: var(--geo-good-ink, var(--geo-good)); } .gp-msg.is-bad { color: var(--geo-bad); }
.gp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.gp-src { font-size: 12px; color: var(--geo-muted); }
.gp-notnow { min-height: 32px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--geo-muted); cursor: pointer; }
.gp-notnow:hover { color: var(--geo-text); text-decoration: underline; }
.gp-areas { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 45%), 1fr)); gap: 8px; }
.gp-area-tile { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--geo-border); background: var(--geo-surface); }
.gp-area-name { font-size: 13.5px; font-weight: 600; color: var(--geo-text); }
.gp-level { align-self: flex-start; font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 99px; background: var(--geo-surface2); color: var(--geo-text2); }
.gp-area-tile.is-strong .gp-level { background: color-mix(in srgb, var(--geo-good) 18%, transparent); color: var(--geo-good-ink, var(--geo-good)); }
.gp-area-tile.is-building .gp-level { background: color-mix(in srgb, var(--geo-accent) 16%, transparent); color: var(--geo-text); }
.gp-area-tile.is-start .gp-level { background: color-mix(in srgb, var(--geo-warn) 16%, transparent); color: var(--geo-text); }
.gp-area-hint { font-size: 12.5px; line-height: 1.4; color: var(--geo-muted); }
.gp-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .gp-rest { grid-template-columns: 1fr; } }
.gp-asks { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--geo-border); }
.gp-ask { border: 1px solid var(--geo-border); border-radius: 12px; background: var(--geo-surface); padding: 0 12px; }
.gp-ask > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: 14.5px; line-height: 1.4; color: var(--geo-text); }
.gp-ask[open] { padding-bottom: 12px; }
.gp-ask[data-done] > summary { color: var(--geo-text2); }
.gp-ask-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gp-ask-form textarea, .gp-ask-form input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--geo-border);
  background: var(--geo-bg, var(--geo-surface)); color: var(--geo-text); font: inherit; font-size: 15px; }
.gp-ask-form textarea:focus, .gp-ask-form input:focus { outline: 2px solid var(--geo-accent); outline-offset: 1px; }
.gp-ask-form .ch-btn { align-self: flex-start; }
.gp-card-ask .gp-ask { border: 0; padding: 0; background: none; }
/* The agency's view of its client's plan (clients/_client_plan.php) */
.agp { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: 16px; padding: 18px; }
.agp-h { margin: 0 0 4px; font-family: var(--geo-font-head); font-size: 17px; font-weight: 650; color: var(--geo-text); }
.agp-h3 { margin: 14px 0 6px; font-size: 14.5px; font-weight: 650; color: var(--geo-text); }
.agp-sub { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--geo-text2); }
.agp-note { margin: 8px 0 0; font-size: 12.5px; color: var(--geo-muted); }
.agp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.agp-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--geo-border); }
.agp-row:first-child { border-top: 0; }
.agp-row.is-focus { background: color-mix(in srgb, var(--geo-accent) 8%, transparent); border-radius: 10px; padding: 10px; }
.agp-text { flex: 1 1 auto; min-width: 0; }
.agp-area { margin: 0; font-size: 12px; font-weight: 650; color: var(--geo-accent); }
.agp-title { margin: 2px 0; font-weight: 600; font-size: 14.5px; color: var(--geo-text); overflow-wrap: anywhere; }
.agp-why { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--geo-text2); overflow-wrap: anywhere; }
.agp-asked { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 99px;
  background: color-mix(in srgb, var(--geo-warn) 16%, transparent); color: var(--geo-text); }
.agp-open { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--geo-border);
  font-size: 13.5px; font-weight: 600; color: var(--geo-text); text-decoration: none; }
/* A long label (a price on the button) wraps inside it, never past the screen (slice 3). */
.agp-body .agp-open { flex: 0 1 auto; max-width: 100%; padding-block: 6px; white-space: normal; }
.agp-open:hover { border-color: var(--geo-accent); }
/* "Make the plan" while it works (about a minute): a spinner, and the button says what's happening. */
.agp-spin { display: none; width: 14px; height: 14px; margin-right: 8px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: agp-spin .8s linear infinite; }
.agp-open.is-busy .agp-spin { display: inline-block; }
.agp-open.is-busy { opacity: .85; cursor: progress; }
@keyframes agp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .agp-spin { animation-duration: 2.4s; } }
.agp-more > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--geo-accent); }
.agp-told { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--geo-text2); }
.agp-date { font-weight: 650; color: var(--geo-text); }
@media (max-width: 520px) { .agp-row { flex-direction: column; align-items: stretch; } .agp-open { align-self: flex-start; } }

.gp-more > summary { list-style: none; cursor: pointer; }
.gp-more > summary::-webkit-details-marker { display: none; }
.gp-more[open] > summary { display: none; }

.cn-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
  background: var(--geo-brand); color: var(--geo-brand-ink); font-size: 11.5px; font-weight: 700; }
.ch-inbox-title { display: block; font-weight: 600; color: var(--geo-text); }
.ch-inbox-msg { display: block; margin-top: 2px; color: var(--geo-text2); }
.ch-inbox-date { display: block; margin-top: 4px; font-size: 12.5px; color: var(--geo-muted); }
.ch-inbox-row:not(.is-new) .ch-inbox-title { font-weight: 500; color: var(--geo-text2); }
.cn-bell { position: relative; margin-left: auto; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--geo-text); }
.cn-bell:hover { background: var(--geo-surface2); }
.cn-bell-n { position: absolute; top: 4px; right: 2px; }

/* ═══ THE CLEAN CLIENT HOME (27 Sep 2026) ═════════════════════════════════════════════
   Edward: "no bulky stuff, just clean info, expand for more, take action, clean big SaaS".
   GEOPHII_BLUEPRINT/CLIENT_HOME_CALM_2026-09-27.md. Rows in one panel per section: a name,
   one short fact, one button; the rest behind an arrow. Tokens only, both themes. */
.ck { gap: 18px; max-width: 46rem; }
.ck-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ck-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-radius: 14px;
  background: var(--geo-surface); border: 1px solid var(--geo-border); color: var(--geo-text); text-decoration: none; }
a.ck-tile:hover { border-color: var(--geo-border2); }
.ck a.ck-tile, .ck a.ck-tile .ck-tile-n { color: var(--geo-text) !important; }
.ck a.ck-tile .ck-tile-l, .ck a.ck-tile .ck-tile-s:not(.is-up) { color: var(--geo-muted) !important; }
.ck .ck-tile-a { color: var(--geo-accent) !important; }
.ck-tile-l { font-size: 12.5px; color: var(--geo-muted); }
.ck-tile-n { font-family: var(--geo-font-head); font-size: 24px; font-weight: 650; line-height: 1.15; letter-spacing: -.01em; }
.ck-tile-none { font-size: 15px; line-height: 1.6; }
.ck-tile-s { font-size: 12.5px; font-weight: 600; color: var(--geo-muted); }
.ck-tile-s.is-up { color: var(--geo-good-ink, var(--geo-good)); }
.ck-tile-a { color: var(--geo-accent); text-decoration: none; }
.ck-sec { display: flex; flex-direction: column; gap: 8px; }
.ck-h { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--geo-muted); }
.ck .ck-h a { color: var(--geo-accent) !important; }
.ck-h a { font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--geo-accent); text-decoration: none; font-weight: 600; }
.ck-list { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: 14px; overflow: hidden; }
.ck-row { padding: 12px 14px; border-top: 1px solid var(--geo-border); }
/* /client-work, more than one website: one group per website (structure audit step 10). */
.ck-group:not([hidden]) ~ .ck-group:not([hidden]) { border-top: 1px solid var(--geo-border); }
.ck-group-h { margin: 0; padding: 12px 14px 8px; font-size: 12.5px; font-weight: 650; letter-spacing: .02em; color: var(--geo-muted); background: var(--geo-surface2); overflow-wrap: anywhere; }

.ck-row:first-child { border-top: 0; }
.ck-row[hidden] { display: none; }
.ck-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ck-row-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-row-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--geo-text); overflow-wrap: anywhere; }
.ck-row-sub { margin: 0; font-size: 13px; line-height: 1.4; color: var(--geo-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.ck-row-act { flex: none; display: flex; gap: 6px; }
.ck-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
  border: 1px solid var(--geo-border2); background: transparent; color: var(--geo-accent) !important; }
.ck-btn:hover { border-color: var(--geo-accent); }
.ck-btn-go { border-color: var(--geo-brand); background: var(--geo-brand); color: var(--geo-brand-ink) !important; }
.ck-btn-go:hover { filter: brightness(1.06); }
.ck-btn[disabled] { opacity: .6; cursor: default; }
.ck-chev { flex: none; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; color: var(--geo-muted);
  display: grid; place-items: center; }
.ck-chev::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform var(--geo-dur); }
.ck-chev[aria-expanded="true"]::before { transform: rotate(45deg); }
.ck-chev:hover { background: var(--geo-surface2); }
.ck-exp { padding: 10px 0 2px; display: flex; flex-direction: column; gap: 8px; }
.ck-exp[hidden] { display: none; }
.ck-why, .ck-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--geo-text2); }
.ck-note { color: var(--geo-muted); font-size: 13px; }
.ck-links { margin: 0; display: flex; gap: 16px; align-items: center; }
.ck-link { padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--geo-accent); text-decoration: none; cursor: pointer; }
.ck .ck-link { color: var(--geo-accent) !important; }
.ck .ck-link-quiet { color: var(--geo-muted) !important; font-weight: 500; }
.ck-choice { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--geo-surface2); }
.ck-choice-h { margin: 0; font-size: 13px; font-weight: 650; color: var(--geo-text2); }
.ck-opt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-opt .ck-btn { min-width: 11rem; }
.ck-opt-sub { font-size: 13px; color: var(--geo-muted); }
.ck-opt .gp-inline { margin: 0; }
.ck-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--geo-surface2); color: var(--geo-text2); }
.ck-chip.is-you { background: var(--geo-accent-soft); color: var(--geo-accent); }
.ck-chip.is-doing { background: color-mix(in srgb, var(--geo-info) 16%, transparent); color: var(--geo-second-ink); }
.ck-chip.is-done { background: color-mix(in srgb, var(--geo-good) 14%, transparent); color: var(--geo-good-ink); }
.ck-chip.is-due { background: color-mix(in srgb, var(--geo-info) 16%, transparent); color: var(--geo-second-ink); }
/* Messages with the agency on a task (27 Sep, migration 157) */
.ck-msgline { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--geo-text2); overflow-wrap: anywhere; }
.ck-msgline b { color: var(--geo-text); font-weight: 600; }
.ck-thread { margin-top: 6px; }
.ck-thread > summary { cursor: pointer; font-size: 13px; color: var(--geo-muted); list-style: none; }
.ck-thread > summary::-webkit-details-marker { display: none; }
.ck-thread[open] > summary { font-size: 0; }
.ck-thread[open] > summary::after { content: attr(data-less); font-size: 13px; }
.ck-fold { border-top: 1px solid var(--geo-border); }
.ck-fold:first-child { border-top: 0; }
.ck-fold > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.ck-fold > summary::-webkit-details-marker { display: none; }
.ck-fold > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 10px; border: solid var(--geo-muted); border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform var(--geo-dur); }
.ck-fold[open] > summary::after { transform: rotate(45deg); }
.ck-fold-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.ck-fold-body > .ck-row { padding: 12px 0; }
.ck-fold-body > .ck-row:first-child { border-top: 0; }
.ck .gp-row-ask .gp-ask { border: 0; padding: 0; background: none; }
.ck-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.ck-filter { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--geo-border); background: var(--geo-surface); color: var(--geo-text2);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ck-filter[aria-pressed="true"] { background: var(--geo-brand); border-color: var(--geo-brand); color: var(--geo-brand-ink); }
/* Site pills on /client-google are links; beat the global link colour the way .ck-tile-a does. */
.ck a.ck-filter, .ck a.ck-filter:visited { text-decoration: none; color: var(--geo-text2) !important; }
.ck a.ck-filter[aria-pressed="true"], .ck a.ck-filter[aria-pressed="true"]:visited { color: var(--geo-brand-ink) !important; }
.ck-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.ck-form label { font-size: 13.5px; font-weight: 600; color: var(--geo-text2); }
.ck-form input[type=text], .ck-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--geo-border2);
  background: var(--geo-surface); color: var(--geo-text); font: inherit; font-size: 15px; }
.ck-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14.5px; color: var(--geo-text); }
.ck-who label { display: inline-flex; align-items: center; gap: 6px; }
.ck-who input[type=radio] { width: auto; margin: 0; }
@media (max-width: 480px) {
  .ck-tile { padding: 10px; }
  .ck-tile-n { font-size: 21px; }
  .ck .ck-row-main { flex-wrap: wrap; }
  .ck .ck-row-t { flex: 1 1 calc(100% - 44px); }
  .ck .ck-row-act { order: 3; flex: 1 1 100%; }
  .ck .ck-row-act .ck-btn, .ck .ck-row-act form, .ck .ck-row-act form .ck-btn { flex: 1 1 0; width: 100%; }
  .ck .ck-row-act:empty { display: none; }
  .ck .gp-row .ck-chev { order: 2; }
  .ck-opt .ck-btn { width: 100%; }
}
/* The client's Google page (27 Sep): a compact four-column table that fits a phone. */
.g-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem 4.6rem 3.6rem; gap: 8px; align-items: center;
  padding: 10px 14px; border-top: 1px solid var(--geo-border); font-size: 14px; }
.g-row:first-child { border-top: 0; }
.g-row > span:not(.g-key) { text-align: right; font-variant-numeric: tabular-nums; color: var(--geo-text2); }
.g-head { font-size: 12px; font-weight: 650; color: var(--geo-muted); }
.g-head > span { color: var(--geo-muted) !important; }
.g-key { min-width: 0; overflow-wrap: break-word; color: var(--geo-text); }
.g-table[hidden] { display: none; }
a.ck-fold-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: var(--geo-text) !important; }
a.ck-fold-link::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 10px; border: solid var(--geo-muted); border-width: 0 2px 2px 0; transform: rotate(-45deg); }
.g-head > span:first-child { text-align: left; }
/* The plan as a checklist (27 Sep): progress first, a round mark per step, ticked when done. */
.ck-progress { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 4px; }
.ck-progress-l { margin: 0; font-size: 14px; font-weight: 600; color: var(--geo-text); }
.ck-progress-bar { display: block; height: 8px; border-radius: 99px; background: var(--geo-surface2); overflow: hidden; }
.ck-progress-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--geo-good); }
.ck-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--geo-border2); display: grid; place-items: center; }
.ck-row.is-done .ck-mark { border-color: var(--geo-good); background: var(--geo-good); }
.ck-row.is-done .ck-mark::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ck-row.is-agency .ck-mark { border-color: var(--geo-info); border-style: dashed; }
.ck-row.is-done .ck-row-title { color: var(--geo-muted); text-decoration: line-through; text-decoration-color: var(--geo-border2); }
.ck-gain { margin: 0; font-size: 14px; line-height: 1.5; color: var(--geo-text); padding: 8px 10px; border-radius: 10px;
  background: color-mix(in srgb, var(--geo-good) 9%, var(--geo-surface)); }
.ck-gain strong { display: block; font-size: 12.5px; color: var(--geo-good-ink, var(--geo-good)); margin-bottom: 2px; }
/* The findings behind a plan step, inside it (one plan, 18 Oct). */
.ck-evidence { margin: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--geo-border); }
.ck-evidence ul { margin: 4px 0 0; padding: 0; list-style: none; }
.ck-evidence li { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--geo-text2); overflow-wrap: anywhere; }
.ck-evidence li:last-child { margin-bottom: 0; }
@media (max-width: 480px) { .ck .gp-row.is-step .ck-row-t { flex: 1 1 calc(100% - 80px); } }
.agp-doc { font-size: 14px; line-height: 1.6; color: var(--geo-text2); max-height: 32rem; overflow: auto; padding: 4px 2px; }
.agp-doc h1, .agp-doc h2, .agp-doc h3 { font-size: 15px; color: var(--geo-text); margin: 12px 0 4px; }
.ck-since { font-size: 12.5px; color: var(--geo-muted); }
.ck-since.is-up { color: var(--geo-good-ink, var(--geo-good)); font-weight: 600; }

/* The client's Website page (27 Sep): the header and card headers wrap instead of squeezing a
   button into a thin column on a phone. (No sm:/lg: utilities exist in this build.) */
.ws-wrap { flex-wrap: wrap; row-gap: 10px; }

/* ═══ A CLIENT'S REPORT (reports/client.php, 27 Sep 2026) ═══════════════════════════════
   The client area's cards (.ch-*), plus what a report needs: bars with their figure, small
   tables that scroll sideways on a phone, the questions as folds, and a print version that is
   the download. Tokens only, so both themes come from the theme. */
.cr-back { font-size: 14px; color: var(--geo-text2) !important; text-decoration: none; }
.cr-back:hover { color: var(--geo-text) !important; }
.cr-head .ch-h1 { margin-top: 8px; }
.cr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.cr-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--geo-text2); flex-wrap: wrap; }
.cr-pick select { min-height: 38px; max-width: 100%; padding: 0 10px; border-radius: 10px; border: 1px solid var(--geo-border);
  background: var(--geo-surface); color: var(--geo-text); font: inherit; font-size: 14px; }
.cr-unit { margin: 0; font-size: 13px; font-weight: 600; color: var(--geo-muted); }
.cr-band { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--geo-text); }
.cr-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--geo-muted); }
.cr-muted { color: var(--geo-muted); font-size: 13.5px; }
.cr-small { font-size: 12.5px; color: var(--geo-muted); }
.cr-wrap { overflow-wrap: anywhere; }
.cr-part { margin: 14px 2px 0; font-family: var(--geo-font-head); font-size: 20px; font-weight: 650; color: var(--geo-text); }
.cr-part-sub { margin: -6px 2px 0; }
.cr-part-link { margin: -4px 2px 0; }

/* Bars with their figure beside them. */
.cr-bars { margin-top: 12px; }
.cr-bars li { grid-template-columns: 6.5rem minmax(0, 1fr); }
.cr-bars-wide li { grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); }
.cr-bar-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cr-bar-row .ch-bar { flex: 1 1 auto; min-width: 0; }
.cr-bar-row b { flex: none; min-width: 2.8em; text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.cr-bar-other { background: var(--geo-muted) !important; opacity: .55; }
.cr-name { min-width: 0; overflow-wrap: anywhere; }
.cr-bars li.is-you .cr-name { font-weight: 650; }
@media (max-width: 480px) {
  .cr-bars li, .cr-bars-wide li { grid-template-columns: 1fr; }
  .cr-bars .ch-eng-n { grid-column: 1; }
}
.cr-you { background: var(--geo-accent-soft); color: var(--geo-accent); }
.cr-tag-good { background: color-mix(in srgb, var(--geo-good) 16%, transparent); color: var(--geo-good-ink, var(--geo-good)); }

/* The trend chart. */
.cr-chart { position: relative; height: 240px; margin-top: 12px; }
@media (max-width: 480px) { .cr-chart { height: 200px; } }

/* Folds and tables. */
.cr-more { margin-top: 10px; }
.cr-more > summary, .cr-q > summary { cursor: pointer; }
.cr-more > summary { font-size: 14px; font-weight: 600; color: var(--geo-accent); }
.cr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 8px; }
.cr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cr-table th, .cr-table td { padding: 8px 10px; text-align: right; border-top: 1px solid var(--geo-border); white-space: nowrap; }
.cr-table th:first-child, .cr-table td:first-child { text-align: left; white-space: normal; }
.cr-table thead th { border-top: 0; font-size: 12.5px; font-weight: 600; color: var(--geo-muted); white-space: normal; vertical-align: bottom; }
@media (max-width: 480px) { .cr-table th, .cr-table td { padding: 8px 6px; font-size: 13px; } }
.cr-table td.cr-wrap { min-width: 8rem; overflow-wrap: normal; word-break: normal; }
.cr-heat tbody th { font-weight: 500; }
.cr-heat tr.is-you th, .cr-heat tr.is-you td { font-weight: 650; }

/* How it talks about them: one stacked bar. */
.cr-stack { display: flex; height: 12px; border-radius: 99px; overflow: hidden; margin: 12px 0 10px; background: var(--geo-surface2); gap: 2px; }
.cr-stack-good { background: var(--geo-good); }
.cr-stack-neutral { background: var(--geo-muted); opacity: .6; }
.cr-stack-bad { background: var(--geo-bad); }
.cr-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--geo-text2); }
.cr-legend li { display: inline-flex; align-items: center; gap: 7px; }
.cr-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* The questions. */
.cr-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.cr-filters .ch-btn { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 99px; }
.cr-filters .is-on { border-color: var(--geo-accent); color: var(--geo-accent) !important; }
.cr-qs { display: flex; flex-direction: column; margin-top: 6px; }
.cr-q { border-top: 1px solid var(--geo-border); }
.cr-q:first-child { border-top: 0; }
.cr-q > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 0; list-style: none; }
.cr-q > summary::-webkit-details-marker { display: none; }
.cr-q-t { flex: 1 1 16rem; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.cr-answers { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cr-a-h { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }
.cr-quote { margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--geo-border); background: var(--geo-surface2);
  border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.55; color: var(--geo-text2); overflow-wrap: anywhere; }

/* Figures. */
.cr-big { margin: 10px 0 0; font-family: var(--geo-font-head); font-size: 28px; font-weight: 700; }
.cr-stats { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 12px 0 4px; }
.cr-stats div { display: flex; flex-direction: column; }
.cr-stats b { font-family: var(--geo-font-head); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-stats span { font-size: 13px; color: var(--geo-muted); }
.cr-score { flex: none; min-width: 4.2em; text-align: center; font-weight: 700; font-size: 14px; padding: 4px 8px; border-radius: 10px; background: var(--geo-surface2); }
.cr-band-good { color: var(--geo-good-ink, var(--geo-good)); } .cr-band-warn { color: var(--geo-warn-ink, var(--geo-warn)); } .cr-band-low { color: var(--geo-text2); }
.cr-roast { align-items: flex-start; }
.cr-rank { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cr-bullets { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.6; }
.cr-print-foot { display: none; }

/* The download: reports/client.php on its own page (?export=pdf), then printed. */
.cr-printpage { background: var(--geo-bg, #fff); padding: 20px 16px 40px; }
.cr-printpage .cr-print-foot { display: block; margin-top: 16px; font-size: 12px; color: var(--geo-muted); }
.cr-printbar { max-width: 60rem; margin: 0 auto 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
@media print {
  .cr-printpage { padding: 0; background: #fff; }
  /* Keep the colours: the score ring and every bar are backgrounds, which browsers drop by default. */
  #cr, #cr * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #cr .cr-noprint, .cr-printbar { display: none !important; }
  #cr { max-width: none; }
  /* Small cards stay whole; the long ones (the questions) flow across pages, one question kept whole. */
  #cr .ch-card { break-inside: auto; }
  #cr .ch-card:not(:has(.cr-qs)):not(:has(.cr-table)) { break-inside: avoid; }
  #cr .cr-q, #cr .ch-row, #cr tr { break-inside: avoid; }
  /* Wide tables fit the paper: wrap, smaller. */
  #cr .cr-scroll { overflow: visible; }
  #cr .cr-table { font-size: 11px; }
  #cr .cr-table th, #cr .cr-table td { white-space: normal; padding: 5px 6px; }
}

/* ── OpenSEO parity (28 Sep 2026): shared keyword-difficulty badge ────────────────────────────
   OpenSEO's six bands (0-20, 21-35, 36-50, 51-65, 66-80, 81-100), folded onto our good / warn / bad
   tokens exactly as the keyword table does (.kt-b1..6 in page-improvement.css), so a 62 is the same
   colour on every screen and flips with the theme. */
.geo-kd { --kd: var(--geo-muted); --kd-ink: var(--geo-text2); --kd-w: 18%; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: color-mix(in oklab, var(--kd) var(--kd-w), var(--geo-bg)); border: 1px solid color-mix(in oklab, var(--kd) 40%, transparent); color: var(--kd-ink); }
.geo-kd-na { --kd: var(--geo-border2); --kd-ink: var(--geo-text2); }
.geo-kd-1 { --kd: var(--geo-good); --kd-ink: var(--geo-good-ink); --kd-w: 14%; }
.geo-kd-2 { --kd: var(--geo-good); --kd-ink: var(--geo-good-ink); --kd-w: 26%; }
.geo-kd-3 { --kd: var(--geo-warn); --kd-ink: var(--geo-warn-ink); --kd-w: 14%; }
.geo-kd-4 { --kd: var(--geo-warn); --kd-ink: var(--geo-warn-ink); --kd-w: 26%; }
.geo-kd-5 { --kd: var(--geo-bad);  --kd-ink: var(--geo-bad-ink);  --kd-w: 14%; }
.geo-kd-6 { --kd: var(--geo-bad);  --kd-ink: var(--geo-bad-ink);  --kd-w: 28%; }

/* Eight tag colours (OpenSEO's palette names), one set per theme. */
:root { --geo-hue-slate: #64748b; --geo-hue-rose: #e11d48; --geo-hue-amber: #d97706; --geo-hue-lime: #65a30d;
        --geo-hue-emerald: #059669; --geo-hue-sky: #0284c7; --geo-hue-violet: #7c3aed; --geo-hue-fuchsia: #c026d3; }
html[data-theme="dark"] { --geo-hue-slate: #94a3b8; --geo-hue-rose: #fb7185; --geo-hue-amber: #fbbf24; --geo-hue-lime: #a3e635;
        --geo-hue-emerald: #34d399; --geo-hue-sky: #38bdf8; --geo-hue-violet: #a78bfa; --geo-hue-fuchsia: #e879f9; }

/* ── Rank tracking ─────────────────────────────────────────────────────────────────────────── */
.rt-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
@media (min-width: 900px) { .rt-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rt-tile { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rt-tile-l { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--geo-text2); }
.rt-tile-v { font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--geo-text); font-variant-numeric: tabular-nums; }
.rt-tile-sm { font-size: 17px; }
.rt-tile-d { font-size: 12px; font-weight: 600; color: var(--geo-text2); }
.rt-tile-d.is-up { color: var(--geo-good); } .rt-tile-d.is-down { color: var(--geo-warn); }
/* A big Check all in the background (18 Oct): one quiet line, tokens only, both themes. */
.rt-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--geo-border); border-left: 3px solid var(--geo-accent); border-radius: var(--geo-r-card);
  background: var(--geo-surface); color: var(--geo-text); font-size: 14px; line-height: 1.5; }
.rt-status[data-state="unknown"] { border-left-color: var(--geo-warn); }
.rt-status-act { color: var(--geo-accent); font-weight: 600; text-decoration: underline; }
.rt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.rt-cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rt-cmp-l { font-size: 12px; font-weight: 600; color: var(--geo-text2); margin-right: 2px; }
.rt-add { margin: 0 0 14px; }
.rt-add > summary { list-style: none; display: inline-flex; cursor: pointer; }
.rt-add > summary::-webkit-details-marker { display: none; }
.rt-add-form { margin-top: 10px; background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); padding: 14px; }
.rt-add-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 10px; }
.rt-kw > summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.rt-kw > summary::-webkit-details-marker { display: none; }
.rt-kw-t { font-weight: 600; color: var(--geo-text); }
.rt-kw > summary .rt-kw-t::after { content: " ▸"; color: var(--geo-muted); font-size: 11px; }
.rt-kw[open] > summary .rt-kw-t::after { content: " ▾"; }
.rt-kw-sub { font-size: 11px; color: var(--geo-text2); }
.rt-more { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--geo-border); border-radius: 10px; background: var(--geo-surface2); max-width: 420px; }
.rt-more-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--geo-text2); margin: 0 0 6px; }
.rt-more-h + * { margin-bottom: 12px; }
.rt-spark { width: 100%; max-width: 280px; height: 64px; display: block; }
.rt-spark-top { stroke: var(--geo-border); stroke-dasharray: 3 3; }
.rt-spark-line { fill: none; stroke: var(--geo-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rt-spark-dot { fill: var(--geo-accent); }
.rt-spark-miss { fill: var(--geo-muted); }
.rt-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rt-top li { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.35; min-width: 0; }
.rt-top-n { flex: 0 0 18px; text-align: right; font-variant-numeric: tabular-nums; color: var(--geo-text2); font-weight: 600; }
.rt-top-t { min-width: 0; overflow-wrap: anywhere; color: var(--geo-text); }
.rt-top-d { display: block; font-size: 11px; color: var(--geo-text2); }
/* Position: OpenSEO's "was → now" (RankTrackingTableParts.tsx DeviceRankCell). */
.rt-rank { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rt-was { font-family: var(--geo-mono); font-size: 12px; color: var(--geo-muted); min-width: 18px; text-align: right; }
.rt-arrow { color: var(--geo-muted); font-size: 12px; }
.rt-pos { font-family: var(--geo-mono); font-size: 12.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  background: var(--geo-surface2); color: var(--geo-text); }
.rt-pos-up   { background: color-mix(in oklab, var(--geo-good) 20%, transparent); color: var(--geo-good-ink, var(--geo-good)); }
.rt-pos-down { background: color-mix(in oklab, var(--geo-warn) 22%, transparent); color: var(--geo-warn-ink, var(--geo-warn)); }
.rt-pos-lost { background: color-mix(in oklab, var(--geo-bad) 18%, transparent); color: var(--geo-bad-ink, var(--geo-bad)); font-family: var(--geo-font); }
.rt-pos-out  { background: transparent; color: var(--geo-text2); font-family: var(--geo-font); font-weight: 500; padding: 0; }
.rt-feats { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rt-feat { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--geo-surface2); color: var(--geo-text2); border: 1px solid var(--geo-border); }
.rt-table td:nth-child(1) { min-width: 210px; }
.rt-table .rt-kw-t { font-size: 14px; }
.rt-table th:nth-child(n+4):nth-child(-n+6), .rt-table td:nth-child(n+4):nth-child(-n+6) { white-space: nowrap; padding-left: 12px; padding-right: 12px; text-align: right; }
.rt-table td:nth-child(3) { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-table td:nth-child(7) { min-width: 150px; }
@media (max-width: 767px) { .rt-table td:nth-child(1) { min-width: 0; } .rt-table td:nth-child(3) { max-width: none; white-space: normal; }
  .rt-table th:nth-child(n+4):nth-child(-n+6), .rt-table td:nth-child(n+4):nth-child(-n+6) { text-align: left; } }
@media (max-width: 767px) { .rt-table td.rt-empty { display: none; } }

/* ── Saved keywords (OpenSEO parity, 28 Sep 2026) ──────────────────────────────────────────── */
.sk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sk-tag { --tg: var(--geo-hue-slate); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px;
  font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none !important;
  background: color-mix(in oklab, var(--tg) 14%, transparent); color: color-mix(in oklab, var(--tg) 62%, var(--geo-text)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tg) 30%, transparent); }
.sk-tag.is-on { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--tg) 70%, transparent); }
.sk-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--tg); flex: 0 0 auto; }
.sk-tag-n { opacity: .7; font-variant-numeric: tabular-nums; }
.sk-tag-slate { --tg: var(--geo-hue-slate); } .sk-tag-rose { --tg: var(--geo-hue-rose); } .sk-tag-amber { --tg: var(--geo-hue-amber); } .sk-tag-lime { --tg: var(--geo-hue-lime); }
.sk-tag-emerald { --tg: var(--geo-hue-emerald); } .sk-tag-sky { --tg: var(--geo-hue-sky); } .sk-tag-violet { --tg: var(--geo-hue-violet); } .sk-tag-fuchsia { --tg: var(--geo-hue-fuchsia); }
.sk-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sk-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 12px; }
.sk-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--geo-text2); }
.sk-f input { width: 130px; }
.sk-kw { font-weight: 600; color: var(--geo-text); }
.sk-mkt { font-size: 10.5px; font-weight: 700; color: var(--geo-text2); margin-left: 4px; }
.sk-cb { width: 34px; }
.sk-cb input { width: 16px; height: 16px; accent-color: var(--geo-accent); }
.sk-intent { --it: var(--geo-second); display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: color-mix(in oklab, var(--it) 15%, transparent); color: color-mix(in oklab, var(--it) 62%, var(--geo-text));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--it) 32%, transparent); }
.sk-intent-informational { --it: var(--geo-second); } .sk-intent-commercial { --it: var(--geo-warn); }
.sk-intent-transactional { --it: var(--geo-good); } .sk-intent-navigational { --it: var(--geo-accent); }
.sk-rank-out { font-size: 12px; color: var(--geo-text2) !important; }
.sk-table a.rt-pos { text-decoration: none !important; }
.sk-edit { margin-top: 4px; }
.sk-edit-s { cursor: pointer; font-size: 11.5px; color: var(--geo-text2); list-style: none; }
.sk-edit-s::-webkit-details-marker { display: none; }
.sk-edit-f { display: flex; gap: 6px; margin-top: 6px; }
.sk-edit-f input { min-width: 150px; }
.sk-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; max-width: calc(100vw - 24px);
  background: var(--geo-surface); border: 1px solid var(--geo-border2); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.sk-bar[hidden] { display: none; }
.sk-bar-n { font-size: 13px; font-weight: 700; color: var(--geo-text); padding: 0 6px; white-space: nowrap; }
.sk-bar-sep { width: 1px; align-self: stretch; background: var(--geo-border); margin: 0 2px; }
.sk-bar-b, .sk-bar-x { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--geo-text) !important;
  font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer; min-height: 36px; }
.sk-bar-b:hover, .sk-bar-x:hover { background: var(--geo-surface2) !important; }
.sk-bar-danger { color: var(--geo-bad-ink, var(--geo-bad)) !important; }
.sk-bar-tag { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 6px 4px 2px; }
.sk-bar-tag[hidden] { display: none; }
.sk-bar-tag label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--geo-text2); }
@media (max-width: 767px) {
  .sk-bar { left: 12px; right: 12px; transform: none; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); justify-content: center; }
  .sk-table td.sk-empty { display: none; }
  .sk-f input { width: 110px; }
}
.sk [hidden], .rt [hidden] { display: none !important; }
.sk-table th, .sk-table td { padding-left: 10px; padding-right: 10px; }
.sk-table td:nth-child(n+3):nth-child(-n+8), .sk-table th:nth-child(n+3):nth-child(-n+8) { white-space: nowrap; }
.sk-table td:nth-child(n+3):nth-child(-n+5) { text-align: right; font-variant-numeric: tabular-nums; }
.sk-table td:nth-child(2) { min-width: 200px; }
.sk-kw { font-size: 14px; font-weight: 500; }
@media (max-width: 767px) { .sk-table td:nth-child(n+3):nth-child(-n+5) { text-align: left; } .sk-table td:nth-child(2) { min-width: 0; } }
.sk-table td:nth-child(10), .rt-table td:nth-child(8) { white-space: nowrap; }

/* ── Keyword research additions (OpenSEO parity, 28 Sep 2026) ──────────────────────────────── */
.kr-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; }
.kr-recent-h { font-size: 12px; font-weight: 600; color: var(--geo-text2); margin-right: 2px; }
.kr-mkt { font-size: 10.5px; font-weight: 700; opacity: .7; }
.kr-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 14px; }
@media (min-width: 900px) { .kr-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.kr-card { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); padding: 14px 16px; min-width: 0; }
.kr-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.kr-card-kw { font-size: 17px; font-weight: 700; color: var(--geo-text); overflow-wrap: anywhere; }
.kr-card-m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.kr-card-m dt { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--geo-text2); }
.kr-card-m dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: var(--geo-text); font-variant-numeric: tabular-nums; }
.kr-trend-h { font-size: 13px; font-weight: 700; color: var(--geo-text); }
.kr-trend-r { font-size: 12px; color: var(--geo-text2); }
.kr-chart { width: 100%; height: auto; display: block; }
.kr-grid { stroke: var(--geo-border); stroke-width: 1; }
.kr-axis { fill: var(--geo-text2); font-size: 11px; }
.kr-area { fill: color-mix(in oklab, var(--geo-accent) 16%, transparent); stroke: none; }
.kr-line { fill: none; stroke: var(--geo-accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.kr-dot { fill: var(--geo-accent); }
.kr-peak { font-size: 12px; color: var(--geo-text2); margin: 6px 0 0; }

/* ── Site audit: summary tiles + pages table (OpenSEO parity, 28 Sep 2026) ────────────────── */
.cr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 12px; }
@media (max-width: 520px) { .cr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr-tile { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); padding: 12px 14px; min-width: 0; }
.cr-tile-l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--geo-text2); }
.cr-tile-v { display: block; margin-top: 4px; font-size: 24px; font-weight: 700; color: var(--geo-text); font-variant-numeric: tabular-nums; }
.cr-pages-h { font-size: 13px; font-weight: 700; color: var(--geo-text); margin: 16px 0 8px; }
.cr-pages td { vertical-align: middle; }
.cr-p-url a { font-size: 13px; overflow-wrap: anywhere; }
.cr-p-title { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-p-st { font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
td.cr-p-st.is-good { color: var(--geo-good-ink, var(--geo-good)); }
td.cr-p-st.is-warn { color: var(--geo-warn-ink, var(--geo-warn)); }
td.cr-p-st.is-bad  { color: var(--geo-bad-ink, var(--geo-bad)); }
.cr-pages .cr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-pages .cr-muted { color: var(--geo-text2); }
.cr-pages .cr-p-flag { color: var(--geo-warn-ink, var(--geo-warn)); font-weight: 600; }
@media (max-width: 767px) { .cr-p-title { max-width: none; white-space: normal; } .cr-pages .cr-num { text-align: left; } }
.cr-pages-d > summary { cursor: pointer; list-style: none; } .cr-pages-d > summary::-webkit-details-marker { display: none; }
.cr-pages th, .cr-pages td { padding-left: 10px; padding-right: 10px; }
.cr-pages td:nth-child(6), .cr-pages td:nth-child(2) { white-space: nowrap; }
.cr-pages-d { margin: 0 0 18px; }
@media (max-width: 767px) { .cr-pages td:nth-child(6), .cr-pages td:nth-child(2) { white-space: normal; } }
@media (min-width: 768px) { .cr-pages td.cr-p-url { min-width: 240px; max-width: 360px; } }
/* CSV import box (saved keywords, rank tracking) */
.kr-imp { margin: 0 0 14px; }
.kr-imp > summary { list-style: none; display: inline-flex; cursor: pointer; }
.kr-imp > summary::-webkit-details-marker { display: none; }
.kr-imp-form { margin-top: 10px; background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); padding: 14px; }
.kr-imp-form p { margin: 0 0 10px; max-width: 70ch; }
.kr-imp-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.kr-imp-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--geo-text2); }
.kr-imp-f input[type=file] { font-size: 13px; color: var(--geo-text); max-width: 100%; }
/* A wide research table scrolls inside its box; it never widens the page. */
.sk .geo-table-wrap, .rt .geo-table-wrap { overflow-x: auto; max-width: 100%; }
/* Every cell of a row sits on one line, so a tag and its "Edit tags" never look like they belong
   to the next row; the date stays on one line; Remove is a quiet, compact button (E2E, 28 Sep). */
.sk table td, .rt table td { vertical-align: middle; }
.sk td[data-cell] .sk-edit { margin-top: 2px; }
.sk td:last-child .geo-tt-btn { padding: 4px 10px; font-size: 12px; white-space: nowrap; }
.sk td[data-value] { white-space: nowrap; }
.sk td[data-cell]:has(.sk-chips) { white-space: normal; min-width: 150px; }
.sk-table th, .sk-table td { padding-left: 6px; padding-right: 6px; }
.g-vis { font-size: 14px; font-weight: 600; color: var(--geo-text); margin: 0 0 10px; }
/* The difficulty band as a worded tag, for clients: same colours as the agency's badge. */
.geo-kd-tag { --kd: var(--geo-muted); --kd-ink: var(--geo-text2); --kd-w: 16%; display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
  background: color-mix(in oklab, var(--kd) var(--kd-w), var(--geo-bg)); border: 1px solid color-mix(in oklab, var(--kd) 40%, transparent); color: var(--kd-ink); }
.geo-kd-tag.geo-kd-1 { --kd: var(--geo-good); --kd-ink: var(--geo-good-ink); --kd-w: 14%; }
.geo-kd-tag.geo-kd-2 { --kd: var(--geo-good); --kd-ink: var(--geo-good-ink); --kd-w: 26%; }
.geo-kd-tag.geo-kd-3 { --kd: var(--geo-warn); --kd-ink: var(--geo-warn-ink); --kd-w: 14%; }
.geo-kd-tag.geo-kd-4 { --kd: var(--geo-warn); --kd-ink: var(--geo-warn-ink); --kd-w: 26%; }
.geo-kd-tag.geo-kd-5 { --kd: var(--geo-bad);  --kd-ink: var(--geo-bad-ink);  --kd-w: 14%; }
.geo-kd-tag.geo-kd-6 { --kd: var(--geo-bad);  --kd-ink: var(--geo-bad-ink);  --kd-w: 28%; }
.g-vis { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 500; color: var(--geo-text2); font-size: 13px; }
.g-vis strong { font-size: 30px; line-height: 1; font-weight: 700; color: var(--geo-text); font-variant-numeric: tabular-nums; }
.ck-row-main:has(> .rt-rank) { flex-wrap: nowrap; align-items: center; }
.ck-row-main > .rt-rank { margin-left: auto; flex-shrink: 0; }
.ck-row-main:has(> .rt-rank) .ck-row-t { min-width: 0; }
.ch-row .cr-rank { font-weight: 500; color: var(--geo-text2); font-size: 13px; }

/* ══ THE AGENCY'S CLIENT PAGE (clients/show.php, 29 Sep) ═══════════════════════════════════
   One client: who they are, the one next step, their plan, their websites, settings, intake.
   Tokens only, so both themes follow. */
.cp-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cp-page > * { margin-bottom: 0 !important; }
.cp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--geo-muted); margin-bottom: 12px; }
.cp-back:hover { color: var(--geo-text); }
.cp-head { display: flex; flex-direction: column; gap: 14px; }
.cp-id { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.cp-avatar { width: 48px; height: 48px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
  font-family: var(--geo-font-head); font-weight: 700; font-size: 17px; background: var(--geo-accent-soft); color: var(--geo-accent); }
.cp-id-main { min-width: 0; }
.cp-name { margin: 0; font-family: var(--geo-font-head); font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--geo-text);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; overflow-wrap: anywhere; }
.cp-contact { margin: 4px 0 0; font-size: 14px; color: var(--geo-text2); display: flex; flex-wrap: wrap; gap: 2px 14px; min-width: 0; }
.cp-contact a { color: inherit; overflow-wrap: anywhere; }
.cp-contact a:hover { color: var(--geo-accent); }
.cp-source { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--geo-muted); }
.cp-link { color: var(--geo-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cp-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 650;
  font-family: var(--geo-font); background: color-mix(in oklab, var(--geo-warn) 14%, transparent); color: var(--geo-warn-ink);
  border: 1px solid color-mix(in oklab, var(--geo-warn) 40%, transparent); }
.cp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: var(--geo-r-ctrl); font-size: 14px; text-align: center; line-height: 1.25; }
.cp-btn svg { width: 16px; height: 16px; flex: none; }
.cp-btn:disabled { opacity: .55; cursor: not-allowed; }
@media (min-width: 768px) {
  .cp-head { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .cp-actions { justify-content: flex-end; flex: none; max-width: 50%; }
}
.cp-card { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); padding: 18px; min-width: 0; }
.cp-h { margin: 0 0 4px; font-family: var(--geo-font-head); font-size: 17px; line-height: 1.3; font-weight: 650; color: var(--geo-text); }
.cp-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--geo-text2); }
.cp-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--geo-muted); }
.cp-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--geo-accent); }
.cp-row { display: flex; flex-direction: column; gap: 14px; }
.cp-row-main { min-width: 0; flex: 1 1 auto; }
.cp-row-act { display: flex; flex-direction: column; gap: 8px; }
.cp-row-act form { margin: 0; }
@media (max-width: 767px) { .cp-row-act .cp-btn { width: 100%; } }
@media (min-width: 768px) {
  .cp-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .cp-row-act { flex: none; align-items: stretch; }
}
.cp-next { border-color: color-mix(in oklab, var(--geo-accent) 45%, var(--geo-border)); background: color-mix(in oklab, var(--geo-accent) 5%, var(--geo-surface)); }
.cp-prospect { border-color: color-mix(in oklab, var(--geo-warn) 40%, var(--geo-border)); background: color-mix(in oklab, var(--geo-warn) 6%, var(--geo-surface)); }
.cp-prospect .cp-h { color: var(--geo-warn-ink); }
/* The top of a client's page as ONE card, a row per thing to do (Edward, 30 Sep). The rows keep
   their own markup; the wrapper is the card and each row loses its own box. */
.cp-start { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); overflow: hidden; min-width: 0; }
.cp-start > .cp-card { border: 0; border-radius: 0; background: transparent; padding: 14px 18px; }
.cp-start > .cp-card + .cp-card { border-top: 1px solid var(--geo-border); }
.cp-start .cp-h { font-size: 15.5px; margin: 0; }
.cp-start .cp-row { gap: 10px; }
.cp-start > .cp-next { background: color-mix(in oklab, var(--geo-accent) 5%, transparent); }
.cp-start > .cp-prospect { background: color-mix(in oklab, var(--geo-warn) 6%, transparent); }
.cp-start-for { font-size: 13px; color: var(--geo-muted); }
.cp-section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.cp-section-h .cp-h { margin: 0; }
.cp-count { font-size: 13px; font-weight: 600; color: var(--geo-muted); margin-left: 6px; }
.cp-sites { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .cp-sites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .cp-sites { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cp-site { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.cp-site.is-primary { border-color: color-mix(in oklab, var(--geo-accent) 40%, var(--geo-border)); }
.cp-site-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-width: 0; }
.cp-site-domain { margin: 0; font-weight: 650; font-size: 15px; color: var(--geo-text); overflow-wrap: anywhere; }
.cp-site-sub { margin: 2px 0 0; font-size: 13px; color: var(--geo-muted); }
.cp-tag { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 650;
  background: var(--geo-accent-soft); color: var(--geo-accent); }
.cp-status { margin: 0; font-size: 13px; color: var(--geo-muted); display: flex; align-items: center; gap: 6px; }
.cp-status.is-running { color: var(--geo-warn-ink); }
.cp-status.is-failed { color: var(--geo-bad-ink); }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.cp-site-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.cp-site-acts > a { flex: 1 1 auto; }
.cp-site-acts form { margin: 0; flex: 1 1 auto; display: flex; }
.cp-run { flex: 1 1 auto; white-space: nowrap; }
.cp-empty { border-style: dashed; text-align: center; padding: 28px 18px; }
.cp-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cp-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--geo-accent); }
.cp-check strong { color: var(--geo-text); font-weight: 650; }
.cp-settings > * + * { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--geo-border); }
.cp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cp-label { font-size: 13px; font-weight: 600; color: var(--geo-text2); }
.cp-input { width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--geo-r-ctrl); border: 1px solid var(--geo-border2);
  background: var(--geo-bg); color: var(--geo-text); font-size: 14px; }
.cp-input::placeholder { color: var(--geo-muted); }
.cp-input:focus { outline: 2px solid color-mix(in oklab, var(--geo-accent) 60%, transparent); outline-offset: 1px; }
.cp-copyrow { display: flex; gap: 8px; min-width: 0; }
.cp-copyrow .cp-input { flex: 1 1 auto; min-width: 0; font-family: var(--geo-mono); font-size: 12.5px; }
.cp-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 650;
  background: var(--geo-surface2); color: var(--geo-text2); }
.cp-pill.is-good { background: color-mix(in oklab, var(--geo-good) 16%, transparent); color: var(--geo-good-ink); }
.cp-pill.is-warn { background: color-mix(in oklab, var(--geo-warn) 16%, transparent); color: var(--geo-warn-ink); }
.cp-pill.is-accent { background: var(--geo-accent-soft); color: var(--geo-accent); }
.cp-grid3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 768px) { .cp-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cp-stat-k { display: block; font-size: 12.5px; color: var(--geo-muted); }
.cp-stat-v { display: block; font-weight: 650; color: var(--geo-text); font-variant-numeric: tabular-nums; }
.cp-stat-v.is-good { color: var(--geo-good-ink); }
.cp-dialog { width: 100%; max-width: 32rem; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.cp-grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 520px) { .cp-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-optional { font-weight: 400; color: var(--geo-muted); }
/* A required field says so, and says what's missing under the box (walk, 19 Oct) */
.cp-required { font-weight: 400; color: var(--geo-muted); }
.cp-field-err { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: var(--geo-bad-ink); }
.cp-input[aria-invalid="true"] { border-color: var(--geo-bad); }
/* "Need help?" steps aside while a dialog is open (body.geo-dialog-open, set by tour.js; walk, 19 Oct) */
body.geo-dialog-open #support-fab { visibility: hidden !important; pointer-events: none !important; }
.cp-wait { text-align: center; max-width: 28rem; }
.cp-wait-ring { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid var(--geo-accent-soft); border-top-color: var(--geo-accent); }
.cp-wait-step { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--geo-r-ctrl); background: var(--geo-accent-soft); color: var(--geo-text);
  font-size: 14px; font-weight: 600; transition: opacity .15s; }
.cp-wait-bar { margin-top: 14px; height: 4px; border-radius: 99px; background: var(--geo-surface2); overflow: hidden; }
.cp-wait-bar > div { height: 100%; width: 0; background: var(--geo-accent); transition: width .5s; }
.agp-run { margin: 0; flex: none; }
@media (max-width: 520px) { .agp-run { align-self: flex-start; } }

/* A yellow gap in a draft opens its answer box when tapped (content journey, 30 Sep). */
mark.geophii-gap { cursor: pointer; }

/* ── Fix cards on the Fixes tab (30 Sep): buttons in one row under the card, the fix readable ── */
.fx-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.fx-acts form { margin: 0; }
.fx-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--geo-border2); background: var(--geo-surface); color: var(--geo-text); white-space: nowrap; cursor: pointer; text-decoration: none; }
.fx-btn:hover { border-color: var(--geo-accent); }
.fx-btn-primary { background: var(--geo-brand); border-color: var(--geo-brand); color: var(--geo-brand-ink); }
.fx-btn.is-off { opacity: .6; cursor: not-allowed; }
.fx-link { font-size: 13px; font-weight: 600; color: var(--geo-accent); text-decoration: none; padding: 0 4px; }
.fx-link:hover { text-decoration: underline; }
.fx-steps { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--geo-text);
  background: var(--geo-surface2); border: 1px solid var(--geo-border); border-radius: 10px; padding: 14px 16px; }
/* The app's link colour rule outranks a class (as on the Pages list, content-door.css): these are buttons with their own ink. */
.fx-acts a.fx-btn-primary { color: var(--geo-brand-ink) !important; }
.fx-acts a.fx-btn:not(.fx-btn-primary) { color: var(--geo-text) !important; }
/* ── A website's plan in the Action Plan's shape (30 Sep): number, title, one line; the button opens under the chevron ── */
.agp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.agp-progress { font-size: 13px; font-weight: 600; color: var(--geo-good-ink, var(--geo-good)); }
.agp .agp-row { display: block; padding: 0; border-top: 1px solid var(--geo-border); }
.agp-step > summary { list-style: none; display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; cursor: pointer; }
.agp-step > summary::-webkit-details-marker { display: none; }
.agp-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: var(--geo-accent); background: color-mix(in oklab, var(--geo-accent) 14%, transparent); }
.agp-row.is-done .agp-num { color: var(--geo-good-ink, var(--geo-good)); background: color-mix(in oklab, var(--geo-good) 16%, transparent); }
/* A "find this out" row: a ring, not a number (the numbers are the plan's own steps). */
.agp-num--find { background: transparent; border: 2px dashed var(--geo-border2); }
.agp-row.is-done .agp-title { color: var(--geo-muted); }
.agp-step .agp-text { display: flex; flex-direction: column; gap: 2px; }
.agp-step .agp-title { margin: 0; }
.agp-step .agp-asked { align-self: flex-start; margin-top: 2px; }
.agp-chev { flex: none; width: 18px; height: 18px; margin-top: 5px; fill: none; stroke: var(--geo-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.agp-step[open] .agp-chev { transform: rotate(180deg); }
.agp-body { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px 40px; }
.agp-body:empty { display: none; }
@media (max-width: 520px) { .agp-body { padding-left: 0; } }
.agp-top-r { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.agp-top-r .agp-make { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.agp-top-r .agp-make .agp-sub { margin: 0; font-size: 12.5px; max-width: 26rem; }
.agp-top { margin-bottom: 6px; }
/* Laptop: the buttons sit on the right of the card, side by side; a phone keeps them underneath (Edward, 30 Sep). */
@media (min-width: 768px) {
  [data-na-row] .geo-row-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
  [data-na-row] .geo-row-main > * { grid-column: 1; }
  [data-na-row] .geo-row-main > .fx-acts { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin-top: 0; justify-content: flex-end; max-width: 360px; }
}
/* The fix reads as a box of text to copy (Edward, 30 Sep: "a shade so it seems like a text box"). */
.fx-steps { border-color: var(--geo-border2); box-shadow: inset 0 1px 3px color-mix(in oklab, var(--geo-text) 12%, transparent); background: var(--geo-bg); }

/* Your next best step, then See all steps (30 Sep). */
.agp-next { margin: 4px 0 8px; padding: 4px 14px 2px; border: 1px solid color-mix(in oklab, var(--geo-accent) 45%, var(--geo-border)); border-radius: 12px;
  background: color-mix(in oklab, var(--geo-accent) 5%, var(--geo-surface)); }
.agp-next-h { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--geo-accent); }
.agp-evidence { flex-basis: 100%; }
.agp-evidence ul { margin: 4px 0 0; padding: 0; list-style: none; }
.agp-evidence li { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--geo-text2); overflow-wrap: anywhere; }
.agp-ev-link { color: var(--geo-accent); font-weight: 600; white-space: nowrap; }
.agp-next .agp-row { border-top: 0; }
.agp-impact { align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 650;
  color: var(--geo-good-ink, var(--geo-good)); background: color-mix(in oklab, var(--geo-good) 14%, transparent); }
.agp-impact--low { color: var(--geo-muted); background: var(--geo-surface2); }
.agp-all > summary { padding: 10px 0; font-weight: 650; color: var(--geo-accent); cursor: pointer; }

/* The plan says when it needs updating (30 Sep): the line, and Update turns filled. */
.agp-stale { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; color: var(--geo-text);
  background: color-mix(in oklab, var(--geo-warn) 12%, transparent); border: 1px solid color-mix(in oklab, var(--geo-warn) 35%, var(--geo-border)); }
.agp-open.agp-open--go { position: relative; border-color: var(--geo-accent); }
/* Needs updating: a dot on the button, the reason in its tooltip (Edward, 30 Sep: "conserve space"). */
.agp-dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--geo-warn);
  box-shadow: 0 0 0 2px var(--geo-surface); animation: agp-dot 1.8s ease-in-out infinite; }
@keyframes agp-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .agp-dot { animation: none; } }

/* A status pill on a narrow board card wraps instead of spilling past the card edge
   (the exception to rule 3's one-line pills: a Task Board column is too narrow). */
.main-content .geo-pill-wrap[class*="rounded-full"] { display: inline-block; max-width: 100%; white-space: normal; }

/* Task Board progress strip (clients/_board_progress.php). One line above the columns;
   click it for the counts. Replaces the donut sidebar so the four columns get the width. */
.bp { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: 12px; }
.bp-sum { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.bp-sum::-webkit-details-marker { display: none; }
.bp-title { font-size: 13px; font-weight: 600; color: var(--geo-text); white-space: nowrap; }
.bp-rate { font-size: 13px; color: var(--geo-text2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bp-rate span { font-weight: 700; color: var(--geo-text); }
.bp-bar { flex: 1; min-width: 60px; height: 8px; display: flex; overflow: hidden; border-radius: 999px; background: var(--geo-surface2); }
/* Pending is the empty part of the track, so 0% complete reads as an empty bar (design window, 19 Oct). */
.bp-bar > [data-bp-seg="pending"] { background: transparent !important; }
/* The task board's filter selects: room for the chevron; a card's footer wraps in a narrow column (design window, 19 Oct). */
.tb-filters select { padding-right: 36px; }
.tb-card-foot { column-gap: 12px; row-gap: 4px; }
.bp-bar > span { display: block; height: 100%; transition: width .3s ease; }
.bp-chev { color: var(--geo-muted); transition: transform .2s ease; }
.bp[open] .bp-chev { transform: rotate(180deg); }
.bp-body { padding: 0 14px 12px; display: grid; gap: 8px; }
.bp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--geo-text2); }
.bp-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bp-item b { color: var(--geo-text); font-variant-numeric: tabular-nums; }
.bp-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.bp-total { padding-left: 18px; border-left: 1px solid var(--geo-border); }
.bp-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--geo-muted); align-self: center; }
@media (max-width: 480px) { .bp-title { display: none; } }

/* The open report's top bar: back to the form, then every saved roast of this site (30 Sep). */
.rm-rnav { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--geo-border); min-width: 0; }
.rm-rnav-back { flex: 0 0 auto; border: 1px solid var(--geo-border); background: var(--geo-surface); color: var(--geo-text);
  font: inherit; font-size: 14px; font-weight: 600; padding: 7px 12px; border-radius: 99px; cursor: pointer; }
.rm-rnav-back:hover { border-color: var(--geo-accent); }
.rm-rnav-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; min-width: 0; padding: 2px; }
.rm-rnav-chip { --t: var(--geo-accent); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--geo-text2); padding: 4px 10px 4px 4px; border-radius: 99px;
  border: 1px solid var(--geo-border); background: var(--geo-bg); transition: border-color .15s ease, background .15s ease; }
.rm-rnav-chip b { min-width: 30px; height: 26px; padding: 0 6px; border-radius: 99px; display: grid; place-items: center;
  font-size: 13px; color: var(--t); background: color-mix(in srgb, var(--t) 14%, transparent); font-variant-numeric: tabular-nums; }
.rm-rnav-chip.tone-good { --t: var(--geo-good); }
.rm-rnav-chip.tone-warn { --t: var(--geo-warn); }
.rm-rnav-chip.tone-bad  { --t: var(--geo-bad); }
.rm-rnav-chip:hover { border-color: var(--t); }
.rm-rnav-chip.on { border-color: var(--t); color: var(--geo-text); background: color-mix(in srgb, var(--t) 8%, var(--geo-bg)); }
.rm-aim { margin-top: 2px; }
/* The app's button rule (inline-flex, centred) outranks a class; these are cards that happen to be buttons. */
#site-tab-conversion :is(.rm-past-hero, .rm-past-row) { display: grid; justify-content: stretch; justify-items: start; text-align: left; min-height: 0; }
#site-tab-conversion .rm-past-hero { grid-template-columns: auto minmax(0, 1fr) auto; }
#site-tab-conversion .rm-past-row { grid-template-columns: auto minmax(0, 1fr) auto; }
#site-tab-conversion :is(.rm-past-go, .rm-past-row .rm-delta) { justify-self: end; }
#site-tab-conversion .rm-past-main { justify-self: stretch; }
#site-tab-conversion :is(.rm-rnav-chip, .rm-rnav-back) { min-height: 0; }

/* The fix status box above the form lines up with the cards under it (30 Sep, Edward's
   screenshot: it ran the full width while the form and Past roasts stopped short). */
#site-tab-conversion .rm-setup > .rm-status { max-width: 40rem; box-sizing: border-box; }
.rm-status-page { font-size: 13px; font-weight: 600; color: var(--geo-muted); }
.rm-fixes { display: flex; flex-direction: column; gap: 10px; }
.rm-fixes:empty { display: none; }
.rm-fixes .rm-status { margin: 0; }

/* ═══ ROAST TAB · one visual system (30 Sep, Edward: "the whole thing looks dark, no
   separation, just noisy"). Fewer boxes, clearer layers, space instead of lines:
   - the page is the background; the form is ONE raised card; inputs sit a step lighter
     than the card, so each question reads as its own thing;
   - no hairlines inside the card: space separates the questions;
   - the extras (business details, walkthrough) are quiet tinted rows, not more boxes;
   - past roasts are a plain list under a heading, not a box inside a box. */
#site-tab-conversion .rm-setup { gap: 22px; }
#site-tab-conversion .rm-card { background: var(--geo-surface); border: 1px solid var(--geo-border2);
  border-radius: 18px; box-shadow: 0 1px 0 color-mix(in srgb, var(--geo-text) 4%, transparent), 0 18px 40px -28px rgba(0, 0, 0, .55); }
#site-tab-conversion .rm-card-body { gap: 26px; padding: 26px 26px 20px; }
#site-tab-conversion .rm-card .rm-field input[type="url"],
#site-tab-conversion .rm-card .rm-field textarea { background: var(--geo-surface2); border-color: transparent; }
#site-tab-conversion .rm-card .rm-field input[type="url"]:focus,
#site-tab-conversion .rm-card .rm-field textarea:focus { border-color: var(--geo-accent); }
#site-tab-conversion .rm-card .rm-chip span { background: var(--geo-surface2); border-color: transparent; }
#site-tab-conversion .rm-card .rm-chip input:checked + span { background: var(--geo-accent-soft); border-color: var(--geo-accent); }
#site-tab-conversion .rm-card .rm-hint { color: var(--geo-muted); font-size: 13px; }
#site-tab-conversion .rm-opt { white-space: nowrap; }
/* The extras: quiet tinted rows, no lines. */
#site-tab-conversion .rm-card .rm-rowcard,
#site-tab-conversion .rm-card .rm-toggle { border: 0; margin: 0; border-radius: 12px; padding: 14px 16px;
  background: color-mix(in srgb, var(--geo-surface2) 55%, var(--geo-surface)); }
#site-tab-conversion .rm-card .rm-rowcard + .rm-toggle { margin-top: -14px; }
#site-tab-conversion .rm-card .rm-rowcard .rm-sub,
#site-tab-conversion .rm-card .rm-toggle .rm-sub { font-size: 13.5px; color: var(--geo-muted); }
#site-tab-conversion .rm-card .rm-rowcard strong,
#site-tab-conversion .rm-card .rm-toggle strong { font-size: 14px; }
/* Footer: what you get, then the button. One tint, one line above. */
#site-tab-conversion .rm-card-foot { margin-top: 6px; padding: 20px 26px 24px; border-top: 1px solid var(--geo-border);
  background: color-mix(in srgb, var(--geo-accent) 5%, var(--geo-surface)); }
#site-tab-conversion .rm-card-foot .rm-gets { font-size: 13.5px; gap: 4px 18px; }
/* Past roasts: a heading and a list on the page, no outer box. */
#site-tab-conversion .rm-past { padding: 0; border: 0; background: none; gap: 10px; margin-top: 10px; }
#site-tab-conversion .rm-past-head .rm-h2 { font-size: 18px; }
#site-tab-conversion .rm-past-hero, #site-tab-conversion .rm-past-row { background: var(--geo-surface); border-color: var(--geo-border2); }
#site-tab-conversion .rm-past-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--t) 9%, var(--geo-surface)), var(--geo-surface) 70%); }
#site-tab-conversion .rm-past-hero .rm-ring::before { background: var(--geo-surface); }
@media (max-width: 767px) {
  #site-tab-conversion .rm-card-body { padding: 20px 16px 16px; gap: 22px; }
  #site-tab-conversion .rm-card-foot { padding: 18px 16px 20px; }
}
/* The form in order (30 Sep, Edward: the page, the goal, the comment with the business-details
   link under it, the walkthrough tick, then the button; "should be neat"). The business-details
   link is one quiet line under the comment box; the walkthrough is a plain tick row. No boxes. */
#site-tab-conversion .rm-card .rm-rowcard { display: block; padding: 0; margin-top: -14px; background: none; border-radius: 0; }
#site-tab-conversion .rm-card .rm-rowcard #rm-biz-text { display: inline; }
#site-tab-conversion .rm-card .rm-rowcard #rm-biz-text strong { font-size: 13.5px; font-weight: 600; color: var(--geo-text2); }
#site-tab-conversion .rm-card .rm-rowcard .rm-linkbtn { display: inline; margin-left: 4px; font-size: 13.5px; }
#site-tab-conversion .rm-card .rm-toggle { background: none; padding: 4px 0 0; margin-top: 0; }
#site-tab-conversion .rm-card .rm-rowcard + .rm-toggle { margin-top: 0; }
#site-tab-conversion .rm-card .rm-rowcard, #site-tab-conversion .rm-card .rm-rowcard * { line-height: 1.5; }
#site-tab-conversion .rm-card .rm-rowcard #rm-biz-text > * { display: inline; }
#site-tab-conversion .rm-card .rm-rowcard .rm-linkbtn { display: inline; min-height: 0; padding: 0; vertical-align: baseline; }
/* Text boxes you can see in dark mode (30 Sep, Edward: "it's just dark"): a lighter fill mixed from
   the text colour, so it works on any surface in both themes, and a visible edge. */
#site-tab-conversion .rm-card .rm-field input[type="url"],
#site-tab-conversion .rm-card .rm-field textarea,
#site-tab-conversion .rm-card .rm-chip span {
  background: color-mix(in srgb, var(--geo-text) 9%, var(--geo-surface));
  border: 1px solid color-mix(in srgb, var(--geo-text) 22%, var(--geo-surface)); }
#site-tab-conversion .rm-card .rm-field input[type="url"]:hover,
#site-tab-conversion .rm-card .rm-field textarea:hover { border-color: color-mix(in srgb, var(--geo-text) 38%, var(--geo-surface)); }
#site-tab-conversion .rm-card .rm-field input[type="url"]:focus,
#site-tab-conversion .rm-card .rm-field textarea:focus { border-color: var(--geo-accent); background: color-mix(in srgb, var(--geo-text) 11%, var(--geo-surface)); }
#site-tab-conversion .rm-card .rm-field textarea::placeholder { color: color-mix(in srgb, var(--geo-text) 55%, var(--geo-surface)); }
#site-tab-conversion .rm-card .rm-chip input:checked + span { background: var(--geo-accent-soft); border-color: var(--geo-accent); }
/* The app's dark rule forces every input to --geo-surface2 with !important (line ~500), which on
   this card is nearly the card itself. This card's boxes win it back, in both themes. */
html #site-tab-conversion .rm-card .rm-field input[type="url"],
html #site-tab-conversion .rm-card .rm-field textarea {
  background-color: color-mix(in srgb, var(--geo-text) 9%, var(--geo-surface)) !important;
  border-color: var(--geo-edge) !important; }   /* D-011: was text 24%, 1.63:1 light, 2.14:1 dark */
html #site-tab-conversion .rm-card .rm-field input[type="url"]:hover:not(:focus),
html #site-tab-conversion .rm-card .rm-field textarea:hover:not(:focus) { border-color: var(--geo-accent) !important; }
html #site-tab-conversion .rm-card .rm-field input[type="url"]:focus,
html #site-tab-conversion .rm-card .rm-field textarea:focus { border-color: var(--geo-accent) !important; }
html #site-tab-conversion .rm-card #rm-biz #rm-biz-open { display: inline; font-size: 13.5px; margin-left: 4px; padding: 0; min-height: 0; }
html #site-tab-conversion .rm-card #rm-biz #rm-biz-text strong { font-size: 13.5px; }

/* A button that's sending its form (public/js/button-busy.js, 30 Sep): a spinner in the
   button's own colour, so it reads in both themes and on every button style. */
.is-busy { cursor: progress !important; opacity: .85; }
.is-busy::before {
  content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .5em; vertical-align: -.12em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) { .is-busy::before { animation: rm-spin .7s linear infinite; } }

/* The line beside a button after geoAct() (button-busy.js): quiet when it went through,
   the bad colour when it didn't. Token colours, so it reads in both themes. */
.geo-act-note { display: inline-block; margin-left: .5rem; font-size: .8125rem; line-height: 1.3; color: var(--geo-good); vertical-align: middle; }
.geo-act-note.is-bad { color: var(--geo-bad); }

/* A switched-off button looks switched off, everywhere (30 Sep: the backlinks button looked
   live and did nothing). A busy button keeps its own look (.is-busy above). */
button:disabled:not(.is-busy), input[type="submit"]:disabled:not(.is-busy) {
  opacity: .5 !important; cursor: not-allowed !important; filter: saturate(.4); box-shadow: none !important;
}
button:disabled:not(.is-busy):hover { transform: none !important; }

/* Something already done, shown where its button would be: a quiet tag, not a button. */
.geo-done-tag {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .9rem;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--geo-good) 40%, transparent);
  color: var(--geo-good); font-size: .875rem; font-weight: 600; white-space: nowrap;
}

/* ══ The Credits page (/billing/packages; pricing Round 3, section 5) ═══════════════════════════════════════════════
   Geophii's own pack boxes: the price is the big number, the credits under it, Buy now across the box. An agency sees
   its clients' price crossed out and what it saves; tabs for packs and monthly plans; a balance pill; chips for what
   things cost; "See everything credits can do". Tokens only, so both themes follow. */
.cpk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 20px; }
.cpk-pill { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 6px 6px 6px 14px; border-radius: 999px;
  background: var(--geo-surface); border: 1px solid var(--geo-border); color: var(--geo-text); font-size: 14px; font-weight: 600; max-width: 100%; }
.cpk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--geo-good); flex: none; }
.cpk-dot.is-low { background: var(--geo-warn); }
@media (prefers-reduced-motion: no-preference) { .cpk-dot.is-low { animation: cpkPulse 1.8s var(--geo-ease) infinite; } }
@keyframes cpkPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--geo-warn) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }
.cpk-pill-sep { width: 1px; height: 16px; background: var(--geo-border2); }
@media (max-width: 520px) { .cpk-pill { border-radius: 18px; } .cpk-pill-sep { display: none; } }
.cpk-pill-last { display: inline-flex; align-items: center; gap: 6px; color: var(--geo-muted); font-weight: 500; }
.cpk-pill-last::before { content: ""; width: 5px; height: 9px; border: solid var(--geo-good); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); flex: none; }
.cpk-pill-buy { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--geo-brand); color: var(--geo-brand-ink); font-weight: 700; font-size: 13px; }
.cpk-pill-buy:hover { filter: brightness(1.08); }
.cpk-pill-auto { min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--geo-border2); background: var(--geo-surface2); color: var(--geo-text2); font-size: 12.5px; font-weight: 650; }
.cpk-pill-auto:hover { border-color: var(--geo-accent); color: var(--geo-accent); }
/* the page-wide link colour (".main-content a:not(...)") outranks one class, so the button keeps its own ink */
.main-content .cpk-pill-buy, .main-content .cpk-pill-buy:hover { color: var(--geo-brand-ink) !important; text-decoration: none !important; }
.cpk-low { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; padding: 12px 52px 12px 16px; border-radius: 12px;
  background: color-mix(in oklab, var(--geo-warn) 12%, var(--geo-surface)); border: 1px solid color-mix(in oklab, var(--geo-warn) 40%, transparent); }
.cpk-low[hidden] { display: none; }
.cpk-low-text { margin: 0; font-weight: 600; color: var(--geo-text); }
.cpk-low-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cpk-low-note { font-size: 13px; color: var(--geo-muted); }
.cpk-x { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border-radius: 999px; background: transparent; border: 0; color: var(--geo-muted); font-size: 22px; line-height: 1; }
.cpk-x:hover { color: var(--geo-text); background: var(--geo-surface2); }
.cpk-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; font-size: 14px; }
.cpk-ask, .cpk-note { margin: 0 0 14px; color: var(--geo-muted); font-size: 14px; }
.cpk-ask { font-size: 16px; color: var(--geo-text); padding: 16px; border-radius: 12px; background: var(--geo-surface); border: 1px solid var(--geo-border); }
.cpk-warn { color: var(--geo-warn-ink); }
/* two equal halves that fit a phone: the "Save up to" tag drops under its label rather than pushing a tab onto a new line */
.cpk-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: min(100%, 460px); margin-bottom: 16px; padding: 4px; border-radius: 14px; background: var(--geo-surface2); }
.cpk-tabs [role="tab"] { min-width: 0; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--geo-muted); font-weight: 600; font-size: 14px; line-height: 1.25;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; text-align: center; }
.cpk-tabs [role="tab"][aria-selected="true"] { background: var(--geo-surface); color: var(--geo-text); box-shadow: 0 0 0 1px var(--geo-border2), 0 1px 3px color-mix(in oklab, var(--geo-text) 14%, transparent); }
.cpk-tab-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: color-mix(in oklab, var(--geo-good) 16%, transparent); color: var(--geo-good-ink); }
.cpk-panel[hidden] { display: none; }
/* "Buy more" and Billing's #auto-topup land below the fixed header on phones (64px), not under it */
.cpk-panel, #auto-topup, #cpk-white-label { scroll-margin-top: 80px; }
.cpk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cpk-grid-plans { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cpk-box { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; min-width: 0; padding: 22px 16px 16px;
  background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card, 14px);
  transition: transform var(--geo-dur) var(--geo-ease), border-color var(--geo-dur) var(--geo-ease), box-shadow var(--geo-dur) var(--geo-ease); }
@media (hover: hover) { .cpk-box:hover { transform: translateY(-2px); border-color: var(--geo-border2); box-shadow: var(--geo-lift-shadow); } }
.cpk-box.has-badge, .cpk-box.has-badge:hover { border-color: var(--geo-accent); }
.cpk-box.is-mine { border-width: 2px; }
.cpk-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
  padding: 2px 12px; border-radius: 999px; background: var(--geo-brand); color: var(--geo-brand-ink); font-size: 12px; font-weight: 700; }
.cpk-plan-name { margin: 2px 0 0; font-size: 16px; font-weight: 700; color: var(--geo-text); }
.cpk-price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 8px; margin: 6px 0 0; }
.cpk-price { font-size: 34px; font-weight: 800; line-height: 1.05; color: var(--geo-text); font-variant-numeric: tabular-nums; }
.cpk-was { font-size: 16px; color: var(--geo-muted); text-decoration-thickness: 1.5px; }
.cpk-per { font-size: 14px; color: var(--geo-muted); }
.cpk-credits { margin: 0; font-size: 15px; color: var(--geo-text2); }
.cpk-credits strong { color: var(--geo-text); }
.cpk-sub { margin: 0; font-size: 13px; color: var(--geo-muted); }
.cpk-save { display: inline-flex; align-items: center; gap: 5px; margin: 6px 0 0; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: color-mix(in oklab, var(--geo-good) 16%, transparent); color: var(--geo-good-ink); }
.cpk-save svg { width: 14px; height: 14px; flex: none; }
.cpk-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; color: var(--geo-text2); display: grid; gap: 4px; }
.cpk-buy-form { width: 100%; margin-top: auto; padding-top: 12px; }
.cpk-buy { width: 100%; min-height: 44px; justify-content: center; display: inline-flex; align-items: center; font-size: 15px; margin-top: auto; }
.cpk-box > .cpk-buy { margin-top: 12px; }
.cpk-white-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 28px; margin: 2px 0 20px; padding: 20px 22px;
  border: 1px solid color-mix(in oklab, var(--geo-accent) 34%, var(--geo-border)); border-radius: var(--geo-r-card, 14px);
  background: linear-gradient(135deg, color-mix(in oklab, var(--geo-accent) 8%, var(--geo-surface)), var(--geo-surface)); }
.cpk-white-label-copy { min-width: 0; }
.cpk-white-label-kicker { margin: 0 0 4px; color: var(--geo-accent); font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .045em; }
.cpk-white-label h3 { margin: 0; color: var(--geo-text); font-size: 18px; font-weight: 720; line-height: 1.3; }
.cpk-white-label-copy > p:last-child { margin: 7px 0 0; color: var(--geo-muted); font-size: 13.5px; }
.cpk-white-label-buy { display: grid; justify-items: end; gap: 9px; min-width: 180px; text-align: right; }
.cpk-white-label-price { margin: 0; color: var(--geo-text); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cpk-white-label-buy form { margin: 0; }
.cpk-white-label-note { max-width: 290px; color: var(--geo-muted); font-size: 13.5px; }
@media (max-width: 640px) {
  .cpk-white-label { grid-template-columns: 1fr; padding: 17px; }
  .cpk-white-label-buy { justify-items: stretch; min-width: 0; text-align: left; }
  .cpk-white-label-buy .geo-btn, .cpk-white-label-buy form { width: 100%; justify-content: center; }
  .cpk-white-label-buy .geo-done-tag { white-space: normal; justify-content: center; text-align: center; }
}
.cpk-yours { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--geo-text); }
.cpk-auto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 20px; padding: 14px 16px;
  border-radius: 12px; background: var(--geo-surface); border: 1px solid var(--geo-border); }
.cpk-auto p { margin: 0; }
/* D-020: the "Automatic top-up" heading inherited the page's dark-theme text colour, so in light it was near-white on
   white (1.10:1; the laptop, live 20 Oct). It takes the text token, in both themes. */
.cpk-auto strong { color: var(--geo-text); }

/* Automatic top-up: the full Billing preference remains on Billing; this compact
   dialog is reachable beside the credit balance throughout the signed-in app. */
.atp-dialog { width: min(560px, calc(100vw - 24px)); max-height: min(760px, calc(100dvh - 24px)); margin: auto; padding: 0; overflow: hidden;
  border: 1px solid var(--geo-border2); border-radius: 18px; background: var(--geo-surface); color: var(--geo-text); box-shadow: 0 24px 70px color-mix(in oklab, #000 34%, transparent); }
.atp-dialog::backdrop { background: rgb(15 23 42 / .58); backdrop-filter: blur(2px); }
.atp-dialog[open] { display: flex; flex-direction: column; }
.atp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 20px 14px; border-bottom: 1px solid var(--geo-border); }
.atp-head h2 { margin: 0; font-size: 21px; font-weight: 750; color: var(--geo-text); }
.atp-head p { margin: 4px 0 0; color: var(--geo-muted); font-size: 14px; }
.atp-close { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 999px; background: transparent; color: var(--geo-muted); font-size: 26px; line-height: 1; }
.atp-close:hover { background: var(--geo-surface2); color: var(--geo-text); }
.atp-body { padding: 18px 20px; overflow-y: auto; overscroll-behavior: contain; }
.atp-toggle { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.atp-toggle input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.atp-toggle strong { display: block; color: var(--geo-text); }
.atp-toggle span span { display: block; margin-top: 3px; color: var(--geo-muted); font-size: 13.5px; line-height: 1.45; }
.atp-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(120px, .75fr); gap: 14px; margin-top: 18px; }
.atp-field label { display: block; margin-bottom: 5px; color: var(--geo-text2); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.atp-field select, .atp-field input { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--geo-border2); border-radius: 9px; background: var(--geo-surface); color: var(--geo-text); }
.atp-field p { margin: 5px 0 0; color: var(--geo-muted); font-size: 12px; }
.atp-card-note { margin: 16px 0 0; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--geo-border); background: var(--geo-surface2); color: var(--geo-text2); font-size: 13px; }
.atp-card-note.is-warn { border-color: color-mix(in oklab, var(--geo-warn) 38%, var(--geo-border)); color: var(--geo-warn-ink); }
.atp-card-note a { font-weight: 700; text-decoration: underline; }
.atp-consent { margin: 12px 0 0; color: var(--geo-muted); font-size: 12.5px; line-height: 1.5; }
.atp-result { min-height: 20px; margin: 12px 0 0; color: var(--geo-muted); font-size: 13px; }
.atp-result.is-good { color: var(--geo-good-ink); }
.atp-result.is-bad { color: var(--geo-bad); }
.atp-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--geo-border); }
.atp-actions .geo-btn { min-height: 44px; }
/* ═══ The credit balance at the top of every page (BalanceBar, partials/balance_bar.php; 18 Oct) ═══════════
   The page's own top row, right-aligned and pulled into the page's top padding, so it's in the same place on every
   page and covers nothing; on a phone, a compact pill in the top bar instead. Both open one panel. Low tints the ring
   and the edge amber, out tints them red: no banner. Its layer is under the page's pop-ups (z-50). */
.geo-bal { position: relative; z-index: 45; display: flex; justify-content: flex-end; margin: -18px 0 14px; }
.geo-bal-pill { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 5px 0 2px; border: 1px solid var(--geo-border);
  border-radius: 999px; background: var(--geo-surface); }
.geo-bal .geo-bal-open { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; height: 34px; padding: 0 8px 0 10px; border: 0;
  border-radius: 999px; background: transparent; color: var(--geo-muted); font-size: 14px; white-space: nowrap; cursor: pointer; }
.geo-bal .geo-bal-open strong, .geo-bal-big strong { color: var(--geo-text); font-weight: 700; }
.geo-bal .geo-bal-open:hover { background: var(--geo-surface2); }
.geo-bal-ring { flex: none; width: 14px; height: 14px; border: 2px solid var(--geo-accent); border-radius: 50%; }
#geo-bal a.geo-bal-buy { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--geo-brand);
  color: var(--geo-brand-ink); font-size: 13px; font-weight: 700; white-space: nowrap; text-decoration: none; }
#geo-bal a.geo-bal-buy:hover { filter: brightness(1.08); text-decoration: none; }
.geo-bal-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 300px; padding: 14px 16px; border: 1px solid var(--geo-border2);
  border-radius: 14px; background: var(--geo-panel); color: var(--geo-text); text-align: left; box-shadow: 0 14px 34px rgb(0 0 0 / .18); }
.geo-bal-panel[hidden] { display: none; }
.geo-bal-panel:focus { outline: none; }
.geo-bal-h { margin: 0; color: var(--geo-muted); font-size: 13px; font-weight: 600; }
.geo-bal-big { margin: 2px 0 0; color: var(--geo-text); font-size: 26px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.geo-bal-line { margin: 8px 0 0; color: var(--geo-text2); font-size: 13.5px; line-height: 1.45; }
.geo-bal-acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
#geo-bal a.geo-bal-usage { display: inline-flex; align-items: center; min-height: 44px; color: var(--geo-text); font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; }
.geo-bal-panel .geo-bal-top { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 14px; }
.geo-bal-auto { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--geo-border); }
.geo-bal-autoline { margin: 0; color: var(--geo-muted); font-size: 12.5px; }
.geo-bal-autoline[hidden] { display: none; }
.geo-bal-panel .geo-bal-autobtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--geo-text); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.geo-bal-phone { order: 2; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-left: auto; padding: 0 13px 0 10px;
  border: 1px solid var(--geo-border); border-radius: 999px; background: var(--geo-surface); color: var(--geo-text); font-size: 13.5px;
  font-weight: 700; white-space: nowrap; }
/* after the website switcher (which takes the room between), then the client's bell */
#mobile-header:has(.geo-bal-phone) > #geo-switch[data-in-header] { margin-right: 8px; }
#mobile-header > .cn-bell { order: 3; }
#mobile-header:has(.geo-bal-phone) > .cn-bell { margin-left: 4px; }
[data-bal-state="low"] .geo-bal-ring, .geo-bal-phone[data-bal-state="low"] .geo-bal-ring { border-color: var(--geo-warn); }
[data-bal-state="zero"] .geo-bal-ring, .geo-bal-phone[data-bal-state="zero"] .geo-bal-ring { border-color: var(--geo-bad);
  background: color-mix(in oklab, var(--geo-bad) 22%, transparent); }
[data-bal-state="low"] .geo-bal-pill, .geo-bal-phone[data-bal-state="low"] { border-color: color-mix(in oklab, var(--geo-warn) 60%, var(--geo-border)); }
[data-bal-state="zero"] .geo-bal-pill, .geo-bal-phone[data-bal-state="zero"] { border-color: color-mix(in oklab, var(--geo-bad) 60%, var(--geo-border)); }
[data-bal-state="low"] .geo-bal-line { color: var(--geo-warn-ink); }
[data-bal-state="zero"] .geo-bal-line { color: var(--geo-bad-ink); }
@media (max-width: 767px) {
  /* the phone's pill is in the top bar; the panel opens as a sheet just under it */
  .geo-bal { position: static; display: block; margin: 0; }
  .geo-bal-pill { display: none; }
  .geo-bal-panel { position: fixed; top: 72px; left: 12px; right: 12px; width: auto; z-index: 45; }
}

/* ═══ The agency home: the two main products, Connect Claude, What's new (AgencyHome, WhatsNew; 18 Oct) ═══════════
   Three cards (1fr 1fr 0.72fr) under the set-up box, stacked below 900px; the product
   cards have an accent edge; in dark, the cards take a stronger edge. Tokens only. */
.ah-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 16px; }
.ah-row--claude { grid-template-columns: 1fr 1fr .72fr; }
.ah-row--one { grid-template-columns: 1fr; }
.ah-row--one.ah-row--claude { grid-template-columns: 1fr .72fr; }
@media (max-width: 899px) { .ah-row, .ah-row--claude, .ah-row--one, .ah-row--one.ah-row--claude { grid-template-columns: 1fr; } }
.ah-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card);
  background: var(--geo-surface); color: var(--geo-text); }
.ah-card--main { border-color: color-mix(in oklab, var(--geo-accent) 45%, var(--geo-border)); }
html[data-theme="dark"] .ah-card { border-color: var(--geo-border2); }
html[data-theme="dark"] .ah-card--main { border-color: color-mix(in oklab, var(--geo-accent) 55%, var(--geo-border2)); }
.ah-h { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--geo-text); font-size: 17px; font-weight: 700; line-height: 1.3; }
.ah-ico { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--geo-accent-soft); color: var(--geo-accent); }
.ah-line { flex: 1; margin: 0; color: var(--geo-text2); font-size: 14px; line-height: 1.5; }
.ah-card .ah-btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; font-size: 14px; text-decoration: none; }
@media (max-width: 899px) { .ah-card--main .ah-btn { align-self: stretch; } }
/* Connect Claude's own Skip beside its button: plain text, a 44px target */
.ah-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ah-acts form { margin: 0; }
.ah-skip { min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--geo-muted); font-size: 13.5px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ah-skip:hover { color: var(--geo-text); }
.ah-skip:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 2px; border-radius: 6px; }
.wn-card { margin: 0 0 22px; padding: 16px 18px 14px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); background: var(--geo-surface); color: var(--geo-text); }
html[data-theme="dark"] .wn-card { border-color: var(--geo-border2); }
.wn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wn-h { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 15px; font-weight: 700; color: var(--geo-text); }
.wn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--geo-accent); }
.wn-card .wn-hide { min-height: 44px; padding: 0 2px; border: 0; background: transparent; color: var(--geo-text2); font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wn-list { list-style: none; margin: 4px 0 0; padding: 0; }
.wn-row { padding: 10px 0; border-top: 1px solid var(--geo-border); color: var(--geo-text2); font-size: 14px; line-height: 1.55; }
.wn-row:first-child { border-top: 0; }
/* ids: the page-wide link colour (.main-content a:not(…)) outranks any class */
#whats-new a.wn-link, #wn-page a.wn-link { color: var(--geo-accent); font-weight: 600; }
#whats-new a.wn-more { display: inline-flex; align-items: center; min-height: 44px; color: var(--geo-text); font-size: 13px; font-weight: 600; }
.wn-page { max-width: 760px; }
.wn-release { margin-bottom: 16px; }
.wn-date { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--geo-text); }
.wn-empty { color: var(--geo-text2); }
/* The dashboard's header on a phone: Start Here beside the title, the greeting under both (saves a row) */
@media (max-width: 639px) {
  .dash-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; }
  .dash-head > .dash-head-text { display: contents; }
  .dash-head > .dash-head-text > p { grid-column: 1 / -1; margin-top: 0; }
  .dash-head > .dash-head-acts { grid-row: 1; grid-column: 2; }
}
.pick-page { max-width: 640px; }
.pick-line { margin: 6px 0 18px; color: var(--geo-text2); font-size: 14.5px; }
.pick-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); background: var(--geo-surface); overflow: hidden; }
.pick-list li + li { border-top: 1px solid var(--geo-border); }
#pick-list a.pick-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; color: var(--geo-text); text-decoration: none; }
#pick-list a.pick-row:hover { background: var(--geo-surface2); text-decoration: none; }
.pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pick-domain { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.pick-client { color: var(--geo-muted); font-size: 13px; }
.pick-chev { flex: none; color: var(--geo-muted); }
.pick-page .pick-add { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; margin-top: 4px; text-decoration: none; }
@media (max-width: 520px) {
  .atp-dialog { border-radius: 14px; }
  .atp-head { padding: 16px 16px 12px; }
  .atp-body { padding: 16px; }
  .atp-grid { grid-template-columns: 1fr; }
  .atp-actions { padding: 12px 16px 16px; }
  .atp-actions .geo-btn { flex: 1 1 130px; justify-content: center; }
}
.cpk-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; padding: 0; }
.cpk-chips .geo-chip { height: auto; min-height: 36px; padding: 4px 5px 4px 12px; gap: 7px; color: var(--geo-text); font-weight: 500; }
.cpk-chips .cpk-ico { width: 15px; height: 15px; color: var(--geo-accent); }
.cpk-c { border-radius: 999px; padding: 2px 9px; background: var(--geo-accent-soft); color: var(--geo-accent); font-weight: 700; white-space: nowrap; }
.cpk-more { margin-bottom: 24px; }
.cpk-more-btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 16px; border-radius: 999px;
  font-weight: 600; font-size: 14px; color: var(--geo-accent); background: transparent; border: 1px dashed color-mix(in oklab, var(--geo-accent) 55%, var(--geo-border));
  transition: border-color var(--geo-dur) var(--geo-ease), background-color var(--geo-dur) var(--geo-ease); }
.cpk-more-btn::-webkit-details-marker { display: none; }
.cpk-more-btn:hover { border-style: solid; background: var(--geo-accent-soft); }
.cpk-more-btn .cpk-ico { width: 16px; height: 16px; transition: transform var(--geo-dur) var(--geo-ease); }
.cpk-more[open] .cpk-more-btn .cpk-ico { transform: rotate(180deg); }
.cpk-more-body { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
@media (prefers-reduced-motion: no-preference) { .cpk-more[open] .cpk-more-body { animation: geoUp .28s var(--geo-ease) both; } }
.cpk-group { padding: 14px 16px; border-radius: 12px; background: var(--geo-surface); border: 1px solid var(--geo-border); min-width: 0;
  transition: transform var(--geo-dur) var(--geo-ease), border-color var(--geo-dur) var(--geo-ease), box-shadow var(--geo-dur) var(--geo-ease); }
@media (hover: hover) { .cpk-group:hover { transform: translateY(-2px); border-color: var(--geo-border2); box-shadow: var(--geo-lift-shadow); } }
.cpk-group-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 700; color: var(--geo-text); }
.cpk-gi { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--geo-accent-soft); color: var(--geo-accent); flex: none; }
.cpk-gi .cpk-ico { width: 17px; height: 17px; }
.cpk-gt { min-width: 0; }
.cpk-gt span { display: block; font-weight: 500; font-size: 13px; color: var(--geo-muted); }
.cpk-tools, .cpk-helps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; color: var(--geo-text2); }
.cpk-tools b { display: block; color: var(--geo-text); }
.cpk-helps { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--geo-border2); }
.cpk-group > .cpk-helps:first-of-type:not(:nth-child(3)) { margin-top: 0; padding-top: 0; border-top: 0; }
.cpk-helps li { padding-left: 26px; position: relative; font-weight: 500; color: var(--geo-text); }
.cpk-helps li::before { content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: var(--geo-accent-soft); }
.cpk-helps li::after { content: ""; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px; border: solid var(--geo-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* the free things: green pills, not a list */
.cpk-free { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cpk-free li { border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 600; color: var(--geo-good-ink); background: color-mix(in oklab, var(--geo-good) 14%, transparent); }
.cpk-team { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--geo-text); }
.cpk-more-body > .cpk-note { grid-column: 1 / -1; margin: 0; }
/* From the mock-up (Edward's Gemini file, rebuilt in Geophii's own values, 15 Oct): an eyebrow over the section heading,
   an icon beside it, the tabs beside it on a wide screen; a primary button that lifts; the page's blocks arriving in turn. */
.cpk-ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cpk-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.cpk-sec-head .cpk-tabs { margin-bottom: 0; }
.cpk-eyebrow { display: block; margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--geo-accent); }
.cpk-sec-h { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--geo-font-head); font-size: 19px; font-weight: 650; letter-spacing: -.011em; color: var(--geo-text); }
.cpk-sec-h .cpk-ico { width: 20px; height: 20px; color: var(--geo-accent); }
@media (hover: hover) { .cpk .cpk-buy.geo-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px var(--geo-accent); } }
.cpk .cpk-buy { transition: transform .06s var(--geo-ease), filter var(--geo-dur) var(--geo-ease), box-shadow var(--geo-dur) var(--geo-ease); }
@media (prefers-reduced-motion: no-preference) {
  /* the same arrival as the rest of the app (html.geo-anim; backwards, never both), one block after another */
  html.geo-anim .cpk > * { animation: geoUp .34s var(--geo-ease) backwards; }
  html.geo-anim .cpk > *:nth-child(2) { animation-delay: .05s; }
  html.geo-anim .cpk > *:nth-child(3) { animation-delay: .1s; }
  html.geo-anim .cpk > *:nth-child(4) { animation-delay: .15s; }
  html.geo-anim .cpk > *:nth-child(n+5) { animation-delay: .2s; }
  /* Switching tabs starts now; the page-arrival nth-child delay must not leave the chosen panel blank. */
  html.geo-anim .cpk > .cpk-panel.is-shown { animation: geoUp .26s var(--geo-ease) backwards; animation-delay: 0s; }
}

/* ══ Marketing Kit — separate offer funnels (/sales-kit, 17 Oct 2026) ════════
   One visual grammar for six different journeys. The kit inherits the app's
   colour tokens, so it is calm and legible in both themes without becoming a
   second mini-site inside the dashboard. */
.mkf-page { min-height: 100%; color: var(--geo-text); background:
  radial-gradient(900px 380px at 16% -8%, color-mix(in oklab, var(--geo-accent) 8%, transparent), transparent 70%),
  radial-gradient(720px 320px at 92% 0%, color-mix(in oklab, var(--geo-second) 8%, transparent), transparent 72%); }
.mkf-shell { width: min(1200px, 100%); margin: 0 auto; padding: 34px 28px 64px; }
.mkf-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.mkf-header > div { max-width: 760px; min-width: 0; }
.mkf-kicker, .mkf-eyebrow { display: block; margin: 0 0 7px; color: var(--geo-accent); font-size: 12px; line-height: 1.4; font-weight: 750; letter-spacing: .075em; text-transform: uppercase; }
.mkf-header h1 { margin: 0; color: var(--geo-text); font-size: clamp(31px, 4vw, 46px); line-height: 1.05; font-weight: 720; }
.mkf-header p { max-width: 720px; margin: 12px 0 0; color: var(--geo-muted); font-size: 16px; line-height: 1.65; }
.mkf-btn { min-height: var(--geo-ctrl-h); display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 9px 17px; border: 1px solid var(--geo-btn-edge); border-radius: var(--geo-r-ctrl); background: var(--geo-brand); color: var(--geo-brand-ink); box-shadow: var(--geo-btn-lift); font-size: 14px; line-height: 1.25; font-weight: 720; text-decoration: none; cursor: pointer; transition: transform .08s var(--geo-ease), filter var(--geo-dur) var(--geo-ease), box-shadow var(--geo-dur) var(--geo-ease); }
.mkf-btn:hover { filter: brightness(1.06); text-decoration: none; }
.mkf-btn:active { transform: translateY(1px); }
.mkf-btn:focus-visible, .mkf-copy-btn:focus-visible, .mkf-funnel-card:focus-visible, .mkf-decision-grid a:focus-visible { outline: 3px solid color-mix(in oklab, var(--geo-accent) 40%, transparent); outline-offset: 3px; }
.mkf-btn-secondary { color: var(--geo-text); background: var(--geo-surface); border-color: var(--geo-border2); box-shadow: var(--geo-btn-quiet); }
.mkf-rule { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid color-mix(in oklab, var(--geo-accent) 45%, var(--geo-border)); border-radius: 12px; background: color-mix(in oklab, var(--geo-accent) 7%, var(--geo-surface)); }
.mkf-rule-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; color: var(--geo-brand-ink); background: var(--geo-brand); font-size: 15px; font-weight: 800; }
.mkf-rule strong { display: block; font-size: 14px; color: var(--geo-text); }
.mkf-rule p { margin: 2px 0 0; color: var(--geo-muted); font-size: 13.5px; line-height: 1.45; }
.mkf-funnel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.mkf-funnel-card { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "no title state" "no use state" "no who state"; column-gap: 11px; min-width: 0; min-height: 116px; padding: 17px; overflow: hidden; color: var(--geo-text); background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); box-shadow: var(--geo-btn-quiet); text-decoration: none; transition: transform var(--geo-dur) var(--geo-ease), border-color var(--geo-dur) var(--geo-ease), box-shadow var(--geo-dur) var(--geo-ease); }
.mkf-funnel-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.mkf-funnel-card:hover { color: var(--geo-text); border-color: var(--geo-border2); box-shadow: var(--geo-lift-shadow); text-decoration: none; transform: translateY(-2px); }
.mkf-funnel-card.is-active { border-color: color-mix(in oklab, var(--geo-accent) 72%, var(--geo-border)); background: color-mix(in oklab, var(--geo-accent) 5%, var(--geo-surface)); }
.mkf-funnel-card.is-active::before { background: var(--geo-accent); }
.mkf-funnel-no { grid-area: no; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--geo-border); border-radius: 10px; color: var(--geo-muted); background: var(--geo-surface2); font-family: var(--geo-mono); font-size: 11px; font-weight: 700; }
.mkf-funnel-card.is-active .mkf-funnel-no { color: var(--geo-accent); border-color: color-mix(in oklab, var(--geo-accent) 46%, var(--geo-border)); background: var(--geo-accent-soft); }
.mkf-funnel-card > strong { grid-area: title; align-self: center; min-width: 0; font-size: 15px; line-height: 1.3; }
.mkf-funnel-use { grid-area: use; margin-top: 5px; color: var(--geo-text2); font-size: 13px; line-height: 1.35; }
.mkf-funnel-who { grid-area: who; margin-top: 2px; color: var(--geo-muted); font-size: 11.5px; line-height: 1.35; }
.mkf-state { grid-area: state; align-self: start; max-width: 112px; padding: 4px 8px; border-radius: 999px; color: var(--geo-warn-ink); background: color-mix(in oklab, var(--geo-warn) 13%, transparent); font-size: 10.5px; line-height: 1.25; font-weight: 700; text-align: center; }
.mkf-state.is-ready { color: var(--geo-good-ink); background: color-mix(in oklab, var(--geo-good) 13%, transparent); }
.mkf-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); gap: 28px; margin-bottom: 22px; padding: clamp(24px, 4vw, 38px); border: 1px solid var(--geo-border); border-radius: 18px; background: linear-gradient(145deg, color-mix(in oklab, var(--geo-accent) 5%, var(--geo-surface)), var(--geo-surface) 46%, color-mix(in oklab, var(--geo-second) 6%, var(--geo-surface))); box-shadow: var(--geo-btn-quiet); }
.mkf-hero-copy h2 { max-width: 760px; margin: 0; color: var(--geo-text); font-size: clamp(25px, 3.2vw, 36px); line-height: 1.14; font-weight: 690; }
.mkf-hero-copy > p { max-width: 720px; margin: 15px 0 0; color: var(--geo-text2); font-size: 15.5px; line-height: 1.68; }
.mkf-summary { display: grid; align-content: start; gap: 0; margin: 0; border: 1px solid var(--geo-border); border-radius: 13px; background: color-mix(in oklab, var(--geo-bg) 60%, transparent); overflow: hidden; }
.mkf-summary div { padding: 13px 15px; border-bottom: 1px solid var(--geo-border); }
.mkf-summary div:last-child { border-bottom: 0; }
.mkf-summary dt { margin: 0 0 3px; color: var(--geo-muted); font-size: 10.5px; line-height: 1.3; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.mkf-summary dd { margin: 0; color: var(--geo-text); font-size: 13.5px; line-height: 1.45; font-weight: 600; }
.mkf-section { margin-top: 22px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); background: var(--geo-surface); box-shadow: var(--geo-btn-quiet); }
.mkf-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.mkf-section-head h2 { margin: 0; color: var(--geo-text); font-size: clamp(20px, 2.4vw, 27px); line-height: 1.22; font-weight: 675; }
.mkf-section-head p { max-width: 720px; margin: 7px 0 0; color: var(--geo-muted); font-size: 14px; line-height: 1.55; }
.mkf-flow { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; counter-reset: step; }
.mkf-flow li { position: relative; min-width: 0; min-height: 150px; padding: 16px; border: 1px solid var(--geo-border); border-radius: 12px; background: var(--geo-bg); }
.mkf-flow li:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; top: 20px; right: -17px; display: grid; place-items: center; width: 24px; height: 24px; color: var(--geo-accent); background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: 50%; font-size: 13px; font-weight: 800; }
.mkf-flow-no { display: grid; place-items: center; width: 29px; height: 29px; margin-bottom: 14px; border-radius: 8px; color: var(--geo-accent); background: var(--geo-accent-soft); font-family: var(--geo-mono); font-size: 10px; font-weight: 800; }
.mkf-flow strong { display: block; color: var(--geo-text); font-size: 14px; line-height: 1.3; }
.mkf-flow p { margin: 6px 0 0; color: var(--geo-muted); font-size: 12.5px; line-height: 1.5; }
.mkf-alert { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 22px; padding: 17px 18px; border: 1px solid var(--geo-border); border-left-width: 3px; border-radius: 12px; background: var(--geo-surface); }
.mkf-alert > div { min-width: 0; }
.mkf-alert strong { display: block; color: var(--geo-text); font-size: 14px; line-height: 1.35; }
.mkf-alert p { margin: 4px 0 0; color: var(--geo-muted); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.mkf-alert.is-good { border-left-color: var(--geo-good); background: color-mix(in oklab, var(--geo-good) 5%, var(--geo-surface)); }
.mkf-alert.is-warning { border-left-color: var(--geo-warn); background: color-mix(in oklab, var(--geo-warn) 5%, var(--geo-surface)); }
.mkf-alert.is-info { border-left-color: var(--geo-second); background: color-mix(in oklab, var(--geo-second) 5%, var(--geo-surface)); }
.mkf-generator { padding: 17px; border: 1px solid var(--geo-border); border-radius: 12px; background: var(--geo-bg); }
.mkf-generator label { display: block; margin-bottom: 7px; color: var(--geo-text); font-size: 12.5px; font-weight: 700; }
.mkf-form-row { display: flex; align-items: stretch; gap: 10px; }
.mkf-form-row select { width: 100%; min-width: 0; min-height: var(--geo-ctrl-h); padding: 8px 35px 8px 12px; color: var(--geo-text); background: var(--geo-surface); border: 1px solid var(--geo-border2); border-radius: var(--geo-r-ctrl); font-size: 14px; }
.mkf-empty { margin: 0; color: var(--geo-muted); font-size: 14px; line-height: 1.55; }
.mkf-empty a { color: var(--geo-accent); font-weight: 650; }
.mkf-copy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mkf-copy-card { min-width: 0; margin-top: 14px; overflow: hidden; border: 1px solid var(--geo-border); border-radius: 12px; background: var(--geo-bg); }
.mkf-section > .mkf-copy-card:first-of-type, .mkf-copy-grid .mkf-copy-card { margin-top: 0; }
.mkf-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 53px; padding: 10px 11px 10px 16px; border-bottom: 1px solid var(--geo-border); background: color-mix(in oklab, var(--geo-surface2) 45%, var(--geo-surface)); }
.mkf-copy-head h3 { margin: 0; color: var(--geo-text); font-size: 13.5px; line-height: 1.35; font-weight: 680; }
.mkf-copy-btn { min-height: 34px; padding: 6px 12px; border: 1px solid color-mix(in oklab, var(--geo-accent) 45%, var(--geo-border)); border-radius: 8px; color: var(--geo-accent); background: var(--geo-accent-soft); font-size: 12px; line-height: 1; font-weight: 750; cursor: pointer; }
.mkf-copy-btn:hover, .mkf-copy-btn.is-copied { color: var(--geo-brand-ink); background: var(--geo-brand); }
.mkf-copy-card pre { width: 100%; min-width: 0; margin: 0; padding: 17px; color: var(--geo-text2); background: transparent; font: 13.5px/1.62 var(--geo-font); white-space: pre-wrap; overflow-wrap: anywhere; }
/* the image prompt under each campaign's banners: a copy card with one line of help above the prompt */
.mkf-prompt { margin-top: 16px; }
.mkf-prompt-intro { margin: 0; padding: 14px 17px 0; color: var(--geo-text2); font-size: 12.5px; line-height: 1.5; }
.mkf-copy-note { margin: 0; padding: 0 17px 15px; color: var(--geo-muted); font-size: 11.5px; line-height: 1.5; }
.mkf-compliance { margin-bottom: 14px; padding: 12px 14px; border-left: 3px solid var(--geo-warn); border-radius: 8px; color: var(--geo-muted); background: color-mix(in oklab, var(--geo-warn) 6%, var(--geo-bg)); font-size: 12.5px; line-height: 1.5; }
.mkf-compliance strong { color: var(--geo-text); }
.mkf-link-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.mkf-link-panel > div > span { display: block; margin-bottom: 6px; color: var(--geo-muted); font-size: 11px; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.mkf-link-panel code { display: block; max-width: 100%; padding: 10px 12px; overflow-wrap: anywhere; border: 1px solid var(--geo-border); border-radius: 9px; color: var(--geo-accent); background: var(--geo-bg); font: 12px/1.45 var(--geo-mono); }
.mkf-link-panel ul { margin: 16px 0 0; padding-left: 19px; color: var(--geo-text2); font-size: 13.5px; line-height: 1.55; }
.mkf-link-panel li + li { margin-top: 7px; }
.mkf-qr-wrap { display: grid; justify-items: center; gap: 7px; padding: 13px; border: 1px solid var(--geo-border); border-radius: 11px; background: var(--geo-print-bg); }
.mkf-qr { min-width: 112px; min-height: 112px; }
.mkf-qr img, .mkf-qr canvas { display: block; }
.mkf-qr-wrap small { color: var(--geo-print-muted); font-size: 10px; }
.mkf-checklist { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; border: 1px solid var(--geo-border); border-radius: 12px; overflow: hidden; }
.mkf-checklist li { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; padding: 13px 15px; border-bottom: 1px solid var(--geo-border); background: var(--geo-bg); }
.mkf-checklist li:last-child { border-bottom: 0; }
.mkf-checklist strong { color: var(--geo-accent); font-size: 12.5px; line-height: 1.45; }
.mkf-checklist span { color: var(--geo-text2); font-size: 13.5px; line-height: 1.45; }
.mkf-decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 15px; }
.mkf-decision-grid a { display: grid; gap: 6px; min-width: 0; padding: 15px; border: 1px solid var(--geo-border); border-radius: 11px; color: var(--geo-text); background: var(--geo-bg); text-decoration: none; }
.mkf-decision-grid a:hover { border-color: var(--geo-accent); text-decoration: none; }
.mkf-decision-grid strong { font-size: 13px; line-height: 1.35; }
.mkf-decision-grid span { color: var(--geo-accent); font-size: 12px; line-height: 1.35; font-weight: 650; }
/* Fixed artwork, the same in both themes on purpose: the QR card (must stay dark on white to scan) and the campaign
   banner the agency downloads (white words on a plain dark background with one soft glow, no photo). Tokens so every
   colour has a name. */
:root {
  --geo-print-bg: #ffffff;
  --geo-print-muted: #59606b;
  --geo-banner-ink: #ffffff;
  --geo-banner-shade: 3 12 30;
  --geo-banner-glow: 27 211 178;
  --geo-banner-kicker: #55e7cb;
  --geo-banner-body: #cbd7e7;
  --geo-banner-cta: #1bd3b2;
  --geo-banner-cta-ink: #03151d;
}
.mkf-creative-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 16px; align-items: stretch; }
.mkf-banner-preview { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: 330px; padding: clamp(24px, 4vw, 42px); overflow: hidden; border: 1px solid color-mix(in oklab, var(--geo-accent) 38%, var(--geo-border)); border-radius: 15px; color: var(--geo-banner-ink); background-color: rgb(var(--geo-banner-shade)); background-image: radial-gradient(circle at 86% 18%, rgb(var(--geo-banner-glow) / .30) 0%, rgb(var(--geo-banner-glow) / .08) 40%, rgb(var(--geo-banner-glow) / 0) 75%); box-shadow: inset 0 0 60px rgba(0, 0, 0, .18); }
.mkf-banner-preview > span { align-self: flex-start; font-size: 14px; line-height: 1.3; font-weight: 760; letter-spacing: .025em; }
.mkf-banner-preview > div { max-width: 72%; margin: 32px 0; }
.mkf-banner-preview small { display: block; margin-bottom: 9px; color: var(--geo-banner-kicker); font-size: 11px; line-height: 1.3; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.mkf-banner-preview strong { display: block; color: var(--geo-banner-ink); font-size: clamp(25px, 3.2vw, 39px); line-height: 1.08; font-weight: 750; text-wrap: balance; }
.mkf-banner-preview p { max-width: 560px; margin: 13px 0 0; color: var(--geo-banner-body); font-size: 14px; line-height: 1.5; }
.mkf-banner-preview > b { align-self: flex-start; padding: 10px 14px; border-radius: 8px; color: var(--geo-banner-cta-ink); background: var(--geo-banner-cta); font-size: 12.5px; line-height: 1.2; font-weight: 800; }
.mkf-download-panel { display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid var(--geo-border); border-radius: 13px; background: var(--geo-bg); }
.mkf-download-panel > strong { color: var(--geo-text); font-size: 15px; }
.mkf-download-panel > p { margin: 7px 0 0; color: var(--geo-muted); font-size: 12.5px; line-height: 1.5; }
.mkf-download-list { display: grid; gap: 9px; margin-top: 18px; }
.mkf-download-list .mkf-btn { width: 100%; justify-content: flex-start; }
.mkf-download-list .mkf-btn:disabled { color: var(--geo-muted); background: var(--geo-surface2); border-color: var(--geo-border); box-shadow: none; cursor: not-allowed; filter: none; }
.mkf-download-panel .mkf-asset-ready { margin-top: auto; padding-top: 18px; color: var(--geo-good-ink); font-weight: 700; }
.mkf-download-panel .mkf-asset-lock { margin-top: auto; padding-top: 18px; color: var(--geo-warn-ink); font-weight: 650; }

@media (max-width: 1050px) {
  .mkf-hero { grid-template-columns: 1fr; }
  .mkf-creative-grid { grid-template-columns: 1fr; }
  .mkf-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkf-flow li:last-child { grid-column: 1 / -1; min-height: 112px; }
  .mkf-flow li::after { display: none !important; }
}
@media (max-width: 720px) {
  .mkf-shell { padding: 24px 16px 48px; }
  .mkf-header { align-items: flex-start; flex-direction: column; }
  .mkf-header .mkf-btn { width: 100%; }
  .mkf-funnel-grid, .mkf-copy-grid, .mkf-decision-grid { grid-template-columns: 1fr; }
  .mkf-hero { gap: 20px; padding: 22px 18px; }
  .mkf-section { padding: 20px 16px; }
  .mkf-alert { align-items: stretch; flex-direction: column; gap: 14px; }
  .mkf-alert .mkf-btn { width: 100%; }
  .mkf-link-panel { grid-template-columns: 1fr; }
  .mkf-qr-wrap { justify-self: start; }
  .mkf-banner-preview { min-height: 340px; }
}
@media (max-width: 470px) {
  .mkf-shell { padding-inline: 12px; }
  .mkf-rule { align-items: flex-start; }
  .mkf-funnel-grid { gap: 10px; }
  .mkf-funnel-card { grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "no title" "no use" "no who" "no state"; min-height: 0; }
  .mkf-funnel-card.is-active { order: -1; }
  .mkf-state { justify-self: start; margin-top: 8px; }
  .mkf-flow { grid-template-columns: 1fr; }
  .mkf-flow li, .mkf-flow li:last-child { grid-column: auto; min-height: 0; }
  .mkf-banner-preview { min-height: 430px; padding: 24px 20px; }
  .mkf-banner-preview > div { max-width: 100%; margin: 40px 0; }
  .mkf-banner-preview strong { font-size: 29px; }
  .mkf-form-row { flex-direction: column; }
  .mkf-form-row .mkf-btn { width: 100%; }
  .mkf-checklist li { grid-template-columns: 1fr; gap: 4px; }
  body:has(.mkf-page) #support-fab { display: none !important; }
}

/* ══ White label after paying (/white-label; 18 Oct): the agency sends its brand details and sees Received, Setting up,
   Live. Tokens only, so both themes follow. ══════════════════════════════════════════════════════════════════════ */
.wls { max-width: 760px; }
.wls-h1 { margin: 0 0 4px; color: var(--geo-text); font-size: 26px; font-weight: 760; line-height: 1.2; }
.wls-lead { margin: 0 0 18px; color: var(--geo-muted); font-size: 15px; }
.wls-card { margin: 0 0 16px; padding: 18px 20px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card, 14px);
  background: var(--geo-surface); color: var(--geo-text2); }
.wls-card p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; }
.wls-now { border-color: color-mix(in oklab, var(--geo-accent) 34%, var(--geo-border));
  background: linear-gradient(135deg, color-mix(in oklab, var(--geo-accent) 8%, var(--geo-surface)), var(--geo-surface)); }
.wls-h2 { margin: 0; color: var(--geo-text); font-size: 18px; font-weight: 720; line-height: 1.3; }
.wls-h3 { margin: 18px 0 2px; color: var(--geo-text); font-size: 15.5px; font-weight: 700; }
.wls-muted { color: var(--geo-muted); font-size: 14px; }
.wls-note { margin: 0 0 16px; color: var(--geo-muted); font-size: 14.5px; }
.wls-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.wls-step { display: grid; justify-items: start; gap: 2px; padding: 12px 14px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card, 14px);
  background: var(--geo-surface); min-width: 0; }
.wls-step.is-done { border-color: color-mix(in oklab, var(--geo-good) 45%, var(--geo-border)); }
.wls-step.is-now { box-shadow: 0 0 0 2px color-mix(in oklab, var(--geo-accent) 55%, transparent); }
.wls-dot { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 4px; border-radius: 999px;
  border: 1px solid var(--geo-border2); color: var(--geo-muted); font-size: 13px; font-weight: 750; }
.wls-step.is-done .wls-dot { border-color: var(--geo-good); background: color-mix(in oklab, var(--geo-good) 18%, var(--geo-surface)); color: var(--geo-good-ink); }
.wls-step-name { color: var(--geo-text); font-size: 15px; font-weight: 720; }
.wls-step-sub { color: var(--geo-muted); font-size: 13px; line-height: 1.35; }
.wls-how { display: grid; gap: 10px; margin: 12px 0 16px; padding: 0; list-style: none; }
.wls-how li { display: flex; gap: 10px; align-items: flex-start; color: var(--geo-text2); font-size: 15px; }
.wls-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px;
  background: var(--geo-accent-soft); color: var(--geo-accent); font-size: 13px; font-weight: 750; }
.wls-summary { cursor: pointer; color: var(--geo-text); font-size: 18px; font-weight: 720; list-style-position: inside; }
.wls-need { display: grid; gap: 6px; margin: 12px 0 4px; padding: 0 0 0 18px; color: var(--geo-text2); font-size: 15px; }
.wls-need li span:first-child { color: var(--geo-text); font-weight: 600; }
.wls-hint { color: var(--geo-muted); font-size: 13.5px; }
.wls-hint::before { content: " · "; }
.wls-fields { display: grid; gap: 6px; margin-top: 14px; }
.wls-label { margin-top: 8px; color: var(--geo-text); font-size: 14px; font-weight: 650; }
.wls-input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--geo-border2); border-radius: var(--geo-r-ctrl, 10px);
  background: var(--geo-bg); color: var(--geo-text); font-size: 16px; line-height: 1.45; }
.wls-input:focus { outline: 2px solid color-mix(in oklab, var(--geo-accent) 60%, transparent); outline-offset: 1px; }
textarea.wls-input { resize: vertical; min-height: 150px; }
.wls-doc, .wls-sent-link a { font-weight: 650; overflow-wrap: anywhere; }   /* the house link colour (--geo-second) */
.wls-sent-text { margin-top: 10px; padding: 12px; border-radius: var(--geo-r-ctrl, 10px); background: var(--geo-surface2); color: var(--geo-text2);
  font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.wls-btn { display: inline-flex; align-items: center; justify-content: center; justify-self: start; margin-top: 14px; min-height: 44px; padding: 0 18px; text-decoration: none; }
.wls-link { padding: 0; border: 0; background: none; color: var(--geo-second); font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) {
  .wls-h1 { font-size: 23px; }
  .wls-card { padding: 16px; }
  .wls-track { gap: 6px; }
  .wls-step { padding: 10px; }
  .wls-step-sub { font-size: 12px; }
  .wls-btn { justify-self: stretch; justify-content: center; }
}

/* ══ Billing as tabs (/billing; billing decision 7, 18 Oct): Overview, Purchases, Usage, Earnings, Settings. Tokens only. ══ */
.btb-tabs { position: relative; display: flex; gap: 4px; margin: 0 0 20px; padding: 4px; overflow-x: auto; border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-card, 14px); background: var(--geo-surface); scrollbar-width: none; }
.btb-tabs::-webkit-scrollbar { display: none; }
.btb-tab { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px;
  color: var(--geo-text2) !important; font-size: 14.5px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.btb-tab:hover { background: var(--geo-surface2); }
.btb-tab.is-on { background: color-mix(in oklab, var(--geo-accent) 14%, var(--geo-surface)); color: var(--geo-text) !important; }
.btb-tab:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 1px; }
/* ── Billing, money v2 (30 Oct; design: money-v2/billing.html): the Overview's cards ── */
.bv-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .bv-grid.bv-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.bv-card { background: var(--geo-surface); border: 1px solid var(--geo-card-edge); border-radius: var(--geo-r-card, 16px); padding: 20px; min-width: 0; }
.bv-gap { margin-top: 16px; }
.bv-lbl { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--geo-eyebrow, var(--geo-muted)); }
.bv-h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--geo-text); }
.bv-h2-tight { margin-bottom: 4px; }
.bv-big { margin: 0; font-size: 44px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--geo-text); font-variant-numeric: tabular-nums; }
.bv-sub { margin: 6px 0 16px; font-size: 15px; color: var(--geo-text2); }
.bv-text2 { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--geo-text2); }
.bv-warn { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--geo-warn-ink); }
.bv-total { margin: 0; font-size: 22px; font-weight: 700; color: var(--geo-text); }
.bv-sm { margin: 4px 0 0; font-size: 13px; color: var(--geo-muted); }
.bv-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bv-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; text-decoration: none; box-sizing: border-box; max-width: 100%; }
@media (max-width: 479px) { .bv-wide-m { width: 100%; } }
.bv-lk { color: var(--geo-brand); font-size: 14px; font-weight: 600; text-decoration: none; }
html[data-theme="dark"] .bv-lk { color: var(--geo-accent); }
.bv-lk:hover { text-decoration: underline; }
.bv-lk-btn { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: none; }
.bv-inline { display: inline; margin: 0; }
.bv-at { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-top: 16px; padding-top: 14px;
         border-top: 1px solid var(--geo-border); font-size: 14px; color: var(--geo-text2); }
.bv-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 99px; background: var(--geo-muted); vertical-align: 1px; }
.bv-dot.is-on { background: var(--geo-good); }
.bv-dot.is-warn { background: var(--geo-warn); }
.bv-rows { display: grid; gap: 12px; margin: 0 0 16px; }
.bv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--geo-text); }
.bv-row span:last-child { font-weight: 600; }
.bv-row small { margin-right: 8px; color: var(--geo-muted); font-weight: 500; }
.bv-meter { height: 6px; margin-top: 6px; overflow: hidden; border-radius: 99px; background: var(--geo-surface2); border: 1px solid var(--geo-border); }
.bv-meter i { display: block; height: 100%; background: var(--geo-brand); }
html[data-theme="dark"] .bv-meter i { background: var(--geo-accent); }
.bv-spend { display: grid; gap: 20px; }
@media (min-width: 900px) { .bv-spend { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.bv-chart { display: flex; align-items: flex-end; gap: 3px; height: 72px; margin: 10px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--geo-border); }
.bv-chart i { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--geo-border2); }
.bv-chart i.hi { background: var(--geo-brand); }
html[data-theme="dark"] .bv-chart i.hi { background: var(--geo-accent); }
.bv-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--geo-muted); }
.bv-brk h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--geo-text2); }
.bv-brk + .bv-brk { margin-top: 14px; }
.bv-more { margin: 16px 0 0; }
.bv-pay { list-style: none; margin: 0 0 14px; padding: 0; }
.bv-pay li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: center; padding: 12px 0;
             border-bottom: 1px solid var(--geo-border); font-size: 15px; color: var(--geo-text); }
.bv-pay li:first-child { padding-top: 0; }
.bv-pay li small { display: block; font-size: 13px; color: var(--geo-muted); }
.bv-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.bv-st { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--geo-border); background: var(--geo-surface2);
         color: var(--geo-text2); font-size: 12px; font-weight: 600; line-height: 1.4; }
.bv-st.ok { background: color-mix(in srgb, var(--geo-good) 14%, var(--geo-surface)); color: var(--geo-good-ink, var(--geo-good)); border-color: transparent; }
@media (max-width: 479px) { .bv-pay li { grid-template-columns: minmax(0, 1fr) auto; } .bv-pay li .bv-lk { grid-column: 1 / -1; } }
.bv-all { margin-top: 16px; }
.bv-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 16px; padding: 14px 16px;
             border-radius: 12px; background: color-mix(in srgb, var(--geo-warn) 14%, var(--geo-surface));
             border: 1px solid color-mix(in srgb, var(--geo-warn) 40%, var(--geo-border)); color: var(--geo-text); font-size: 15px; }
.bv-banner-h { margin: 0; } .bv-banner-sub { margin: 6px 0 0; font-size: 14px; color: var(--geo-text2); }
.bv-banner form { margin: 0; }
#auto-topup .bv-text2 { margin-bottom: 18px; }
.bv-consent { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--geo-text2); }
@media (max-width: 479px) { #auto-topup .pl-8 { padding-left: 0; } #auto-topup .ml-8 { margin-left: 0; } }
.bv-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 14px; color: var(--geo-text2); }
.bv-sheet { width: min(640px, calc(100vw - 32px)); max-height: 88vh; padding: 0; border: 1px solid var(--geo-card-edge); border-radius: 16px;
            background: var(--geo-surface); color: var(--geo-text); }
.bv-sheet::backdrop { background: rgb(0 0 0 / .45); }
.bv-sheet-in { padding: 20px; }
.bv-sheet .bu-box { border: 0; padding: 0; margin: 0 0 16px; }
.btb-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 0 0 12px; }
.btb-card { margin: 0 0 16px; padding: 18px 20px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card, 14px);
  background: var(--geo-surface); color: var(--geo-text2); min-width: 0; }
.btb-cards .btb-card { margin: 0; }
.btb-card-h { margin: 0 0 6px; color: var(--geo-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.btb-big { margin: 0; color: var(--geo-text); font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.btb-low { margin: 8px 0 0; color: var(--geo-warn-ink); font-size: 14.5px; font-weight: 600; }
.btb-line { margin: 0; color: var(--geo-text); font-size: 15.5px; font-weight: 600; line-height: 1.45; }
.btb-note { margin: 8px 0 0; color: var(--geo-muted); font-size: 14px; line-height: 1.5; }
.btb-warn { color: var(--geo-warn-ink); }
.btb-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; min-height: 44px; padding: 0 16px; text-decoration: none; }
.btb-more { margin: 0 0 20px; font-size: 14.5px; font-weight: 650; }
.btb-empty { margin: 12px 0 0; color: var(--geo-muted); font-size: 14.5px; }
.btb-table-wrap { margin-top: 12px; overflow-x: auto; }
.btb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.btb-table th { padding: 8px 10px; border-bottom: 1px solid var(--geo-border); color: var(--geo-muted); font-size: 12.5px; font-weight: 700; text-align: left; white-space: nowrap; }
.btb-table td { padding: 10px; border-bottom: 1px solid var(--geo-border); color: var(--geo-text); vertical-align: top; }
.btb-table td:first-child { white-space: nowrap; color: var(--geo-text2); }
.btb-table .btb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.btb-table .btb-doc { white-space: nowrap; }
.btb-table .btb-doc a { font-weight: 650; }   /* the house link colour (--geo-second) */
.btb-manage { margin: 0 0 16px; }
.btb-manage .btb-btn { margin-top: 0; }
@media (max-width: 640px) {
  /* five tabs don't fit one row on a phone: two rows, every tab in sight (review, 18 Oct) */
  .btb-tabs { flex-wrap: wrap; overflow-x: visible; }
  .btb-tab { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
  .btb-card { padding: 16px; }
  .btb-big { font-size: 30px; }
  .btb-btn { width: 100%; }
  /* Purchases on a phone: each purchase a small block (date and amount, then what and credits, then the receipt) */
  .btb-table thead { display: none; }
  .btb-table, .btb-table tbody { display: block; }
  .btb-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date paid" "what credits" "doc doc";
    column-gap: 12px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--geo-border); }
  .btb-table td { padding: 0; border: 0; }
  .btb-table td:nth-child(1) { grid-area: date; font-size: 13px; }
  .btb-table td:nth-child(2) { grid-area: what; font-weight: 600; }
  .btb-table td:nth-child(3) { grid-area: paid; font-weight: 700; }
  .btb-table td:nth-child(4) { grid-area: credits; color: var(--geo-text2); }
  .btb-table td:nth-child(5) { grid-area: doc; }
  .btb-table td.btb-doc:empty { display: none; }
}

/* ══ Checkout inside Geophii (/billing/pay; billing decision 5, 18 Oct). Stripe's form sits in .gpay-form. Tokens only. ══ */
.gpay { max-width: 640px; margin: 8px auto 0; }
.gpay-form[hidden] { display: none; }
.gpay-back { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; }
.gpay-h { margin: 0 0 6px; color: var(--geo-text); font-size: 26px; font-weight: 800; line-height: 1.2; }
.gpay-intro { margin: 0 0 18px; color: var(--geo-text2); font-size: 15px; line-height: 1.5; }
/* Stripe draws its own form on white (its branding settings, not ours), so the frame is the same in both themes on
   purpose: a token so the colour has a name */
:root { --geo-checkout-frame: #ffffff; --geo-checkout-frame-ink: #4b5563; }
.gpay-form { min-height: 240px; padding: 8px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card, 14px); background: var(--geo-checkout-frame); }
.gpay-note { margin: 16px; color: var(--geo-checkout-frame-ink); font-size: 14.5px; }   /* on the white frame in both themes */
.gpay-failed { margin: 4px 0 0; color: var(--geo-warn-ink); font-weight: 600; }   /* on the page, outside the frame */
@media (max-width: 640px) { .gpay-h { font-size: 22px; } .gpay-form { padding: 0; border-radius: 12px; } }

/* ── To do (/tasks), the one task manager (spec §7, 18 Oct): Board and List are two layouts of the SAME cards ──
   (one DOM, data-view on #tasksView), so filters, moves, counts and the progress bar work the same in both. The cards
   keep the board's own utility classes; the columns and groups are drawn here, from tokens, so List can drop the tray. */
.tk-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--geo-border); border-radius: 10px; background: var(--geo-surface); }
.tk-switch button { min-height: 34px; padding: 6px 14px; border: 0; border-radius: 7px; color: var(--geo-muted); background: transparent; font-size: 13px; font-weight: 650; cursor: pointer; }
.tk-switch button:hover { color: var(--geo-text); }
.tk-switch button[aria-pressed="true"] { background: var(--geo-brand, var(--geo-accent)); color: var(--geo-brand-ink, var(--geo-accent-ink)); }   /* the brand fill (D-014): dark --geo-accent is link cyan, never a fill (design gate, 19 Oct) */
.tk-switch button:focus-visible { outline: 3px solid color-mix(in oklab, var(--geo-accent) 40%, transparent); outline-offset: 2px; }
.tk-scroll { position: relative; overflow-x: auto; }   /* relative: the screen-reader labels inside stay clipped by it */
.tk-columns { display: flex; gap: 16px; min-width: 800px; padding-bottom: 16px; scroll-snap-type: x mandatory; }
.tk-col { flex: 1 1 0; min-width: 220px; padding: 12px; scroll-snap-align: start; border: 1px solid var(--geo-border); border-radius: 12px;
  background: color-mix(in oklab, var(--geo-surface2) 40%, transparent); }
/* Five stages (Set aside, 19 Oct): on a wide screen all five fit side by side; a phone or a small laptop scrolls them. */
@media (min-width: 1400px) { .tk-col { min-width: 180px; } }
.tk-col.tk-drop { border-color: color-mix(in oklab, var(--geo-good) 55%, var(--geo-border)); }
.tk-col .task-list { display: flex; flex-direction: column; gap: 12px; min-height: 80px; }
/* The title is first in the page (what a screen reader hears first); on the board the client and priority sit above it */
.tk-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.tk-view[data-view="board"] .tk-card .tk-client { order: -2; }
.tk-view[data-view="board"] .tk-card .tk-meta { order: -1; }
.tk-card .tk-foot { margin-top: 2px; }
.tk-card > .card-hide { align-self: flex-start; margin-top: 0; }
.tk-open { display: block; inline-size: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.tk-open > span { inline-size: 100%; }   /* a button centres a short line; the title fills it so it reads from the left */
.tk-open:hover { text-decoration: underline; }
.tk-open:focus-visible, .tk-next:focus-visible { outline: 3px solid color-mix(in oklab, var(--geo-accent) 45%, transparent); outline-offset: 2px; border-radius: 4px; }
.tk-next[hidden] { display: none !important; }   /* a theme rule makes buttons flex */
#detailPanel:focus { outline: none; }
#detailPanel { z-index: 9970; }   /* over the help dock (9969), which otherwise covers its Send button on a phone; under the site switcher (9975) */
.tk-listhead, .tk-list-only { display: none; }

.tk-view[data-view="list"] .tk-list-only { display: block; }
.tk-view[data-view="list"] .tk-scroll { overflow: visible; }
.tk-view[data-view="list"] .tk-columns { flex-direction: column; gap: 22px; min-width: 0; padding-bottom: 0; }
.tk-view[data-view="list"] .tk-col { min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.tk-view[data-view="list"] .tk-col .task-list { gap: 0; min-height: 0; border: 1px solid var(--geo-border); border-radius: 12px; overflow: hidden; }
.tk-view[data-view="list"] .tk-col.tk-drop .task-list { border-color: color-mix(in oklab, var(--geo-good) 55%, var(--geo-border)); box-shadow: 0 0 0 2px color-mix(in oklab, var(--geo-good) 30%, transparent); }
.tk-view[data-view="list"] .task-list > .task-card { margin: 0; border-width: 1px 0 0; border-radius: 0; }
.tk-view[data-view="list"] .task-list > .task-card:first-child, .tk-view[data-view="list"] .task-list > .tk-empty + .task-card { border-top-width: 0; }
.tk-view[data-view="list"] .tk-card { padding: 12px 14px; }
.tk-view[data-view="list"] .tk-card { gap: 4px; }
.tk-view[data-view="list"] .tk-desc { display: none; }
@media (min-width: 768px) {
  .tk-view[data-view="list"] .tk-listhead { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.5fr) 56px; gap: 14px; padding: 0 15px 6px; color: var(--geo-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .tk-view[data-view="list"][data-all-clients="0"] .tk-listhead { grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr) minmax(0, 1.5fr) 56px; }
  .tk-view[data-view="list"] .tk-card { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 1.5fr) 56px;
    grid-template-areas: "title client meta foot hide" "tags tags tags tags tags" "work work work work work"; column-gap: 14px; row-gap: 0; align-items: center; }
  .tk-view[data-view="list"][data-all-clients="0"] .tk-card { grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr) minmax(0, 1.5fr) 56px;
    grid-template-areas: "title meta foot hide" "tags tags tags tags" "work work work work"; }
  /* the work panel's own "Hide" (a view preference on this browser) gets its own narrow column */
  .tk-view[data-view="list"] .tk-card .card-hide { grid-area: hide; justify-self: end; align-self: center; margin: 0; }
  .tk-view[data-view="list"] .tk-title { grid-area: title; margin: 0; }
  .tk-view[data-view="list"] .tk-client { grid-area: client; }
  .tk-view[data-view="list"] .tk-meta { grid-area: meta; }
  .tk-view[data-view="list"] .tk-foot { grid-area: foot; margin: 0; }
  .tk-view[data-view="list"] .tk-tags { grid-area: tags; margin-top: 6px; }
  .tk-view[data-view="list"] .tk-work { grid-area: work; }
  .tk-view[data-view="list"] .tk-work:empty { display: none; }
}
/* Printed, To do is always the List (the page switches to it before printing): no tray, no buttons, rows kept whole */
@media print {
  .tk-switch, .tk-next, .tk-pencil, .tk-card > .card-hide, #detailPanel { display: none !important; }
  .tk-view .tk-col .task-list > .task-card { break-inside: avoid; }
  .tk-open { text-decoration: none; }
}

/* ══ Brand look-up (/sites/{id}/brand-lookup; OpenSEO check, 18 Oct). Free counts from stored answers. Tokens only. ══ */
.brl-h { margin: 4px 0 6px; color: var(--geo-text); font-size: 26px; font-weight: 800; line-height: 1.2; }
.brl-intro { margin: 0 0 16px; color: var(--geo-text2); font-size: 15px; line-height: 1.5; max-width: 62ch; }
.brl-form { margin: 0 0 20px; }
.brl-label { display: block; margin: 0 0 6px; color: var(--geo-text); font-size: 14px; font-weight: 600; }
.brl-form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.brl-form-row .geo-btn { padding: 0 18px; white-space: nowrap; }
.brl-input { flex: 1 1 240px; min-width: 0; height: var(--geo-ctrl-h); padding: 0 12px; border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-ctrl); background: var(--geo-surface); color: var(--geo-text); font-size: 15px; }
.brl-input:focus { outline: 2px solid var(--geo-accent); outline-offset: 1px; }
.brl-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; color: var(--geo-muted); font-size: 13px; }
.brl-bad { margin: 8px 0 0; color: var(--geo-warn-ink); font-size: 14px; font-weight: 600; }
.brl-card { margin: 0 0 16px; padding: 16px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); background: var(--geo-panel); min-width: 0; }
.brl-h2 { margin: 0 0 10px; color: var(--geo-text); font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.brl-big { margin: 0 0 10px; color: var(--geo-text); font-size: 18px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.brl-muted { margin: 8px 0 0; color: var(--geo-muted); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.brl-small { margin: 0 0 10px; font-size: 13px; }
.brl-next { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--geo-r-ctrl); background: var(--geo-accent-soft); color: var(--geo-text); font-size: 14px; line-height: 1.45; }
.brl-grid { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 900px) { .brl-grid { grid-template-columns: 1fr 1fr; } }
.brl-track { display: block; height: 8px; border-radius: 999px; background: var(--geo-surface2); overflow: hidden; }
.brl-fill { display: block; height: 100%; min-width: 0; background: var(--geo-accent); border-radius: 999px; }
.brl-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
.brl-bars li { width: 100%; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name n" "bar bar"; gap: 4px 10px; align-items: center; }
.brl-bar-name { grid-area: name; color: var(--geo-text); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.brl-bars li .brl-track { grid-area: bar; }
.brl-bar-n { grid-area: n; color: var(--geo-text2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.brl-bars li.is-target .brl-fill { background: var(--geo-second); }
.brl-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--geo-border);
  color: var(--geo-muted); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.brl-tag-on { border-color: var(--geo-second); color: var(--geo-second-ink); }
.brl-qs { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.brl-q { display: block; color: var(--geo-text); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.brl-q-eng { display: block; color: var(--geo-muted); font-size: 12.5px; }
.brl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.brl-table th { text-align: left; color: var(--geo-muted); font-size: 12.5px; font-weight: 600; padding: 0 0 6px; border-bottom: 1px solid var(--geo-border); }
.brl-table td { padding: 7px 0; border-bottom: 1px solid var(--geo-border); color: var(--geo-text); overflow-wrap: anywhere; }
.brl-num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .brl-h { font-size: 22px; } .brl-big { font-size: 16.5px; } .brl-card { padding: 14px; } }
.brl-csv { margin: 0 0 16px; font-size: 14px; }
.brl-bars li .brl-run-note { grid-column: 1 / -1; margin: 0; }


/* Tip banners in light mode too (design window, 18 Oct: "What this does" was muddy brown, "How to read results" teal
   on grey-teal). The dark rule above sets the box; this one does the same in light, words in the text tokens, links
   and the green/red key they name left as they are. */
html:not([data-theme="dark"]) .main-content .bp-banner {
  background-color: var(--geo-surface) !important;
  border-color: var(--geo-border) !important;
  color: var(--geo-text2) !important;
}
.main-content .bp-banner [class*="text-"]:not(button):not(a):not([class*="text-green"]):not([class*="text-red"]) { color: var(--geo-text2) !important; }
.main-content .bp-banner :is(.font-semibold, strong, b) { color: var(--geo-text) !important; }

/* Key pages, on a phone: the address gets its own line, then what it is and Add page side by side (design window,
   18 Oct: at 390 the picker collapsed to a chevron and the button wrapped its words). */
@media (max-width: 639.98px) {
  #ctx-page-form > #ctx-page-url { flex: 1 1 100%; }
  /* Settings' question list: on a phone it flows with the page instead of scrolling inside a box nobody can tell
     scrolls (design window, 18 Oct: "the Prompts list clips with no sign it scrolls"). */
  #site-prompts-list { max-height: none !important; }
}


/* ══ THE CLIENT PAGE, SIMPLIFIED (clients/_client_strip.php, 18 Oct) ═════════════════════════
   Edward, 18 Oct: "this all could have been one line", "put more visible borders", "slick".
   One strip of three steps and one button; websites as compact rows; the header's three equal
   buttons as a quiet row of links. Cards take --geo-border2 in dark, where --geo-border sat
   within a shade of the page. Tokens only, so both themes follow. */
.cp-page .cp-card,
.cp-page .cp-strip,
.cp-page .cp-rows { border-color: var(--geo-card-edge); }   /* D-012: both themes, the same card edge as the rest of the app */
.cp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding-top: 4px; }
.cp-hlink { font-size: 14px; font-weight: 600; color: var(--geo-text2); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--geo-border2); text-underline-offset: 4px; }
.cp-hlink:hover, .cp-hlink:focus-visible { color: var(--geo-accent); text-decoration-color: currentColor; }
@media (min-width: 768px) { .cp-links { justify-content: flex-end; flex: none; } }

.cp-strip { background: var(--geo-surface); border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); padding: 14px 16px; min-width: 0; }
.cp-strip-site { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--geo-border); }
.cp-strip-site label { font-size: 13px; font-weight: 600; color: var(--geo-muted); }
.cp-select { min-height: 34px; padding: 4px 30px 4px 10px; border-radius: var(--geo-r-ctrl); border: 1px solid var(--geo-border2);
  background-color: var(--geo-bg); color: var(--geo-text); font-size: 14px; font-weight: 600; max-width: 100%; min-width: 0; }
.cp-strip-link { margin-top: 12px; }
.cp-strip-more { margin: 10px 0 0; }
.cp-strip-more .cp-hlink { font-size: 13px; font-weight: 500; color: var(--geo-muted); }

.cp-rows { list-style: none; margin: 0; padding: 0; background: var(--geo-surface); border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-card); overflow: hidden; }
.cp-srow { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px; min-width: 0; }
.cp-srow + .cp-srow { border-top: 1px solid var(--geo-border); }
.cp-srow-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; color: inherit; text-decoration: none; flex: 1 1 auto; }
.cp-srow-domain { font-weight: 650; font-size: 15px; color: var(--geo-text); overflow-wrap: anywhere; min-width: 0; }
.cp-srow-main:hover .cp-srow-domain { color: var(--geo-accent); }
.cp-srow-st { width: 100%; font-size: 13px; color: var(--geo-muted); display: inline-flex; align-items: center; gap: 6px; }
.cp-srow-st.is-running { color: var(--geo-warn-ink); }
.cp-srow-st.is-failed { color: var(--geo-bad-ink); }
.cp-srow-acts { display: flex; gap: 8px; }
.cp-srow-acts form { margin: 0; flex: 1 1 auto; display: flex; }
.cp-srow-acts .cp-btn { flex: 1 1 auto; }
.cp-btn-sm { min-height: 36px; font-size: 13.5px; padding: 0 12px; white-space: nowrap; }
@media (min-width: 768px) {
  .cp-srow { flex-direction: row; align-items: center; gap: 16px; }
  .cp-srow-st { width: auto; margin-left: auto; padding-right: 4px; }
  .cp-srow-acts { flex: none; }
  .cp-srow-acts form, .cp-srow-acts .cp-btn { flex: none; }
}
.cp-strip-note { margin: 10px 0 0; }
.cp-srow-name { font-size: 13px; color: var(--geo-muted); }
/* What a tool's result means for the plan (PlanLink, partials/plan_link.php, 18 Oct): one line and one action. */
.geo-plan-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0 0; padding: 12px 14px;
  border: 1px solid var(--geo-border); border-radius: 12px; background: var(--geo-surface2); }
.geo-plan-link-t { margin: 0; flex: 1 1 16rem; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--geo-text); overflow-wrap: anywhere; }
.geo-plan-link-a { color: var(--geo-accent) !important; font-weight: 650; font-size: 14px; white-space: nowrap; }
.geo-plan-link-f { margin: 0; }
.geo-plan-link-b { min-height: 40px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--geo-brand); background: var(--geo-brand);
  color: var(--geo-brand-ink) !important; font-weight: 650; font-size: 14px; cursor: pointer; }
.geo-plan-link-b:disabled { opacity: .6; cursor: default; }

/* ── The sales rewards pop-up (agency dashboard, dashboard/index.php #salesRewardPopup) ──
   It paints itself (its buttons carry .geo-own-colour). The header is the same gradient in both themes on purpose, so
   its colours are named tokens; the card and its buttons follow the theme. The wrapper's display stays with the
   hidden/flex classes its script toggles. */
/* white on each stop measures 5.5:1 (#047857), 5.5:1 (#0f766e), 6.7:1 (#1d4ed8): the small line under the heading passes */
:root { --geo-reward-a: #047857; --geo-reward-b: #0f766e; --geo-reward-c: #1d4ed8; --geo-reward-ink: #ffffff; }
.srp { position: fixed; inset: 0; z-index: 9970; align-items: center; justify-content: center; padding: 16px; }
.srp-backdrop { position: absolute; inset: 0; border: 0; padding: 0; min-height: 0 !important; border-radius: 0 !important;
  background: color-mix(in oklab, #000 58%, transparent) !important; backdrop-filter: blur(4px); cursor: pointer; }
.srp-card { position: relative; inline-size: 100%; max-inline-size: 28rem; overflow: hidden; border-radius: 24px;
  border: 1px solid var(--geo-border); background: var(--geo-surface); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.srp-head { padding: 32px 28px; text-align: center; color: var(--geo-reward-ink);
  background: linear-gradient(135deg, var(--geo-reward-a), var(--geo-reward-b) 50%, var(--geo-reward-c)); }
.srp-icon { display: flex; align-items: center; justify-content: center; inline-size: 56px; block-size: 56px; margin: 0 auto 12px;
  border-radius: 16px; background: color-mix(in oklab, var(--geo-reward-ink) 20%, transparent); }
.srp-icon svg { inline-size: 28px; block-size: 28px; }
.srp-h { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--geo-reward-ink); }
.srp-line { margin: 8px 0 0; font-size: 14px; color: color-mix(in oklab, var(--geo-reward-ink) 90%, transparent); }
.srp-body { display: flex; flex-direction: column; gap: 12px; padding: 24px 28px; }
.srp-ok { inline-size: 100%; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 12px !important; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--geo-brand-ink) !important; background: var(--geo-brand) !important; }
.srp-ok:hover { background: color-mix(in oklab, var(--geo-accent) 88%, var(--geo-text)) !important; }
.srp-hide-form { text-align: center; margin: 0; }
.srp-hide { min-height: 32px !important; padding: 4px 8px; border: 0; background: none !important; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--geo-muted) !important; }
.srp-hide:hover { color: var(--geo-text) !important; text-decoration: underline; }

/* ══ Website page v2: compact header, order bar, three cards, next step (design window's spec, 18 Oct). Tokens only. ══ */
.sp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; min-width: 0; }
.sp-domain { margin: 0; color: var(--geo-text); font-size: 24px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; min-width: 0; }
.sp-fresh { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--geo-border);
  border-radius: 999px; background: var(--geo-surface); color: var(--geo-text2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sp-fresh-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--geo-muted); flex: none; }
.sp-fresh[data-fresh="fresh"] .sp-fresh-dot { background: var(--geo-good); }
.sp-fresh[data-fresh="aging"] .sp-fresh-dot { background: var(--geo-warn); }
.sp-fresh[data-fresh="stale"] { color: var(--geo-bad-ink); }
.sp-fresh[data-fresh="stale"] .sp-fresh-dot { background: var(--geo-bad); }
.sp-fresh[data-fresh="running"] .sp-fresh-dot { background: var(--geo-accent); }

.sp-ob { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.sp-ob-picker { height: var(--geo-ctrl-h); min-height: 40px; padding: 0 32px 0 12px; max-width: 100%; border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-ctrl); background-color: var(--geo-surface); color: var(--geo-text); font-size: 14px; }
.sp-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-ctrl); background: var(--geo-surface); color: var(--geo-text); font-size: 14px; font-weight: 600;
  line-height: 1.2; text-align: left; cursor: pointer; text-decoration: none; }
.sp-pill:hover:not(:disabled) { border-color: var(--geo-border2); }
.sp-pill:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 2px; }
.sp-pill:disabled { cursor: not-allowed; color: var(--geo-muted); }
.main-content a.sp-pill-link, .sp-pill-link { color: var(--geo-text) !important; }
.sp-switch { position: relative; width: 28px; height: 16px; flex: none; border-radius: 999px; background: var(--geo-border2); transition: background var(--geo-dur, .15s); }
.sp-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 999px; background: var(--geo-surface); transition: transform var(--geo-dur, .15s); }
.sp-toggle[aria-pressed="true"] { border-color: var(--geo-accent); background: var(--geo-accent-soft); }
.sp-toggle[aria-pressed="true"] .sp-switch { background: var(--geo-accent); }
.sp-toggle[aria-pressed="true"] .sp-switch::after { transform: translateX(12px); }
.sp-ob-run { margin-left: auto; min-height: 44px; padding: 0 20px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 639.98px) {
  .sp-domain { font-size: 22px; }
  .sp-ob-picker { width: 100%; }
  .sp-ob-run { width: 100%; margin-left: 0; justify-content: center; }
}

.sp-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 12px; }
@media (min-width: 768px) { .sp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } }
.sp-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-card); background: var(--geo-panel); color: var(--geo-text); text-decoration: none; }
html[data-theme="dark"] .sp-card { border-color: var(--geo-border2); }
.sp-card-link:hover { border-color: var(--geo-border2); }
.sp-card-link:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 2px; }
.sp-card-h { margin: 0; color: var(--geo-text2); font-size: 14px; font-weight: 600; }
.sp-card-v { margin: 0; color: var(--geo-text); font-size: 30px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-card-v-quiet { font-size: 20px; font-weight: 700; color: var(--geo-text2); }
.sp-card-name { font-size: 22px; }
.sp-card-of { font-size: 16px; font-weight: 600; color: var(--geo-muted); }
.sp-card-foot { margin: 0; color: var(--geo-text2); font-size: 13.5px; line-height: 1.4; }
.sp-card-go { margin-top: auto; color: var(--geo-text2); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sp-bar { display: block; height: 6px; border-radius: 999px; background: var(--geo-surface2); overflow: hidden; }
.sp-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--geo-accent); }
.sp-bar-rival .sp-bar-fill { background: var(--geo-bad); }
.sp-segs { display: flex; gap: 4px; }
.sp-seg { flex: 1 1 0; height: 6px; border-radius: 999px; background: var(--geo-surface2); }
.sp-seg.is-on { background: var(--geo-good); }

.sp-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 24px; padding: 14px 16px;
  border: 1px solid var(--geo-accent); border-radius: var(--geo-r-card); background: var(--geo-accent-soft); }
.sp-next-main { flex: 1 1 260px; min-width: 0; }
.sp-next-h { margin: 0 0 2px; color: var(--geo-text2); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sp-next-t { margin: 0; color: var(--geo-text); font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.main-content a.sp-next-btn, .sp-next-btn { flex: none; color: var(--geo-text) !important; background: var(--geo-surface); }
@media (max-width: 639.98px) { .sp-next-btn { width: 100%; justify-content: center; } }

/* Website page v2: the Repeat switch's "Change schedule" link, the settings links, and the Repeat audits section */
.sp-ob-repeat { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.main-content a.sp-ob-change, .sp-ob-change { color: var(--geo-text2) !important; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 8px 2px; }
.sp-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.main-content .sp-subnav a, .sp-subnav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--geo-border);
  border-radius: 999px; background: var(--geo-surface); color: var(--geo-text) !important; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.sp-subnav a:hover { border-color: var(--geo-border2); }
.sp-repeat { scroll-margin-top: 80px; padding: 20px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); background: var(--geo-panel); }
html[data-theme="dark"] .sp-repeat { border-color: var(--geo-border2); }
.sp-repeat-h { margin: 0 0 4px; color: var(--geo-text); font-size: 18px; font-weight: 700; }
.sp-repeat-intro { margin: 0 0 16px; color: var(--geo-text2); font-size: 14px; line-height: 1.5; }
#site-tab-settings [id^="site-settings-"] { scroll-margin-top: 80px; }
/* the Fixes card is one link: no underline or link colour on the whole card (the global .main-content a rules) */
.main-content a.sp-card-link, .main-content a.sp-card-link:hover { text-decoration: none !important; color: var(--geo-text) !important; }
.main-content a.sp-card-link .sp-card-go { color: var(--geo-text2) !important; text-decoration: underline !important; }

/* The revenue estimate (Edward, 18 Oct): from the agency's own figures, or an invite to add them. Tokens only. */
.rev-card, .rev-invite { margin: 0 0 24px; padding: 16px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-card); background: var(--geo-panel); }
html[data-theme="dark"] .rev-card, html[data-theme="dark"] .rev-invite { border-color: var(--geo-border2); }
.rev-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rev-h { margin: 0; color: var(--geo-text); font-size: 16px; font-weight: 700; }
.main-content a.rev-edit, .rev-edit { color: var(--geo-text2) !important; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rev-gap { margin: 6px 0 14px; color: var(--geo-text2); font-size: 14px; line-height: 1.5; }
.rev-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .rev-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.rev-tile { padding: 12px; border-radius: var(--geo-r-ctrl); background: var(--geo-surface2); text-align: center; min-width: 0; }
.rev-v { margin: 0; color: var(--geo-text); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rev-l { margin: 2px 0 0; color: var(--geo-text2); font-size: 12.5px; }
.rev-note { margin: 12px 0 0; color: var(--geo-muted); font-size: 12.5px; line-height: 1.5; }
.rev-inputs { display: block; margin-top: 2px; color: var(--geo-text2); }
.rev-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.rev-invite-main { flex: 1 1 260px; min-width: 0; }
.rev-invite-line { margin: 4px 0 0; color: var(--geo-text2); font-size: 14px; line-height: 1.5; }
.main-content a.rev-invite-btn, .rev-invite-btn { flex: none; color: var(--geo-text) !important; }
@media (max-width: 639.98px) { .rev-invite-btn { width: 100%; justify-content: center; } }

/* v2 batch: Add SEO's not-due reason as visible words; Key pages' type select keeps its arrow clear of the words */
.sp-ob-why { color: var(--geo-muted); font-size: 13px; }
#ctx-page-role { padding-right: 32px; }
@media (max-width: 639.98px) { #ctx-page-form > #ctx-page-role { flex: 1 1 auto; } }

/* ══ The website's section menu, final (Edward, 19 Oct; design window's frozen spec, site-menu-scroll/). Tokens only.
   --geo-edge and --geo-card-edge come with D-011; until then the fallbacks are today's border tokens. ══ */
.sm-nav { position: relative; }
.sm-wrap { position: relative; display: none; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--geo-border); padding-top: 18px; }
@media (min-width: 768px) { .sm-wrap { display: flex; } }
.sm-menu { display: flex; align-items: flex-end; gap: 16px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%); }
.sm-menu::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .sm-menu { scroll-behavior: auto; } }
.sm-grp { display: flex; flex-direction: column; gap: 2px; flex: none; }
.sm-gname { padding: 0 5px; color: var(--geo-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.sm-grow { display: flex; align-items: flex-end; }
.main-content .sm-tab, .sm-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 9px 5px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--geo-text2) !important; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none !important; cursor: pointer; }
.sm-tab:hover { color: var(--geo-text) !important; }
.sm-tab.is-on { color: var(--geo-text) !important; border-bottom-color: var(--geo-accent); }
.sm-tab:focus-visible, .sm-gbtn:focus-visible, .sm-gear:focus-visible, .sm-arr:focus-visible, .sm-subl:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 2px; }
.sm-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--geo-surface2); color: var(--geo-text2); font-size: 12px; font-weight: 700; }
.sm-badge.is-warn { background: color-mix(in oklab, var(--geo-warn) 16%, transparent); color: var(--geo-warn-ink); }
.sm-badge.is-bad { background: color-mix(in oklab, var(--geo-bad) 16%, transparent); color: var(--geo-bad-ink); }
/* Roast my site: a 30px pill, accent-soft with an accent ring; solid accent when open; never meets the underline */
.main-content .sm-tab.sm-roast, .sm-roast { min-height: 30px; height: 30px; margin: 0 3px 4px; padding: 0 10px; border-bottom: 0; border-radius: 999px;
  background: var(--geo-accent-soft); color: var(--geo-accent) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--geo-accent) 40%, transparent); }
.main-content .sm-tab.sm-roast.is-on, .sm-roast.is-on { background: var(--geo-brand); color: var(--geo-brand-ink) !important; }
.sm-roast svg { width: 15px; height: 15px; }
/* Folded groups: only their name (and Roast my site) when the menu doesn't fit */
.main-content .sm-gbtn, .sm-gbtn { display: none !important; align-items: center; gap: 4px; min-height: 40px; padding: 9px 5px; border: 0; background: none;
  color: var(--geo-text2) !important; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sm-gbtn svg { width: 14px; height: 14px; }
.main-content .sm-menu.is-tight .sm-grp:not(.is-open) .sm-gbtn { display: inline-flex !important; }
.main-content .sm-menu.is-tight .sm-grp:not(.is-open) .sm-tab:not(.sm-roast) { display: none !important; }
.sm-menu.is-tight .sm-grp:not(.is-open) .sm-gname { visibility: hidden; }
/* Settings: the gear and the word, at the right end of the group-name row */
.main-content .sm-gear, .sm-gear { position: absolute; right: 0; top: -14px; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--geo-edge, var(--geo-border2)); border-radius: var(--geo-r-ctrl); background: var(--geo-surface); color: var(--geo-text2) !important;
  font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none !important; cursor: pointer; z-index: 2; }
.sm-gear svg { width: 17px; height: 17px; }
.sm-gear.is-on { border-color: var(--geo-accent); color: var(--geo-text) !important; }
/* The scroll cue: solid round arrows, a slider, the fade (mask above). Only when the open group still doesn't fit. */
.main-content .sm-arr, .sm-arr { position: absolute; bottom: 4px; z-index: 3; display: none !important; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--geo-edge, var(--geo-border2)); border-radius: 999px; background: var(--geo-surface); color: var(--geo-text) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16); cursor: pointer; }
html[data-theme="dark"] .sm-arr { box-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.sm-arr::before { content: ""; position: absolute; inset: -5px; }
.sm-arr svg { width: 18px; height: 18px; }
.sm-arr.is-l { left: 0; } .sm-arr.is-r { right: 0; }
.main-content .sm-wrap.can-l .sm-arr.is-l, .main-content .sm-wrap.can-r .sm-arr.is-r, .sm-wrap.can-l .sm-arr.is-l, .sm-wrap.can-r .sm-arr.is-r { display: inline-flex !important; }
.sm-track { display: none; position: relative; height: 4px; margin-top: 4px; border-radius: 999px; background: var(--geo-card-edge, var(--geo-border)); touch-action: none; cursor: pointer; }
.sm-track::before { content: ""; position: absolute; inset: -8px 0; }
.sm-track.on { display: block; }
.sm-thumb { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--geo-muted); cursor: grab; }
.sm-track.drag .sm-thumb { cursor: grabbing; background: var(--geo-text2); }
@media (max-width: 767.98px) { .sm-track, .sm-sub { display: none !important; } }
/* The pages a section folds in (Competitors, Keywords), one click away */
.sm-sub { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.main-content a.sm-subl, .sm-subl { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--geo-border); border-radius: 999px;
  background: var(--geo-surface); color: var(--geo-text2) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; }
.main-content a.sm-subl.is-on, .sm-subl.is-on { border-color: var(--geo-accent); color: var(--geo-text) !important; background: var(--geo-accent-soft); }
.site-sections-list .sm-mroast .block { color: var(--geo-accent); }
/* the audit picker on the title row (design, frozen 19 Oct): beside the freshness pill; full width on a phone */
.sp-title .sp-ob-picker { height: 36px; min-height: 36px; font-size: 13.5px; border-color: var(--geo-edge, var(--geo-border)); }
@media (max-width: 639.98px) { .sp-title .sp-ob-picker { width: 100%; } }
/* one row where it fits; it wraps rather than run off the page (the switches carry their prices and an "i") */
/* the "i" beside a switch and its popover (design window, 19 Oct): a 32px tap target, closes on outside tap or Esc */
.sp-tipw { position: relative; display: inline-flex; }
.main-content .sp-tip, .sp-tip { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 32px; margin-left: -4px; padding: 0;
  border: 1px solid var(--geo-edge, var(--geo-border2)); border-radius: 999px; background: var(--geo-surface); color: var(--geo-text2) !important;
  font: 700 13px/1 Georgia, serif; font-style: italic; cursor: pointer; }
.sp-tip[aria-expanded="true"] { border-color: var(--geo-accent); color: var(--geo-text) !important; }
.sp-tip:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 2px; }
.sp-tip-pop { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 30; width: max-content; max-width: min(280px, 80vw);
  padding: 10px 34px 10px 12px; border: 1px solid var(--geo-edge, var(--geo-border2)); border-radius: var(--geo-r-ctrl); background: var(--geo-surface);
  color: var(--geo-text); font-size: 13px; font-weight: 500; line-height: 1.45; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); white-space: normal; }
.sp-tip-pop[hidden] { display: none; }
.main-content .sp-tip-x, .sp-tip-x { position: absolute; top: 2px; right: 2px; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; background: none;
  color: var(--geo-text2) !important; font-size: 18px; line-height: 1; cursor: pointer; }
/* on a phone the popover spans the order bar, so it never runs off the screen */
@media (max-width: 639.98px) { .sp-ob { position: relative; } .sp-tipw { position: static; } .sp-tip-pop { left: 0; right: 0; top: auto; transform: none; width: auto; max-width: none; margin-top: 6px; } }
/* Roast my site on the Overview (design window, 19 Oct) */
.sp-roastcard { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 24px; padding: 16px; border-radius: var(--geo-r-card);
  border: 1px solid color-mix(in oklab, var(--geo-accent) 70%, var(--geo-card-edge, var(--geo-border))); background: var(--geo-surface); }
.sp-rico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--geo-accent-soft); color: var(--geo-accent); }
.sp-rico svg { width: 22px; height: 22px; }
.sp-rtxt { flex: 1 1 260px; min-width: 0; }
.sp-rh { margin: 0; color: var(--geo-text); font-size: 16px; font-weight: 700; }
.sp-rl { margin: 2px 0 0; color: var(--geo-text2); font-size: 14px; }
.sp-rbtn { min-height: 40px; padding: 0 16px; white-space: nowrap; }
@media (max-width: 639.98px) { .sp-rbtn { width: 100%; justify-content: center; } }
/* folded mode (design 89d9a59f, site-menu-expand/): 10px between groups, 4px tab padding, slim group buttons with an edge;
   a group opens with a short fade-and-slide (none with reduced motion) */
.sm-menu.is-tight { gap: 10px; }
.main-content .sm-menu.is-tight .sm-tab:not(.sm-roast) { padding-left: 4px; padding-right: 4px; }
.main-content .sm-menu.is-tight .sm-grp:not(.is-open) .sm-gbtn { min-height: 32px; height: 32px; margin-bottom: 4px; padding: 0 10px;
  border: 1px solid var(--geo-edge, var(--geo-border2)); border-radius: var(--geo-r-ctrl); }
.sm-menu.is-tight .sm-grp.is-open .sm-grow { animation: smOpen .18s ease-out; }
@keyframes smOpen { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sm-menu.is-tight .sm-grp.is-open .sm-grow { animation: none; } }
/* the order bar's row rule (design 89d9a59f): one row from 640 up; when it doesn't fit, Repeat takes its own row and the
   switches stay beside Run audit. On a phone everything stacks, Run full width last (as before). */
@media (min-width: 640px) {
  .sp-ob { flex-wrap: nowrap; }
  .sp-ob > * { flex: none; }
  .sp-ob.is-split { flex-wrap: wrap; }
  .sp-ob.is-split .sp-ob-repeat { order: 9; flex-basis: 100%; }
}
/* the design's pill size (89d9a59f: 36px, 12px padding, 13.5px) and a slimmer "i" (28px to see, 32px to tap), so Add SEO,
   Email and Run audit fit one row at 1024 with the sidebar open */
.sp-ob .sp-pill { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.main-content .sp-ob .sp-tip, .sp-ob .sp-tip { position: relative; width: 28px; height: 28px; min-height: 28px; margin-left: -4px; }
.sp-ob .sp-tip::before { content: ""; position: absolute; inset: -2px; }
.sp-ob { gap: 6px; }
#site-tab-settings #competitors { scroll-margin-top: 80px; }
/* the gear stays where it is when the tour points at it (tour.js sets position: relative on its target) */
.main-content .sm-gear { position: absolute !important; }
.site-sections-list a.site-sections-sub { padding-left: 28px; font-size: 14px; }

/* The page guide (public/js/tour.js, #help-guide-panel) is drawn with fixed navy colours inline,
   while its section text reads --geo-text2: in light that's dark grey on navy, and in dark the
   intro was #6b7280 on #1e293b. Both near-unreadable (design window, 18 Oct). The panel now follows
   the theme's tokens; !important because tour.js writes inline styles. */
#help-guide-panel { background: var(--geo-panel) !important; border-left-color: var(--geo-border2) !important; color: var(--geo-text) !important; }
#help-guide-panel > div:first-child { background: var(--geo-panel) !important; border-bottom-color: var(--geo-border) !important; }
#help-guide-panel > div:first-child p { color: var(--geo-muted) !important; }
#help-guide-panel #hg-title, #help-guide-panel #hg-sections h3 { color: var(--geo-text) !important; }
#help-guide-panel #hg-close { background: var(--geo-surface2) !important; color: var(--geo-text2) !important; }
#help-guide-panel #hg-intro { background: var(--geo-surface2) !important; color: var(--geo-text2) !important; border-left-color: var(--geo-accent) !important; }
#help-guide-panel #hg-sections p { color: var(--geo-text2) !important; }
#help-guide-panel #hg-sections span { background: var(--geo-accent-soft) !important; color: var(--geo-accent) !important; }
#help-guide-panel > div:last-child > div:last-child { background: var(--geo-surface2) !important; }
#help-guide-panel > div:last-child > div:last-child p { color: var(--geo-text2) !important; }

/* The standalone public pages (auth/*, the apply pages, partners, errors/404) render their own
   <html>, draw dark (body bg-gray-900/950) and set no data-theme, so they read the LIGHT tokens:
   dark text on their dark buttons and links ("Back to sign in", "Check again with a different
   email", "See how it works" measured 1.27:1). They are dark pages, so they get the dark tokens,
   once, here (design window, 18 Oct; the same values as html[data-theme="dark"]). */
html:not([data-theme]) body:is(.bg-gray-900, .bg-gray-950) {
  --geo-btn-lift:  inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .35);
  --geo-btn-quiet: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .3);
  --geo-bg: #030303; --geo-panel: #000000; --geo-surface: #0a0a0a; --geo-surface2: #1f1f1f;
  --geo-border: #242424; --geo-border2: #474747; --geo-edge: #6f7d90; --geo-card-edge: #3a4658;
  --geo-text: #fafafa; --geo-text2: #d9d9d9; --geo-muted: #9a9a9a;
  --geo-accent: #00b8b5; --geo-accent-ink: #04201f; --geo-accent-soft: rgba(0, 184, 181, .13);
  --geo-good: #33cc99; --geo-warn: #eaa61a; --geo-bad: #d94f4f;
  --geo-good-ink: #5fe3b2; --geo-warn-ink: #f2c14e; --geo-bad-ink: #f5a3a3;
  --geo-second-ink: #cbbcdb; --geo-second: #b3a1c7; --geo-second-deep: #715e8b; --geo-info: #b3a1c7;
}

/* ══ Design window's check of v2 (19 Oct): edges from D-011's tokens, measured 3.15 light / 4.25 dark for controls,
   about 1.5 to 1.9 for cards. ══ */
.sp-ob .sp-pill, .sp-pill, .sp-title .sp-ob-picker, .sp-ob-picker, .main-content .sp-subnav a { border-color: var(--geo-edge); }
.sp-toggle[aria-pressed="false"] .sp-switch, .sp-switch { background: var(--geo-edge); }
.sp-toggle[aria-pressed="true"] .sp-switch { background: var(--geo-accent); }
.sp-card, html[data-theme="dark"] .sp-card, .rev-card, .rev-invite, html[data-theme="dark"] .rev-card, html[data-theme="dark"] .rev-invite,
.sp-repeat, html[data-theme="dark"] .sp-repeat { border-color: var(--geo-card-edge); }
.sp-next { border-color: color-mix(in oklab, var(--geo-accent) 70%, var(--geo-card-edge)); }
.rev-tile { border: 1px solid var(--geo-card-edge); }
/* the revenue card's "Edit your figures": a link that looks like one, on a phone too */
.main-content a.rev-edit, .rev-edit { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--geo-edge);
  border-radius: var(--geo-r-ctrl); background: var(--geo-surface); text-decoration: none !important; }
/* Repeat audits, "How often": the chosen one carries the accent fill and ring (the compiled Tailwind has no peer-checked) */
.sched-freq input[type="radio"]:checked + div { border-color: var(--geo-accent) !important; background: var(--geo-accent-soft) !important; color: var(--geo-text) !important;
  box-shadow: 0 0 0 1px var(--geo-accent); }
.sched-freq input[type="radio"]:focus-visible + div { outline: 2px solid var(--geo-accent); outline-offset: 2px; }
.sched-freq input[type="radio"] + div { border-color: var(--geo-edge) !important; background: var(--geo-surface) !important; color: var(--geo-text2) !important; }
.sched-freq input[type="radio"]:checked + div { background: var(--geo-brand) !important; color: var(--geo-brand-ink) !important; border-color: var(--geo-brand) !important; }
html .main-content .sched-freq input[type="radio"] + div { border-color: var(--geo-edge) !important; background: var(--geo-surface) !important; color: var(--geo-text2) !important; }
html .main-content .sched-freq input[type="radio"]:checked + div { background: var(--geo-brand) !important; color: var(--geo-brand-ink) !important; border-color: var(--geo-brand) !important; }
/* scoped to the form's id: a broad tailwind-remap rule with !important otherwise paints all three alike */
#scheduleForm .sched-freq input[type="radio"] + div { border-color: var(--geo-edge) !important; background-color: var(--geo-surface) !important; color: var(--geo-text2) !important; box-shadow: none !important; }
#scheduleForm .sched-freq input[type="radio"]:checked + div { background-color: var(--geo-brand) !important; border-color: var(--geo-brand) !important; color: var(--geo-brand-ink) !important; box-shadow: 0 0 0 1px var(--geo-brand) !important; }
#scheduleForm .sched-freq input[type="radio"]:focus-visible + div { outline: 2px solid var(--geo-text); outline-offset: 2px; }

/* ══ Design window's check of the menu (6f3c759b), 19 Oct ══ */
/* 1. Settings at the right end of the group-name row, not on a row of its own */
.sm-wrap { padding-top: 0; margin-top: 16px; }
.main-content .sm-gear, .sm-gear { top: -10px !important; height: 30px !important; min-height: 30px !important; }
/* 3. Roast my site: the mock's pill, 32px, round, 4px above the menu line, a soft accent fill and a 1px accent ring */
html .main-content .sm-tab.sm-roast, html .sm-tab.sm-roast { min-height: 32px !important; height: 32px !important; margin: 0 3px 4px !important; padding: 0 12px !important;
  border-radius: 999px !important; border: 0 !important; background: var(--geo-accent-soft) !important; box-shadow: inset 0 0 0 1px var(--geo-accent) !important; }
html .main-content .sm-tab.sm-roast.is-on, html .sm-tab.sm-roast.is-on { background: var(--geo-brand) !important; color: var(--geo-brand-ink) !important; }
/* 4. On a phone the tip opens under its switch's row, full width, so the switch stays in view */
@media (max-width: 639.98px) {
  .sp-tipw { display: contents; }
  .sp-tip-pop { position: static; order: 0; flex-basis: 100%; width: 100%; max-width: none; margin: -2px 0 4px; transform: none; box-shadow: none; }
}
@media (max-width: 639.98px) { .sp-tip-pop { position: relative; top: auto; left: auto; right: auto; } }

/* ── Rank tracking charts (19 Oct 2026, OpenSEO parity) ──────────────────────────────────────────────
   Positions over time: stacked columns, one per check day, top 3 on the baseline. The bands are ordered
   (best to worst), so they take one hue light to dark, never pass-green or fail-red (test_chart_colours);
   "not in the top 20" is a neutral grey. Ramps checked with the dataviz ordinal validator: monotone
   lightness, one hue, pale end >= 2:1 on the card in both themes. */
:root {
  --geo-rank-top3:  #0B5C5A;
  --geo-rank-top10: #2A8F8A;
  --geo-rank-top20: #6DBAB4;
  --geo-rank-out:   #AEB6C1;
}
html[data-theme="dark"] {
  --geo-rank-top3:  #5FE0DA;
  --geo-rank-top10: #22A39E;
  --geo-rank-top20: #17625F;
  --geo-rank-out:   #4A505A;
}
.rt-sp, .rt-gr { background: var(--geo-surface); border: 1px solid var(--geo-card-edge); border-radius: var(--geo-r-card); padding: 14px 16px; margin: 0 0 14px; min-width: 0; }
.rt-gr { margin-top: 18px; }
.rt-sp-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rt-sp-h { font-size: 15px; font-weight: 700; color: var(--geo-text); margin: 0; }
.rt-sp-sub { font-size: 13px; color: var(--geo-text2); margin: 2px 0 0; }
.rt-sp-none { font-size: 13px; color: var(--geo-text2); margin: 6px 0 0; }
.rt-sp-chart { position: relative; height: 200px; }
.rt-sp-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rt-sp-grid { stroke: var(--geo-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rt-sp-top3  { fill: var(--geo-rank-top3);  background: var(--geo-rank-top3); }
.rt-sp-top10 { fill: var(--geo-rank-top10); background: var(--geo-rank-top10); }
.rt-sp-top20 { fill: var(--geo-rank-top20); background: var(--geo-rank-top20); }
.rt-sp-out   { fill: var(--geo-rank-out);   background: var(--geo-rank-out); }
.rt-sp-y { position: absolute; left: 0; font-size: 11px; line-height: 1; color: var(--geo-text2); font-variant-numeric: tabular-nums; }
.rt-sp-y0 { bottom: calc(22 / 200 * 100%); transform: translateY(50%); }
.rt-sp-ymax { top: calc(8 / 200 * 100%); transform: translateY(-50%); }
.rt-sp-hits { position: absolute; left: calc(30 / 720 * 100%); right: 0; top: 0; bottom: calc(22 / 200 * 100%);
  display: grid; grid-template-columns: repeat(var(--rt-sp-n, 1), minmax(0, 1fr)); }
.main-content .rt-sp-hit { min-height: 0 !important; height: 100%; width: 100%; padding: 0; margin: 0; border: 0 !important; border-radius: 4px !important;
  background: transparent !important; cursor: default; }
.main-content .rt-sp-hit:hover, .main-content .rt-sp-hit:focus-visible, .main-content .rt-sp-hit.is-on { background: color-mix(in oklab, var(--geo-text) 6%, transparent) !important; }
.main-content .rt-sp-hit:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: -2px; }
.rt-sp-tip { position: absolute; z-index: 5; top: 0; min-width: 160px; max-width: 220px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--geo-border);
  background: var(--geo-surface); color: var(--geo-text); font-size: 12px; line-height: 1.45; white-space: pre-line; pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.rt-sp-x { position: relative; height: 16px; margin-top: 4px; font-size: 11px; color: var(--geo-text2); }
.rt-sp-x span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%);
  left: calc(30 / 720 * 100% + (100% - 30 / 720 * 100%) * (var(--rt-sp-i) + .5) / var(--rt-sp-n)); }
.rt-sp-x span:first-child { transform: translateX(-30%); }
/* The range you're on: the accent, as Repeat audits' "How often?" shows its choice (design window, 19 Oct). */
.main-content .rt-sp-range .geo-chip[aria-pressed="true"] { background: var(--geo-accent-soft); border-color: var(--geo-accent); color: var(--geo-accent) !important; }
/* More of the grid to the right on a phone: a soft fade says so (rank-charts.js sets .can-r), as the website menu does. */
.rt-gr-wrap.can-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.rt-sp-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--geo-text2); }
.rt-sp-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rt-sp-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rt-gr-wrap { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.rt-gr-wrap:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: 2px; }
.rt-gr-t { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
/* position: relative keeps each cell's screen-reader words (.bu-sr, absolute) inside the scroll box, not out past the phone */
.rt-gr-t th, .rt-gr-t td { position: relative; padding: 8px 10px; border-bottom: 1px solid var(--geo-border); text-align: right; white-space: nowrap; color: var(--geo-text); }
.rt-gr-t thead th { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--geo-text2); }
.rt-gr-t th[scope="row"], .rt-gr-t thead th:first-child { text-align: left; position: sticky; left: 0; background: var(--geo-surface); z-index: 1;
  white-space: normal; min-width: 140px; max-width: 220px; }
.rt-gr-t th[scope="row"] { font-weight: 600; }
.rt-gr-t th[scope="row"] .rt-kw-sub { display: block; font-size: 11px; font-weight: 500; color: var(--geo-text2); }
.rt-gr-pos { font-family: var(--geo-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-gr-mv { font-size: 11px; font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.rt-gr-mv.is-up { color: var(--geo-good-ink, var(--geo-good)); }
.rt-gr-mv.is-down { color: var(--geo-warn-ink, var(--geo-warn)); }
.rt-gr-none, .rt-gr-out { color: var(--geo-text2) !important; }
@media (max-width: 767px) { .rt-sp-chart { height: 170px; } .rt-sp, .rt-gr { padding: 12px; } }
/* The rank page's panels take the card edge in both themes (D-012's card rule doesn't reach them: they have their own classes). */
html .main-content :is(.rt-add-form, .kr-imp-form) { border-color: var(--geo-card-edge); }
.rt-nokw { background: var(--geo-surface); border: 1px solid var(--geo-card-edge); border-radius: var(--geo-r-card); padding: 16px; }


/* The strip as three equal options (Edward, 18 Oct: "these are just options on a page"): each a
   button of the same weight until it's done, then a short line in its place. No order, no ticks. */
.cp-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.cp-opt { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 40px; }
.cp-opt .cp-btn { width: 100%; }
.cp-opt-line { font-size: 14px; font-weight: 600; color: var(--geo-text2) !important; text-decoration: none !important; overflow-wrap: anywhere; }
.cp-opt-line.is-link { text-decoration: underline !important; text-decoration-color: var(--geo-border2) !important; text-underline-offset: 4px; }
.cp-opt-line.is-link:hover { color: var(--geo-accent) !important; text-decoration-color: currentColor !important; }
.cp-opt-line.is-warn { color: var(--geo-warn-ink) !important; }
.cp-opt-note { font-size: 12.5px; color: var(--geo-muted); }
.cp-opt-copy { align-self: flex-start; font-size: 13px; font-weight: 500; color: var(--geo-muted); }
@media (min-width: 900px) {
  .cp-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .cp-opt { padding: 0 18px; }
  .cp-opt:first-child { padding-left: 0; }
  .cp-opt + .cp-opt { border-left: 1px solid var(--geo-border); }
  .cp-opt .cp-btn { width: auto; align-self: flex-start; white-space: nowrap; }
}
/* Who does the work (client page, 18 Oct): a line under the header, and three choices in the box. */
.cp-wb { margin: 6px 0 0; font-size: 13px; color: var(--geo-text2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cp-wb .cp-hlink { font-size: 13px; }
.cp-wb-set { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.cp-wb-set legend { margin-bottom: 8px; }
.cp-wb-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--geo-border2); border-radius: var(--geo-r-ctrl); cursor: pointer; }
.cp-wb-opt:has(input:checked) { border-color: var(--geo-accent); background: var(--geo-accent-soft); }
.cp-wb-opt input { margin-top: 3px; accent-color: var(--geo-accent); flex: none; }
.cp-wb-opt strong { display: block; color: var(--geo-text); font-size: 14.5px; }
.cp-wb-line { display: block; font-size: 13px; color: var(--geo-text2); margin-top: 2px; }
.cp-wb-warn { color: var(--geo-warn-ink); font-weight: 600; }
.cp-dialog .cp-actions { max-width: none; flex-wrap: nowrap; } .cp-dialog .cp-actions .cp-btn { white-space: nowrap; }

/* ══ D-014 · ONE COLOUR FAMILY (design window, 19 Oct) ═══════════════════════════════════════════════
   Edward: "make all the green uniform, like the logo … the font should be white on it". One brand
   green plus neutrals; status colours only for status (Apple HIG colour, Radix scale roles, Material
   colour pairs; sources on the design board, D-014). Supersedes the 26 Sep bright fill with dark ink
   and the violet second voice (the earlier layers above still hold the old values; this block wins).

   WHICH TOKEN:
     --geo-brand / --geo-brand-ink   a FILL with words on it (buttons, the chosen pill). White text.
     --geo-link (= --geo-accent)     words and small marks: links, bars, dots, rings. NEVER a fill under
                                     white text: in dark it's the bright #38D3E0.
     --geo-brand-soft / -soft-ink    a quiet tint: the chosen menu item, counts, icon squares.
   Palette C "Clear water" (Edward, 19 Oct ~12:00): the logo's green-to-blue read as one teal-cyan, cool
   white surfaces, near-black ink. Contrast, measured: white on #0E7C86 4.95:1 (both themes); hover #0B6B74
   6.23, press #095A62 7.92; links light #0E7C86 4.95 on white / 4.73 on the ground, dark #38D3E0 9.53 on
   the surface; soft text light #0B6B74 5.60 on #E6F6F6, dark #8AE6EE 10.4 on #0B2B30; dark eyebrow #7CC8D0
   9.09; ink #101828 16.96 on the ground. Chart series keep their own data colours on purpose. */
:root {
  --geo-brand:          #0E7C86;
  --geo-brand-hover:    #0B6B74;
  --geo-brand-press:    #095A62;
  --geo-brand-ink:      #ffffff;
  --geo-brand-soft:     #E6F6F6;
  --geo-brand-soft2:    #D2EEF0;
  --geo-brand-soft-ink: #0B6B74;
  --geo-brand-ring:     #0E7C86;
  --geo-eyebrow:        #0B6B74;
  /* Roles a palette can point elsewhere (D-014b): the chosen menu item, counts, the banner art. */
  --geo-select:      var(--geo-brand-soft);
  --geo-select-ink:  var(--geo-brand-soft-ink);
  --geo-select-mark: var(--geo-brand);
  --geo-count:       var(--geo-brand-soft2);
  --geo-count-ink:   var(--geo-brand-soft-ink);
  --geo-banner-art:  url("/images/geo-banner-curves.svg");

  --geo-accent:      var(--geo-brand);
  --geo-accent-ink:  var(--geo-brand-ink);
  --geo-accent-soft: rgba(14, 124, 134, .10);
  --geo-link:        var(--geo-accent);
  --geo-fill:        var(--geo-brand);
  --geo-fill-ink:    var(--geo-brand-ink);

  /* The ground: a calm neutral with the faintest breath of the brand, not lavender. */
  --geo-bg:       #FBFCFD;
  --geo-surface2: #F8FAFC;     /* the page ground: a cool near-white */
  --geo-border:   #E8ECF1;     /* dividers and table rules: a hairline, 1.13:1 on the ground */
  --geo-border2:  #A8B1BE;
  --geo-card-edge: #DFE4EB;    /* cards: a quiet hairline, 1.22:1 on the ground (Edward ~12:03: borders too dark) */
  --geo-text:     #101828;     /* near-black ink */
  --geo-text2:    #475467;
  --geo-muted:    #5B6676;

  /* The violet second voice is retired: links are the brand, "info" is a quiet slate. */
  --geo-second:      var(--geo-brand);
  --geo-second-ink:  var(--geo-brand-soft-ink);
  --geo-second-deep: var(--geo-brand-press);
  --geo-info:        #4B6478;
  --geo-violet:      var(--geo-brand);
  --geo-violet-deep: var(--geo-brand-press);
  --geo-violet-soft: rgba(14, 124, 134, .06);
  --geo-magenta:     var(--geo-brand);
  --geo-aurora: linear-gradient(90deg, #14B8A6 0%, #0E7C86 45%, #3B82F6 100%);   /* the logo's green to blue */

  /* Crisp buttons (Edward, 19 Oct ~11:20: "very crisp and sharp, not … plasticky"): a flat fill, no
     highlight, no shadow, the edge the same colour as the fill. */
  --geo-btn-edge:  var(--geo-brand);
  --geo-btn-lift:  none;
  --geo-btn-quiet: none;
  --geo-btn-hover: var(--geo-brand-hover);
  accent-color: var(--geo-brand);
}
html[data-theme="dark"], html:not([data-theme]) body:is(.bg-gray-900, .bg-gray-950) {
  --geo-brand:          #0E7C86;
  --geo-brand-hover:    #0B6B74;
  --geo-brand-press:    #095A62;
  --geo-brand-ink:      #ffffff;
  --geo-brand-soft:     #0B2B30;
  --geo-brand-soft2:    #0F363C;
  --geo-brand-soft-ink: #8AE6EE;
  --geo-brand-ring:     #38D3E0;
  --geo-eyebrow:        #7CC8D0;
  --geo-card-edge:      #222D3C;   /* cards: a quiet hairline, 1.24:1 on the card surface, 1.28 on the ground */
  --geo-select:      var(--geo-brand-soft);
  --geo-select-ink:  var(--geo-brand-soft-ink);
  --geo-select-mark: var(--geo-brand);
  --geo-count:       var(--geo-brand-soft2);
  --geo-count-ink:   var(--geo-brand-soft-ink);

  --geo-accent:      #38D3E0;
  --geo-accent-ink:  #04201f;
  --geo-accent-soft: rgba(56, 211, 224, .13);
  --geo-link:        var(--geo-accent);
  --geo-fill:        var(--geo-brand);
  --geo-fill-ink:    var(--geo-brand-ink);

  --geo-second:      var(--geo-accent);
  --geo-second-ink:  var(--geo-brand-soft-ink);
  --geo-second-deep: var(--geo-brand);
  --geo-info:        #94A9BC;
  --geo-violet:      var(--geo-accent);
  --geo-violet-deep: var(--geo-brand);
  --geo-violet-soft: rgba(56, 211, 224, .07);
  --geo-magenta:     var(--geo-accent);
  --geo-btn-edge:  var(--geo-brand);
  --geo-btn-lift:  none;
  --geo-btn-quiet: none;
  --geo-btn-hover: var(--geo-brand-hover);
  accent-color: var(--geo-accent);
}

/* Filled main buttons: hover and pressed are steps of the brand (one mechanism: the old brightness
   filter is switched off for them), so white text keeps its contrast. */
html:not(#geo-no-such-id) :is(.geo-btn-primary, a[class*="bg-green-5"], a[class*="bg-green-6"], a[class*="bg-emerald-6"], a[class*="bg-teal-6"],
  button[class*="bg-green-5"], button[class*="bg-green-6"], button[class*="bg-emerald-6"], input[type="submit"][class*="bg-green-"],
  a[class*="bg-blue-6"]:not([class*="/"]), button[class*="bg-blue-6"]:not([class*="/"]), a[class*="bg-blue-7"]:not([class*="/"]), button[class*="bg-blue-7"]:not([class*="/"]),
  #ob-card .ob-grad, .rm-go, .rm-btn.rm-solid, #support-modal .sup-send, .ix-send, .cw-start, .cw-open.is-primary, .cw-door-btn,
  #gs-academy-modal .gs-action-btn:not(.gs-secondary):not(.gs-ghost), .pw .pw-primary, .pw form > button[type="submit"],
  .ta-fixer:not(.ta-fixer-quote), .cv-roast-go, .cpk-pill-buy, .mkf-btn:not(.mkf-btn-secondary):not(:disabled), .fx-btn-primary, .ck-btn-go, .ch-btn-go):not([style*="width:"]):not(:disabled):not([aria-disabled="true"]):hover {
  background-color: var(--geo-brand-hover) !important; filter: none !important;
}
html:not(#geo-no-such-id) :is(.geo-btn-primary, a[class*="bg-green-"], button[class*="bg-green-"], a[class*="bg-emerald-6"], button[class*="bg-emerald-6"], a[class*="bg-teal-6"], .rm-go, .rm-btn.rm-solid, .ix-send, .cw-start):not([style*="width:"]):not(:disabled):not([aria-disabled="true"]):active {
  background-color: var(--geo-brand-press) !important;
}
.srp-ok:hover { background: var(--geo-brand-hover) !important; }
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--geo-brand-ring); }
/* The chosen Roast pill is the fill; it keeps the ring so "on" never looks quieter than "off". */
.main-content .sm-tab.sm-roast.is-on, .sm-roast.is-on { box-shadow: inset 0 0 0 1px var(--geo-brand-ring); }

/* The chosen menu item: the brand's soft tint, brand text and mark. */
html[data-theme] .sidebar a.bg-gray-700, html:not([data-theme]) .sidebar a.bg-gray-700 {
  background-color: var(--geo-select) !important; background-image: none !important;
  box-shadow: inset 3px 0 0 var(--geo-select-mark);
  color: var(--geo-select-ink) !important;
}
html[data-theme] .sidebar a.bg-gray-700 svg, html:not([data-theme]) .sidebar a.bg-gray-700 svg { color: var(--geo-select-ink) !important; }
/* In light the menu script swaps the chosen item to .bg-blue-50.__active-light; same treatment. */
html:not(#geo-no-such-id) .sidebar a.__active-light { background-color: var(--geo-select) !important; background-image: none !important; box-shadow: inset 3px 0 0 var(--geo-select-mark); color: var(--geo-select-ink) !important; }
html:not(#geo-no-such-id) .sidebar a.__active-light svg { color: var(--geo-select-ink) !important; }

/* Eyebrows: quieter than a link. Roast body lines that borrowed the link colour read as body text. */
.gs-eyebrow, .rm-eyebrow, .cw-door-eyebrow, .pw-eyebrow, .mkf-kicker, .mkf-eyebrow { color: var(--geo-eyebrow) !important; }
.cv-roast-note, .cv-roast-now, .cv-roast-good-row, .cv-roast-seen, .cv-roast-why { color: var(--geo-text2); }
html:not([data-theme="dark"]) .main-content thead { background-color: color-mix(in oklab, var(--geo-surface2) 45%, var(--geo-surface)) !important; }

/* Counts are quiet: a soft brand tint, in the menu and on the page alike. Red and orange counts
   (things that need action now) are untouched. "Change Requests" waiting is a decision, so it's the fill. */
.sidebar span.rounded-full:is([class~="bg-blue-600"], [class~="bg-emerald-500"], [class~="bg-green-600"]),
.ch-count, .cn-badge, .cpk-badge, .mkf-rule-icon {
  background-color: var(--geo-count) !important; color: var(--geo-count-ink) !important;
}
.sidebar span.rounded-full[class~="bg-violet-600"] { background-color: var(--geo-brand) !important; color: var(--geo-brand-ink) !important; }
.sidebar a.bg-gray-700 span.rounded-full:is([class~="bg-blue-600"], [class~="bg-emerald-500"], [class~="bg-green-600"]) { background-color: var(--geo-surface) !important; }
.rm-steps li.done .rm-dot { background: var(--geo-accent); border-color: var(--geo-accent); color: var(--geo-accent-ink); }

/* Tinted shortcut cards (Quick Actions and the like): a neutral card with a hairline, the brand tint
   on hover, and a brand-tint icon square. Whole-class matches only, so a bg-blue-500 button is never caught. */
html:not(#geo-no-such-id) .main-content a:is([class~="bg-purple-50"], [class~="bg-pink-50"], [class~="bg-cyan-50"], [class~="bg-blue-50"], [class~="bg-indigo-50"], [class~="bg-violet-50"], [class~="bg-sky-50"]) {
  background-color: transparent !important; background-image: none !important;
  border: 1px solid var(--geo-card-edge) !important; box-shadow: none !important;
}
html:not(#geo-no-such-id) .main-content a:is([class~="bg-purple-50"], [class~="bg-pink-50"], [class~="bg-cyan-50"], [class~="bg-blue-50"], [class~="bg-indigo-50"], [class~="bg-violet-50"], [class~="bg-sky-50"]):hover {
  background-color: var(--geo-brand-soft) !important;
}
html:not(#geo-no-such-id) .main-content a :is(div, span):is(.w-8, .w-9, .w-10):is(.rounded-lg, .rounded-xl):is([class~="bg-purple-600"], [class~="bg-pink-600"], [class~="bg-cyan-600"], [class~="bg-blue-600"], [class~="bg-indigo-600"], [class~="bg-violet-600"], [class~="bg-sky-600"]) {
  background-color: var(--geo-brand-soft2) !important; background-image: none !important;
}
html:not(#geo-no-such-id) .main-content a :is(div, span):is(.w-8, .w-9, .w-10):is(.rounded-lg, .rounded-xl):is([class~="bg-purple-600"], [class~="bg-pink-600"], [class~="bg-cyan-600"], [class~="bg-blue-600"], [class~="bg-indigo-600"], [class~="bg-violet-600"], [class~="bg-sky-600"]) > svg {
  color: var(--geo-brand-soft-ink) !important;
}
/* A stray light-blue link (the website switcher's names) reads in the link colour on dark. */
html[data-theme="dark"] .main-content :is(a, span, p, td, div):is(.text-blue-400, .text-blue-300) { color: var(--geo-link) !important; }
/* A name that opens a record (the Clients list) is a link, so it's the link colour, not "good" green. */
html:not(#geo-no-such-id) .main-content a > div > p[class*="hover:text-green"], html:not(#geo-no-such-id) .main-content a > p[class*="hover:text-green"] { color: var(--geo-link) !important; }

/* Restraint (Edward, ~11:15: "fresh, clean … don't go overboard"): no washes behind the page or the
   menu, and no glow under the strip. The strip itself stays, in the brand. */
body { background-image: none !important; }
.sidebar { background-image: none !important; }
body::before { box-shadow: none !important; }
body::after { display: none !important; }

/* Crisp buttons: one corner on every filled and outline button, a flat press, a clear focus ring. */
html:not(#geo-no-such-id) :is(.geo-btn-primary, a[class*="bg-green-5"], a[class*="bg-green-6"], a[class*="bg-emerald-6"], a[class*="bg-teal-6"],
  button[class*="bg-green-5"], button[class*="bg-green-6"], button[class*="bg-emerald-6"], input[type="submit"][class*="bg-green-"],
  a[class*="bg-blue-6"]:not([class*="/"]), button[class*="bg-blue-6"]:not([class*="/"]), a[class*="bg-blue-7"]:not([class*="/"]), button[class*="bg-blue-7"]:not([class*="/"]),
  #ob-card .ob-grad, .rm-go, .rm-btn, #support-modal .sup-send, .ix-send, .ix-save, .cw-start, .cw-open, .cw-door-btn, .cw-back,
  .pw .pw-primary, .pw .pw-quiet, .geo-btn-silver, .geo-tt-btn, .btn-sm.secondary, #ob-card .ob-quiet, .fx-btn-primary, .ck-btn-go, .ch-btn-go, .mkf-btn):not([style*="width:"]) {
  border-radius: var(--geo-r-ctrl) !important;
}
html:not(#geo-no-such-id) :is(.geo-btn-primary, #ob-card .ob-grad, .rm-go, .cw-start, .cw-door-btn, .pw .pw-primary, #gs-academy-modal .gs-action-btn):active { box-shadow: none !important; }
/* Outline buttons: the surface, a 1px neutral edge, dark text; the edge firms up on hover. */
.geo-btn-silver, .geo-tt-btn, .btn-sm.secondary, #ob-card .ob-quiet, .rm-btn:not(.rm-solid), .cw-open:not(.is-primary), .cw-back, .pw .pw-quiet {
  background-color: var(--geo-surface) !important;
}
html:not(#geo-no-such-id) :is(.geo-btn-silver, .geo-tt-btn, .btn-sm.secondary, #ob-card .ob-quiet, .rm-btn:not(.rm-solid), .cw-open:not(.is-primary), .cw-back, .pw .pw-quiet,
  a[class*="bg-blue-5"], button[class*="bg-blue-5"], button[class*="bg-gray-7"], a[class*="bg-gray-7"]):hover {
  border-color: color-mix(in oklab, var(--geo-edge) 50%, var(--geo-text)) !important; background-color: var(--geo-surface) !important;
}
:is(button, a, input[type="submit"], input[type="button"], summary):focus-visible { outline: 2px solid var(--geo-brand-ring) !important; outline-offset: 2px; }

/* Filled anchor buttons keep white words: the house link rule (.main-content a …) out-ranks their own colour. */
.main-content a:is(.mkf-btn:not(.mkf-btn-secondary), .ta-fixer:not(.ta-fixer-quote), .cv-roast-go) { color: var(--geo-brand-ink) !important; }
/* The current website's pill: its small grey words stay at full strength on the tint (3.6 → 5.5:1). */
.site-head-sites a[aria-current] :is(.opacity-60, .opacity-70) { opacity: 1; }

/* The dashboard's top banner (#ob-card, partials/agency_onboarding.php): no dot grid, no mint-to-violet
   wash; the surface with a quiet in-house graphic on the right third that fades out behind the words
   (public/images/geo-banner-curves.svg, 1 KB). The graphic is one
   brand tint at 6 to 28% opacity, so it reads on both themes; the words keep their contrast. */
html:not(#geo-no-such-id) body #ob-card .ob-hero {
  background: var(--geo-banner-art) right center / auto 100% no-repeat, var(--geo-surface) !important;
}
html:not(#geo-no-such-id) body #ob-card .ob-hero::after { display: none !important; }
html:not(#geo-no-such-id) body #ob-card .ob-grad { box-shadow: none !important; transform: none !important; }

/* Ink, not grey (D-014b): the slab rule above (".main-content [class*=bg-gray-5] [class*=text-gray-]") also
   matched the light page wrapper .bg-gray-50, so every heading on a page read in the secondary grey. Inside
   that wrapper the greys go back to their steps: headings in ink, body in the second step, small print muted. */
html:not(#geo-no-such-id):not([data-theme="dark"]) .main-content [class~="bg-gray-50"] :is(.text-gray-900, .text-gray-800) { color: var(--geo-text) !important; }
html:not(#geo-no-such-id):not([data-theme="dark"]) .main-content [class~="bg-gray-50"] :is(.text-gray-700, .text-gray-600) { color: var(--geo-text2) !important; }
html:not(#geo-no-such-id):not([data-theme="dark"]) .main-content [class~="bg-gray-50"] :is(.text-gray-500, .text-gray-400) { color: var(--geo-muted) !important; }

/* Edges (Edward, ~12:03: "are they too dark … it breaks the page"). Space and surface separate things; cards
   carry a hairline (--geo-card-edge above); nothing inside a card is boxed again. A firm 3:1 edge stays only
   where you type or press as a button (fields: D-011's --geo-edge; outline buttons: D-012). */
/* Toggles and the icon-only "i" help buttons (.sp-tip) inside a card: no outline; a subtle fill for the toggle, none for
   the "i". Labelled outline buttons (.geo-tt-btn and the rest) keep their 3:1 edge. */
.main-content :is(.sp-pill.sp-toggle) { border-color: transparent !important; background-color: var(--geo-surface2) !important; }
.main-content .sp-tip { border-color: transparent !important; background-color: transparent !important; box-shadow: none !important; }
.main-content .sp-tip:hover { background-color: var(--geo-surface2) !important; }
/* Small chips and list rows inside cards: a hairline at most. */
.main-content :is(.sp-fresh, a.bg-gray-50.rounded-lg, .ob-step) { border-color: var(--geo-border) !important; }
/* In light, a white card on the near-white ground gets the softest lift so it never melts into the page. */
html:not([data-theme="dark"]) .main-content :is(.bg-white, .sp-card, .rev-invite):is(.rounded-lg, .rounded-xl, .rounded-2xl, .sp-card, .rev-invite) { box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
/* The two emphasis cards on a website page keep their tint but lose the firm teal edge. */
.main-content :is(.sp-next, .sp-roastcard, .ah-card--main) { border-color: var(--geo-brand-soft2) !important; }

/* ══ D-015 · The Clients list, calm at 1280 to 1440 (design window, 19 Oct; Edward: "looks squashed") ═════════════════
   Dates stay on one line; the sign-in state is a plain status (dot and words) with the last sign-in as small muted text
   under it, not a filled bubble; the row actions are all the same quiet outline, so nothing jumps between rows. */
html:not(#geo-no-such-id) [data-tour="clients-table"] .geo-table td.whitespace-nowrap { white-space: nowrap !important; }
html:not(#geo-no-such-id) [data-tour="clients-table"] .geo-table :is(th, td):nth-last-child(2) { text-align: left; }
html:not(#geo-no-such-id) [data-tour="clients-table"] .geo-table td:nth-last-child(2) > div.rounded-full {
  display: block !important;
  padding: 0 !important; background: transparent !important; border-radius: 0 !important;
  color: var(--geo-text2) !important; font-size: 13px; font-weight: 500; white-space: nowrap !important; text-align: left;
}
html:not(#geo-no-such-id) [data-tour="clients-table"] .geo-table td:nth-last-child(2) > div.rounded-full > span.text-gray-500 {
  display: block; margin: 1px 0 0 !important; font-size: 12px; font-weight: 400; color: var(--geo-muted) !important; white-space: nowrap !important;
}
html:not(#geo-no-such-id):not(#geo-no-such-id-2) [data-tour="clients-table"] .geo-table td:last-child :is(a, button):is([class*="bg-green-500/"], [class*="bg-blue-500/"]) {
  background: var(--geo-surface) !important; border: 1px solid var(--geo-edge) !important; color: var(--geo-text) !important;
  font-weight: 500 !important; box-shadow: none !important; filter: none !important;
}
html:not(#geo-no-such-id):not(#geo-no-such-id-2) [data-tour="clients-table"] .geo-table td:last-child :is(a, button):is([class*="bg-green-500/"], [class*="bg-blue-500/"]):hover {
  border-color: color-mix(in oklab, var(--geo-edge) 50%, var(--geo-text)) !important; background: var(--geo-surface) !important;
}
html:not(#geo-no-such-id) [data-tour="clients-table"] .geo-table td:nth-last-child(2) > div.rounded-full > span:first-child { display: inline-block; margin-right: 6px; vertical-align: 1px; }
/* D-015 · Industry is a plain line of text, not a pill, so it can wrap instead of widening the table. Counted from the
   end (Industry is 7th from last), so a super admin's Agency column doesn't shift it. */
html:not(#geo-no-such-id) [data-tour="clients-table"] .geo-table td:nth-last-child(7) > span.rounded-full {
  display: inline !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important;
  color: var(--geo-text2) !important; font-size: 13px; white-space: normal !important;
}
html:not(#geo-no-such-id) [data-tour="clients-table"] .geo-table td:nth-last-child(7) { white-space: normal !important; }
/* D-015 · Questions and Competitors step out up to 1599px (they were back at 1440 and pushed the table past its card);
   from 1200px the client cells pad 8px. Both counts still show on each website's page. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
  [data-tour="clients-table"] .geo-table tr > :is(:nth-last-child(4), :nth-last-child(5)):not(:only-child) { display: none !important; }
  [data-tour="clients-table"] .geo-table :is(th, td) { padding-left: 8px !important; padding-right: 8px !important; }
}
/* D-015 · Manage (a link) and Give access (a button) are the same size: the global button rule made the button 14px
   type and 40px tall. The table only shows on wide screens, where the 34px of the eye and pencil icons is the row's
   target size. The grey "no sign-in yet" dot gets a visible tone in both themes. */
html:not(#geo-no-such-id):not(#geo-no-such-id-2) [data-tour="clients-table"] .geo-table td:last-child :is(a, button):is([class*="bg-green-500/"], [class*="bg-blue-500/"]) {
  font-size: 12px !important; line-height: 16px !important; letter-spacing: normal !important;
  min-height: 34px !important; height: auto !important; padding: 0 12px !important;
}
html:not(#geo-no-such-id) [data-tour="clients-table"] .geo-table td:nth-last-child(2) > div.rounded-full > span.bg-gray-400:first-child { background: var(--geo-muted) !important; }
/* D-015 · Phone cards match: the sign-in state is a plain dot and words, and Manage and Give access are the same quiet
   outline (44px tall, the phone target size), so neither row shouts. */
html:not(#geo-no-such-id) [data-tour="clients-cards"] .border-t > span.rounded-full {
  padding: 0 !important; background: transparent !important; border-radius: 0 !important;
  color: var(--geo-text2) !important; font-size: 13px !important; font-weight: 500 !important;
}
html:not(#geo-no-such-id) [data-tour="clients-cards"] .border-t > span.rounded-full > span.bg-gray-400 { background: var(--geo-muted) !important; }
html:not(#geo-no-such-id):not(#geo-no-such-id-2) [data-tour="clients-cards"] .border-t :is(a, button):is([class*="bg-green-500/"], [class*="bg-blue-500/"]) {
  background: var(--geo-surface) !important; border: 1px solid var(--geo-edge) !important; color: var(--geo-text) !important;
  font-size: 13px !important; font-weight: 500 !important; letter-spacing: normal !important; box-shadow: none !important; filter: none !important;
  min-height: 44px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center;
}
html:not(#geo-no-such-id):not(#geo-no-such-id-2) [data-tour="clients-cards"] .border-t :is(a, button):is([class*="bg-green-500/"], [class*="bg-blue-500/"]):hover {
  border-color: color-mix(in oklab, var(--geo-edge) 50%, var(--geo-text)) !important; background: var(--geo-surface) !important;
}
/* D-015 · "Add client" wrapped onto two lines at 390. It keeps its width now, and the subtitle takes
   the room that's left. */
[data-tour="clients-header"] { gap: 12px; }
@media (max-width: 639.98px) { [data-tour="clients-header"] { align-items: flex-start !important; } }
[data-tour="clients-header"] > :first-child { min-width: 0; }
[data-tour="clients-header"] > [data-tour="clients-add-btn"] { flex-shrink: 0; white-space: nowrap; }
/* ══ D-018 · The theme switch and the account menu at the top of every page (Edward, 19 Oct) ═══════════════════════════
   One row, right-aligned: theme · credits · account. The same two buttons sit in the phone's top bar. Calm: the
   pill's own 40px height, border and surface; the account menu is a small card under its button. */
.geo-top { position: relative; z-index: 45; display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: -18px 0 14px; }
.geo-top > .geo-bal { margin: 0; order: 2; }
.geo-top > .geo-top-btn { order: 1; }
.geo-top > .geo-acct { order: 3; }
.geo-top-btn, .geo-acct-btn {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; min-height: 40px !important; padding: 0 !important;
  border-radius: 999px !important; border: 1px solid var(--geo-border) !important; background: var(--geo-surface) !important; color: var(--geo-text2) !important;
  cursor: pointer; box-shadow: none !important; }
.geo-top-btn:hover, .geo-acct-btn:hover { background: var(--geo-surface2) !important; color: var(--geo-text) !important; }
.geo-top-btn:focus-visible, .geo-acct-btn:focus-visible, .geo-acct-menu a:focus-visible, .geo-userblock:focus-visible {
  outline: 2px solid var(--geo-accent); outline-offset: 2px; }
.geo-top-btn svg { width: 18px; height: 18px; }
.geo-top-btn .geo-ti-sun { display: none; }
html[data-theme="dark"] .geo-top-btn .geo-ti-sun { display: block; }
html[data-theme="dark"] .geo-top-btn .geo-ti-moon { display: none; }
.geo-acct-btn { font-size: 14px; font-weight: 600; color: var(--geo-text) !important; }
.geo-acct { position: relative; flex: none; }
.geo-acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 248px; max-width: min(320px, calc(100vw - 24px)); padding: 6px;
  background: var(--geo-surface); border: 1px solid var(--geo-card-edge, var(--geo-border)); border-radius: 12px;
  box-shadow: 0 12px 32px -12px rgb(16 24 40 / .28); }
.geo-acct-menu[hidden] { display: none; }
.geo-acct-menu a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 8px; text-decoration: none; }
html:not(#geo-no-such-id) .geo-acct-menu a, html:not(#geo-no-such-id) .geo-acct-menu a :is(strong, span) { color: var(--geo-text) !important; }
html:not(#geo-no-such-id) .geo-acct-menu .geo-acct-who small { color: var(--geo-muted) !important; }
.geo-acct-menu a:hover { background: var(--geo-surface2); }
.geo-acct-profile.is-plain { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; color: var(--geo-text); }
.geo-acct-profile { border-bottom: 1px solid var(--geo-border); border-radius: 8px 8px 0 0 !important; margin-bottom: 4px; padding-bottom: 10px !important; }
.geo-acct-av { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 999px; background: var(--geo-surface2); font-weight: 600; font-size: 14px; }
.geo-acct-who { display: flex; flex-direction: column; min-width: 0; }
.geo-acct-who strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-acct-who small { font-size: 12px; color: var(--geo-muted); }
.geo-acct-out { font-size: 14px; font-weight: 500; }
.geo-acct-out svg { width: 18px; height: 18px; color: var(--geo-text2); }
.geo-userblock { color: inherit; text-decoration: none; border-radius: 10px; }
.geo-userblock:hover p:first-child { text-decoration: underline; }
/* On a phone the page's own row keeps only the credits panel (opened from the top bar); the buttons live in the bar. */
@media (max-width: 767.98px) {
  .geo-top { display: block; margin: 0; }
  .geo-top > .geo-top-btn, .geo-top > .geo-acct { display: none; }
  #mobile-header > .geo-top-btn { order: 4; margin-left: 6px; width: 40px; height: 40px; }
  #mobile-header > .geo-acct { order: 5; margin-left: 6px; }
  #mobile-header:not(:has(.geo-bal-phone)):not(:has(.cn-bell)) > .geo-top-btn { margin-left: auto; }
}
/* ══ D-019 · Settings in tabs (Edward, 19 Oct) ═════════════════════════════════════════════════════════════════════════
   One quiet row under the heading: the open tab in the text colour with a brand underline, the rest muted. On a phone
   the row scrolls sideways rather than wrapping. */
.st-tabs { display: flex; gap: 4px; margin: -12px 0 24px; border-bottom: 1px solid var(--geo-border); overflow-x: auto; scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin-bottom: -1px; font-size: 14px; font-weight: 500;
  color: var(--geo-text2); text-decoration: none; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; }
.st-tabs a:hover { background: var(--geo-surface2); }
html:not(#geo-no-such-id) .st-tabs a { color: var(--geo-text2) !important; text-decoration: none !important; }
html:not(#geo-no-such-id) .st-tabs a:hover, html:not(#geo-no-such-id) .st-tabs a[aria-selected="true"] { color: var(--geo-text) !important; }
.st-tabs a[aria-selected="true"] { border-bottom-color: var(--geo-brand); font-weight: 600; }
html[data-theme="dark"] .st-tabs a[aria-selected="true"] { border-bottom-color: var(--geo-accent); }
.st-tabs a:focus-visible { outline: 2px solid var(--geo-accent); outline-offset: -2px; }
[data-st-panel][hidden], [data-st-empty] { display: none !important; }
@media (max-width: 479.98px) { .st-tabs a { padding: 0 10px; } }
/* D-021 · An open account menu sits above a running tour (the laptop, live 20 Oct: the Settings tour's highlighted
   heading, at 9995, drew over the open menu and its words showed through). While its menu is open, the row that
   holds it rises above the tour's layer (9990), its highlight (9995) and its card (9999); closed, it's back at 45. */
.geo-top:has(.geo-acct-menu:not([hidden])), #mobile-header:has(.geo-acct-menu:not([hidden])) { z-index: 10000 !important; }

/* The running goal on the plan's first line (daily moves, 24 Oct) */
.pg-goal { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--geo-border); border-radius: var(--geo-r-ctrl, 8px); background: var(--geo-surface2); }
.pg-goal-l { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--geo-eyebrow, var(--geo-muted)); }
.pg-goal-t { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--geo-text); overflow-wrap: anywhere; }
.pg-goal-a { color: var(--geo-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Earnings › Refer an agency (the referral rules, 30 Oct 2026; money v2's card): the link to copy, three figures, two links.
   Tokens only, so both themes follow. */
.ra-intro { margin-bottom: 12px; }
.ra-label { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--geo-text); }
.ra-copyrow { display: flex; gap: 8px; margin-top: 8px; min-width: 0; }
.ra-input { flex: 1 1 auto; min-width: 0; padding: 8px 10px; border: 1px solid var(--geo-border); border-radius: 8px; background: var(--geo-surface2);
  color: var(--geo-text); font-size: 13.5px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ra-copy { flex: none; padding: 8px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ra-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.ra-figs dt { font-size: 12.5px; color: var(--geo-muted); }
.ra-figs dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; color: var(--geo-text); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .ra-figs { grid-template-columns: 1fr; gap: 8px; } .ra-figs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .ra-figs dd { margin: 0; font-size: 17px; } }
.ra-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; }
.rl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rl-table th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--geo-muted); padding: 8px 8px 8px 0; border-bottom: 1px solid var(--geo-border); }
.rl-table td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--geo-border); color: var(--geo-text); vertical-align: top; }
.rl-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-state { display: block; margin-top: 2px; font-size: 12px; color: var(--geo-muted); }
@media (max-width: 640px) {
  .rl-table thead { display: none; }
  .rl-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--geo-border); }
  .rl-table td { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; }
  .rl-table td::before { content: attr(data-cell); color: var(--geo-muted); font-size: 12.5px; }
  .rl-table td:first-child { display: block; }
  .rl-table td:first-child::before { content: none; }
  .rl-table .num { text-align: right; }
}
.rl-lines { list-style: none; margin: 0; padding: 0; }
.rl-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--geo-border); font-size: 14px; color: var(--geo-text); }
.rl-lines li:last-child { border-bottom: 0; }
.rl-lines small { display: block; font-size: 12.5px; color: var(--geo-muted); }
.rl-lines .num { flex: none; text-align: right; font-variant-numeric: tabular-nums; }

/* Earnings › What we owe you (money v2): Ready to be paid first and large, the rule beside it, then the two other figures. */
.earn-l { margin: 0; font-size: 13px; font-weight: 600; color: var(--geo-muted); }
.earn-big { margin: 4px 0 0; font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--geo-text); font-variant-numeric: tabular-nums; }
.earn-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .earn-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .earn-figs > div { display: block; } .earn-figs dd { margin: 4px 0 0; } }

/* Where we pay you (design gate): one card; each way to be paid is a part of it, divided by a rule, forms unchanged */
.earn-where > section.bu-box { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.earn-where > section.bu-box + section.bu-box { border-top: 1px solid var(--geo-border); padding-top: 18px; margin-top: 18px; }
.rs-sub { margin: 20px 0 6px; font-size: 14px; font-weight: 600; color: var(--geo-text); }
/* "Nothing added yet" says why the owner can't be paid: body text, never faint */
.earn-none { color: var(--geo-text2); }

/* Your partnership terms: a long section (agencies you refer) takes the whole row instead of one narrow column */
.pt-card-wide { grid-column: 1 / -1; }