/* Kixi website wireframe: frame directions to try (item 4 of the plan, 8 October 2026).
   Three switches in the wireframe bar, each an attribute on <html>, set by site.js and remembered:
     Frame   data-frame:   (none) Original, the frame in theme.css (named Plain until 8 October 2026) · a Calm · b Bands
     Colour  data-palette: (none) Purple, as now · ink (neutral, purple only for the main button and the marks) ·
                           blue (ink, with chart-2 blue for the quiet accents)
     (Ground, data-ground, Dotted · No dots · Open, came off on 10 October 2026 at Dotted; the feature pages' blocks
     still draw open: site.js blockLook resets the block's own pale purples and dot grid. The blocks' files are not changed.)
   Every colour here is a token from Design System/Kixi colour system/project/tokens.json. Once John picks, the winner
   moves into theme.css and this file goes. */

/* ---------- Colour: Ink ----------
   Neutral grounds and quiet accents. Purple is kept for the primary button, the focus ring and the illustrations'
   own marks (the hub, icons, connector lines). */
html[data-palette="ink"], html[data-palette="blue"] {
  --background: #ffffff;           /* card */
  --brand-pale: #f6f5f8;           /* surface-sunken */
  --brand-dot: #e4e2e9;            /* border */
  --hairline: #e4e2e9;             /* border */
  --secondary: #ffffff;            /* the secondary button: white, with its input outline */
  --secondary-foreground: #2a2438; /* foreground */
  --brand-lilac: #f1f0f4;          /* the secondary button on hover: muted */
  --band-soft: #f6f5f8;            /* surface-sunken: Bands' alternate sections */
  --band-panel: #f6f5f8;           /* the closing call-to-action panel */
  --nav-on: #f1f0f4;               /* the current menu item: muted */
  --nav-on-ink: #2a2438;
  --eyebrow: #6b6778;              /* muted-foreground */
}
/* ---------- Colour: Ink + blue ----------
   As Ink, with chart-2 blue (pale fill, light hover, link blue for text) for the quiet accents: secondary buttons,
   the current menu item, the eyebrows, Bands' alternate sections. */
