/* Kixi website wireframe: the wireframe-only parts.
   The bar at the top, section statuses, notes, and the placeholder boxes that stand in for content blocks.
   None of this goes to the real site. "Notes off" in the bar hides it all, to see just the page. */

/* Screen-reader-only text */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The wireframe bar */
.wf-bar {
  position: relative; z-index: 50; background: var(--foreground); color: #e9e5f2; font: 500 12px/16px var(--font-sans);
}
.wf-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 40px; padding-top: 6px; padding-bottom: 6px; }
.wf-bar strong { color: #fff; font-weight: 600; }
.wf-bar a { color: #e9e5f2; }
.wf-bar select, .wf-bar button {
  font: 500 12px/1 var(--font-sans); height: 28px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff; padding: 0 12px; cursor: pointer;
}
.wf-bar select { max-width: 230px; }
.wf-bar select option { color: var(--foreground); }
.wf-bar .wf-legend { display: flex; gap: 12px; margin-left: auto; color: #cfc8de; }
.wf-bar .wf-legend b { color: #fff; font-weight: 600; }
.wf-bar .wf-count { color: #cfc8de; }
.wf-bar .wf-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.25); }
.wf-bar .wf-seg button { height: 22px; border: 0; background: none; color: #cfc8de; padding: 0 10px; }
.wf-bar .wf-seg button[aria-pressed="true"] { background: #fff; color: var(--foreground); font-weight: 600; }
.wf-bar .wf-view-pick { display: inline-flex; align-items: center; gap: 6px; color: #cfc8de; }
.wf-bar .wf-original { font: 500 12px/1 var(--font-sans); height: 28px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid rgba(255,255,255,.35); background: transparent; color: #ffffff; cursor: pointer; }
.wf-bar .wf-original:hover { background: rgba(255,255,255,.12); }

/* The screen-size frame (the bar's Screen menu): the page drawn at a real screen's width, below the bar */
html.kx-viewing { overflow: hidden; }
html.kx-in-view .wf-bar { display: none; }
.wf-viewer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 14px 24px 24px; overflow: auto; background: var(--surface-sunken);
  background-image: radial-gradient(var(--border) 1px, transparent 1.2px); background-size: 18px 18px;
}
.wf-viewer[hidden] { display: none; }
.wf-viewer-cap { margin: 0; font: 500 12px/18px var(--font-sans); color: var(--control-foreground); text-align: center; }
.wf-viewer-cap b { font-weight: 600; color: var(--foreground); }
.wf-viewer-cap span { color: var(--muted-foreground); }
.wf-device { position: relative; flex: none; box-sizing: content-box; overflow: hidden; background: var(--background);
  border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: var(--shadow-front); }
.wf-device.is-device { border: 10px solid var(--foreground); border-radius: 28px; }
.wf-device iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: var(--background); }

/* A section */
.wf { padding: var(--section-gap) 0 0; }
.wf > .wrap { position: relative; }
.wf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wf-num {
  font: 600 11px/1 var(--font-sans); letter-spacing: .04em; color: var(--muted-foreground); background: var(--muted);
  border-radius: var(--radius-sm); padding: 5px 7px;
}
.wf-status { font: 600 11px/1 var(--font-sans); border-radius: var(--radius-full); padding: 5px 10px; }
.wf-status.block { background: var(--secondary); color: var(--secondary-foreground); }
.wf-status.content { background: var(--card); color: var(--control-foreground); box-shadow: inset 0 0 0 1px var(--input); }
.wf-status.needed { background: var(--surface-sunken); color: var(--muted-foreground); border: 1px dashed var(--input); padding: 4px 9px; }
.wf-note {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken);
  border-left: 3px solid var(--brand-light); font-size: 13px; line-height: 20px; color: var(--control-foreground);
}
.wf-note b { color: var(--foreground); font-weight: 600; }
.wf-note a { color: var(--link); }
body.notes-off .wf-head, body.notes-off .wf-note, body.notes-off .wf-tag { display: none !important; }
/* Preview (the bar's Preview / Show settings; John, 7 October 2026): the pills above each section and the wireframe's
   option pickers go, so the blocks look as they will on the site. Show settings brings them back. */
body.preview .wf-head, body.preview .wf-toggle, body.preview .wf-cardpic { display: none !important; }
.wf-head { flex-wrap: wrap; }
.wf-flag { font: 600 11px/1 var(--font-sans); border-radius: var(--radius-full); padding: 5px 10px; background: var(--foreground); color: #fff; }
.wf-build-btn {
  font: 600 11px/1 var(--font-sans); border-radius: var(--radius-full); padding: 5px 10px; border: 0; cursor: pointer;
  background: var(--card); color: var(--secondary-foreground); box-shadow: inset 0 0 0 1px var(--brand-light);
}
.wf-build-btn::before { content: "\270E\00a0"; }
.wf-build-btn:hover { background: var(--secondary); }
.wf-open { font-size: 12px; color: var(--link); }

/* Embedded content blocks */
.wf-frame { display: block; width: 100%; border: 0; background: transparent; }
.wf-full { max-width: 1440px; margin: 32px auto 0; padding: 0 16px; }
.wf-full.laptop { max-width: 992px; }
/* a frame the full width of the browser, its block's content still centred inside it: for a comet that flies in from the
   screen's left edge (Reports engine's hero, Board reports' The real thing; John, 10 October 2026). The section clips
   the scroll bar's width that 100vw adds */
main > section.wf > .wf-full.wf-edge { max-width: none !important; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 !important; }   /* over the feature heroes' 1314px */
main > section:has(> .wf-full.wf-edge) { overflow-x: clip; }   /* Solution components: 960px, 20% narrower than a laptop screen's 1200px, plus the gutters */
/* Home: every content block has a default max width (--block-max), except the sections marked .full (the hero, the
   features, the Sales AI Assistant marquee) */
main[data-page="index"] > .wf:not(.full) > .wrap { max-width: calc(var(--block-max) + 2 * var(--gutter)); }
main[data-page="index"] > .wf:not(.full) > .wf-full { max-width: calc(var(--block-max) + 32px); }
/* Home hero (John, 6 October 2026): the illustration's white, dotted ground runs to the browser's edges; the picture
   keeps its size. The illustration's own ground is see-through when embedded, so this band shows behind it. */
main[data-page="index"] > .wf.hero { overflow-x: clip; }
main[data-page="index"] > .wf.hero > .wf-full { position: relative; isolation: isolate; }
/* Home hero's picture up to 1000px wide, 16px each side included (John, 8 October 2026; tried at 1075px and back the same day); the ground behind it still
   runs to the browser's edges */
main[data-page="index"] > .wf.hero > .wf-full { max-width: 1000px; }
main[data-page="index"] > .wf.hero > .wf-full::before,
main[data-page="index"] > .wf.hero > .wf-full::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(50% - 50vw); width: 100vw; pointer-events: none; background: #fff; }
main[data-page="index"] > .wf.hero > .wf-full::after { background: radial-gradient(circle, #e9dff8 1.1px, transparent 1.3px) 0 0/18px 18px; }
/* On wide screens (wider than the 1440px picture plus a margin) the dots fade out towards each side; the white ground
   still runs to the edges (John, 6 October 2026). The fade starts 160px inside the picture's edges. */
@media (min-width: 1600px) {
  main[data-page="index"] > .wf.hero > .wf-full::after {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(50% - 560px), #000 calc(50% + 560px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 calc(50% - 560px), #000 calc(50% + 560px), transparent); }
}
/* The same ground as Home's hero, for any section marked .bleed (Market intel, John, 6 October 2026): white and dotted,
   running to the browser's edges behind the picture; the dots fade towards each side on wide screens. The block's own
   ground is see-through when embedded. */
.wf.bleed { overflow-x: clip; }
.wf.bleed > .wf-full { position: relative; isolation: isolate; }
.wf.bleed > .wf-full::before,
.wf.bleed > .wf-full::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(50% - 50vw); width: 100vw; pointer-events: none; background: #fff; }
.wf.bleed > .wf-full::after { background: radial-gradient(circle, #e9dff8 1.1px, transparent 1.3px) 0 0/18px 18px;
  /* fading out at the top and bottom (John, 10 October 2026), so the hub's rings, which run on under it, don't cross a hard edge */
  -webkit-mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 200px), transparent);
          mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 200px), transparent); }
@media (min-width: 1600px) {
  .wf.bleed > .wf-full::after {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 calc(50% - 560px), #000 calc(50% + 560px), transparent), linear-gradient(transparent, #000 120px, #000 calc(100% - 200px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 calc(50% - 560px), #000 calc(50% + 560px), transparent), linear-gradient(transparent, #000 120px, #000 calc(100% - 200px), transparent);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}
/* Market intel's dots (John, 11 October 2026: "make the centre of the dot fade bottom right"): strongest at the bottom
   right of the picture, behind Tama's phone, fading out from there, and clear of the ground's top and bottom edges. The
   ground runs on 140px under the frame, over the room its hub's rings have (data-room-bottom) */
main > section.wf.bleed.wf-mi > .wf-full::before,
main > section.wf.bleed.wf-mi > .wf-full::after { bottom: -140px; }
main > section.wf.bleed.wf-mi > .wf-full::after {
  -webkit-mask-image: radial-gradient(ellipse 1000px 520px at calc(50% + 400px) calc(100% - 220px), #000 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.18) 65%, transparent 100%), linear-gradient(transparent, #000 100px, #000 calc(100% - 140px), transparent);
          mask-image: radial-gradient(ellipse 1000px 520px at calc(50% + 400px) calc(100% - 220px), #000 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.18) 65%, transparent 100%), linear-gradient(transparent, #000 100px, #000 calc(100% - 140px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (max-width: 860px) {
  main > section.wf.bleed.wf-mi > .wf-full::after {
    -webkit-mask-image: radial-gradient(ellipse 120% 70% at 85% calc(100% - 180px), #000 0%, rgba(0,0,0,.5) 40%, transparent 100%), linear-gradient(transparent, #000 80px, #000 calc(100% - 140px), transparent);
            mask-image: radial-gradient(ellipse 120% 70% at 85% calc(100% - 180px), #000 0%, rgba(0,0,0,.5) 40%, transparent 100%), linear-gradient(transparent, #000 80px, #000 calc(100% - 140px), transparent); }
}
/* Sales AI Assistant hero (John, 9 October 2026): the cards at the page's width, lined up with the logo and Book a demo
   (was 1440px). The block keeps 16px each side inside the iframe for the cards' outline and shadow, so the gutter here
   is 16px less. 10% wider (John, 10 October 2026): the cards up to 1250px (were 1136px), 57px past the logo and Book a
   demo each side; 1250 + 2 × 16 inside the iframe + 2 × 16 here = 1314px.
   Every feature page's hero the same (John, 10 October 2026: "give them all the same max width as … Sales AI
   Assistant"): the frame at most 1282px wide (was 1440px less 16px each side). Add a new feature page to the list. */
main:is([data-page="sales-ai-assistant"], [data-page="board-reports"], [data-page="events-calendar"], [data-page="crm-automation"],
  [data-page="lead-generation"], [data-page="reports-engine"], [data-page="partner-management"], [data-page="online-training"],
  [data-page="product-demo"], [data-page="presentation-builder"], [data-page="ask-in-slack"]) > .wf.hero > .wf-full { max-width: 1314px; padding: 0 calc(var(--gutter) - 16px); }
/* Lead generation's hero 15% narrower (John, 10 October 2026): the frame at most 1090px (was 1282px); 1090 + 2 × 16 = 1122px */
main[data-page="lead-generation"] > .wf.hero > .wf-full { max-width: 1122px; }
/* Feature pages' blocks (John, 10 October 2026): each block is given 64px of room under it for its shadows (site.js,
   blockLook); the frame gives the 64px back, running over the space below, so the shadows fade out there instead of
   being cut off and nothing on the page moves */
iframe.wf-frame.kx-bleed { position: relative; z-index: 1; margin-bottom: -64px; }
/* ... and 32px each side, for shadows that reach past a stage's sides (John, 10 October 2026: Events calendar's Results
   cards were cut off at the frame's left edge): the frame is 64px wider and pulled out 32px each side, so the picture
   stays where it was and the same size; the page clips anything past the screen's edge, so a phone never scrolls sideways */
iframe.wf-frame.kx-bleed { width: calc(100% + 64px) !important; margin-left: -32px; margin-right: -32px; }   /* cap a bleeding frame's width on its .wf-full, never on the frame: an inline margin:0 auto beats the -32px and pushes it right on a phone (Claude Technology's hero, the Sales AI Assistant's review; frames.css) */
main:has(iframe.wf-frame.kx-bleed) { overflow-x: clip; }
/* ... and a frame with room above (data-room-top, site.js blockLook) moves up behind the words over it: the words stay
   on top, and can still be selected */
.wf:has(iframe.wf-frame[data-room-top]) > .wrap { position: relative; z-index: 2; }
/* ... and a frame with more room below (data-room-bottom) runs on behind the next section's words, which stay on top */
.wf:has(iframe.wf-frame[data-room-bottom]) + .wf > .wrap { position: relative; z-index: 2; }
/* A section with extra space above it (kx-space-above; John, 11 October 2026: Knowledgebase & Data Definitions' Kept
   current sat tight under Market intel's phones): 80px more on a computer, 40px on a phone */
.wf.kx-space-above { margin-top: 80px; }
@media (max-width: 640px) { .wf.kx-space-above { margin-top: 40px; } }
.wf-narrow { max-width: 792px; margin: 32px auto 0; padding: 0 16px; }   /* a tall block, centred under the words */
.wf-pick { display: grid; gap: 14px; justify-items: center; }
.wf-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.wf-toggle button { height: 32px; padding: 0 14px; border: 0; border-radius: var(--radius-full); background: none; cursor: pointer; font: 500 13px/1 var(--font-sans); color: var(--muted-foreground); }
.wf-toggle button:hover { background: var(--surface-sunken); color: var(--control-foreground); }
.wf-toggle button[aria-pressed="true"] { background: var(--secondary); color: var(--secondary-foreground); font-weight: 600; }

/* A page in another side-panel file (site.js, elsewhere()) */
.wf-bar .wf-part { color: #cfc8de; } .wf-bar .wf-part b { color: #fff; font-weight: 600; }
.wf-elsewhere { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(42,36,56,.32); }
.wf-elsewhere[hidden] { display: none; }
.wf-elsewhere-card { width: min(440px, 100%); background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow-front); padding: 24px; font-size: 14px; line-height: 22px; color: var(--foreground-secondary); }
.wf-elsewhere-card h2 { font-size: 18px; line-height: 24px; margin-bottom: 8px; }
.wf-elsewhere-card .wf-else-file { font: 600 13px/18px var(--font-sans); color: var(--secondary-foreground); background: var(--secondary); border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: 12px; }
.wf-elsewhere-card ul { margin: 6px 0 16px; padding-left: 18px; }
.wf-elsewhere-card a { color: var(--link); }

/* The side panel (build notes) */
.wf-panel-side { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.wf-panel-side .wf-scrim { position: absolute; inset: 0; background: rgba(42,36,56,.28); opacity: 0; transition: opacity .2s; }
.wf-panel-side aside {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--card); box-shadow: var(--shadow-front);
  transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column;
}
.wf-panel-side.open { pointer-events: auto; }
.wf-panel-side.open .wf-scrim { opacity: 1; }
.wf-panel-side.open aside { transform: none; }
.wf-panel-side header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
.wf-panel-side header h2 { font-size: 16px; line-height: 22px; flex: 1; }
.wf-close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; color: var(--foreground); }
.wf-panel-body { padding: 20px; overflow: auto; font-size: 14px; line-height: 22px; color: var(--foreground-secondary); }
.wf-panel-body h3 { font-size: 14px; line-height: 20px; margin: 18px 0 6px; }
.wf-panel-body h3:first-child { margin-top: 0; }
.wf-panel-body p, .wf-panel-body ul { margin: 0 0 10px; }
.wf-panel-body ul { padding-left: 18px; }
.wf-panel-body blockquote { margin: 0 0 10px; padding: 10px 14px; background: var(--surface-sunken); border-left: 3px solid var(--input); border-radius: var(--radius-md); }

/* Copy */
.wf-copy { max-width: 640px; }
.wf-copy.wf-copy-wide { max-width: 760px; }   /* a block whose words need the room (Home's How it works, John, 8 October 2026) */
.wf.hero .wf-copy { max-width: 820px; }
.wf-copy h1, .wf-copy h2, .wf-copy .display { margin-top: 8px; }
.wf-copy > p:not(.eyebrow):not(.wf-note) { margin-top: 12px; }
.wf-copy .pts { margin: 14px 0 0; padding: 0; list-style: none; }
.wf-copy .pts li { position: relative; padding-left: 18px; margin-top: 8px; font-size: 14px; line-height: 21px; }
.wf-copy .pts li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-light); }
.wf-copy .pts b { color: var(--foreground); font-weight: 600; }
.wf-copy .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Layouts */
.wf.hero .wf-copy, .wf.wide .wf-copy, .wf.cards .wf-copy, .wf.band .wf-copy, .wf.center .wf-copy { margin: 0 auto; text-align: center; }
.wf.hero .wf-head, .wf.wide .wf-head, .wf.cards .wf-head, .wf.band .wf-head, .wf.center .wf-head { justify-content: center; }
.wf.hero .wf-copy .btns, .wf.wide .wf-copy .btns, .wf.band .wf-copy .btns, .wf.center .wf-copy .btns { justify-content: center; }
.wf.hero .wf-note, .wf.wide .wf-note, .wf.cards .wf-note, .wf.band .wf-note, .wf.center .wf-note { text-align: left; }
.wf.hero { padding-top: 40px; }
.wf.hero .wf-vis, .wf.wide .wf-vis { margin-top: 32px; }
.wf.split > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.wf.flip > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.wf.flip .wf-copy { order: 2; }
.wf.half > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wf.form-left > .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.wf.form-right > .wrap { align-items: start; }
.wf-card ul { margin: 8px 0 0; padding-left: 18px; }
.wf-card li { margin-top: 4px; }
.wf.split .wf-head, .wf.flip .wf-head { grid-column: 1 / -1; margin-bottom: -28px; }
.wf.text .wf-copy { max-width: 760px; }

/* The words and the picture on one ground (Home, Same data. Different answers.; John, 7 October 2026): the content
   blocks' stage ground (pale, dotted, a hairline ring), round the copy and the embedded block, whose own ground is off */
.wf-ground { position: relative; isolation: isolate; border-radius: 28px; padding: 48px 32px 12px; box-shadow: inset 0 0 0 1px var(--hairline);
  background: #ffffff; }
/* Yours to shape's dots (John, 8 October 2026): darker (#c9aef2), strongest top right, fading out to the bottom left
   (they were the faint, even brand-dot grid on the page's ground) */
.wf-ground::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle, #c9aef2 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom left, #000 0%, rgba(0,0,0,.55) 40%, transparent 85%);
          mask-image: linear-gradient(to bottom left, #000 0%, rgba(0,0,0,.55) 40%, transparent 85%); }
/* its button on solid white, so the dots don't show through (John, 8 October 2026) */
.wf .wf-ground .btns .btn-secondary { background: #ffffff; }
.wf .wf-ground .btns .btn-secondary:hover { background: #f6f5f8; }
.wf-ground > .wf-frame { margin-top: 4px; }   /* + the carousel's own 36px top padding: 40px from the button, as How it works */

@media (max-width: 640px) { .wf-ground { padding: 32px 12px 8px; border-radius: 20px; } }

/* The placeholder for a content block or picture */
.wf-vis {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  aspect-ratio: 720 / 540; border-radius: var(--radius-2xl); padding: 24px; font-size: 13px; line-height: 19px;
}
.wf.hero .wf-vis, .wf.wide .wf-vis { aspect-ratio: 1120 / 500; }
.wf-vis.short { aspect-ratio: 1120 / 300 !important; }
.wf-vis.photo { aspect-ratio: 4 / 5; max-width: 420px; }
.wf-vis b { font: 600 15px/20px var(--font-display); color: var(--foreground); }
.wf-vis a { font-weight: 600; }
/* A block exists: the stage ground, dot grid and ring of the content blocks */
.wf-vis.block {
  background: var(--brand-pale) radial-gradient(var(--brand-dot) 1.2px, transparent 1.4px) 0 0 / 18px 18px;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
/* No block yet: hatched */
.wf-vis.content, .wf-vis.needed {
  background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 12px, var(--muted) 12px 24px);
  border: 1.5px dashed var(--input);
}
.wf-vis .wf-tag { font: 600 10.5px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }

/* Cards */
/* Cards wrap in rows and centre, so a short last row (or a row of three) sits in the middle, not to the left */
.wf-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 32px; }
.wf-cards > * { flex: 0 0 calc((100% - 48px) / 4); min-width: 0; }
.wf-cards.c2 > * { flex-basis: calc((100% - 32px) / 3); }
/* A picture drawn smaller than its column (Working with your people: 80%, John 5 October 2026) */
.wf-small { width: 80%; justify-self: center; }
@media (max-width: 860px) { .wf-small { width: 100%; } }
@media (max-width: 1000px) { .wf-cards > *, .wf-cards.c2 > * { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 560px) { .wf-cards > *, .wf-cards.c2 > * { flex-basis: 100%; } }
/* The feature cards, one row (Home): four across, two on a tablet, two stacked on a phone; the rest are on What we build */
.wf-cards.one-row { display: grid; grid-template-columns: repeat(var(--cards, 4), minmax(0, 1fr)); }
.wf-cards.one-row > :nth-child(n+5) { display: none; }
@media (max-width: 900px) { .wf-cards.one-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wf-cards.one-row > :nth-child(n+3) { display: none; } }
@media (max-width: 560px) { .wf-cards.one-row { grid-template-columns: 1fr; } }
.wf.cards .wf-more, .wf-showmore { display: flex; justify-content: center; margin-top: 28px; }
/* Sales heading: Right (the bar, John, 8 October 2026): Sales AI Assistant's words on the right, aligned right, the link on the left */
html[data-sales="right"] .wf .wf-sales-head { flex-direction: row-reverse; }
html[data-sales="right"] .wf .wf-sales-head .wf-copy { text-align: right; }
@media (max-width: 640px) { html[data-sales="right"] .wf .wf-sales-head { flex-direction: column; align-items: flex-end; } }
/* Yours to shape's wave and dot (K2, Highlight and squiggle options.html), as an ornament: under Home's feature cards */
.wf-squiggle { width: 160px; height: 16px; margin-top: 32px;
  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") left center / contain no-repeat; }
/* A heading on the left and a text link on the right (Home's Features and Sales AI Assistant, John, 8 October 2026) */
.wf .wf-cards-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; margin-bottom: 16px; }
.wf .wf-cards-head .wf-copy { margin: 0; text-align: left; max-width: 640px; }
.wf .wf-cards-head .wf-head { justify-content: flex-start; }
.wf-textlink { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 16px; line-height: 24px; font-weight: 600;
  color: var(--primary); text-decoration: none; white-space: nowrap; }
.wf-textlink::after { content: "\2192"; font-size: 17px; line-height: 1; transition: transform .2s ease; }
.wf-textlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.wf-textlink:hover::after { transform: translateX(3px); }
.wf-textlink:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
.wf-cards > [hidden] { display: none; }
.wf-card {
  display: block; background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 20px;
  text-decoration: none; color: var(--foreground-secondary); font-size: 14px; line-height: 21px;
}
.wf-card h3 { font-size: 16px; line-height: 22px; margin-bottom: 6px; }
a.wf-card:hover { box-shadow: var(--shadow-front); }
a.wf-card h3::after { content: " →"; color: var(--primary); }
.wf-card .ph { display: block; height: 72px; border-radius: var(--radius-lg); margin-bottom: 14px; background: var(--brand-pale) radial-gradient(var(--brand-dot) 1.2px, transparent 1.4px) 0 0 / 14px 14px; box-shadow: inset 0 0 0 1px var(--hairline); }
.wf-card .ph.none { background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 10px, var(--muted) 10px 20px); box-shadow: inset 0 0 0 1px var(--border); }
.wf-card .ph.round { width: 72px; border-radius: 50%; }
/* Content cards with an icon (About us, John, 11 October 2026: "style the content blocks in cards with icons, maybe 2 per
   row"): white cards as .wf-card, two to a row (one on a phone), .span2 across both; the icon tile is the Claude platform
   block's (a solid colour tile, a white line icon), larger. The words run the card's full width. */
.wf-icards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wf-icard { background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 28px; color: var(--foreground-secondary); font-size: 15px; line-height: 24px; display: flex; flex-direction: column; }
.wf-icard.span2 { grid-column: 1 / -1; }
.wf-icard .wf-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--c, var(--primary)); color: #ffffff; margin-bottom: 18px; }
.wf-icard .wf-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wf-icard .wf-ilabel { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 6px; }
.wf-icard h3 { font-size: 22px; line-height: 30px; margin: 0 0 10px; }
.wf-icard p + p { margin-top: 12px; }
.wf-icard .btns { margin-top: auto; padding-top: 20px; }
@media (max-width: 720px) { .wf-icards { grid-template-columns: 1fr; } .wf-icard { padding: 22px; } .wf-icard h3 { font-size: 20px; line-height: 27px; } }
/* The feature cards' pictures (site.js, CARDPIC; W11): A, the hero in miniature, 16:10 on the dotted ground; F (.pic-f on
   the cards), 4:3 on lilac (or .pic-blue chart-2-pale, .pic-green state-on-pale), the same drawing bigger, tilted and bleeding off the edge. Each is a 320 x 200 stage scaled
   to the card (--k). Colours not in theme.css are copied from tokens.json here. Striped where a page has no hero yet. */
.cp-th {
  --chart-2: #60a5fa; --chart-2-light: #bfdbfd; --chart-2-pale: #eff6ff; --chart-4: #f58cc6; --chart-bar: #d9d9df; --chart-bar-border: #8e8e9a;
  --state-above: #9d52f0; --state-above-fill: #e9d9fc; --state-above-text: #763eb4;
  --state-on: #5eb22e; --state-on-fill: #cdeab5; --state-on-pale: #f5faf2; --state-on-text: #3b701d;
  --state-near: #f59e0b; --state-near-fill: #fdeac9; --state-near-pale: #fef5e7; --state-near-text: #a84f00;
  --state-below: #ff5c5c; --state-below-fill: #ffdbdb; --state-below-text: #b03f3f;
  --shadow-win: 0 0 0 1px rgba(36,20,70,.06), 0 1px 2px rgba(36,20,70,.08), 0 14px 28px -14px rgba(36,20,70,.32);
  position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden;
  background: var(--brand-pale) radial-gradient(var(--brand-dot) 1.2px, transparent 1.4px) 0 0 / 12px 12px;
}
.cp-th::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--hairline); pointer-events: none; }
.cp-th.none { background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 10px, var(--muted) 10px 20px); }
.cp-th.none::after { box-shadow: inset 0 0 0 1px var(--border); }
.cp-sc { position: absolute; left: 0; top: 0; width: 320px; height: 200px; transform-origin: 0 0; transform: scale(var(--k, .64)); transition: transform .35s ease; }
a.wf-card:hover .cp-sc { transform: scale(calc(var(--k, .64) * 1.05)) translate(-6px, -4px); }
.pic-f .cp-th { aspect-ratio: 4 / 3; background: var(--secondary); }
.pic-f .cp-th::after { box-shadow: inset 0 0 0 1px var(--state-above-fill); }
.pic-blue .cp-th { background: var(--chart-2-pale); }
.pic-blue .cp-th::after { box-shadow: inset 0 0 0 1px var(--chart-2-light); }
.pic-green .cp-th { background: var(--state-on-pale); }
.pic-green .cp-th::after { box-shadow: inset 0 0 0 1px var(--state-on-fill); }
.pic-f .cp-th.none { background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 10px, var(--muted) 10px 20px); }
.pic-f .cp-sc { transform: scale(calc(var(--k, .64) * 1.3)) translate(34px, 36px) rotate(-5deg); }
.pic-f a.wf-card:hover .cp-sc { transform: scale(calc(var(--k, .64) * 1.36)) translate(28px, 30px) rotate(-3deg); }
.cp-sc * { position: absolute; }
.cp-win { background: #fff; border-radius: 10px; box-shadow: var(--shadow-win); overflow: hidden; }
.cp-win > .cp-bar { left: 0; right: 0; top: 0; height: 16px; background: var(--brand-pale); border-bottom: 1px solid var(--hairline); }
.cp-win > .cp-bar i { top: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--chart-bar); }
.cp-win > .cp-bar i:nth-child(1) { left: 7px; } .cp-win > .cp-bar i:nth-child(2) { left: 13px; } .cp-win > .cp-bar i:nth-child(3) { left: 19px; }
.cp-win > .cp-bar b { left: 30px; top: 3px; height: 10px; padding: 0 6px; border-radius: 99px; background: var(--muted); font: 500 6px/10px var(--font-sans); color: var(--muted-foreground); white-space: nowrap; }
.cp-gh { height: 4px; border-radius: 3px; background: var(--muted); }
.cp-t { white-space: nowrap; font: 600 8px/10px var(--font-sans); color: var(--foreground); }
.cp-t.cp-d { font-family: var(--font-display); }
.cp-ey { white-space: nowrap; font: 700 5.5px/7px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.cp-sm { white-space: nowrap; font: 500 6px/8px var(--font-sans); color: var(--muted-foreground); }
.cp-pill { white-space: nowrap; font: 700 6px/10px var(--font-sans); height: 10px; padding: 0 5px; border-radius: 99px; }
.cp-p-on { background: var(--state-on-fill); color: var(--state-on-text); }
.cp-p-near { background: var(--state-near-fill); color: var(--state-near-text); }
.cp-p-below { background: var(--state-below-fill); color: var(--state-below-text); }
.cp-p-above { background: var(--state-above-fill); color: var(--state-above-text); }
.cp-tile { border-radius: 4px; }
.cp-toast { background: #fff; border-radius: 10px; box-shadow: var(--shadow-toast); padding: 8px 12px 8px 34px; white-space: nowrap; }
.cp-toast::before { content: ""; position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--state-on-fill); }
.cp-toast::after { content: ""; position: absolute; left: 15px; top: 50%; width: 6px; height: 3px; margin-top: -3px; border-left: 1.6px solid var(--state-on-text); border-bottom: 1.6px solid var(--state-on-text); transform: rotate(-45deg); }
.cp-toast .cp-t, .cp-toast .cp-sm { position: static; display: block; }
.cp-toast .cp-t { font-size: 9.5px; line-height: 12px; }
.cp-toast .cp-sm { font-size: 7px; line-height: 10px; margin-top: 1px; }
.cp-hub { width: 0; height: 0; }
.cp-hub .cp-disc { left: -27px; top: -27px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: radial-gradient(circle at 30% 25%, var(--brand-light), var(--primary) 55%, var(--primary-hover)); box-shadow: 0 8px 20px -6px rgba(138,43,226,.55), inset 0 0 0 2px rgba(255,255,255,.18); }
.cp-hub .cp-disc svg, .cp-hub .cp-disc span { position: static; }
.cp-hub .cp-disc svg { width: 15px; height: 15px; }
.cp-hub .cp-disc span { font: 600 6px/1.1 var(--font-display); color: #fff; margin-top: 1px; white-space: nowrap; }
.cp-hub .cp-ring { border-radius: 50%; border: 1.5px solid var(--brand-lilac); }
.cp-hub-tag { white-space: nowrap; transform: translateX(-50%); font: 600 6.5px/9px var(--font-sans); color: var(--primary-hover); background: #fff; border-radius: 99px; padding: 3px 7px; box-shadow: inset 0 0 0 1px var(--brand-lilac); }
/* The A / F toggle above the cards (wireframe only, until John picks) */
.wf-cardpic { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; }
.wf-cardpic > span { font: 600 10.5px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.wf-cardpic + .wf-cards { margin-top: 20px; }
.wf-menupick { margin: 16px 0 -16px; }   /* Home's Top menu toggle, above the hero (8 October 2026) */
@media (max-width: 560px) { .wf-cardpic > span { display: none; } }

/* A call-to-action band */
.wf.band > .wrap > .wf-panel { background: var(--secondary); border-radius: var(--radius-2xl); padding: 48px 32px; }

/* Forms */
.wf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 24px; max-width: 720px; }
.wf-form label { display: block; font: 600 12px/16px var(--font-sans); color: var(--foreground); }
.wf-form .full { grid-column: 1 / -1; }
.wf-form .field { display: block; height: 40px; margin-top: 6px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--input); background: var(--card); font: 400 13px/40px var(--font-sans); color: var(--muted-foreground); padding: 0 12px; }
.wf-form .field.tall { height: 96px; }
.wf-form .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wf-form .opts span { border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--input); padding: 6px 12px; font-size: 13px; color: var(--control-foreground); }

/* Site map (wireframe only) */
.sm { margin-top: 32px; display: grid; gap: 16px; }
.sm-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 16px 20px; }
.sm-row.child { margin-left: 32px; }
.sm-row a { font: 600 16px/22px var(--font-display); color: var(--foreground); text-decoration: none; }
.sm-row a:hover { text-decoration: underline; }
.sm-row .sm-where { font-size: 12px; color: var(--muted-foreground); }
.sm-row .sm-tally { font-size: 12px; color: var(--control-foreground); white-space: nowrap; }

@media (max-width: 860px) {
  .wf.split > .wrap, .wf.flip > .wrap { grid-template-columns: 1fr; gap: 24px; }
  .wf.flip .wf-copy { order: 0; }
  .wf.split .wf-head, .wf.flip .wf-head { margin-bottom: 0; }
  .wf-form { grid-template-columns: 1fr; }
  .wf-bar .wf-legend { margin-left: 0; }
  .sm-row.child { margin-left: 16px; }
}

/* In the one file, page links have no address (the side panel would offer to open it): they still look and act like links */
a[data-go], a[role="link"] { cursor: pointer; }

/* Common questions: the parked ones (recorded, not on the site at go-live), in a dashed box that Notes off hides */
.wf-parked { display: grid; gap: 10px; margin-top: 36px; padding: 16px; border: 1px dashed var(--input); border-radius: var(--radius-xl); background: var(--surface-sunken); }
.wf-parked-head { font: 600 12px/16px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted-foreground); }
.wf-parked-group { font: 600 11px/1 var(--font-sans); color: var(--muted-foreground); background: var(--muted); border-radius: var(--radius-sm); padding: 5px 7px; align-self: center; }
.wf-parked summary { justify-content: flex-start; align-items: center; }
.wf-parked summary::after { margin-left: auto; }
.wf-parked-note { color: var(--muted-foreground); font-style: italic; }
body.notes-off .wf-parked { display: none !important; }

/* ---------- A test: the cost calculator (Home, under Features; John, 8 October 2026, after taskly.co.nz) ----------
   On the hero's dotted ground (was the reference's warm light grey), the reference's warm near-black card, Kixi purple for the sliders and button. */
.wf.wf-calc-sec { background: radial-gradient(circle, #e9dff8 1.1px, transparent 1.3px) 0 0/18px 18px, #ffffff !important; padding: 48px 0; margin-top: var(--section-gap); }   /* the hero's dotted ground (John, 8 October 2026: dots, not the grey) */
.wf.wf-calc-sec + section.wf { margin-top: 0; }
.wf-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 56px; align-items: center;
  background: #1f1e1d; color: #ffffff; border-radius: 24px; padding: 80px 72px; max-width: 1240px; margin: 0 auto; }
.wf.wf-calc-sec > .wrap { max-width: 1320px; }
.wf-calc-copy h2 { color: #ffffff; font-size: 44px; line-height: 50px; letter-spacing: -0.025em; }
.wf-calc-copy p { color: #d6d3cf; font-size: 18px; line-height: 30px; margin-top: 20px; max-width: 560px; }
.wf-calc-copy .btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }
.wf-calc-copy .btn-primary { height: auto; min-height: 48px; padding: 12px 26px; font-size: 16px; }
.wf-calc-link { color: #ffffff; font-weight: 600; font-size: 16px; text-decoration: none; }
.wf-calc-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.wf-calc-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.wf-calc-slider { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 18px 8px; cursor: pointer; }
.wf-calc-label { color: #c9c6c1; font-size: 14px; white-space: nowrap; }
.wf-calc-slider b { color: #ffffff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.wf-calc-slider input { grid-column: 1 / -1; width: 100%; margin: 0; height: 20px; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.wf-calc-slider input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--primary) var(--p, 0%), #55524e var(--p, 0%)); }
.wf-calc-slider input::-moz-range-track { height: 4px; border-radius: 4px; background: #55524e; }
.wf-calc-slider input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--primary); }
.wf-calc-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%;
  background: var(--primary); border: 0; box-shadow: 0 0 0 4px #1f1e1d; }
.wf-calc-slider input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); border: 0; box-shadow: 0 0 0 4px #1f1e1d; }
.wf-calc-slider input:focus-visible { outline: 2px solid #c084fc; outline-offset: 6px; border-radius: 4px; }
.wf-calc-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.wf-calc-results > div { border-top: 1px solid #45423e; padding-top: 24px; }
.wf-calc-results b { display: block; color: #ffffff; font: 600 clamp(34px, 3.3vw, 48px)/1.05 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.wf-calc-results span { display: block; color: #c9c6c1; font-size: 15px; line-height: 22px; margin-top: 14px; }
@media (max-width: 1000px) {
  .wf-calc { grid-template-columns: minmax(0, 1fr); padding: 56px 40px; }
}
@media (max-width: 640px) {
  .wf.wf-calc-sec { padding: 28px 0; }
  .wf-calc { padding: 36px 22px; border-radius: 20px; gap: 36px; }
  .wf-calc-copy h2 { font-size: 30px; line-height: 36px; }
  .wf-calc-copy p { font-size: 16px; line-height: 26px; }
  .wf-calc-sliders { grid-template-columns: minmax(0, 1fr); }
  .wf-calc-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
  .wf-calc-results b { font-size: clamp(24px, 8vw, 34px); }   /* $416,000 (40 hours at $200) fits a small phone */
}

/* ---------- Home's questions, taskly.co.nz's layout (John, 8 October 2026) ----------
   The heading on the left, the questions on the right between hairlines, each with a + in a grey circle. */
.wf-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px 72px; align-items: start; }
.wf-faq-split .wf-copy { margin: 0; text-align: left; max-width: none; }
.wf-faq-split .wf-copy h2 { font-size: 44px; line-height: 50px; letter-spacing: -0.025em; }
.wf-faq-split .wf-copy > p:not(.eyebrow) { margin-top: 20px; font-size: 17px; line-height: 28px; }
.wf-faq-split .wf-copy > p a { color: var(--primary); font-weight: 600; text-decoration: none; }
.wf-faq-split .wf-copy > p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wf-faq-split .wf-copy > p a.kx-key { color: #6a17b8; padding: 3px 10px; border-radius: 99px; box-shadow: inset 0 0 0 1px #e3cdfd; }   /* Yours to shape's tag: 2px 8px at 15px, a pill */
.wf-faq-split .wf-copy > p a.kx-key:hover { text-decoration: none; background: #ede0ff; }   /* the tag highlight, a link (frames.css .kx-key) */
.wf-faq-split .wf-copy .btns { justify-content: flex-start; margin-top: 24px; }
.wf.wf-faq-split .faq { max-width: none; margin: 0; gap: 0; }
.wf.wf-faq-split .faq details { background: none; box-shadow: none; border-radius: 0; padding: 0; border-bottom: 1px solid var(--border); }
.wf.wf-faq-split .faq details:first-child { border-top: 1px solid var(--border); }
.wf.wf-faq-split .faq summary { align-items: center; padding: 20px 0; font: 500 16px/24px var(--font-sans); }   /* not bold (John, 8 October 2026): the text font, Inter, at medium; Poppins only comes in its bold weights here (was 600 17px Poppins) */
.wf.wf-faq-split .faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #f1f0f4; color: var(--foreground); font: 400 22px/1 var(--font-sans); transition: background .2s; }
.wf.wf-faq-split .faq summary:hover::after { background: #e4e2e9; }
.wf.wf-faq-split .faq details[open] summary::after { content: "\2212"; }
.wf.wf-faq-split .faq details p, .wf.wf-faq-split .faq-a ul { font-size: 15px; line-height: 24px; max-width: 680px; }
.wf.wf-faq-split .faq details p { padding-bottom: 22px; }
@media (max-width: 1240px) {   /* the heading above, so each question keeps one line (John, 8 October 2026) */
  .wf-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .wf-faq-split .wf-copy h2 { font-size: 34px; line-height: 40px; }
}

/* An example under a hero's words (John, 10 October 2026, CRM automation: the words say what we do in general, the
   picture is one example of it): one line in a small, subtle speech bubble, its tail pointing down to the picture,
   "e.g." in a purple tag (John, 10 October 2026: "make the yellow card smaller and more subtle"; it was orange,
   state-near, with a numbered tag over the line). Brand-pale ground, a brand-lilac edge, the tag secondary in deep purple.
   The tag holds "e.g." and the example's name together (John, 10 October 2026: "make all … the same as the styling for e.g.") */
.wf-example { position: relative; max-width: 620px; margin: 24px auto 0; padding: 10px 18px 11px; text-align: center;
  background: #fcf9ff; border: 1px solid #e3cdfd; border-radius: 14px; }
.wf-example::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: #fcf9ff; border: 1px solid #e3cdfd; border-top: 0; border-left: 0; transform: rotate(45deg); border-bottom-right-radius: 3px; }
.wf-example p { margin: 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.wf-example p b { color: var(--foreground); font-weight: 600; }
.wf-example-tag { display: inline-block; padding: 1px 7px; margin-right: 2px; border-radius: 6px; background: #f5ecff; color: #6a17b8;
  font: 600 12px/18px var(--font-sans); }
/* the wave and dot, centred under a hero's lede */
.wf-squiggle.wf-squiggle-c { margin: 24px auto 0; background-position: center; }

/* How you manage and evolve it: the hero, left / right (John, 11 October 2026; chosen from a setting the same day, now
   off): the words on the left, aligned left, with Yours to shape's wave and dot under the heading, and G3's picture on
   the right, the rings from its Ask circle behind (frames.css .wf-hubrings). On a phone it stacks, centred */
main[data-page="manage-and-evolve"] > .wf.hero > .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 56px; align-items: center; }
main[data-page="manage-and-evolve"] > .wf.hero > .wrap > .wf-head { grid-column: 1 / -1; justify-content: flex-start; }
main[data-page="manage-and-evolve"] > .wf.hero .wf-copy { margin: 0; max-width: none; text-align: left; }
main[data-page="manage-and-evolve"] > .wf.hero > .wrap > .wf-frame { margin-top: 0 !important; }
main[data-page="manage-and-evolve"] .wf-squig-h::after { content: ""; display: block; width: 160px; height: 16px; margin: 18px 0 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; }
/* the rings reach further here, about 760px, so they carry on down behind The power to build below (John, 11 October 2026:
   "the fade should be allowed to go behind the content block below"); that block has no card, so they show through it */
/* then (the same day: "dont make the background circles animate", "only go out 70% of the size"): still, and about 530px;
   and (the same day: "allow the background circles to go behind the menu", as Claude Technology's hero, frames.css): the
   layer starts 400px above the page, its centre moved down by the same 400px, so the rings run up behind the breadcrumbs
   and the menu, which is clear until the page scrolls under it */
/* and (the same day: "adjust background so the first background circle matches the Ask circle, but is behind it"): the
   rings are set out from the Ask circle's edge, not its centre. The first sits 2px inside the edge (--hr, its radius,
   measured by site.js, less 2px), under the circle, so it doesn't show; the next is 32px out, as the rest. Was: every
   32px from the centre, so the first ran 2px outside the 60px circle, hugging it */
main[data-page="manage-and-evolve"] > .wf-hubrings-layer { top: -400px; animation: none;
  background: repeating-radial-gradient(circle at var(--hx, 20%) calc(var(--hy, 30%) + 400px), transparent 0, transparent calc(var(--hr, 30px) - 3px),
    #e3cdfd calc(var(--hr, 30px) - 3px), #e3cdfd calc(var(--hr, 30px) - 2px), transparent calc(var(--hr, 30px) - 2px), transparent 32px);
  -webkit-mask-image: radial-gradient(circle 532px at var(--hx, 20%) calc(var(--hy, 30%) + 400px), #000 0%, rgba(0,0,0,.6) 40%, transparent 100%);
          mask-image: radial-gradient(circle 532px at var(--hx, 20%) calc(var(--hy, 30%) + 400px), #000 0%, rgba(0,0,0,.6) 40%, transparent 100%); }
html[data-current="manage-and-evolve"] .crumbs-host { position: relative; z-index: 2; }
/* Build something new: squares fading out from the Partner quote card (John, 11 October 2026: "add a square fade with
   centre on partner quote card. allow background fade into content above and below"): Events calendar's squares (40px,
   brand-dot lines), a 640 x 460px fade centred on the card (data-dotfocus on the section, the point on the block's stage
   worked out by site.js dotFocus as --kx-fx, --kx-fy), the ground running 300px above and below the section, so the fade
   carries on behind The power to build and Safe to change with no hard edge. Behind every section's words and pictures */
main[data-page="manage-and-evolve"] > section.kx-sqfade { position: relative; }
main[data-page="manage-and-evolve"] > section.kx-sqfade::before { content: ""; position: absolute; inset: -300px 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 var(--kx-fx, 75%) calc(var(--kx-fy, 50%) + 300px), #000 25%, rgba(0,0,0,.45) 55%, transparent 85%);
          mask-image: radial-gradient(640px 460px at var(--kx-fx, 75%) calc(var(--kx-fy, 50%) + 300px), #000 25%, rgba(0,0,0,.45) 55%, transparent 85%); }
@media (max-width: 640px) { main[data-page="manage-and-evolve"] > section.kx-sqfade::before {
  -webkit-mask-image: radial-gradient(420px 360px at var(--kx-fx, 75%) calc(var(--kx-fy, 50%) + 300px), #000 25%, rgba(0,0,0,.45) 55%, transparent 85%);
          mask-image: radial-gradient(420px 360px at var(--kx-fx, 75%) calc(var(--kx-fy, 50%) + 300px), #000 25%, rgba(0,0,0,.45) 55%, transparent 85%); } }
/* Safe to change (John, 11 October 2026): Yours to shape's wave under the heading in Kixi's red (state-below #ff5c5c),
   ending in a red padlock instead of the dot (.wf-squig-h.kx-lock), and the pill's dot red (.kx-red) */
main[data-page="manage-and-evolve"] .wf-squig-h.kx-lock::after { width: 168px; height: 26px; margin: 14px 0 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 168 26'%3E%3Cpath d='M2 15c10-8 18-8 28 0s18 8 28 0 18-8 28 0 18 8 28 0 18-8 28 0' fill='none' stroke='%23ff5c5c' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M152 11.5V8a5 5 0 0 1 10 0v3.5' fill='none' stroke='%23ff5c5c' stroke-width='2.6' stroke-linecap='round'/%3E%3Crect x='148.5' y='11' width='17' height='13.5' rx='3' fill='%23ff5c5c'/%3E%3Ccircle cx='157' cy='17.2' r='1.9' fill='%23fff'/%3E%3C/svg%3E") left center / contain no-repeat; }
@media (max-width: 640px) { main[data-page="manage-and-evolve"] .wf-squig-h.kx-lock::after { width: 134px; height: 21px; margin-top: 10px; } }
main > section.wf.kx-red .wf-copy > .eyebrow::before { background: #ff5c5c; }
html[data-current="manage-and-evolve"] .site-header:not(.is-scrolled):not(.menu-open) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 860px) {
  main[data-page="manage-and-evolve"] > .wf.hero > .wrap { display: block; }
  main[data-page="manage-and-evolve"] > .wf.hero .wf-copy { text-align: center; margin: 0 auto; }
  main[data-page="manage-and-evolve"] > .wf.hero > .wrap > .wf-frame { margin-top: 32px !important; }
  main[data-page="manage-and-evolve"] .wf-squig-h::after { margin: 12px auto 4px; width: 128px; height: 13px; }
}