html[data-palette="blue"] {
  --secondary: #eff6ff;            /* chart-2-pale */
  --secondary-foreground: #3d6aa1; /* link: the readable blue of chart-2 */
  --brand-lilac: #bfdbfd;          /* chart-2-light */
  --band-soft: #eff6ff;
  --band-panel: #eff6ff;
  --nav-on: #eff6ff;
  --nav-on-ink: #3d6aa1;
  --eyebrow: #3d6aa1;
}
html[data-palette="ink"] .site-nav a[aria-current="page"], html[data-palette="ink"] .site-nav .nav-drop.is-current > button,
html[data-palette="blue"] .site-nav a[aria-current="page"], html[data-palette="blue"] .site-nav .nav-drop.is-current > button,
html[data-palette="ink"] .nav-panel a[aria-current="page"], html[data-palette="blue"] .nav-panel a[aria-current="page"] {
  background: var(--nav-on); color: var(--nav-on-ink);
}
html[data-palette="blue"] .eyebrow { color: var(--eyebrow); }
html[data-palette="ink"] .steps li::before { background: var(--muted); color: var(--foreground); }
html[data-palette="ink"] .faq summary::after { color: var(--foreground); }
html[data-palette="blue"] .faq summary::after { color: var(--secondary-foreground); }
html[data-palette="ink"] a.wf-card h3::after, html[data-palette="blue"] a.wf-card h3::after { color: var(--secondary-foreground); }
html[data-palette="ink"] .wf-copy .pts li::before { background: var(--input); }
html[data-palette="blue"] .wf-copy .pts li::before { background: #60a5fa; }   /* chart-2 */
html[data-palette="ink"] .wf.band > .wrap > .wf-panel, html[data-palette="blue"] .wf.band > .wrap > .wf-panel { background: var(--band-panel); }
/* The feature cards' pictures sit on the brand's pale stage: neutral with the rest */
html[data-palette="ink"] .pic-f .cp-th, html[data-palette="blue"] .pic-f .cp-th { background: var(--surface-sunken); }

/* ---------- Colour: Aurora Mesh (John, 8 October 2026) ----------
   The colours of 16d · Aurora Mesh from the 26 September looks (Website content concepts/Website and brand options
   2026-09-26.html): white ground, Google-like greys, the Kixi logo in John's pink (#d4359b; pink-logo/, build_pink_logos.py), blue #1B72E8 for actions, and the mesh (blue, violet, magenta,
   pink, with teal and orange glows) on Home's hero panel and the closing band. Not Kixi tokens: a look to try. The
   blocks keep their own purple marks; their grounds go neutral, as with Ink. */
html[data-palette="mesh"] {
  --mesh: radial-gradient(520px 520px at 30% -20%, rgba(0,209,209,.55), transparent 66%),
          radial-gradient(520px 520px at 92% 135%, rgba(255,138,60,.42), transparent 66%),
          linear-gradient(115deg, #1b72e8 0%, #6b3fe0 34%, #b02fb8 64%, #e8388a 100%);
  --background: #ffffff;
  --foreground: #1f1f1f;
  --foreground-secondary: #5f6368;
  --control-foreground: #5f6368;
  --muted-foreground: #5f6368;
  --muted: #f1f3f4;
  --surface-sunken: #f8f9fb;
  --border: #e6e8ec;
  --hairline: #e6e8ec;
  --input: #c9ced6;
  --primary: #1b72e8;
  --primary-hover: #174ea6;
  --ring: #1b72e8;
  --secondary: #f4f7fe;
  --secondary-foreground: #174ea6;
  --brand-lilac: #e1eafc;
  --brand-pale: #f8f9fb;
  --brand-dot: #e6e8ec;
  --link: #1b72e8;
  --band-soft: #f8f9fb;
  --nav-on: #f4f7fe;
  --nav-on-ink: #174ea6;
  --eyebrow: #6b3fe0;
  --glow: #f4f7fe;
  --band-lilac: #f8f2fe;
  --band-blue: #f4f7fe;
}
html[data-palette="mesh"] .site-nav a[aria-current="page"], html[data-palette="mesh"] .site-nav .nav-drop.is-current > button,
html[data-palette="mesh"] .nav-panel a[aria-current="page"] { background: var(--nav-on); color: var(--nav-on-ink); }
html[data-palette="mesh"] .eyebrow { color: var(--eyebrow); }
html[data-palette="mesh"] .faq summary::after { color: var(--primary); }
html[data-palette="mesh"] a.wf-card h3::after { color: var(--secondary-foreground); }
html[data-palette="mesh"] .wf-copy .pts li::before { background: #1b72e8; }
html[data-palette="mesh"] .pic-f .cp-th { background: var(--surface-sunken); }
html[data-palette="mesh"] .steps li::before { background: var(--secondary); color: var(--secondary-foreground); }
/* Home's hero: the words on the mesh panel, as in Aurora Mesh */
html[data-palette="mesh"] main[data-page="index"] > .wf.hero > .wrap > .wf-copy {
  max-width: 1100px; background: var(--mesh); border-radius: 34px; padding: 56px 56px 52px; color: #ffffff;
}
html[data-palette="mesh"] main[data-page="index"] > .wf.hero .wf-copy .display { color: #ffffff; }
html[data-palette="mesh"] main[data-page="index"] > .wf.hero .wf-copy .lede { color: rgba(255,255,255,.88); }
html[data-palette="mesh"] main[data-page="index"] > .wf.hero .wf-copy .eyebrow { color: #ffffff; }
html[data-frame="a"][data-palette="mesh"] main[data-page="index"] > .wf.hero .wf-copy > .eyebrow { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
html[data-frame="a"][data-palette="mesh"] main[data-page="index"] > .wf.hero .wf-copy > .eyebrow::before, html[data-frame="a"][data-palette="mesh"] .wf.band .wf-copy > .eyebrow::before { background: #ffffff; }
html[data-frame="a"][data-palette="mesh"] .wf.band .wf-copy > .eyebrow { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
html[data-palette="mesh"] main[data-page="index"] > .wf.hero .wf-copy .btn-primary { background: #ffffff; color: #1b2a6b; }
html[data-palette="mesh"] main[data-page="index"] > .wf.hero .wf-copy .btn-primary:hover { background: #f4f7fe; }
html[data-palette="mesh"] main[data-page="index"] > .wf.hero .wf-copy .btn-secondary { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
html[data-palette="mesh"] main[data-page="index"] > .wf.hero .wf-copy .btn-secondary:hover { background: rgba(255,255,255,.12); }
/* The closing band, on every page: the mesh, white words */
html[data-palette="mesh"] .wf.band > .wrap > .wf-panel { background: var(--mesh); }
html[data-palette="mesh"] .wf.band .wf-copy h2, html[data-palette="mesh"] .wf.band .wf-copy .eyebrow { color: #ffffff; }
html[data-palette="mesh"] .wf.band .wf-copy p:not(.eyebrow) { color: rgba(255,255,255,.88); }
html[data-palette="mesh"] .wf.band .btn-primary { background: #ffffff; color: #1b2a6b; }
html[data-palette="mesh"] .wf.band .btn-secondary { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
/* Frame A's coloured sections in the mesh's colours */
html[data-frame="a"][data-palette="mesh"] main > section.wf[data-bg="purple"] { background: var(--mesh); }
html[data-frame="a"][data-palette="mesh"] main > section.wf[data-bg="lilac-solid"] { background: #f8f2fe; }
html[data-frame="a"][data-palette="mesh"] main > section.wf[data-bg="blue-solid"] { background: #f4f7fe; }
html[data-frame="a"][data-palette="mesh"] main > section.wf.band[data-bg="dark-glow"] { background: var(--mesh); }
@media (max-width: 640px) {
  html[data-palette="mesh"] main[data-page="index"] > .wf.hero > .wrap > .wf-copy { padding: 32px 20px; border-radius: 24px; }
}

/* ---------- Font (John, 8 October 2026) ----------
   Headings (--font-display) and text (--font-sans) in five Google Fonts, against the original Poppins and Inter.
   site.js loads the chosen font (FONTS) and sets the same on the embedded blocks' text. */
html[data-font="figtree"] { --font-display: Figtree, ui-sans-serif, system-ui, sans-serif; --font-sans: Figtree, ui-sans-serif, system-ui, sans-serif; }
html[data-font="jakarta"] { --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }
html[data-font="manrope"] { --font-display: Manrope, ui-sans-serif, system-ui, sans-serif; --font-sans: Manrope, ui-sans-serif, system-ui, sans-serif; }
html[data-font="sora"] { --font-display: Sora, ui-sans-serif, system-ui, sans-serif; --font-sans: Sora, ui-sans-serif, system-ui, sans-serif; }
html[data-font="fraunces"] { --font-display: Fraunces, Georgia, serif; --font-sans: Inter, ui-sans-serif, system-ui, sans-serif; }
html[data-font="fraunces"] .display, html[data-font="fraunces"] .wf-copy h2 { font-weight: 600; letter-spacing: -0.02em; }

/* ---------- Buttons: Gloss (John, 8 October 2026) ----------
   The Hub bar's finish, from Background textures and fades.html: B2 on the main buttons (a radial of the main colour,
   a clear sheen over the top half, a bright top line, a glow under it) and B6, its white partner, on the secondary
   ones. Drawn from --primary and --secondary, so they follow the Colour menu. */
html[data-button="gloss"] .btn { position: relative; isolation: isolate; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
html[data-button="gloss"] .btn-primary {
  background: radial-gradient(circle at 25% 0%, color-mix(in srgb, var(--primary) 62%, #ffffff), var(--primary) 55%, var(--primary-hover));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -2px 0 color-mix(in srgb, var(--primary-hover) 60%, #000000 30%),
              0 14px 28px -12px color-mix(in srgb, var(--primary) 75%, transparent);
}
html[data-button="gloss"] .btn-primary:hover {
  transform: translateY(-1px); filter: brightness(1.06);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), inset 0 -2px 0 color-mix(in srgb, var(--primary-hover) 60%, #000000 30%),
              0 20px 34px -12px color-mix(in srgb, var(--primary) 85%, transparent);
}
html[data-button="gloss"] .btn-secondary {
  background: linear-gradient(180deg, #ffffff, var(--secondary));
  box-shadow: inset 0 1.5px 0 #ffffff, inset 0 0 0 1px var(--brand-lilac), inset 0 -2px 0 color-mix(in srgb, var(--primary) 12%, transparent),
              0 10px 22px -14px color-mix(in srgb, var(--primary-hover) 45%, transparent);
}
html[data-button="gloss"] .btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1.5px 0 #ffffff, inset 0 0 0 1px var(--brand-light, #c084fc), inset 0 -2px 0 color-mix(in srgb, var(--primary) 12%, transparent),
              0 16px 28px -14px color-mix(in srgb, var(--primary-hover) 55%, transparent);
}
html[data-button="gloss"] .btn-primary::before, html[data-button="gloss"] .btn-secondary::before {
  content: ""; position: absolute; z-index: -1; left: 2px; right: 2px; top: 2px; height: 50%; pointer-events: none;
  border-radius: 999px 999px 40% 40% / 999px 999px 12px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.04));
}
html[data-button="gloss"] .btn-secondary::before { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0)); }
html[data-button="gloss"] .btn:active { transform: translateY(1px); filter: brightness(.97); }
@media (prefers-reduced-motion: reduce) { html[data-button="gloss"] .btn:hover, html[data-button="gloss"] .btn:active { transform: none; } }

/* ---------- Frame A: Calm ----------
   White, a lot of air, thin rules. Colour is left to the blocks; the frame only frames. (A second pass, John,
   8 October 2026: "I like A but it needs some more thought", and a dark footer.)
   - Header: white, no rule until the page scrolls under it (site.js marks it .is-scrolled); the page you're on is
     underlined in purple, not a pill.
   - Type: a bigger hero line (56px), eyebrows as small outlined tags with a purple dot.
   - Buttons: the main one stays purple; the rest are outlines. Cards are a hairline that lifts on hover.
   - Rhythm: the card lists (features, the team) sit on a soft grey band so the white cards stand off it; the
     questions are ruled rows, not cards.
   - The end of every page is dark: the closing call to action on a dark band, running straight into a dark footer
     (dark-theme tokens from tokens.json, the -dark logo with its catch line). */
html[data-frame="a"] {
  --background: #ffffff;
  --section-gap: 64px;   /* between sections (John, 8 October 2026: 20% less, 90px, then "still way too much"; was 112px) */
  --shadow-card: 0 0 0 1px #e4e2e9;   /* border */
  --ink: #14111c;                     /* background, dark theme */
  --ink-line: #2e2839;                /* border, dark theme */
  --ink-text: #c9c2d9;                /* foreground-secondary, dark theme */
  --ink-quiet: #a39cb3;               /* muted-foreground, dark theme */
  --ink-head: #f3effa;                /* foreground, dark theme */
}
/* Header */
html[data-frame="a"] .site-header { background: rgba(255,255,255,.96); border-bottom-color: transparent; }
html[data-frame="a"] .site-header.is-scrolled { border-bottom-color: var(--border); background: rgba(255,255,255,.5); }   /* see-through with the page under it (theme.css) */
html[data-frame="a"] .site-nav > a, html[data-frame="a"] .site-nav .nav-drop > button { border-radius: 0; height: 68px; padding: 0 14px; }
html[data-frame="a"] .site-nav > a:hover, html[data-frame="a"] .site-nav .nav-drop > button:hover { background: none; color: var(--foreground); }
html[data-frame="a"] .site-nav a[aria-current="page"], html[data-frame="a"] .site-nav .nav-drop.is-current > button {
  background: none; color: var(--foreground); box-shadow: inset 0 -2px 0 var(--primary);
}
/* Type */
html[data-frame="a"] .display { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.03em; }
html[data-frame="a"] .wf-copy h2 { letter-spacing: -0.02em; }
html[data-frame="a"] .wf.hero { padding-top: 80px; }
html[data-frame="a"] main[data-page="index"] > .wf.hero { padding-top: 64px; }   /* Home: 20% less from the top menu to Your AI Hub (John, 8 October 2026; was 80px) */
html[data-frame="a"] .wf.hero .lede { color: var(--muted-foreground); }
html[data-frame="a"] .wf.hero .wf-copy { max-width: 880px; }
html[data-frame="a"] .wf-copy > .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px var(--border); color: var(--control-foreground); letter-spacing: .1em;
  background: #ffffff;   /* solid, so dots and rings behind don't show through (John, 10 October 2026); dark sections set their own */
}
html[data-frame="a"] .wf-copy > .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
html[data-frame="a"] .wf-copy > .eyebrow + h1, html[data-frame="a"] .wf-copy > .eyebrow + h2 { margin-top: 16px; }
/* Buttons and cards */
html[data-frame="a"] .btn-secondary { background: transparent; color: var(--foreground); box-shadow: inset 0 0 0 1px var(--input); }
html[data-frame="a"] .btn-secondary:hover { background: var(--surface-sunken); }
html[data-frame="a"] .wf-card { transition: box-shadow .2s, transform .2s; }
html[data-frame="a"] a.wf-card:hover { box-shadow: 0 0 0 1px var(--border), 0 18px 36px -18px rgba(36,20,70,.28); transform: translateY(-2px); }
/* Rhythm: card lists on a soft band */
html[data-frame="a"] main > section.wf.cards { background: var(--surface-sunken); padding: 64px 0; margin-top: 32px; }  /* less (8 October 2026; was 96px, 72px) */
html[data-frame="a"] main > section.wf.cards + section.wf { padding-top: var(--section-gap); }  /* was 112px */
html[data-frame="a"] main[data-page="index"] > section.wf.cards,
html[data-frame="a"] main[data-page="about-us"] > section.wf.cards { background: transparent; padding: var(--section-gap) 0 0; margin-top: 0; }   /* Home all white (John, 8 October 2026: "make them all white"); About us too (John, 11 October 2026: "remove the background colors") */
/* Each section its own ground (John, 8 October 2026: "mix up the content block backgrounds … good websites have
   variation"). A page names it on the section, data-bg="…", from Background textures and fades.html; neighbours differ.
   glow F2 · grey C3 · lilac-band F7 · rings M4 · blue-band (F5 as a soft band) · dark-glow D3. data-panel="grid" turns
   a section's .wf-ground panel into M2, a grid fading down. Home uses them all. */
html[data-frame="a"] { --band-lilac: #f5ecff; --band-blue: #eff6ff; }   /* secondary, chart-2-pale */
html[data-frame="a"][data-palette="ink"], html[data-frame="a"][data-palette="blue"] { --band-lilac: #f6f5f8; }
html[data-frame="a"] main > section.wf[data-bg] { position: relative; isolation: isolate; margin-top: 16px; padding: 56px 0; }  /* was 72px, 96px */
html[data-frame="a"] main > section.wf[data-bg] + section.wf { padding-top: 48px; }  /* was 112px */
html[data-frame="a"] main > section.wf[data-bg].hero { margin-top: 0; padding: 80px 0 0; }
html[data-frame="a"] main > section.wf[data-bg="glow"] { background: radial-gradient(80% 70% at 50% 0%, var(--glow, #e3cdfd), transparent 72%), #ffffff; }   /* brand-lilac */
html[data-frame="a"][data-palette="ink"], html[data-frame="a"][data-palette="blue"] { --glow: #f1f0f4; }
html[data-frame="a"] main > section.wf[data-bg="grey"] { background: var(--surface-sunken); }
html[data-frame="a"] main > section.wf[data-bg="lilac-band"] { background: linear-gradient(180deg, #ffffff, var(--band-lilac) 18%, var(--band-lilac) 82%, #ffffff); }
html[data-frame="a"] main > section.wf[data-bg="blue-band"] { background: var(--band-blue); box-shadow: inset 0 1px 0 #bfdbfd, inset 0 -1px 0 #bfdbfd; }   /* chart-2-pale, a chart-2-light rule top and bottom */
html[data-frame="a"] main > section.wf[data-bg="rings"] { background: radial-gradient(45% 70% at 100% 0%, var(--band-lilac), transparent 70%), #ffffff; }
html[data-frame="a"] main > section.wf[data-bg="rings"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 96% 8%, transparent 0 46px, #e3cdfd 46px 47px);   /* brand-lilac: the mark's ripple */
  -webkit-mask-image: radial-gradient(55% 85% at 96% 8%, #000, transparent 80%); mask-image: radial-gradient(55% 85% at 96% 8%, #000, transparent 80%); }
/* Rings, tight (John, 8 October 2026: chosen from the How it works ground setting's mixes, 2 Tight rings): white, with
   brand-lilac rings every 24px from the top right, fading out. data-bg="rings-tight": Home's How it works, and the How
   it works page's hero. The M4 rings above (rings and glow, data-bg="rings") stay as they were, unused for now. */
html[data-frame="a"] main > section.wf[data-bg="rings-tight"] { background: #ffffff; }
html[data-frame="a"] main > section.wf[data-bg="rings-tight"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 96% 8%, transparent 0 23px, #e3cdfd 23px 24px);
  -webkit-mask-image: radial-gradient(45% 75% at 96% 8%, #000, transparent 80%); mask-image: radial-gradient(45% 75% at 96% 8%, #000, transparent 80%); }
/* Rings up (John, 9 October 2026, Home's How it works): the rings run on up behind the block above, from the same
   centre, rather than stopping at the block's top edge. --kx-above is the block above's height and gap (site.js); the
   block above is lifted over them, so its words and its black card sit on top */
html[data-frame="a"] main > section.wf.kx-rings-up[data-bg="rings-tight"]::before { top: calc(-1 * var(--kx-above, 0px));
  background: repeating-radial-gradient(circle at 96% calc(var(--kx-above, 0px) + 60px), transparent 0 23px, #e3cdfd 23px 24px);
  -webkit-mask-image: radial-gradient(45% 860px at 96% calc(var(--kx-above, 0px) + 60px), #000, transparent 80%);
          mask-image: radial-gradient(45% 860px at 96% calc(var(--kx-above, 0px) + 60px), #000, transparent 80%); }
html[data-frame="a"] main > section.wf:has(+ section.wf.kx-rings-up) { position: relative; z-index: 1; }
/* How it works hero (John, 8 October 2026: "add a new one for Home/How it works which is similar"): the bar's How it
   works hero setting tries the page hero's ground. Tight rings (the default, as above); Clear rings (every 46px, no
   glow); Rings and glow (M4); Hub dot (the glow, rings every 34px round a solid purple dot, Your AI Hub); Ripple (tight
   rings flowing out from the dot); Hub wave (a wave going out from the dot every 4.2s, as the hero's hub pulses); None
   (white, no rings). Reduced motion: Ripple and Hub wave hold still. */
@property --kx-ring { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --kx-wave { syntax: '<length>'; inherits: false; initial-value: 40px; }
@property --kx-wave-c { syntax: '<color>'; inherits: false; initial-value: rgba(192,132,252,0); }
@keyframes kxRingsOut { from { --kx-ring: 0px; } to { --kx-ring: 28px; } }
@keyframes kxRingsWave { 0% { --kx-wave: 30px; --kx-wave-c: rgba(192,132,252,.9); } 100% { --kx-wave: 560px; --kx-wave-c: rgba(192,132,252,0); } }
html[data-frame="a"][data-hiwhero="clear"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"]::before {
  background: repeating-radial-gradient(circle at 96% 8%, transparent 0 46px, #e3cdfd 46px 47px);
  -webkit-mask-image: radial-gradient(55% 85% at 96% 8%, #000, transparent 80%); mask-image: radial-gradient(55% 85% at 96% 8%, #000, transparent 80%); }
html[data-frame="a"][data-hiwhero="glow"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"] { background: radial-gradient(45% 70% at 100% 0%, var(--band-lilac), transparent 70%), #ffffff; }
html[data-frame="a"][data-hiwhero="glow"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"]::before {
  background: repeating-radial-gradient(circle at 96% 8%, transparent 0 46px, #e3cdfd 46px 47px);
  -webkit-mask-image: radial-gradient(55% 85% at 96% 8%, #000, transparent 80%); mask-image: radial-gradient(55% 85% at 96% 8%, #000, transparent 80%); }
html[data-frame="a"][data-hiwhero="dot"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"] { background: radial-gradient(45% 70% at calc(100% - 120px) 96px, var(--band-lilac), transparent 70%), #ffffff; }
html[data-frame="a"][data-hiwhero="dot"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"]::before {
  background: radial-gradient(circle at calc(100% - 124px) 92px, #c084fc 0, #8a2be2 9px, #6a17b8 15px, transparent 15.5px),   /* the Hub: brand-light to primary-hover, as the disc */
              radial-gradient(circle at calc(100% - 120px) 96px, rgba(138,43,226,.16) 0 26px, transparent 27px),             /* its halo */
              repeating-radial-gradient(circle at calc(100% - 120px) 96px, transparent 0 33px, #e3cdfd 33px 34px);
  -webkit-mask-image: radial-gradient(50% 85% at calc(100% - 120px) 96px, #000 40%, transparent 85%); mask-image: radial-gradient(50% 85% at calc(100% - 120px) 96px, #000 40%, transparent 85%); }
html[data-frame="a"][data-hiwhero="ripple"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"]::before {
  background: radial-gradient(circle at calc(100% - 124px) 92px, #c084fc 0, #8a2be2 9px, #6a17b8 15px, transparent 15.5px),
              radial-gradient(circle at calc(100% - 120px) 96px, rgba(138,43,226,.16) 0 26px, transparent 27px),
              repeating-radial-gradient(circle at calc(100% - 120px) 96px, transparent 0 var(--kx-ring), #e3cdfd var(--kx-ring) calc(var(--kx-ring) + 1.5px), transparent calc(var(--kx-ring) + 1.5px) 28px);
  -webkit-mask-image: radial-gradient(45% 80% at calc(100% - 120px) 96px, #000 30%, transparent 85%); mask-image: radial-gradient(45% 80% at calc(100% - 120px) 96px, #000 30%, transparent 85%);
  animation: kxRingsOut 2.6s linear infinite; }
html[data-frame="a"][data-hiwhero="wave"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"]::before {
  background: radial-gradient(circle at calc(100% - 124px) 92px, #c084fc 0, #8a2be2 9px, #6a17b8 15px, transparent 15.5px),
              radial-gradient(circle at calc(100% - 120px) 96px, transparent calc(var(--kx-wave) - 2px), var(--kx-wave-c) calc(var(--kx-wave) - 1px) calc(var(--kx-wave) + 1px), transparent calc(var(--kx-wave) + 2px)),
              repeating-radial-gradient(circle at calc(100% - 120px) 96px, transparent 0 39px, #e3cdfd 39px 40px);
  -webkit-mask-image: radial-gradient(55% 90% at calc(100% - 120px) 96px, #000 30%, transparent 85%); mask-image: radial-gradient(55% 90% at calc(100% - 120px) 96px, #000 30%, transparent 85%);
  animation: kxRingsWave 4.2s ease-out infinite; }
html[data-frame="a"][data-hiwhero="none"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"]::before { display: none; }
/* Rings and glow, behind the menu (John, 9 October 2026): the same ground, pulled up by the menu's and the breadcrumbs'
   height (--kx-top, site.js) so it runs to the top of the page; the breadcrumbs sit over it, and the menu is clear
   until the page scrolls under it */
html[data-frame="a"][data-hiwhero="glowtop"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"] { background: radial-gradient(45% 70% at 100% 0%, var(--band-lilac), transparent 70%), #ffffff;
  margin-top: calc(-1 * var(--kx-top, 110px)); padding-top: calc(80px + var(--kx-top, 110px)); }
html[data-frame="a"][data-hiwhero="glowtop"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"]::before {
  background: repeating-radial-gradient(circle at 96% 8%, transparent 0 46px, #e3cdfd 46px 47px);
  -webkit-mask-image: radial-gradient(55% 85% at 96% 8%, #000, transparent 80%); mask-image: radial-gradient(55% 85% at 96% 8%, #000, transparent 80%); }
html[data-frame="a"][data-hiwhero="glowtop"][data-current="how-it-works"] .crumbs-host { position: relative; z-index: 2; }
html[data-frame="a"][data-hiwhero="glowtop"][data-current="how-it-works"] .site-header:not(.is-scrolled):not(.menu-open) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* How it works rings (John, 9 October 2026): the hero's circles and fade in the Help me decide blue, chart-2 #60a5fa.
   Purple circles, blue fade: the rings as they are, the glow blue; Blue circles, blue fade: both blue (the rings at
   45%, about as light as the purple ones) */
html[data-frame="a"][data-hiwhero="glowtop"][data-hiwring="bluefade"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"], html[data-frame="a"][data-hiwhero="glowtop"][data-hiwring="blue"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"] { background: radial-gradient(45% 70% at 100% 0%, rgba(96,165,250,.28), transparent 70%), #ffffff; }
html[data-frame="a"][data-hiwhero="glowtop"][data-hiwring="blue"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"]::before { background: repeating-radial-gradient(circle at 96% 8%, transparent 0 46px, rgba(96,165,250,.45) 46px 47px); }
/* ... and with Blue circles, blue fade, the header's Book a demo in the same blue, on How it works only, as Help me
   decide: chart-2 #60a5fa, white words, a chart-2-light ring on hover */
html[data-hiwring="blue"][data-current="how-it-works"] .site-header .nav-cta { background: #60a5fa; color: #ffffff; }
html[data-hiwring="blue"][data-current="how-it-works"] .site-header .nav-cta:hover { background: #60a5fa; box-shadow: 0 0 0 3px #bfdbfd, 0 8px 18px -8px rgba(96,165,250,.6); }
@media (prefers-reduced-motion: reduce) {
  html[data-frame="a"][data-hiwhero="ripple"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"]::before, html[data-frame="a"][data-hiwhero="wave"] main[data-page="how-it-works"] > section.wf.hero[data-bg="rings-tight"]::before { animation: none; }
}
html[data-frame="a"] main > section.wf.band[data-bg="dark-glow"] { background: radial-gradient(60% 80% at 50% 0%, #4a2d73, transparent 75%), var(--ink); }   /* brand-lilac, dark theme */
/* Solid colour sections (John, 8 October 2026, after fruitionservices.io: "solid color background mixed in"): a whole
   section in one strong colour, drawn as a rounded panel set in from the page's edges. purple (primary-hover, white
   words), lilac-solid (brand-lilac), blue-solid (chart-2-light). Ink and Ink + blue keep them: the point is colour. */
html[data-frame="a"] main > section.wf[data-bg="purple"], html[data-frame="a"] main > section.wf[data-bg="lilac-solid"],
html[data-frame="a"] main > section.wf[data-bg="blue-solid"] { margin-left: 16px; margin-right: 16px; border-radius: 32px; }
html[data-frame="a"] main > section.wf[data-bg="purple"] { background: radial-gradient(60% 90% at 0% 0%, #8a2be2, transparent 70%), #6a17b8; }
html[data-frame="a"] main > section.wf[data-bg="lilac-solid"] { background: #e3cdfd; }
html[data-frame="a"] main > section.wf[data-bg="blue-solid"] { background: #bfdbfd; }
html[data-frame="a"] section[data-bg="purple"] .wf-copy h2 { color: #ffffff; }
html[data-frame="a"] section[data-bg="purple"] .wf-copy p:not(.eyebrow) { color: #f1e6ff; }
html[data-frame="a"] section[data-bg="purple"] .wf-copy > .eyebrow { color: #ffffff; background: #6a17b8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
html[data-frame="a"] section[data-bg="purple"] .wf-copy > .eyebrow::before { background: #ffffff; }
html[data-frame="a"] section[data-bg="purple"] .btn-secondary { color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
html[data-frame="a"] section[data-bg="purple"] .btn-secondary:hover { background: rgba(255,255,255,.1); }
html[data-frame="a"] section[data-bg="lilac-solid"] .wf-copy > .eyebrow, html[data-frame="a"] section[data-bg="blue-solid"] .wf-copy > .eyebrow { background: #ffffff; box-shadow: none; }
html[data-frame="a"] section[data-bg="lilac-solid"] .btn-secondary, html[data-frame="a"] section[data-bg="blue-solid"] .btn-secondary { background: #ffffff; box-shadow: none; }
html[data-frame="a"] section[data-bg="lilac-solid"] .wf-copy p:not(.eyebrow), html[data-frame="a"] section[data-bg="blue-solid"] .wf-copy p:not(.eyebrow) { color: var(--foreground); }
/* The marquee runs edge to edge: inside the inset panel it's clipped to the panel's corners */
html[data-frame="a"] main > section.wf[data-bg="lilac-solid"], html[data-frame="a"] main > section.wf[data-bg="blue-solid"] { overflow: hidden; }
html[data-frame="a"] section[data-panel="grid"] .wf-ground { position: relative; isolation: isolate; background: #ffffff; box-shadow: inset 0 0 0 1px var(--border); }
html[data-frame="a"] section[data-panel="grid"] .wf-ground::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(#ece4f8 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, #ece4f8 1px, transparent 1px) 0 0/24px 24px;   /* brand-dot */
  -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); }
html[data-frame="a"] .wf.cards .wf-card { background: #ffffff; }
/* The questions: ruled rows */
html[data-frame="a"] .faq { gap: 0; }
html[data-frame="a"] .faq details { background: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--border); padding: 0 4px; }
html[data-frame="a"] .faq details:first-child, html[data-frame="a"] .faq .faq-group + details { border-top: 1px solid var(--border); }
/* The end of the page: a dark band into a dark footer */
html[data-frame="a"] main > section.wf.band { background: var(--ink); margin-top: var(--section-gap); padding: 64px 0 56px; }  /* was 104px 0 96px */
/* the feature pages' Related block runs straight into the closing band, no white gap (John, 10 October 2026) */
main > section.wf-related + section.wf.band, html[data-frame="a"] main > section.wf-related + section.wf.band { margin-top: 0; }
/* the Related block's ground a plain grey, lighter (John, 10 October 2026: "a grey not grey with pink, a bit lighter"):
   surface-sunken (#f6f5f8) has a lilac cast; the palette has no neutral grey this light yet, so it's written out */
html[data-frame="a"] main > section.wf.cards.wf-related { background: #f8f8f8; }
/* ... and drawn over the block above it (John, 11 October 2026, Lead generation's Just ask: a white band over the grey).
   A feature page's frame runs 64px past its block for the shadows (.kx-bleed, z-index 1); where a browser paints the
   frame's backdrop white, that strip showed over the grey. The grey now covers it; the shadows have faded by then */
main > section.wf-related { position: relative; z-index: 2; }
html[data-frame="a"] .wf.band > .wrap > .wf-panel { background: none; border-radius: 0; padding: 0; }
html[data-frame="a"] .wf.band .wf-copy h2 { font-size: 48px; line-height: 54px; color: var(--ink-head); }
html[data-frame="a"] .wf.band .wf-copy p { color: var(--ink-text); }
html[data-frame="a"] .wf.band .wf-copy > .eyebrow { color: var(--ink-text); background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-line); }
html[data-frame="a"] .wf.band .wf-copy > .eyebrow::before { background: #c084fc; }   /* primary, dark theme */
html[data-frame="a"] .wf.band .btn-primary { background: #c084fc; color: #1f0a3a; }  /* primary and its foreground, dark theme */
html[data-frame="a"] .wf.band .btn-primary:hover { background: #d8b4fe; }
html[data-frame="a"] .wf.band .btn-secondary { color: var(--ink-head); box-shadow: inset 0 0 0 1px #6c6580; }   /* input, dark theme */
html[data-frame="a"] .wf.band .btn-secondary:hover { background: rgba(255,255,255,.06); }
html[data-frame="a"] .site-footer { margin-top: var(--section-gap); background: var(--ink); border-top: 0; color: var(--ink-text); }
html[data-frame="a"] main:has(> section.wf.band:last-child) ~ .site-footer { margin-top: 0; }
html[data-frame="a"] main:has(> section.wf.band:last-child) ~ .site-footer .wrap { border-top: 1px solid var(--ink-line); }
html[data-frame="a"] .site-footer .wrap { padding-top: 64px; padding-bottom: 40px; }
html[data-frame="a"] .foot-brand img.on-light { display: none; }
html[data-frame="a"] .foot-brand img.on-dark { display: block; }
html[data-frame="a"] .foot-brand p { color: var(--ink-text); }
html[data-frame="a"] .foot-col h3 { color: var(--ink-quiet); }
html[data-frame="a"] .foot-col a { color: var(--ink-text); }
html[data-frame="a"] .foot-col a:hover { color: var(--ink-head); }
html[data-frame="a"] .foot-base { border-top-color: var(--ink-line); color: var(--ink-quiet); }
html[data-frame="a"] .foot-base a { color: var(--ink-quiet); }
html[data-frame="a"] .site-footer :focus-visible { outline-color: #c084fc; }
@media (max-width: 960px) {
  html[data-frame="a"] .display { font-size: 46px; line-height: 52px; }
  html[data-frame="a"] .site-nav > a, html[data-frame="a"] .site-nav .nav-drop > button { height: 44px; }
  html[data-frame="a"] .site-nav a[aria-current="page"], html[data-frame="a"] .site-nav .nav-drop.is-current > button { box-shadow: inset 2px 0 0 var(--primary); }
}
@media (max-width: 640px) {
  html[data-frame="a"] { --section-gap: 44px; }   /* was 72px */
  html[data-frame="a"] .display { font-size: 36px; line-height: 42px; }
  html[data-frame="a"] .wf.hero { padding-top: 40px; }
  html[data-frame="a"] main[data-page="index"] > .wf.hero { padding-top: 32px; }   /* Home, 20% less (was 40px) */
  html[data-frame="a"] main > section.wf.cards { padding: 40px 0; }   /* was 56px */
  html[data-frame="a"] main > section.wf[data-bg] { margin-top: 12px; padding: 36px 0; }   /* was 48px, 56px */
  html[data-frame="a"] main > section.wf[data-bg].hero { margin-top: 0; padding: 40px 0 0; }
  html[data-frame="a"] main > section.wf[data-bg="purple"], html[data-frame="a"] main > section.wf[data-bg="lilac-solid"],
  html[data-frame="a"] main > section.wf[data-bg="blue-solid"] { margin-left: 8px; margin-right: 8px; border-radius: 24px; }
  html[data-frame="a"] main > section.wf.cards + section.wf { padding-top: var(--section-gap); }   /* was 72px */
  html[data-frame="a"] main > section.wf.band { padding: 44px 0 40px; }   /* was 64px 0 56px */
  html[data-frame="a"] .wf.band .wf-copy h2 { font-size: 30px; line-height: 36px; }
}

/* ---------- Frame B: Bands ----------
   Every section is a full-width band; every other one is tinted (--band-soft), so a long page reads in chapters. The
   hero sits on the soft band, and the closing call to action is a dark band (device-frame) that runs into a dark
   footer's edge. Cards stay white so they lift off the tint. */
html[data-frame="b"] {
  --background: #ffffff;
  --band-soft: #f5eefe;   /* state-above-pale: the purple palette's soft band */
  --section-gap: 80px;
}
html[data-frame="b"][data-palette="ink"] { --band-soft: #f6f5f8; }
html[data-frame="b"][data-palette="blue"] { --band-soft: #eff6ff; }
html[data-frame="b"] main > section.wf { padding: var(--section-gap) 0; }
html[data-frame="b"] main > section.wf:nth-of-type(even):not(.band) { background: var(--band-soft); }
html[data-frame="b"] main > section.wf.hero { background: var(--band-soft); padding-top: 72px; }
html[data-frame="b"] main > section.wf.hero + section.wf:nth-of-type(even) { background: none; }
/* A hero with a full-width illustration under its words (Home): the band stops at the illustration's own ground */
html[data-frame="b"] main > section.wf.hero:has(> .wf-full) { padding-bottom: 0; }
html[data-frame="b"] .crumbs-host:has(.crumbs) + main > section.wf.hero { padding-top: 48px; }
html[data-frame="b"] .site-header { background: rgba(255,255,255,.97); }
html[data-frame="b"] .site-header.is-scrolled { background: rgba(255,255,255,.5); }
html[data-frame="b"] .wf-ground { background-color: #ffffff; }
/* The closing call to action: a dark band, full width */
html[data-frame="b"] main > section.wf.band { background: #1f1b2b; }   /* device-frame */
html[data-frame="b"] .wf.band > .wrap > .wf-panel { background: none; padding: 24px 0; }
html[data-frame="b"] .wf.band .wf-copy h2, html[data-frame="b"] .wf.band .wf-copy .display { color: #ffffff; }
html[data-frame="b"] .wf.band .wf-copy p { color: #c9c2d9; }              /* foreground-secondary, dark theme */
html[data-frame="b"] .wf.band .eyebrow { color: #a39cb3; }                /* muted-foreground, dark theme */
html[data-frame="b"] .wf.band .btn-primary { background: #c084fc; color: #1f0a3a; }   /* primary and its foreground, dark theme */
html[data-frame="b"] .wf.band .btn-primary:hover { background: #d8b4fe; }
html[data-frame="b"] .wf.band .btn-secondary { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1px #6c6580; }   /* input, dark theme */
html[data-frame="b"] .wf.band .btn-secondary:hover { background: rgba(255,255,255,.08); }
html[data-frame="b"] .site-footer { margin-top: 0; background: var(--surface-sunken); border-top: 0; }
@media (max-width: 640px) {
  html[data-frame="b"] { --section-gap: 56px; }
  html[data-frame="b"] main > section.wf.hero { padding-top: 40px; }
}

/* (Content blocks: Mix of bold, the closing band as the G3 gloss panel, came off on 10 October 2026 at Original) */

/* ---------- Yours to shape's effect, on Home's headings (John, 8 October 2026) ----------
   K2 from Website Concept illustrations/Add - Highlight and squiggle options.html: the purple tag (secondary, deep
   purple words, a brand-lilac edge) on a heading's key words (.kx-key: Claude Technology Platform's "changing world"),
   and the brand-light wave ending in a Kixi-purple dot under the hero's heading. Was a setting, Hero accent, for an hour. */
main[data-page="index"] .kx-key {
  color: #6a17b8; background: #f5ecff; box-shadow: inset 0 0 0 1.5px #e3cdfd; border-radius: 0.42em; padding: 0 0.18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
main[data-page="index"] h2:has(.kx-key) { line-height: 1.32; }   /* the tag's box is taller than the words: room between the lines */
main[data-page="index"] > .wf.hero h1::after {
  content: ""; display: block; width: 220px; height: 22px; margin: 18px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cpath d='M2 9c10-8 18-8 28 0s18 8 28 0 18-8 28 0 18 8 28 0 18-8 28 0' fill='none' stroke='%23c084fc' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='152' cy='9' r='5' fill='%238a2be2'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 640px) {
  main[data-page="index"] > .wf.hero h1::after { width: 160px; height: 16px; margin-top: 14px; }
}

/* ---------- Footer (John, 8 October 2026) ----------
   White, Black or A · Calm's dark footer on any frame; no choice leaves each frame's own (Original white, A dark,
   B grey). Last in the file so it wins over the frames' footer rules. */
html[data-footer="white"] { --ft-bg: #ffffff; --ft-text: #5a5470; --ft-quiet: #6b6778; --ft-head: #2a2438; --ft-line: #efe8fa; }
html[data-footer="black"] { --ft-bg: #000000; --ft-text: #d4d2da; --ft-quiet: #9a97a3; --ft-head: #ffffff; --ft-line: #26252b; }
html[data-footer="a"] { --ft-bg: #14111c; --ft-text: #c9c2d9; --ft-quiet: #a39cb3; --ft-head: #f3effa; --ft-line: #2e2839; }
html[data-footer] .site-footer { background: var(--ft-bg); color: var(--ft-text); border-top: 1px solid var(--ft-line); }
html[data-footer="black"] .site-footer, html[data-footer="a"] .site-footer { border-top: 0; }
html[data-footer="a"] .site-footer .wrap { padding-top: 64px; padding-bottom: 40px; }
html[data-footer] .foot-brand p, html[data-footer] .foot-col a { color: var(--ft-text); }
html[data-footer] .foot-col h3 { color: var(--ft-quiet); }
html[data-footer] .foot-col a:hover { color: var(--ft-head); }
html[data-footer] .foot-base { border-top-color: var(--ft-line); color: var(--ft-quiet); }
html[data-footer] .foot-base a { color: var(--ft-quiet); }
html[data-footer="white"] .foot-brand img.on-light { display: block; }
html[data-footer="white"] .foot-brand img.on-dark { display: none; }
html[data-footer="black"] .foot-brand img.on-light, html[data-footer="a"] .foot-brand img.on-light { display: none; }
html[data-footer="black"] .foot-brand img.on-dark, html[data-footer="a"] .foot-brand img.on-dark { display: block; }
html[data-footer="black"] .site-footer :focus-visible, html[data-footer="a"] .site-footer :focus-visible { outline-color: #c084fc; }
html[data-footer="white"] .site-footer .wrap { border-top-color: transparent !important; }   /* Frame A draws a dark rule here after its dark band */

/* ---------- Claude highlight (John, 9 October 2026): Home's Claude Technology Platform block, the tag on "changing world"
   (.kx-key) and its eyebrow's dot in blue or green instead of purple. Blue: chart-2-pale ground, link-blue words, chart-2-light
   edge, chart-2 dot. Green: state-on-pale ground, state-on-text words, state-on-fill edge, state-on dot. Purple is the start. */
html[data-ctphl="blue"] main[data-page="index"] .wf-ctp .kx-key { color: #3d6aa1; background: #eff6ff; box-shadow: inset 0 0 0 1.5px #bfdbfd; }
html[data-ctphl="blue"] .wf-ctp .wf-copy > .eyebrow::before { background: #60a5fa; }
html[data-ctphl="green"] main[data-page="index"] .wf-ctp .kx-key { color: #3b701d; background: #f5faf2; box-shadow: inset 0 0 0 1.5px #cdeab5; }
html[data-ctphl="green"] .wf-ctp .wf-copy > .eyebrow::before { background: #5eb22e; }

/* ---------- The What we build page's hero: "tailored to you" in the purple tag (John, 9 October 2026) ----------
   K2's highlight from Website Concept illustrations/Add - Highlight and squiggle options.html (secondary #f5ecff, deep
   purple #6a17b8 words, a brand-lilac #e3cdfd edge), as on Home's "changing world". Chosen from the What we build hero
   setting (Original, Squiggle: the wave and dot under the words, Highlight), which came off. */
main[data-page="what-we-build"] .kx-tail {
  white-space: nowrap; color: #6a17b8; background: #f5ecff; box-shadow: inset 0 0 0 1.5px #e3cdfd; border-radius: 0.42em; padding: 0 0.18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
main[data-page="what-we-build"] > .wf.hero h1:has(.kx-tail) { line-height: 1.28; }
/* ---------- Board reports' hero: "Concise board papers" in the purple tag (John, 10 October 2026) ----------
   As What we build's "tailored to you". Chosen (Highlight) from the Board reports hero setting the same day (blue,
   green and Off were the others), which came off. */
main[data-page="board-reports"] .kx-brhl {
  color: #6a17b8; background: #f5ecff; box-shadow: inset 0 0 0 1.5px #e3cdfd; border-radius: 0.42em; padding: 0 0.18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
main[data-page="board-reports"] > .wf.hero h1:has(.kx-brhl) { line-height: 1.28; }

/* ---------- How it works' Powered by Claude Technology on Time back's black card (John, 9 October 2026) ----------
   C of the Claude block options (John: "go with c but remove the Your AI Hub card"): one black card (#1f1e1d), at most
   1100px wide, the words on the left and the tool cards on the right, as Time back; the block is ?embed=claude-dark (no
   Hub bar, Time back's dark cards). Words on the black: white headline, #d6d3cf text, the eyebrow's tag in #3a3734 with
   the purple dot, the button outlined in input #6c6580 (dark theme). A, B (the picture on the card, or under the
   words) and the setting came off. */
main[data-page="how-it-works"] > section.wf-pbc { background: #1f1e1d; width: min(1100px, calc(100% - 32px)); margin: var(--section-gap) auto 0; border-radius: 24px; padding: 40px;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: 40px; align-items: center; }
main[data-page="how-it-works"] > section.wf-pbc > .wrap { max-width: none; padding: 0; }
main[data-page="how-it-works"] > section.wf-pbc .wf-copy { max-width: 760px; margin: 0; text-align: left; }
main[data-page="how-it-works"] > section.wf-pbc .wf-head { justify-content: flex-start; }
main[data-page="how-it-works"] > section.wf.wf-pbc .wf-copy .btns { justify-content: flex-start; }
main[data-page="how-it-works"] > section.wf-pbc > .wf-full { max-width: none; padding: 0; margin: 0; width: 100%; }   /* no auto margins: in the grid they would shrink it */
main[data-page="how-it-works"] > section.wf-pbc .wf-copy h2 { font-size: 30px; line-height: 36px; color: #ffffff; }
main[data-page="how-it-works"] > section.wf-pbc .wf-copy p:not(.eyebrow) { color: #d6d3cf; }
main[data-page="how-it-works"] > section.wf-pbc .wf-copy > .eyebrow { color: #d6d3cf; background: #1f1e1d; box-shadow: inset 0 0 0 1px #3a3734; }
main[data-page="how-it-works"] > section.wf-pbc .wf-copy > .eyebrow::before { background: #c084fc; }
main[data-page="how-it-works"] > section.wf-pbc .btn-secondary { background: transparent; color: #ffffff; box-shadow: inset 0 0 0 1px #6c6580; }
main[data-page="how-it-works"] > section.wf-pbc .btn-secondary:hover { box-shadow: inset 0 0 0 1px #c084fc; }
main[data-page="how-it-works"] > section.wf-pbc + section.wf { padding-top: var(--section-gap); }
@media (max-width: 1000px) { main[data-page="how-it-works"] > section.wf-pbc { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 640px) {
  main[data-page="how-it-works"] > section.wf-pbc { padding: 28px 16px; border-radius: 20px; }
  main[data-page="how-it-works"] > section.wf-pbc .wf-copy h2 { font-size: 26px; line-height: 32px; }
}

/* ---------- How it works: Yours to shape's wave and dot, and its tag (John, 9 October 2026) ----------
   K2 from Website Concept illustrations/Add - Highlight and squiggle options.html, as on Home: the brand-light wave
   ending in the Kixi-purple dot under Foundations' heading (.wf-squig-h), and the purple tag on Connecting your data's
   "smart AI solutions" (.kx-key; secondary, deep purple words, a brand-lilac edge). */
main[data-page="how-it-works"] .kx-key, main[data-page="our-approach"] .kx-key, main[data-page="events-calendar"] .kx-key {   /* and Events calendar's "automatically synced" (John, 10 October 2026) */
  color: #6a17b8; background: #f5ecff; box-shadow: inset 0 0 0 1.5px #e3cdfd; border-radius: 0.42em; padding: 0 0.18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
main[data-page="how-it-works"] h2:has(.kx-key), main[data-page="our-approach"] h2:has(.kx-key), main[data-page="events-calendar"] h2:has(.kx-key) { line-height: 1.32; }
main[data-page="how-it-works"] .wf-squig-h::after, main[data-page="our-approach"] .wf-squig-h::after, main[data-page="services"] .wf-squig-h::after, main[data-page="reports-engine"] .wf-squig-h::after, main[data-page="knowledge-data-definitions"] .wf-squig-h::after,
main[data-page="claude-technology"] .wf-squig-h::after, main[data-page="about-us"] .wf-squig-h::after {   /* and Claude Technology's hero (John, 10 October 2026), About us' (John, 11 October 2026) */
  content: ""; display: block; width: 160px; height: 16px; margin: 16px auto 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cpath d='M2 9c10-8 18-8 28 0s18 8 28 0 18-8 28 0 18 8 28 0 18-8 28 0' fill='none' stroke='%23c084fc' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='152' cy='9' r='5' fill='%238a2be2'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 640px) { main[data-page="how-it-works"] .wf-squig-h::after, main[data-page="our-approach"] .wf-squig-h::after, main[data-page="services"] .wf-squig-h::after, main[data-page="reports-engine"] .wf-squig-h::after, main[data-page="knowledge-data-definitions"] .wf-squig-h::after, main[data-page="claude-technology"] .wf-squig-h::after, main[data-page="about-us"] .wf-squig-h::after { width: 128px; height: 13px; margin-top: 12px; } }
.wf.split .wf-squig-h::after, .wf.flip .wf-squig-h::after { margin-left: 0; }   /* left, under a heading set left (Our approach's What we bring) */

/* ---------- Our approach's hero: a comet under the heading (John, 9 October 2026) ----------
   Heading width, comet, chosen from the Our approach heading setting (which came off): a Kixi purple (#8a2be2) dot
   with a brand-light (#c084fc) tail that stretches as it speeds up, the dot in front of its tail. It starts about three
   characters left of the heading's text (--kx-ml and --kx-w, measured by site.js). First the dot pulses four times on
   the logo's 1.4s Ripple beat, each pulse one smooth swell to almost twice its size and back with no pause between,
   sending out a ripple ring; then it speeds up on an ease-in curve (top speed 15% under the first draw) and flies off
   the screen's right edge, tail and all: 10.8s in all, looping. The rings grow by transform (smooth) and fade in over
   a few frames; how far they go is --kx-ring-n, times the dot's size: 9 (John, from a Pulse rings slider, 2 to
   12, which came off). Reduced motion: still, at the end. */
main[data-page="our-approach"] > .wf.hero { overflow-x: clip; }
main[data-page="our-approach"] .kx-accel { position: relative; height: 14px; width: var(--kx-w, 336px); margin: 10px 0 2px var(--kx-ml, 0px); }
main[data-page="our-approach"] .kx-accel > i { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  animation: kxAccMove 10.8s linear infinite, kxAccFade 10.8s linear infinite; }
main[data-page="our-approach"] .kx-accel > i::before { content: ""; position: absolute; right: 5px; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(192,132,252,0), #c084fc); width: 0; animation: kxAccTail 10.8s linear infinite; }
main[data-page="our-approach"] .kx-accel > i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #8a2be2; will-change: transform;
  animation: kxAccPulse 10.8s infinite; }   /* the dot, over its tail and rings */
/* the ripple rings, one a beat, in brand-light #c084fc on white (the logo's #e3cdfd is for its purple disc): drawn at
   their full size and scaled up from the dot's, so they move smoothly */
main[data-page="our-approach"] .kx-accel > i > span { position: absolute; left: 50%; top: 50%; width: calc(10px * var(--kx-ring-n, 9)); height: calc(10px * var(--kx-ring-n, 9));
  margin: calc(-5px * var(--kx-ring-n, 9)) 0 0 calc(-5px * var(--kx-ring-n, 9)); border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #c084fc; opacity: 0; will-change: transform, opacity; animation: kxAccRing 10.8s infinite; }
main[data-page="our-approach"] .kx-accel > i > span:nth-child(2) { animation-delay: 1.4s; }
main[data-page="our-approach"] .kx-accel > i > span:nth-child(3) { animation-delay: 2.8s; }
main[data-page="our-approach"] .kx-accel > i > span:nth-child(4) { animation-delay: 4.2s; }
@keyframes kxAccMove { 0%, 51.852% { left: 0; animation-timing-function: cubic-bezier(.7,0,.84,0); } 90.37%, 100% { left: calc(100% + 240px); } }   /* the pulses, then on past the screen's edge */
@keyframes kxAccFade { 0% { opacity: 0; } 3%, 100% { opacity: 1; } }   /* fades in at the start only: it leaves by the right edge */
@keyframes kxAccTail { 0%, 51.852% { width: 0; animation-timing-function: cubic-bezier(.7,0,.84,0); } 90.37%, 100% { width: 220px; } }
@keyframes kxAccPulse { 0.0% { transform: scale(1); animation-timing-function: cubic-bezier(.3,0,.2,1); } 4.167% { transform: scale(1.9); animation-timing-function: cubic-bezier(.45,0,.25,1); } 12.963% { transform: scale(1); animation-timing-function: cubic-bezier(.3,0,.2,1); } 17.13% { transform: scale(1.9); animation-timing-function: cubic-bezier(.45,0,.25,1); } 25.926% { transform: scale(1); animation-timing-function: cubic-bezier(.3,0,.2,1); } 30.093% { transform: scale(1.9); animation-timing-function: cubic-bezier(.45,0,.25,1); } 38.889% { transform: scale(1); animation-timing-function: cubic-bezier(.3,0,.2,1); } 43.056% { transform: scale(1.9); animation-timing-function: cubic-bezier(.45,0,.25,1); } 51.852%, 100% { transform: scale(1); } }
@keyframes kxAccRing { 0% { opacity: 0; transform: scale(calc(1 / var(--kx-ring-n, 9))); animation-timing-function: cubic-bezier(.2,.6,.3,1); }
  1.5% { opacity: .9; animation-timing-function: linear; } 12.963%, 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  main[data-page="our-approach"] .kx-accel > i, main[data-page="our-approach"] .kx-accel > i::before, main[data-page="our-approach"] .kx-accel > i::after { animation: none !important; opacity: 1 !important; }
  main[data-page="our-approach"] .kx-accel > i { left: calc(100% - 10px); }
  main[data-page="our-approach"] .kx-accel > i::before { width: 220px; }
  main[data-page="our-approach"] .kx-accel > i > span { display: none; }
}

/* ---------- Our approach's Working with your people: Dark 2 (John, 9 October 2026) ----------
   A black band the width of the screen (Time back's #1f1e1d), faint purple dots strongest on the left, fading to the
   right; the words left, the cards right (the block's C-dark: Time back's dark cards, the answer in Kixi purple).
   Chosen from Our approach people (Original, Dots, Dark 1, Dark 2), which came off. */
main[data-page="our-approach"] > section.wf-people { position: relative; isolation: isolate; background: #1f1e1d; margin-top: var(--section-gap); padding: 72px 0; }
main[data-page="our-approach"] > section.wf-people::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(192,132,252,.3) 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 40%, transparent 85%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.55) 40%, transparent 85%); }
main[data-page="our-approach"] > section.wf-people + section.wf { padding-top: var(--section-gap); }
/* (Our approach people dots, Current 30%, Stronger 60%, Strongest 85%, came off on 9 October 2026 at Current) */
main[data-page="our-approach"] > section.wf-people > .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
main[data-page="our-approach"] > section.wf-people .wf-copy { order: 0; }
main[data-page="our-approach"] > section.wf-people .wf-copy h2 { color: #ffffff; }
main[data-page="our-approach"] > section.wf-people .wf-copy p:not(.eyebrow) { color: #d6d3cf; }
main[data-page="our-approach"] > section.wf-people .wf-copy > .eyebrow { color: #d6d3cf; background: #1f1e1d; box-shadow: inset 0 0 0 1px #3a3734; }
main[data-page="our-approach"] > section.wf-people .wf-copy > .eyebrow::before { background: #c084fc; }
@media (max-width: 860px) { main[data-page="our-approach"] > section.wf-people > .wrap { grid-template-columns: 1fr; } }
@media (max-width: 640px) { main[data-page="our-approach"] > section.wf-people { padding: 48px 0; } }

/* (Our approach highlight, on "accelerate you": the purple tag, the same in blue with a blue comet and pill dot, or a
   continuous squiggle, came off on 9 October 2026 when John chose Off. The words keep their .kx-hl span, unstyled.) */

/* Our approach hero dots (John, 9 October 2026): Yours to shape's darker dots (#c9aef2) across the whole hero, strongest
   at the screen's bottom right corner, fading out towards the top left, and on through the gap to where the black
   Working with your people band begins (the band's margin, --section-gap). Chosen from a setting, now off */
main[data-page="our-approach"] > section.wf.hero { position: relative; isolation: isolate; }
main[data-page="our-approach"] > section.wf.hero::before { content: ""; position: absolute; inset: calc(-1 * var(--kx-top, 110px)) 0 calc(-1 * var(--section-gap, 64px)) 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #c9aef2 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to top left, #000 0%, rgba(0,0,0,.55) 35%, transparent 80%);
          mask-image: linear-gradient(to top left, #000 0%, rgba(0,0,0,.55) 35%, transparent 80%); }
/* ... and up behind the breadcrumbs and the menu to the top of the page, as How it works' hero (John, 9 October 2026):
   --kx-top is the menu's and breadcrumbs' height (site.js); the breadcrumbs sit over the dots, and the menu is clear
   until the page scrolls under it */
html[data-current="our-approach"] .crumbs-host { position: relative; z-index: 2; }
html[data-current="our-approach"] .site-header:not(.is-scrolled):not(.menu-open) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Events calendar hero squares (John, 10 October 2026: "a background that uses squares that fade out ... behind the main
   top menu"): a grid of 40px squares in brand-dot lines (#ece4f8, as the grid panel), a 640 x 460px fade centred level
   with the heading (the menu, the breadcrumbs and 153px down) and 480px right of centre, past the end of "calendar" (35vw
   on smaller screens), fading out every way; pulled up behind the breadcrumbs and the menu as Our approach's dots
   (--kx-top, site.js), the menu clear until the page scrolls under it. Right of calendar, chosen by John the same day
   from a Squares fade setting, now off (the other choice, Above calendar, centred the fade at the top above "calendar") */
main[data-page="events-calendar"] > section.wf.hero { position: relative; isolation: isolate; }
main[data-page="events-calendar"] > section.wf.hero::before { content: ""; position: absolute; inset: calc(-1 * var(--kx-top, 110px)) 0 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(#e6dbf6 1px, transparent 1px) 50% 0 / 40px 40px, linear-gradient(90deg, #e6dbf6 1px, transparent 1px) 50% 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(640px 460px at calc(50% + min(480px, 35vw)) calc(var(--kx-top, 110px) + 153px), #000 25%, rgba(0,0,0,.45) 55%, transparent 85%);
          mask-image: radial-gradient(640px 460px at calc(50% + min(480px, 35vw)) calc(var(--kx-top, 110px) + 153px), #000 25%, rgba(0,0,0,.45) 55%, transparent 85%); }
html[data-current="events-calendar"] .crumbs-host { position: relative; z-index: 2; }
html[data-current="events-calendar"] .site-header:not(.is-scrolled):not(.menu-open) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Amber (John, 10 October 2026, Events calendar's Finds the events for you): a section marked .kx-amber has its pill's dot
   and its .kx-key words in the colours of the picture's Date moved pill (near-fill #fdeac9, near-text #a84f00), the dot
   in amber #f59e0b */
main > section.wf.kx-amber .wf-copy > .eyebrow::before { background: #f59e0b; }
main > section.wf.kx-amber .kx-key { color: #a84f00; background: #fdeac9; box-shadow: inset 0 0 0 1.5px #f9d48f; }

/* Events calendar's Time back (John, 10 October 2026: the dots off this block, onto Finds the events for you above it):
   no dotted ground of its own, so the Finds section's dots (.kx-dots-br) run on behind the black card */
main[data-page="events-calendar"] > section.wf.wf-calc-sec { background: transparent !important; }
/* ... and the Finds dots spread across the whole section (John, 10 October 2026: "spread out across the whole block and
   into the block above and below"): a wide fade centred behind the picture, reaching behind the words, up into the
   hero and down behind Time back, still with no hard edge */
main[data-page="events-calendar"] > section.wf.kx-dots-br::before { inset: -260px 0;
  -webkit-mask-image: radial-gradient(ellipse 110% 60% at 68% 50%, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 110% 60% at 68% 50%, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); }
/* ... centred on the heading's highlighted word (John, 10 October 2026: "have the dot fade, fade into content above/below
   and behind the cards on right; the fade should be centred on the word automatically"): [data-dotfocus] on the section,
   the word's centre measured by site.js (dotFocus: --kx-fx, --kx-fy from the section's top left; the ground starts 260px
   above the section), strongest there and fading out every way, over the hero above, Time back below and behind the
   cards on the right, with no hard edge */
main[data-page="events-calendar"] > section.wf.kx-dots-br[data-dotfocus]::before {
  -webkit-mask-image: radial-gradient(ellipse 1150px 560px at var(--kx-fx, 30%) calc(var(--kx-fy, 50%) + 260px), #000 0%, rgba(0,0,0,.6) 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 1150px 560px at var(--kx-fx, 30%) calc(var(--kx-fy, 50%) + 260px), #000 0%, rgba(0,0,0,.6) 40%, transparent 100%); }

/* Events calendar's Map (John, 10 October 2026: "add a squiggle but instead of a dot use a map location marker icon"):
   Yours to shape's wave under the heading, ending in a Kixi-purple map pin (.wf-squig-h.kx-pin), left under the words */
main[data-page="events-calendar"] .wf-squig-h.kx-pin::after {
  content: ""; display: block; width: 168px; height: 26px; margin: 14px 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 26'%3E%3Cpath d='M2 17c10-8 18-8 28 0s18 8 28 0 18-8 28 0 18 8 28 0 18-8 28 0' fill='none' stroke='%23c084fc' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M157 2a8 8 0 0 1 8 8c0 6-8 14-8 14s-8-8-8-14a8 8 0 0 1 8-8z' fill='%238a2be2'/%3E%3Ccircle cx='157' cy='10' r='3' fill='%23fff'/%3E%3C/svg%3E") left center / contain no-repeat; }
@media (max-width: 640px) { main[data-page="events-calendar"] .wf-squig-h.kx-pin::after { width: 134px; height: 21px; margin-top: 10px; } }

/* Our approach, Phase 1 (Systems, data and content review): a dotted ground the width of the screen (John, 9 October
   2026), Yours to shape's darker dots (#c9aef2) strongest at the bottom left, fading out towards the top right */
main[data-page="our-approach"] > section.wf-p1 { position: relative; isolation: isolate; margin-top: 16px; padding: 64px 0; }
main[data-page="our-approach"] > section.wf-p1::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #c9aef2 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to top right, #000 0%, rgba(0,0,0,.55) 35%, transparent 80%);
          mask-image: linear-gradient(to top right, #000 0%, rgba(0,0,0,.55) 35%, transparent 80%); }
main[data-page="our-approach"] > section.wf-p1 + section.wf { padding-top: var(--section-gap); }
@media (max-width: 640px) { main[data-page="our-approach"] > section.wf-p1 { padding: 48px 0; } }

/* A full-width dotted ground, the dots strongest at the bottom left and fading towards the top right (John, 9 October
   2026): Yours to shape's darker dots (#c9aef2), on any section marked .kx-dots-bl (Services' After go-live), as Our
   approach's Phase 1 (.wf-p1) */
main > section.wf.kx-dots-bl { position: relative; isolation: isolate; margin-top: 16px; padding: 64px 0; }
main > section.wf.kx-dots-bl::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #c9aef2 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to top right, #000 0%, rgba(0,0,0,.55) 35%, transparent 80%);
          mask-image: linear-gradient(to top right, #000 0%, rgba(0,0,0,.55) 35%, transparent 80%); }
main > section.wf.kx-dots-bl + section.wf { padding-top: var(--section-gap); }
@media (max-width: 640px) { main > section.wf.kx-dots-bl { padding: 48px 0; } }
/* The same, the dots strongest at the bottom right and fading towards the top left (.kx-dots-br; John, 10 October 2026,
   the Reports engine page's Report library), and running on into the sections above and below (John, the same day:
   "make the dot bleed into blocks above and below"): the ground reaches 200px past the section's top and bottom and
   fades out from its bottom right corner every way, so it has no edge. The sections either side are lifted over it
   (they have no background of their own), so the dots run behind their words and pictures, not over them. */
main > section.wf.kx-dots-br { position: relative; isolation: isolate; margin-top: 16px; padding: 64px 0; }
main > section.wf:has(+ section.wf.kx-dots-br), main > section.wf.kx-dots-br + section.wf { position: relative; z-index: 1; }
main > section.wf.kx-dots-br::before { content: ""; position: absolute; inset: -200px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #c9aef2 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  /* and faded out at the top and the bottom too, so it never ends in a hard line (John, the same day) */
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 100% 72%, #000 0%, rgba(0,0,0,.55) 40%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(ellipse 85% 70% at 100% 72%, #000 0%, rgba(0,0,0,.55) 40%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 22%, #000 62%, transparent 100%);
          mask-composite: intersect; }
main > section.wf.kx-dots-br + section.wf { padding-top: var(--section-gap); }
@media (max-width: 640px) { main > section.wf.kx-dots-br { padding: 48px 0; } }

/* Report creation's hero (John, 10 October 2026: the block's card off, "a dot fade with centre near the Open on its
   own"; then "fades out evenly across all areas of the page, include the menu and content blocks below"): Yours to
   shape's darker dots, strongest at the block's Open on its own button (top right of its 860px column, 39px down; the
   frame is the browser's width, wf-edge) and fading out evenly every way, one wide, soft fade: up behind the words, the
   breadcrumbs and the menu (clear until the page scrolls under it, as Events calendar's), and down behind the steps,
   with no hard edge anywhere */
main > section.wf.kx-dots-own { isolation: isolate; }
main > section.wf.kx-dots-own > .wf-full { position: relative; }
main > section.wf.kx-dots-own > .wf-full::before { content: ""; position: absolute; inset: -1000px 0 -300px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #c9aef2 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 1100px 950px at calc(50% + min(355px, 50% - 91px)) 1039px, #000 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.08) 84%, transparent 100%);
          mask-image: radial-gradient(ellipse 1100px 950px at calc(50% + min(355px, 50% - 91px)) 1039px, #000 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.08) 84%, transparent 100%); }
html[data-current="report-creation"] .crumbs-host { position: relative; z-index: 2; }
html[data-current="report-creation"] .site-header:not(.is-scrolled):not(.menu-open) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Blue (John, 9 October 2026): a section marked .kx-blue has its squiggle and its eyebrow pill's dot in the brighter
   blue, chart-2 #60a5fa (Services' Custom Development) */
main > section.wf.kx-blue .wf-squig-h::after, main > section.wf.kx-linkblue .wf-squig-h::after {   /* and .kx-linkblue's (Reports engine's On a schedule, 10 October 2026) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cpath d='M2 9c10-8 18-8 28 0s18 8 28 0 18-8 28 0 18 8 28 0 18-8 28 0' fill='none' stroke='%2360a5fa' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='152' cy='9' r='5' fill='%2360a5fa'/%3E%3C/svg%3E"); }
main > section.wf.kx-blue .wf-copy > .eyebrow::before { background: #60a5fa; }
/* Green (John, 10 October 2026, Knowledgebase & Data Definitions' hero): a section marked .kx-green has its squiggle and
   its eyebrow pill's dot in green, state-on #5eb22e */
main > section.wf.kx-green .wf-squig-h::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'%3E%3Cpath d='M2 9c10-8 18-8 28 0s18 8 28 0 18-8 28 0 18 8 28 0 18-8 28 0' fill='none' stroke='%235eb22e' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='152' cy='9' r='5' fill='%235eb22e'/%3E%3C/svg%3E"); }
main > section.wf.kx-green .wf-copy > .eyebrow::before { background: #5eb22e; }
/* Link blue (John, 10 October 2026, Reports engine's On a schedule): a section marked .kx-linkblue has its pill's dot in
   the blue of its picture's Slack channel (link #3d6aa1), and its .kx-key words in the blue tag (chart-2-pale ground,
   chart-2-light edge), the words in Kixi's bright blue, chart-2 #60a5fa (John, the same day; they were link blue) */
main > section.wf.kx-linkblue .wf-copy > .eyebrow::before { background: #60a5fa; }   /* bright blue (John, the same day; it was link blue) */
main > section.wf.kx-linkblue .kx-key { color: #60a5fa; background: #eff6ff; box-shadow: inset 0 0 0 1.5px #bfdbfd; border-radius: 0.42em; padding: 0 0.18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
main > section.wf.kx-linkblue h2:has(.kx-key) { line-height: 1.32; }

/* ---------- Menu hover: Side bar (John, 9 October 2026; the setting's other four, Purple line, Purple words and arrow,
   Purple dot and Lift, came off on 10 October 2026 when John chose this) ----------
   A purple bar grows down the drop-down item's left edge, on the pale ground (brand-pale). data-menuhover="bar" is
   set for good by site.js (FIXED). Reduced motion: no movement. */
html[data-menuhover] .nav-panel a { position: relative; transition: background-color .2s, color .2s, box-shadow .2s, transform .2s, padding .2s; }
html[data-menuhover] .nav-panel a:hover { background: none; }
html[data-menuhover="bar"] .nav-panel a::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: #8a2be2;
  transform: scaleY(0); transform-origin: top; transition: transform .25s cubic-bezier(.2,.8,.3,1); }
html[data-menuhover="bar"] .nav-panel a:hover { background: var(--brand-pale); color: #6a17b8; }
html[data-menuhover="bar"] .nav-panel a:hover::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  html[data-menuhover] .nav-panel a, html[data-menuhover] .nav-panel a::before { transition: none !important; }
}

/* ---------- Rings from a hub, across the page (John, 10 October 2026, the Sales AI Assistant's What it knows) ----------
   The block's Your AI Hub circle sends brand-lilac rings out behind the whole page, as Home's How it works rings run
   behind the block above: centred on the hub (--hx, --hy, measured from inside the block by site.js), fading out with
   distance. They sit behind the page's sections, so a block with a ground of its own covers them. */
/* the rings are a layer of their own over the whole page (main), put in by site.js, not the section's ::before
   reaching 1400px past its edges: some views clipped that at the section's top and bottom, a hard line across the page */
main:has(> section.wf.wf-hubrings) { position: relative; }
/* every 32px (a bit wider than the first tight 24px) and reaching about 520px (650px less 20%), flowing out from the
   hub on its 1.4s beat, so the lines carry on the hub's own pulse (John, 10 October 2026): --kx-ro moves each ring out
   by one gap per beat, then starts over, seamlessly */
@property --kx-ro { syntax: '<length>'; inherits: false; initial-value: 1px; }
main > .wf-hubrings-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at var(--hx, 20%) var(--hy, 30%), transparent 0, transparent calc(var(--kx-ro) - 1px),
    #e3cdfd calc(var(--kx-ro) - 1px), #e3cdfd var(--kx-ro), transparent var(--kx-ro), transparent 32px);
  -webkit-mask-image: radial-gradient(circle 520px at var(--hx, 20%) var(--hy, 30%), #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
          mask-image: radial-gradient(circle 520px at var(--hx, 20%) var(--hy, 30%), #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
  animation: kxRingFlow 1.4s linear infinite; }
@keyframes kxRingFlow { from { --kx-ro: 1px; } to { --kx-ro: 32px; } }
@media (prefers-reduced-motion: reduce) { main > .wf-hubrings-layer { animation: none; } }
/* Claude Technology's hero (John, 10 October 2026: "the circles should be able to go behind the menu and content block
   below", then "remove the circle background. use dot fades instead, but centred on the your ai hub circle"): the hub
   rings' layer (measured by site.js hubRings, so it follows the hub) drawn as Yours to shape's darker dots instead of
   rings, strongest at the Your AI Hub circle and fading out evenly every way, with no motion. It starts 400px above the
   page's top, so the dots run up behind the breadcrumbs and the menu (clear until the page scrolls under it, as Report
   creation's), the centre moved down by the same 400px, and on down behind the Skills block */
main[data-page="claude-technology"] > .wf-hubrings-layer { top: -400px; bottom: -200px; animation: none;
  background: radial-gradient(circle, #c9aef2 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 900px 700px at var(--hx, 20%) calc(var(--hy, 30%) + 400px), #000 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.08) 84%, transparent 100%);
          mask-image: radial-gradient(ellipse 900px 700px at var(--hx, 20%) calc(var(--hy, 30%) + 400px), #000 0%, rgba(0,0,0,.62) 28%, rgba(0,0,0,.26) 62%, rgba(0,0,0,.08) 84%, transparent 100%); }
html[data-current="claude-technology"] .crumbs-host { position: relative; z-index: 2; }
/* its picture at most 1240px wide, on the container (1240 + 2 x 16px gutters), not the frame: the frame keeps the
   no-card pages' 32px pull-out each side (wireframe.css .kx-bleed), so it stays centred on a phone (John, 11 October 2026) */
main[data-page="claude-technology"] > .wf.hero > .wf-full { max-width: 1272px; }
/* the same for the Sales AI Assistant's After the call review (John, 11 October 2026): 1244px + 2 x 16px gutters */
main[data-page="sales-ai-assistant"] > .wf.wf-review > .wf-full { max-width: 1276px; }
html[data-current="claude-technology"] .site-header:not(.is-scrolled):not(.menu-open) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* A dotted ground that spreads into the sections above and below (.kx-dots-tb; John, 10 October 2026, CRM automation's
   Time back: "make the dot fade on the time back box spread into blocks above and below"): Yours to shape's darker dots
   in place of the section's own (the calculator's faint, even ones), strongest behind the middle and fading out every
   way, 320px past the section's top and bottom, so there is no edge. As .kx-dots-br, the sections either side are lifted
   over it, so the dots run behind their words and pictures; the blocks' own pages are see-through (site.js SEE_THROUGH) */
main > section.wf.kx-dots-tb { position: relative; isolation: isolate; background: transparent !important; }
main > section.wf:has(+ section.wf.kx-dots-tb), main > section.wf.kx-dots-tb + section.wf { position: relative; z-index: 1; }
main > section.wf.kx-dots-tb::before { content: ""; position: absolute; inset: -320px 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #c9aef2 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 75% 50% at 50% 50%, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 50% at 50% 50%, #000 0%, rgba(0,0,0,.55) 45%, transparent 100%); }

/* ---------- Knowledgebase & Data Definitions' Kept current on black (John, 11 October 2026) ----------
   "the whole content block is black with dot fade in it, full width": a band the width of the screen in Time back's
   #1f1e1d; faint purple dots fading out from "suggested update" in the words (.kx-kc-at, the dots drawn round it and
   clipped by the band); the words in white (as Our approach's .wf-people). The radar in tinted segments, drawn in the
   block itself (site.js blockLook sends --kx-dark:1). Chosen from the Kept current setting, which came off (data-kcdark
   is fixed in site.js FIXED). The band hugs the block (24px, the radar's stage has its own room) and the space round it
   is white (John: "make this extra padding white not black"): 224px above, so Market intel's hub rings fade out before
   the band (128px until John asked for more on 11 October 2026), 48px below (112px and 32px on a phone) */
html[data-kcdark^="black"] main > section.wf-kc { position: relative; isolation: isolate; overflow: hidden; background: #1f1e1d; padding: 24px 0; margin-top: 224px; margin-bottom: 48px; }
html[data-kcdark^="black"] main > section.wf-kc .kx-kc-at { position: relative; white-space: nowrap; }
html[data-kcdark^="black"] main > section.wf-kc .kx-kc-at::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2400px; height: 1400px;
  transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(192,132,252,.7) 1.5px, transparent 1.7px) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,.75) 14%, rgba(0,0,0,.3) 36%, transparent 62%);
          mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0,0,0,.75) 14%, rgba(0,0,0,.3) 36%, transparent 62%); }
html[data-kcdark^="black"] main > section.wf-kc + section.wf { padding-top: var(--section-gap); }
html[data-kcdark^="black"] main > section.wf-kc .wf-copy h2 { color: #ffffff; }
html[data-kcdark^="black"] main > section.wf-kc .wf-copy p:not(.eyebrow) { color: #d6d3cf; }
html[data-kcdark^="black"] main > section.wf-kc .wf-copy > .eyebrow { color: #d6d3cf; background: #1f1e1d; box-shadow: inset 0 0 0 1px #3a3734; }
html[data-kcdark^="black"] main > section.wf-kc .wf-copy > .eyebrow::before { background: #c084fc; }
@media (max-width: 640px) { html[data-kcdark^="black"] main > section.wf-kc { padding: 16px 0; margin-top: 112px; margin-bottom: 32px; } }
/* on a phone (John, 11 October 2026: "make a mobile version of the kept current") the dots round "suggested update" are
   quieter and closer in, so the heading and the words over them read cleanly (they ran the width of the words) */
@media (max-width: 560px) { html[data-kcdark^="black"] main > section.wf-kc .kx-kc-at::before { width: 760px; height: 620px; opacity: .55; } }
/* Kept current, Card (John, 11 October 2026: "make the Kept current a card not full width"; chosen from the Kept current
   shape setting, which came off: data-kcshape="card" is fixed in site.js FIXED): the section is white and its .wrap is the
   black card, the width of the page's content (1136px at most, the gutters either side), rounded as the content blocks'
   grounds (28px), 48px inside; its dots round "suggested update" stay inside the card (its own stacking context, clipped).
   (Kept current place, At the bottom, and Kept current dots, Above and below, came off the same day at After Market
   intel and Off) */
html[data-kcshape="card"] main > section.wf-kc { background: transparent; padding: 0; overflow: visible; }
html[data-kcshape="card"] main > section.wf-kc > .wrap { box-sizing: border-box; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--page-max) - 2 * var(--gutter));
  margin: 0 auto; padding: 48px; border-radius: 28px; background: #1f1e1d; overflow: hidden; isolation: isolate; }
@media (max-width: 640px) { html[data-kcshape="card"] main > section.wf-kc > .wrap { padding: 24px 16px; border-radius: 20px; } }

/* About us, Leadership team: each person's initials in a Kixi-purple circle, no photos (John, 11 October 2026) */
.wf-card .initials { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; margin-bottom: 14px;
  background: var(--primary); color: var(--primary-foreground); font: 600 24px/1 var(--font-display); letter-spacing: .02em; }

/* Phones: the uppercase labels above headings (.eyebrow, 10.5px by design) at 11px, the smallest size the go-live plan
   allows on a phone (stage 8 phone check, 11 October 2026) */
@media (max-width: 640px) { .eyebrow { font-size: 11px; } }