/* =====================================================================================================================
   owns.ai  -  MARKETING STYLES

   The home page funnel, pricing (including the .plan-card markup js/pricing.js writes, which billing reuses), about,
   support, legal, guides, and the build-progress overlay from js/builder.js (.bld-*). Tokens from app.css only, so
   both themes hold.

   Coded By Darko G.
   ===================================================================================================================== */

/* ---- SHARED -------------------------------------------------------------------------------------------------------- */

.mk-head { max-width: 780px; margin: 0 auto 52px; }
.mk-head.center { text-align: center; }
.mk-head .lead { margin-bottom: 0; }
.mk-h-sm { font-size: 1.4rem; }
.mk-checks { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; }
.mk-checks li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.mk-checks i { color: var(--success); margin-top: 4px; }

.mk-page-hero { padding: 84px 0 40px; position: relative; }
.mk-page-hero h1 { margin-bottom: 18px; }
.mk-legal-hero { padding-bottom: 8px; }

.mk-prose { font-size: 1.04rem; color: var(--text-2); }
.mk-prose h2 { font-size: 1.5rem; margin-top: 2em; }
.mk-prose h3 { font-size: 1.1rem; margin-top: 1.4em; }
.mk-prose ul { padding-left: 1.2em; }
.mk-prose li { margin: .35em 0; }
.mk-legal h2 { font-size: 1.25rem; }

/* ---- HERO ---------------------------------------------------------------------------------------------------------- */

/* The cursor glow is NOT clipped by the hero: the hero clips sideways only (overflow-x: clip, which unlike hidden
   leaves the vertical axis visible), and the glow layer reaches 560px below the hero, so the light spills over into the
   next section and dies away on its own radial falloff instead of being sliced off where the hero ends. --mx/--my are
   pixels from the hero's top-left corner (js/home.js). */
.mk-hero { position: relative; padding: 72px 0 40px; overflow: hidden; --mx: 70%; --my: 260px; }
@supports (overflow: clip) { .mk-hero { overflow: visible; overflow-x: clip; } }    /* older browsers keep the plain clip */
.mk-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: -560px; pointer-events: none; z-index: 0;
                   background: radial-gradient(600px 420px at var(--mx) var(--my), rgba(0, 155, 219, .22), rgba(0, 155, 219, .07) 38%, transparent 66%); }
.mk-hive { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block;
            -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 34%, #000 28%, rgba(0, 0, 0, .45) 58%, transparent 82%);
            mask-image: radial-gradient(ellipse 78% 72% at 50% 34%, #000 28%, rgba(0, 0, 0, .45) 58%, transparent 82%); }
/* side by side, the hive stays behind the visual: the copy column sits on the plain page, and the cells ease in across
   the gap between the columns (an eased ramp, so there is no visible edge), intersected with the radial falloff above
   moved over to the right */
@media (min-width: 981px) {
    .mk-hive { -webkit-mask-image: linear-gradient(90deg, transparent 42%, rgba(0, 0, 0, .08) 48%, rgba(0, 0, 0, .3) 54%, rgba(0, 0, 0, .7) 61%, #000 68%),
                                   radial-gradient(ellipse 70% 78% at 68% 38%, #000 30%, rgba(0, 0, 0, .45) 60%, transparent 84%);
               -webkit-mask-composite: source-in;
               mask-image: linear-gradient(90deg, transparent 42%, rgba(0, 0, 0, .08) 48%, rgba(0, 0, 0, .3) 54%, rgba(0, 0, 0, .7) 61%, #000 68%),
                           radial-gradient(ellipse 70% 78% at 68% 38%, #000 30%, rgba(0, 0, 0, .45) 60%, transparent 84%);
               mask-composite: intersect; }
}
/* under the hive, a slow horizon of light so the hero has depth even before the cells light up */
.mk-hero::after { content: ""; position: absolute; left: 50%; top: -180px; width: 1100px; height: 620px; margin-left: -550px; pointer-events: none; z-index: 0; opacity: .7;
                  background: radial-gradient(closest-side, rgba(0, 155, 219, .2), rgba(0, 212, 170, .08) 55%, transparent); filter: blur(10px); }
[data-theme="light"] .mk-hero::after { opacity: .45; }
@media (min-width: 981px) { .mk-hero::after { left: 68%; } }    /* side by side it follows the hive over to the visual */
/* light theme, phone or small tablet upright: the glow and the horizon cover the whole screen there, so they all but go
   (with the aurora in app.css), leaving the heading on near-white */
@media (orientation: portrait) and (max-width: 820px) {
    [data-theme="light"] .mk-hero::before { opacity: .15; }
    [data-theme="light"] .mk-hero::after { opacity: .08; }
    /* no cells behind the copy: none from the top down to the end of the subheading (--hive-cut, js/home.js), then
       they ease in behind the build form */
    .mk-hive { -webkit-mask-image: linear-gradient(transparent var(--hive-cut, 60%), #000 calc(var(--hive-cut, 60%) + 120px)),
                                   radial-gradient(ellipse 78% 72% at 50% 34%, #000 28%, rgba(0, 0, 0, .45) 58%, transparent 82%);
               -webkit-mask-composite: source-in;
               mask-image: linear-gradient(transparent var(--hive-cut, 60%), #000 calc(var(--hive-cut, 60%) + 120px)),
                           radial-gradient(ellipse 78% 72% at 50% 34%, #000 28%, rgba(0, 0, 0, .45) 58%, transparent 82%);
               mask-composite: intersect; }
}
.mk-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.mk-hero-copy .display { margin: 18px 0 20px; }
.mk-hero-copy .lead { max-width: 600px; }

.mk-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 2px; background: var(--glass); border: 1px solid var(--border-strong);
           font-size: .85rem; color: var(--text-2); backdrop-filter: blur(10px); }

.mk-build-form { margin-top: 28px; max-width: 620px; }
.mk-build-center { margin: 28px auto 0; }
.mk-build-field { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 4px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border-strong);
                  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
                  box-shadow: 0 0 0 6px rgba(0, 155, 219, .07), 0 0 40px -10px rgba(0, 155, 219, .45), 0 24px 60px -24px rgba(0, 155, 219, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
                  transition: box-shadow .4s var(--ease), border-color .3s; }
.mk-build-field:hover { box-shadow: 0 0 0 6px rgba(0, 155, 219, .1), 0 0 50px -10px rgba(0, 155, 219, .55), 0 24px 60px -24px rgba(0, 155, 219, .7), inset 0 1px 0 rgba(255, 255, 255, .05); }
.mk-build-field::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: var(--grad); opacity: .55;
                          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: mk-border 6s linear infinite; background-size: 200% 200%; }
.mk-build-field:focus-within { box-shadow: 0 0 0 6px rgba(0, 155, 219, .16), 0 0 60px -6px rgba(0, 155, 219, .6), 0 24px 70px -20px rgba(0, 212, 170, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
.mk-build-field:focus-within::before { opacity: 1; }
.mk-build-field:focus-within > i { color: var(--brand); filter: drop-shadow(0 0 8px rgba(0, 155, 219, .8)); }
.mk-build-field > i { color: var(--muted); padding-left: 12px; font-size: 1.1rem; transition: color .3s, filter .3s; }
.mk-build-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: 600 1.1rem var(--font-sans); padding: 12px 6px; outline: none; }
.mk-build-input::placeholder { color: var(--faint); font-weight: 500; }
.mk-build-field .btn { flex: none; }
@keyframes mk-border { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.mk-micro { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: .9rem; }
.mk-micro i { color: var(--success); margin-right: 5px; }
.mk-micro-center { justify-content: center; }
.mk-magnetic { transition: transform .35s var(--ease), box-shadow .5s var(--ease), background-position .7s var(--ease); }

/* THE HEADING: "Be the business that owns.ai in 60 seconds." / "Your website's 24/7 AI employee", played in as one
   sequence the moment the page opens. The words rise out of a blur, tipping up into place one after another, leaving a
   gap where the name goes; then "owns.ai" slams into that gap from out of focus, with a shockwave behind it, a
   lens-flare streak and a ripple through the honeycomb (js/home.js ownsLanded). A brushstroke paints itself under
   "60 seconds", the second line rises, and only then do the paragraph, the form and the browser follow. "owns.ai"
   keeps a slow glint and "24/7 AI employee" a slowly flowing gradient. Everything waits for .reveal.is-visible
   (core.js), so it plays when the page is shown rather than when the stylesheet happens to load. */
.mk-hero .display { font-size: clamp(2.4rem, 5.2vw, 4.25rem); }
.mk-hero { --h1-a: #2EE6C0; --h1-b: #38B6F0; --h1-c: #60A5FA; --h1-glow: rgba(56, 189, 248, .55); }
[data-theme="light"] .mk-hero { --h1-a: #00B894; --h1-b: #009BDB; --h1-c: #0063D2; --h1-glow: rgba(0, 155, 219, .35); }
.mk-h1.reveal { opacity: 1; transform: none; perspective: 900px; }      /* the words do their own arriving */
.mk-w, .mk-own { display: inline-block; opacity: 0; }
.mk-w { transform-origin: 50% 100%; }
.mk-w-end { white-space: nowrap; }                                       /* the full stop stays with "60 seconds" */
.mk-h1.is-visible .mk-w { animation: mk-word-in .85s var(--ease) calc(.1s + var(--i) * .08s) both; }
@keyframes mk-word-in {
    0%   { opacity: 0; transform: translateY(.6em) rotateX(-75deg); filter: blur(12px); }
    55%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
}

/* "owns.ai": gradient letters with a glow, and a band of light that crosses them every few seconds */
.mk-own { position: relative; isolation: isolate; }
.mk-own-t { display: inline-block; padding: 0 .04em; margin: 0 -.04em; color: transparent; -webkit-background-clip: text; background-clip: text;
            background-image: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%), linear-gradient(100deg, var(--h1-a), var(--h1-b) 50%, var(--h1-c));
            background-size: 300% 100%, 100% 100%; background-position: 150% 0, 0 0; background-repeat: no-repeat;
            filter: drop-shadow(0 0 18px var(--h1-glow)) drop-shadow(0 6px 30px rgba(0, 99, 210, .35)); }
.mk-h1.is-visible .mk-own { animation: mk-slam .8s cubic-bezier(.2, .9, .25, 1) .72s both; }
.mk-h1.is-visible .mk-own-t { animation: mk-glint 5.5s ease-in-out 1.5s infinite; }
@keyframes mk-slam {
    0%   { opacity: 0; transform: scale(2.6) translateY(-.06em); filter: blur(20px); }
    40%  { opacity: 1; }
    62%  { transform: scale(.93); filter: blur(0); }
    80%  { transform: scale(1.035); }
    100% { opacity: 1; transform: none; filter: none; }
}
@keyframes mk-glint { 0% { background-position: 150% 0, 0 0; } 22%, 100% { background-position: -50% 0, 0 0; } }

/* the shockwave (::after) and the flare streak (::before), both behind the letters, fired as the name lands */
.mk-own::before, .mk-own::after { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 0; }
.mk-own::after { left: 50%; top: 50%; width: 3.2em; height: 3.2em; margin: -1.6em 0 0 -1.6em; border-radius: 50%;
                 background: radial-gradient(closest-side, transparent 52%, var(--h1-glow) 66%, rgba(46, 230, 192, .22) 78%, transparent); }
.mk-own::before { left: -70%; right: -70%; top: 52%; height: 3px; margin-top: -1.5px; border-radius: 2px;
                  background: linear-gradient(90deg, transparent, var(--h1-b) 25%, #fff 50%, var(--h1-b) 75%, transparent); box-shadow: 0 0 16px 2px var(--h1-glow); }
.mk-h1.is-visible .mk-own::after { animation: mk-shock 1s cubic-bezier(.15, .7, .3, 1) 1.2s both; }
.mk-h1.is-visible .mk-own::before { animation: mk-flare .9s var(--ease) 1.18s both; }
@keyframes mk-shock { 0% { opacity: 0; transform: scale(.25); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes mk-flare { 0% { opacity: 0; transform: scaleX(.05); } 25% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1); } }

.mk-h1-line2 { display: block; margin-top: .3em; font-size: .7em; line-height: 1.12; letter-spacing: -0.025em; }
.mk-h1-line2 .gradient-text { white-space: nowrap; }      /* "24/7 AI employee" stays together */
.mk-hero .mk-h1-line2 .gradient-text { background-image: linear-gradient(100deg, var(--h1-a), var(--h1-b) 25%, var(--h1-c) 50%, var(--h1-b) 75%, var(--h1-a));
                                       background-size: 200% 100%; animation: mk-flow 7s linear infinite; }
.mk-h1 .mk-h1-line2 { opacity: 0; }
.mk-h1.is-visible .mk-h1-line2 { animation: mk-line-in .9s var(--ease) 1.45s both; }
@keyframes mk-line-in { 0% { opacity: 0; transform: translateY(.7em); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes mk-flow { to { background-position: -200% 0; } }

/* the rest of the hero waits for the heading */
.mk-hero-copy .lead.reveal { transition-delay: 1.6s; }
.mk-hero-copy .mk-build-form.reveal { transition-delay: 1.75s; }
.mk-hero-copy .mk-micro.reveal { transition-delay: 1.9s; }
.mk-hero-visual.reveal { transition-delay: 1.05s; }

.mk-swoosh { position: relative; display: inline-block; white-space: nowrap; }
/* A painted brushstroke under "60 seconds": tapered, with dry-brush passes and bristle streaks (the SVG's own filter),
   laid just behind the letters and revealed left to right as if painted in one sweep. */
.mk-swoosh svg { position: absolute; z-index: -1; left: -4%; bottom: calc(-0.2em + 5px); width: 108%; height: .5em; overflow: visible; pointer-events: none;
                 clip-path: inset(-40% 100% -40% 0); filter: drop-shadow(0 3px 8px rgba(0, 155, 219, .35)); }
.reveal.is-visible .mk-swoosh svg { animation: mk-brush 1s cubic-bezier(.65, 0, .35, 1) 1.3s forwards; }
@keyframes mk-brush { to { clip-path: inset(-40% -4% -40% 0); } }
@media (prefers-reduced-motion: reduce) {
    .mk-swoosh svg { clip-path: none; animation: none !important; }
    .mk-w, .mk-own, .mk-h1 .mk-h1-line2 { opacity: 1; animation: none !important; }
    .mk-own::before, .mk-own::after, .mk-own-t, .mk-hero .mk-h1-line2 .gradient-text { animation: none !important; }
    .mk-hero-copy .reveal, .mk-hero-visual.reveal { transition-delay: 0s; }
}

/* the day-in-the-life panel, and the glow behind it */
.mk-hero-visual { position: relative; isolation: isolate; }
.mk-hero-visual::before { content: ""; position: absolute; inset: 8% 4% 4% 6%; z-index: -1; border-radius: 4px; filter: blur(60px); opacity: .55; pointer-events: none;
                          background: conic-gradient(from 0deg, #009BDB, #22D3EE, #00D4AA, #0063D2, #009BDB); animation: mk-aura 18s linear infinite; }
[data-theme="light"] .mk-hero-visual::before { opacity: .28; }
@keyframes mk-aura { to { transform: rotate(360deg); } }
/* A DAY AT A MADE-UP BUSINESS (js/home.js commandCentre). Read top to bottom: what time it is and what the owner is
   doing; where we are in the day (closed hours shaded); the chat that just came in and what came of it; the day's
   totals. Built on the theme's own tokens, so it is a white panel on the light theme and a black one on the dark;
   --cc-* are the few colours of its own, set for each theme. .is-ff while the clock races between chats, .is-sum for
   the end-of-day summary. */
.mk-cc { --cc-book: var(--success); --cc-lead: #2EE6C0; --cc-save: #60A5FA; --cc-night: #A5B0FF; --cc-night-bg: rgba(124, 140, 255, .16); --cc-ai: #38B6F0;
         position: relative; overflow: hidden; color: var(--text); font-variant-numeric: tabular-nums; background: var(--surface);
         border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg), 0 50px 120px -60px rgba(0, 155, 219, .55);
         transform: perspective(1400px) rotateY(-6deg) rotateX(3deg); }
[data-theme="light"] .mk-cc { --cc-lead: #0E9F8E; --cc-save: #2563EB; --cc-night: #4F46E5; --cc-night-bg: rgba(79, 70, 229, .09); --cc-ai: #0077C8;
                              box-shadow: var(--shadow-lg), 0 50px 120px -60px rgba(0, 99, 210, .35); }
.mk-cc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 6; background: var(--rule, var(--grad)); }

.mk-cc-bar { display: flex; align-items: center; gap: 12px; padding: 13px 16px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mk-cc-live { display: inline-flex; align-items: center; gap: 7px; flex: none; font: 800 .62rem var(--font-display); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--cc-book); }
.mk-cc-live .dot-live { width: 7px; height: 7px; }
.mk-cc-biz { display: inline-flex; align-items: center; gap: 9px; min-width: 0; margin-right: 110px; font-size: .82rem; color: var(--text-2); white-space: nowrap; }
.mk-cc-biz > span { overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.mk-cc-biz b { color: var(--text); }
.mk-cc-biz i { width: 26px; height: 23px; display: grid; place-items: center; flex: none; clip-path: var(--hex, none); background: var(--grad); color: #fff; font-size: .7rem; }

/* ---- now: the time, the owner, the AI ---- */
.mk-cc-now { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); border-bottom: 1px solid var(--border); transition: opacity .45s, filter .45s; }
.mk-cc-now > div { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 12px 16px; }
.mk-cc-now > div + div { border-left: 1px solid var(--border); }
.mk-cc-clock b { font: 800 clamp(1.35rem, 1.9vw, 1.75rem)/1 var(--font-display); font-stretch: 112%; letter-spacing: -.02em; white-space: nowrap; }
.mk-cc-clock span, .mk-cc-who > span { font: 700 .58rem var(--font-display); font-stretch: 125%; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.mk-cc-who b { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .9rem; font-weight: 700; white-space: nowrap; transition: opacity .2s, transform .2s var(--ease); }
.mk-cc-who b > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.mk-cc-who.is-you b { color: var(--text-2); }
.mk-cc-who.is-you b i { color: var(--muted); }
.mk-cc-who.is-you b.is-swap { opacity: 0; transform: translateY(5px); }
.mk-cc-who.is-ai { background: linear-gradient(90deg, color-mix(in srgb, var(--cc-book) 10%, transparent), transparent 85%); }
.mk-cc-who.is-ai b { color: var(--cc-book); font-size: .84rem; }
.mk-cc-who.is-ai b.is-busy { color: var(--cc-ai); }
.mk-cc-who.is-ai b.is-busy .dot-live { background: var(--cc-ai); }
.mk-cc-who.is-ai .dot-live { width: 7px; height: 7px; }

/* ---- the day, 5pm to 5pm ---- */
.mk-cc-line { padding: 12px 16px 6px; transition: opacity .45s, filter .45s; }
.mk-cc-track { position: relative; height: 20px; background: var(--surface-2); border: 1px solid var(--border); }
.mk-cc-closed { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; background: var(--cc-night-bg);
                font: 700 .54rem var(--font-display); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-night); }
.mk-cc-closed i { font-size: .6rem; margin-right: 4px; }
.mk-cc-fill { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: var(--rule, var(--grad)); z-index: 1; }
.mk-cc-head { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; z-index: 3; background: var(--text); box-shadow: 0 0 10px rgba(0, 155, 219, .7); }
.mk-cc-head::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #FBBF24; box-shadow: 0 0 12px rgba(251, 191, 36, .8); }
.mk-cc-head.is-night::after { background: var(--cc-night); box-shadow: 0 0 12px var(--cc-night); }
.mk-cc-pin { position: absolute; top: -5px; z-index: 2; width: 10px; height: 9px; margin-left: -5px; background: var(--cc-lead); clip-path: var(--hex, none); animation: cc-pin .5s var(--ease) both; }
.mk-cc-pin.is-book { background: var(--cc-book); } .mk-cc-pin.is-save { background: var(--cc-save); }
@keyframes cc-pin { from { transform: scale(2.6); opacity: 0; } }
.mk-cc-ticks { position: relative; height: 16px; margin-top: 4px; font: 500 .6rem var(--font-mono); color: var(--muted); }
.mk-cc-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.mk-cc-ticks span:nth-child(1) { left: 0; transform: none; } .mk-cc-ticks span:nth-child(2) { left: 16.667%; } .mk-cc-ticks span:nth-child(3) { left: 33.333%; }
.mk-cc-ticks span:nth-child(4) { left: 50%; } .mk-cc-ticks span:nth-child(5) { left: 66.667%; } .mk-cc-ticks span:nth-child(6) { left: 83.333%; } .mk-cc-ticks span:nth-child(7) { right: 0; transform: none; }

/* ---- the chat ---- */
.mk-cc-chat { position: relative; height: 266px; margin: 6px 16px 0; padding: 14px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); transition: opacity .45s, filter .45s; }
.mk-cc-thread { display: flex; flex-direction: column; gap: 10px; transition: opacity .3s; }
.mk-cc-thread.is-out { opacity: 0; }
.mk-cc.is-ff .mk-cc-thread { opacity: .3; }
.mk-cc-ff { position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; white-space: nowrap;
            background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: .76rem; font-weight: 600; color: var(--text-2);
            opacity: 0; transition: opacity .25s; pointer-events: none; }
.mk-cc-ff i { color: var(--brand); }
.mk-cc.is-ff .mk-cc-ff { opacity: 1; }
.mk-cc-msg { display: flex; flex-direction: column; max-width: 88%; animation: cc-msg-in .4s var(--ease) both; }
.mk-cc-msg.is-customer { align-self: flex-end; align-items: flex-end; }
.mk-cc-msg.is-ai { align-self: flex-start; }
.mk-cc-from { margin-bottom: 4px; font: 700 .56rem var(--font-display); font-stretch: 118%; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.mk-cc-msg.is-ai .mk-cc-from { color: var(--cc-ai); }
.mk-cc-bub { --cut: 8px; padding: 9px 13px; font-size: .85rem; line-height: 1.45; clip-path: var(--chamfer, none); }
.mk-cc-msg.is-customer .mk-cc-bub { background: var(--surface-3); color: var(--text); }
.mk-cc-msg.is-ai .mk-cc-bub { background: color-mix(in srgb, var(--cc-ai) 13%, var(--surface)); color: var(--text); box-shadow: inset 2px 0 0 var(--cc-ai); }
.mk-cc-bub p { margin: 0; }
.mk-cc-msg.is-typing .mk-cc-bub { display: flex; gap: 4px; padding: 12px 14px; }
.mk-cc-msg.is-typing .mk-cc-bub span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: mk-dot 1.2s infinite; }
.mk-cc-msg.is-typing .mk-cc-bub span:nth-child(2) { animation-delay: .15s; } .mk-cc-msg.is-typing .mk-cc-bub span:nth-child(3) { animation-delay: .3s; }
@keyframes cc-msg-in { from { opacity: 0; transform: translateY(8px); } }

/* what came of it: the stamp */
.mk-cc-result { --k: var(--cc-lead); display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; align-items: center; margin-top: 2px; padding: 10px 12px;
                background: color-mix(in srgb, var(--k) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); box-shadow: inset 3px 0 0 var(--k);
                animation: cc-stamp .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.mk-cc-result.is-book { --k: var(--cc-book); } .mk-cc-result.is-save { --k: var(--cc-save); }
.mk-cc-result > i { width: 32px; height: 28px; display: grid; place-items: center; clip-path: var(--hex, none); background: var(--k); color: #fff; font-size: .8rem; }
.mk-cc-result b { display: block; font-size: .86rem; font-weight: 800; line-height: 1.25; }
.mk-cc-result span { display: block; margin-top: 2px; font-size: .7rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-cc-result span i { color: var(--cc-night); font-size: .62rem; }
.mk-cc-result span strong { color: var(--text); font-weight: 800; }
.mk-cc-result.is-night span strong { color: var(--cc-night); }
.mk-cc-result em { font: 800 1.05rem var(--font-display); font-style: normal; font-stretch: 112%; color: var(--k); white-space: nowrap; }
.mk-cc-result em.is-time { font: 700 .62rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
@keyframes cc-stamp { from { opacity: 0; transform: scale(1.08); } }

/* ---- the day's totals ---- */
.mk-cc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); margin: 12px 16px 22px; border: 1px solid var(--border); transition: opacity .45s, filter .45s; }
.mk-cc-stats > div { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 11px 12px 10px; overflow: hidden; }
.mk-cc-stats > div + div { border-left: 1px solid var(--border); }
.mk-cc-stats b { font: 800 1.3rem/1.05 var(--font-display); font-stretch: 112%; letter-spacing: -.01em; white-space: nowrap; }
.mk-cc-stats span { font-size: .6rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.mk-cc-stats span i { margin-right: 2px; }
.mk-cc .is-money b, .mk-cc-sum-h em { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-cc-stats > div.is-bump::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--cc-book) 20%, transparent), transparent 75%);
                                    box-shadow: inset 0 2px 0 var(--cc-book); animation: cc-bump .9s ease forwards; }
@keyframes cc-bump { to { opacity: 0; } }
.mk-cc-plus { position: absolute; right: 10px; top: 9px; font: 800 .74rem var(--font-display); color: var(--cc-book); pointer-events: none; animation: cc-plus 1.3s var(--ease) forwards; }
@keyframes cc-plus { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-12px); } }
.mk-cc-note { position: absolute; right: 4px; bottom: -44px; font-size: .68rem; letter-spacing: .06em; color: var(--faint); }

/* ---- the end of the day ---- */
.mk-cc-sum { position: absolute; inset: 49px 0 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 26px; text-align: center;
             background: radial-gradient(70% 50% at 50% 40%, color-mix(in srgb, #009BDB 16%, transparent), transparent 75%), color-mix(in srgb, var(--surface) 90%, transparent);
             opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.mk-cc.is-sum .mk-cc-sum { opacity: 1; visibility: visible; }
.mk-cc.is-sum :is(.mk-cc-now, .mk-cc-line, .mk-cc-chat, .mk-cc-stats) { opacity: .2; filter: blur(4px); }
.mk-cc.is-switch :is(.mk-cc-now, .mk-cc-line, .mk-cc-chat, .mk-cc-stats), .mk-cc.is-switch .mk-cc-biz > span { opacity: 0; }
.mk-cc-sum > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.mk-cc.is-sum .mk-cc-sum > * { opacity: 1; transform: none; }
.mk-cc.is-sum .mk-cc-sum > :nth-child(2) { transition-delay: .1s; } .mk-cc.is-sum .mk-cc-sum > :nth-child(3) { transition-delay: .3s; } .mk-cc.is-sum .mk-cc-sum > :nth-child(4) { transition-delay: .55s; }
.mk-cc-sum-k { font: 700 .64rem var(--font-display); font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mk-cc-sum-k b { color: var(--text); }
.mk-cc-sum-h { font: 800 clamp(1.4rem, 2.4vw, 2rem)/1.05 var(--font-display); font-stretch: 118%; letter-spacing: -.01em; text-transform: uppercase; }
.mk-cc-sum-h em { font-style: normal; }
.mk-cc-sum-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 470px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: inset 0 2px 0 #009BDB; }
.mk-cc-sum-grid > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 14px 8px; }
.mk-cc-sum-grid > div + div { border-left: 1px solid var(--border); }
.mk-cc-sum-grid b { font: 800 clamp(1.2rem, 1.9vw, 1.6rem)/1 var(--font-display); font-stretch: 112%; white-space: nowrap; }
.mk-cc-sum-grid span { font-size: .58rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mk-cc-sum p { max-width: 400px; margin: 0; font-size: .82rem; line-height: 1.55; color: var(--text-2); }
.mk-cc-sum p i { color: var(--cc-night); }
.mk-cc-sum p b { color: var(--text); }


/* THE CITY (js/home.js heroCity): a skyline over the panel, its foot tucked behind the panel's top edge and its sides
   fading into the page. The sky fades out at the top in the canvas itself, behind the towers, so their tops stay solid. The flights cross everything, so their canvas and the flying messages lie over the
   whole visual, a little wider than it. */
.mk-city { position: relative; z-index: 0; height: 310px; margin: 0 -90px -84px -110px; pointer-events: none;
           -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 92%, transparent), linear-gradient(#000 72%, transparent);
           -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 92%, transparent), linear-gradient(#000 72%, transparent); mask-composite: intersect; }
.mk-city canvas { display: block; width: 100%; height: 100%; }
.mk-hero-visual > .mk-tilt { z-index: 1; }
.mk-hero .mk-hero-visual::before { top: 250px; }       /* the hairline frame (design.css) holds the panel, not the sky */
.mk-city-fx, .mk-city-fly { position: absolute; left: -110px; top: -20px; width: calc(100% + 200px); height: calc(100% + 40px); z-index: 8; pointer-events: none; }
.mk-city-fly { overflow: visible; }

/* a customer's message, popping up over the roofs and flying into the chat */
.mk-city-bub { position: absolute; left: 0; top: 0; width: max-content; max-width: 230px; transform-origin: 50% 100%; will-change: transform; transition: opacity .2s; }
.mk-city-bub > span { position: relative; display: block; margin-bottom: 10px; padding: 8px 12px 9px; font: 600 .76rem/1.35 var(--font-sans); color: var(--text); background: var(--surface);
                      border: 1px solid color-mix(in srgb, var(--brand) 60%, var(--border-strong)); transform-origin: 50% 100%; animation: city-pop .5s cubic-bezier(.2, 1.5, .4, 1) both;
                      box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55), 0 0 26px -6px color-mix(in srgb, var(--brand) 70%, transparent); }
.mk-city-bub > span::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--surface); transform: rotate(45deg);
                             border-right: 1px solid color-mix(in srgb, var(--brand) 60%, var(--border-strong)); border-bottom: 1px solid color-mix(in srgb, var(--brand) 60%, var(--border-strong)); }
.mk-city-bub i { color: var(--brand); }
.mk-city-bub.is-in { opacity: 0; }
@keyframes city-pop { from { opacity: 0; transform: scale(.3) translateY(12px); } }
/* a quick question over a roof, rising as its spark leaves */
.mk-city-ask { position: absolute; padding: 3px 8px; white-space: nowrap; font: 600 .62rem var(--font-sans); color: var(--text-2); background: var(--surface); border: 1px solid var(--border-strong);
               box-shadow: var(--shadow); animation: city-ask 1.5s var(--ease) forwards; }
@keyframes city-ask { 0% { opacity: 0; transform: translate(-50%, -70%) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -100%); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -190%); } }
/* a win, over the window it came from */
.mk-city-badge { position: absolute; padding: 4px 9px; white-space: nowrap; font: 800 .64rem var(--font-display); font-stretch: 112%; letter-spacing: .05em; text-transform: uppercase; color: #fff;
                 background: var(--success); box-shadow: 0 0 22px color-mix(in srgb, var(--success) 70%, transparent); animation: city-badge 2.6s var(--ease) forwards; }
@keyframes city-badge { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.5); } 12% { opacity: 1; transform: translate(-50%, -100%) scale(1.08); } 20% { transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%); } }

@media (max-width: 980px) { .mk-hero-visual { width: 100%; max-width: 620px; margin: 24px auto 40px; } }
@media (max-width: 560px) {
    .mk-cc-bar { gap: 10px; padding: 12px 12px 11px; }
    .mk-cc-biz { margin-right: 0; }
    .mk-cc-now { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mk-cc-clock { grid-column: 1 / -1; flex-direction: row !important; align-items: baseline; justify-content: flex-start; gap: 10px !important; border-bottom: 1px solid var(--border); }
    .mk-cc-now > div { padding: 10px 12px; }
    .mk-cc-now > .mk-cc-who.is-you { border-left: 0; }
    .mk-cc-who b { font-size: .8rem; }
    .mk-cc-line { padding: 10px 12px 4px; }
    .mk-cc-chat { height: 310px; margin: 4px 12px 0; padding: 12px; }
    .mk-cc-bub { font-size: .82rem; }
    .mk-cc-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 10px 12px 14px; }
    .mk-cc-stats > div:nth-child(3) { border-left: 0; }
    .mk-cc-stats > div:nth-child(n+3) { border-top: 1px solid var(--border); }
    .mk-cc-sum { gap: 14px; padding: 18px 14px; }
    .mk-cc-sum-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .mk-cc-sum-grid > div:nth-child(3) { border-left: 0; }
    .mk-cc-sum-grid > div:nth-child(n+3) { border-top: 1px solid var(--border); }
    .mk-cc-note { position: static; margin-top: 12px; text-align: center; }
    .mk-city { height: 200px; margin: 0 -16px -60px; }
    .mk-city-fx, .mk-city-fly { left: -16px; width: calc(100% + 32px); }
    .mk-hero .mk-hero-visual::before { top: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    .mk-cc-msg, .mk-cc-result, .mk-cc-pin, .mk-city-bub > span { animation: none !important; }
}

/* a browser with a made-up site in it (the build page's replay, content/build.inc) */
.mk-browser { position: relative; border-radius: 4px; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(150deg, rgba(125, 211, 252, .55), rgba(255, 255, 255, .06) 35%, rgba(255, 255, 255, .04) 65%, rgba(0, 99, 210, .4)) border-box; border: 1px solid transparent; box-shadow: var(--shadow-lg), 0 0 120px -40px rgba(0, 155, 219, .6); overflow: hidden; transform: perspective(1400px) rotateY(-6deg) rotateX(3deg); }
.mk-browser-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mk-browser-bar > span { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.mk-browser-bar > span:nth-child(1) { background: #FF5F57; } .mk-browser-bar > span:nth-child(2) { background: #FEBC2E; } .mk-browser-bar > span:nth-child(3) { background: #28C840; }
.mk-browser-url { flex: 1; margin-left: 10px; padding: 6px 12px; border-radius: 3px; background: var(--bg); color: var(--muted); font-size: .8rem; display: flex; gap: 8px; align-items: center; }
.mk-browser-url i { color: var(--success); font-size: .75rem; }
.mk-browser-body { position: relative; height: 520px; padding: 22px; }
.mk-skel { background: var(--surface-2); border-radius: 3px; height: 14px; }
.mk-skel-hero { height: 120px; border-radius: 3px; background: linear-gradient(120deg, var(--surface-2), var(--surface-3)); margin-bottom: 14px; }
.mk-skel-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.mk-skel-row .mk-skel { height: 64px; }
.mk-skel-line { margin-bottom: 10px; width: 80%; } .mk-skel-line.short { width: 50%; }

/* chat bubbles and the avatar tile, for the demo and the build replay */
.mk-chat-avatar { width: 34px; height: 34px; border-radius: 4px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); font-size: 1.05rem; flex: none; }
.mk-msg { max-width: 86%; padding: 9px 13px; border-radius: 4px; font-size: .86rem; line-height: 1.5; animation: mk-in .35s var(--ease); }
.mk-msg p { margin: 0; }
.mk-msg.mk-bot { align-self: flex-start; background: var(--surface-2); color: var(--text); border-bottom-left-radius: 2px; }
.mk-msg.mk-user { align-self: flex-end; background: var(--hc, var(--brand)); color: #fff; border-bottom-right-radius: 2px; }
.mk-typing { display: flex; gap: 4px; padding: 12px 14px; }
.mk-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: mk-dot 1.2s infinite; }
.mk-typing span:nth-child(2) { animation-delay: .15s; } .mk-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes mk-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes mk-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }


/* THE TILT (js/home.js heroTilt): --mx / --my run -1 … 1 with the mouse. The panel leans a few degrees and drifts a
   few pixels, and a soft glare follows the pointer. One flat transform - no preserve-3d. */
.mk-tilt { --mx: 0; --my: 0; position: relative;
           transform: perspective(1600px) rotateY(calc(var(--mx) * 5deg)) rotateX(calc(var(--my) * -4deg)) translate3d(calc(var(--mx) * 10px), calc(var(--my) * 8px), 0); }
.mk-tilt[data-on] { will-change: transform; }
.mk-tilt .mk-cc::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
                              background: radial-gradient(520px circle at calc(50% + var(--mx) * 45%) calc(30% + var(--my) * 45%), rgba(255, 255, 255, .09), transparent 55%); }

.mk-works { margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mk-works-label { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.mk-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; }
.mk-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-family: var(--font-display); font-weight: 700; font-size: 1rem; transition: color .2s; }
.mk-logo i { font-size: 22px; width: 24px; text-align: center; }
.mk-logo:hover { color: var(--text); }

@media (max-width: 980px) {
    .mk-hero-inner { grid-template-columns: minmax(0, 1fr); }
    .mk-browser, .mk-cc { transform: none; }
}
@media (max-width: 560px) {
    .mk-build-field { flex-direction: column; align-items: stretch; padding: 10px; }
    .mk-build-field > i { display: none; }
    .mk-build-input { text-align: center; }
    .mk-browser-body { height: 470px; padding: 14px; }
}

/* ---- PAIN ---------------------------------------------------------------------------------------------------------- */

.mk-pain-card { transition: transform .3s var(--ease), border-color .3s; }
.mk-pain-card:hover { transform: translateY(-4px); border-color: rgba(244, 63, 94, .35); }
.mk-pain-card h3 { font-size: 1.15rem; }
.mk-pain-icon { width: 48px; height: 48px; border-radius: 3px; display: grid; place-items: center; background: rgba(244, 63, 94, .12); color: var(--danger); font-size: 1.25rem; margin-bottom: 16px; }
.mk-leak { margin-top: 32px; padding: 32px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.mk-leak-meter { text-align: center; }
.mk-leak-num { font-family: var(--font-display); font-weight: 800; font-size: 4.2rem; line-height: 1; color: var(--danger); font-variant-numeric: tabular-nums; }
.mk-leak-fix { margin-top: 14px; display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 2px; background: rgba(34, 197, 94, .12); color: var(--success); font-weight: 600; font-size: .9rem; }
@media (max-width: 780px) { .mk-leak { grid-template-columns: minmax(0, 1fr); text-align: center; } }

/* ---- HOW ----------------------------------------------------------------------------------------------------------- */

.mk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; }
.mk-steps::before { content: ""; position: absolute; top: 28px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--brand), var(--brand-3), transparent); opacity: .5; }
.mk-step { position: relative; padding: 0 8px; text-align: center; }
.mk-step-num { width: 60px; height: 54px; margin: 0 auto 18px; border-radius: 4px; display: grid; place-items: center; background: var(--grad); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; position: relative;
               background: none; isolation: isolate; filter: drop-shadow(0 8px 16px rgba(0, 155, 219, .55)) drop-shadow(0 0 12px rgba(0, 212, 170, .45)); }
/* the step number is a hexagon: the cell of the honeycomb behind the hero */
.mk-step-num::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad); clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%); }
.mk-step-num::after { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(25% 2%, 75% 2%, 100% 50%, 75% 98%, 25% 98%, 0 50%);
                      background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 45%); }
.mk-step-visual { margin-top: 18px; min-height: 120px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 8px; }
.mk-sv-url { flex-direction: column; }
.mk-sv-input { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border-strong); font-weight: 600; text-align: left; }
.mk-sv-input i { color: var(--muted); }
.mk-caret { width: 2px; height: 18px; background: var(--brand); animation: mk-blink 1s steps(1) infinite; }
@keyframes mk-blink { 50% { opacity: 0; } }
.mk-sv-btn { align-self: stretch; padding: 9px; border-radius: 3px; background: var(--grad); color: #fff; font-weight: 700; font-size: .9rem; }
.mk-sv-pages { flex-wrap: wrap; }
.mk-sv-pages span { padding: 5px 11px; border-radius: 2px; background: var(--grad-soft); border: 1px solid rgba(0, 155, 219, .25); font-size: .8rem; font-weight: 600; color: var(--text-2);
                    animation: mk-pop 3.6s var(--ease) infinite; }
.mk-sv-pages span:nth-child(2) { animation-delay: .25s; } .mk-sv-pages span:nth-child(3) { animation-delay: .5s; } .mk-sv-pages span:nth-child(4) { animation-delay: .75s; }
.mk-sv-pages span:nth-child(5) { animation-delay: 1s; } .mk-sv-pages span:nth-child(6) { animation-delay: 1.25s; } .mk-sv-pages span:nth-child(7) { animation-delay: 1.5s; }
.mk-sv-pages span:nth-child(8) { animation-delay: 1.75s; } .mk-sv-pages span:nth-child(9) { animation-delay: 2s; } .mk-sv-pages span:nth-child(10) { animation-delay: 2.25s; }
@keyframes mk-pop { 0%, 100% { opacity: .45; transform: scale(.96); } 15%, 55% { opacity: 1; transform: scale(1); border-color: var(--brand); } }
.mk-sv-code { background: var(--code-bg); }
.mk-sv-code code { color: #E2F3FF; font-size: .78rem; text-align: left; word-break: break-all; line-height: 1.6; }
@media (max-width: 860px) { .mk-steps { grid-template-columns: minmax(0, 1fr); } .mk-steps::before { display: none; } }

/* ---- DEMO ---------------------------------------------------------------------------------------------------------- */

.mk-demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.mk-demo-chat { overflow: hidden; display: flex; flex-direction: column; height: 560px; }
.mk-demo-chat.is-waiting > * { opacity: 0; }
.mk-demo-chat.is-waiting { background: linear-gradient(100deg, var(--surface) 30%, var(--surface-2) 50%, var(--surface) 70%) 0 0 / 300% 100%; animation: shimmer-bar 1.4s linear infinite; }
.mk-demo-chat.is-live { padding: 0; height: 600px; }
.mk-demo-live { flex: 1; min-height: 0; animation: mk-live-in .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes mk-live-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.mk-dc-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mk-dc-head .mk-chat-avatar { background: var(--grad); color: #fff; }
.mk-dc-head strong { display: flex; gap: 8px; align-items: center; font-family: var(--font-display); }
.mk-dc-head .small { display: flex; align-items: center; gap: 6px; }
.mk-dc-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.mk-dc-body .mk-msg { font-size: .93rem; max-width: 84%; }
.mk-dc-chips { padding: 14px 18px 18px; border-top: 1px solid var(--border); min-height: 70px; }
.mk-lead-card { align-self: flex-start; width: 80%; padding: 14px; border-radius: 3px; border: 1px dashed var(--brand); background: var(--grad-soft); font-size: .86rem; animation: mk-in .35s var(--ease); }
.mk-lead-card b { display: flex; gap: 8px; align-items: center; color: var(--text); }
.mk-lead-fields { display: grid; gap: 6px; margin: 10px 0 6px; }
.mk-lead-fields span { padding: 8px 10px; border-radius: 3px; background: var(--surface); border: 1px solid var(--border); color: var(--faint); }
.mk-lead-card em { font-size: .75rem; color: var(--faint); }
@media (max-width: 900px) { .mk-demo-grid { grid-template-columns: minmax(0, 1fr); } .mk-demo-chat { height: 520px; } }

/* ---- FEATURES BENTO ------------------------------------------------------------------------------------------------ */

.mk-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mk-bento-item { transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; overflow: hidden; }
.mk-bento-item:hover { transform: translateY(-4px); border-color: rgba(0, 155, 219, .35); box-shadow: var(--shadow); }
.mk-bento-item h3 { font-size: 1.08rem; margin-bottom: 8px; }
.mk-bento-item p { font-size: .92rem; margin-bottom: 0; }
.mk-b-wide { grid-column: span 2; }
.mk-b-icon { width: 44px; height: 44px; border-radius: 3px; display: grid; place-items: center; background: var(--grad-soft); color: var(--brand); font-size: 1.15rem; margin-bottom: 16px; border: 1px solid rgba(0, 155, 219, .3);
              box-shadow: 0 0 24px -8px rgba(0, 155, 219, .7), inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .4s var(--ease), box-shadow .4s; }
.mk-b-icon i { filter: drop-shadow(0 0 6px rgba(0, 155, 219, .7)); }
.mk-bento-item:hover .mk-b-icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 34px -6px rgba(0, 155, 219, .9), inset 0 1px 0 rgba(255, 255, 255, .1); }
.mk-gap-demo { margin-top: 16px; display: grid; gap: 8px; }
.mk-gap-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); font-size: .85rem; }
.mk-gap-row span { flex: 1; color: var(--text); }
.mk-gap-row em { color: var(--warning); font-style: normal; font-weight: 600; font-size: .78rem; }
.mk-gap-row b { color: var(--brand); font-size: .78rem; white-space: nowrap; }
@media (max-width: 980px) { .mk-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mk-bento { grid-template-columns: minmax(0, 1fr); } .mk-b-wide { grid-column: auto; } .mk-gap-row em { display: none; } }

/* ---- TEMPLATE SHOWCASE ---------------------------------------------------------------------------------------------
   The REAL widget (.mk-ts-live, mounted by js/home.js from /w/showcase.js) on a made-up business website (.mk-ts-site,
   coloured, typeset and shaped by --sp/--s2/--sbg/--stext/--scard/--sink/--srad/--sfont/--shfont from js/home.js SITES).
   Above it the template strip (the schematics are .tp in dashboard.css, drawn by OA.templates.mini); beside it the
   websites, the design the AI read off the one on show, and the colour themes. */

.mk-tpl-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; }
.mk-tpl-head b { font-family: var(--font-display); font-size: 1rem; }
.mk-tpl-head b i, .mk-ts-title i { color: var(--brand); margin-right: 6px; }
.mk-tpl-strip { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.mk-tpl { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 6px 9px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface);
          color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.mk-tpl:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.mk-tpl:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mk-tpl.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 155, 219, .18), 0 12px 30px -16px rgba(0, 155, 219, .7); }
.mk-tpl .tp { height: 64px; border-radius: 3px; margin-bottom: 5px; }
.mk-tpl b { padding: 0 3px; font: 700 .78rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tpl small { padding: 0 3px; font-size: .66rem; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.mk-tpl.is-ai { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border-color: transparent; }
.mk-tpl-ai { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 2px; background: var(--grad); color: #fff;
             font: 700 .6rem var(--font-display); letter-spacing: .05em; box-shadow: 0 4px 12px -4px rgba(0, 99, 210, .6); }

.mk-ts { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; align-items: start; }
.mk-ts-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mk-ts-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); }
.mk-ts-title { font: 700 .95rem var(--font-display); }
.mk-ts-status { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: var(--success); transition: color .3s; white-space: nowrap; }
.mk-ts-status.is-busy { color: var(--brand); }
.mk-ts-status.is-busy i { animation: spin .9s linear infinite; }
.mk-ts-sites { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.mk-ts-site-btn { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
                  font: 600 .8rem var(--font-sans); cursor: pointer; text-align: left; transition: border-color .2s, background .2s, color .2s; min-width: 0; }
.mk-ts-site-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-ts-site-btn i { width: 22px; height: 22px; border-radius: 3px; display: grid; place-items: center; flex: none; color: #fff; font-size: .7rem; background: var(--c); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.mk-ts-site-btn:hover { color: var(--text); border-color: var(--border-strong); }
.mk-ts-site-btn.is-active { color: var(--text); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }
.mk-ts-dna-head i { color: var(--brand); margin-right: 4px; }
.mk-ts-dna { display: flex; flex-direction: column; gap: 5px; margin-top: -4px; }
.mk-dna { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px; border-radius: 3px; background: var(--surface-2); font-size: .8rem; animation: ts-chip .45s var(--ease) both; }
.mk-dna i { width: 16px; flex: none; text-align: center; color: var(--brand); }
.mk-dna em { width: 56px; flex: none; font-style: normal; font-size: .72rem; color: var(--muted); }
.mk-dna b { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-dna u { display: block; width: 18px; height: 18px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(127, 127, 127, .4); }
.mk-dna-pal u + u { margin-left: -2px; }
@keyframes ts-chip { from { opacity: 0; transform: translateY(6px) scale(.9); } }
.mk-ts-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mk-th { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; border-radius: 3px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
         font: 600 .8rem var(--font-sans); text-align: left; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.mk-th:hover { color: var(--text); border-color: var(--border-strong); }
.mk-th.is-active { color: var(--text); border-color: var(--brand); background: var(--grad-soft); }
.mk-th .pv-sw { width: 18px; height: 18px; }
.mk-th.is-brand { grid-column: 1 / -1; gap: 10px; padding: 9px 10px; }
.mk-th.is-brand b { display: block; color: var(--text); font-size: .85rem; }
.mk-th.is-brand small { display: block; color: var(--muted); font-size: .72rem; font-weight: 500; }
.mk-ts-accent { display: flex; flex-direction: column; gap: 8px; }
.mk-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mk-swatches button { width: 30px; height: 30px; flex: none; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; box-shadow: 0 0 0 2px var(--surface); transition: transform .2s, box-shadow .2s; }
.mk-swatches button:hover { transform: scale(1.1); }
.mk-swatches button.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
.mk-swatch-custom { position: relative; width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px dashed var(--border-strong);
                    color: var(--muted); cursor: pointer; font-size: .8rem; overflow: hidden; }
.mk-swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }

/* the stage: stays in view while the choices beside it scroll */
.mk-ts-stage { min-width: 0; position: sticky; top: 88px; }
.mk-ts-browser { transform: none; height: 640px; display: flex; flex-direction: column; box-shadow: var(--shadow-lg), 0 0 140px -50px rgba(0, 155, 219, .55); }
.mk-ts-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.mk-ts-live { position: absolute; inset: 0; z-index: 2; }
.mk-ts-live::before { content: ""; position: absolute; right: -10%; bottom: -10%; width: 75%; height: 100%; pointer-events: none; opacity: 0;
                      background: radial-gradient(closest-side, rgba(0, 155, 219, .38), transparent); }
.mk-ts-live.is-glow::before { animation: ts-flash 1.2s var(--ease); }
@keyframes ts-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.mk-ts-fallback { position: absolute; right: 20px; bottom: 20px; z-index: 3; max-width: 300px; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 4px;
                  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); font-size: .85rem; }
.mk-ts-fallback i { font-size: 1.6rem; color: var(--brand); }
.mk-ts-fallback p { margin: 0; }

/* the made-up website: its own colours, type and corners; its content left of the chat, as a real page beside it */
.mk-ts-site { --sp: #2F7D4F; --s2: #D9A441; --sbg: #F7F5EF; --stext: #23301F; --scard: #FFFFFF; --sink: #FFFFFF; --srad: 12px;
              position: absolute; inset: 0; overflow: hidden; background: var(--sbg); color: var(--stext); padding: 18px 26px; font-family: var(--sfont, var(--font-sans));
              transition: background .6s, color .6s; }
.mk-ts-site * { transition: background .6s, color .6s, border-color .6s, box-shadow .6s, border-radius .4s; }
.ms-nav { display: flex; align-items: center; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, var(--stext) 10%, transparent); }
.ms-logo { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.ms-logo b, .ms-h1 { font-family: var(--shfont, var(--font-display)); }
.ms-logo i { width: 28px; height: 28px; border-radius: min(var(--srad), 9px); display: grid; place-items: center; background: var(--sp); color: var(--sink); font-size: .85rem; }
.ms-links { flex: 1; display: flex; gap: 14px; }
.ms-links i { width: 46px; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--stext) 18%, transparent); }
.ms-btn { display: inline-flex; padding: 8px 14px; border-radius: var(--srad); background: var(--sp); color: var(--sink); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.ms-btn-ghost { background: transparent; color: var(--stext); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--stext) 30%, transparent); }
.is-caps .ms-logo b, .is-caps .ms-h1, .is-caps .ms-btn, .is-caps .ms-card b { text-transform: uppercase; letter-spacing: .02em; }
.ms-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 0 20px; margin-right: 404px; }
.ms-hero-copy { display: flex; flex-direction: column; gap: 11px; }
.ms-kicker { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sp); }
.ms-h1 { font-weight: 800; font-size: 1.65rem; line-height: 1.12; letter-spacing: -0.01em; }
.ms-p { display: flex; flex-direction: column; gap: 6px; }
.ms-p i, .ms-card em { display: block; height: 7px; border-radius: 2px; background: color-mix(in srgb, var(--stext) 14%, transparent); }
.ms-p i.short, .ms-card em.short { width: 60%; }
.ms-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ms-art { position: relative; height: 130px; border-radius: min(var(--srad), 22px); overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--sp) 22%, var(--sbg)), color-mix(in srgb, var(--s2) 30%, var(--sbg))); }
.ms-blob { position: absolute; border-radius: 50%; }
.ms-blob.b1 { width: 130px; height: 130px; left: -10px; bottom: -50px; background: var(--sp); opacity: .85; }
.ms-blob.b2 { width: 110px; height: 110px; right: 30px; bottom: -20px; background: color-mix(in srgb, var(--sp) 60%, #000); opacity: .7; }
.ms-blob.b3 { width: 70px; height: 70px; left: 40%; top: 30px; background: var(--s2); opacity: .9; }
.ms-sun { position: absolute; width: 44px; height: 44px; right: 26px; top: 22px; border-radius: 50%; background: var(--scard); box-shadow: 0 0 0 10px color-mix(in srgb, var(--scard) 35%, transparent); }
.ms-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-right: 404px; }
.ms-card { display: flex; flex-direction: column; gap: 7px; padding: 12px; min-width: 0; border-radius: min(var(--srad), 16px); background: var(--scard); box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .35); }
.ms-card i { color: var(--sp); font-size: 1rem; }
.ms-card b { font-size: .76rem; font-family: var(--shfont, var(--font-display)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3;
           background: linear-gradient(180deg, transparent 0%, rgba(0, 155, 219, .0) 40%, rgba(0, 155, 219, .35) 49%, rgba(255, 255, 255, .55) 50%, rgba(0, 155, 219, .3) 51%, transparent 60%) no-repeat;
           background-size: 100% 220%; }
.ms-scan.is-on { animation: ts-scan 1.1s var(--ease); }
@keyframes ts-scan { 0% { opacity: 1; background-position: 0 120%; } 90% { opacity: 1; } 100% { opacity: 0; background-position: 0 -40%; } }

@media (max-width: 1180px) { .mk-tpl-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .mk-ts { grid-template-columns: 300px minmax(0, 1fr); } .ms-hero, .ms-cards { margin-right: 0; } .ms-art, .ms-cards { display: none; } }
@media (max-width: 900px) {
    .mk-ts { grid-template-columns: minmax(0, 1fr); }
    .mk-ts-stage { position: static; order: -1; }
    .mk-tpl-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 8px; margin-bottom: 16px; }
    .mk-tpl-strip::-webkit-scrollbar { display: none; }
    .mk-tpl { flex: 0 0 112px; scroll-snap-align: start; }
    .mk-ts-sites, .mk-ts-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .mk-ts-browser { height: 600px; }
    .mk-ts-site { padding: 14px; }
    .ms-links { display: none; }
    .ms-h1 { font-size: 1.2rem; }
    .ms-hero { padding: 18px 0; }
    .mk-ts-sites, .mk-ts-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- YOUR TEAM'S PRIVATE AI ---------------------------------------------------------------------------------------- */

.mk-team-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.mk-team-feats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 22px; margin-top: 28px; }
.mk-team-feats div { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-content: start; }
.mk-team-feats i { grid-row: span 2; width: 38px; height: 38px; border-radius: 3px; display: grid; place-items: center; background: var(--grad-soft); color: var(--brand); border: 1px solid rgba(0, 155, 219, .2); }
.mk-team-feats b { font-family: var(--font-display); color: var(--text); }
.mk-team-feats span { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.mk-team-visual { position: relative; padding-bottom: 190px; }
.mk-lib { overflow: hidden; }
.mk-lib-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.mk-lib-head i { color: var(--brand); margin-right: 6px; }
.mk-lib-up { font-size: .78rem; padding: 5px 11px; border-radius: 3px; background: var(--grad); color: #fff; }
.mk-lib-up i { color: #fff; }
.mk-lib-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.mk-lib-row:last-child { border-bottom: 0; }
.mk-lib-row > i { width: 36px; height: 36px; border-radius: 3px; display: grid; place-items: center; font-size: 1.05rem; flex: none; }
.ft-pdf { background: rgba(244, 63, 94, .12); color: #F43F5E; } .ft-xls { background: rgba(34, 197, 94, .12); color: #16A34A; }
.ft-doc { background: rgba(56, 189, 248, .14); color: #0EA5E9; }
.mk-lib-row > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-lib-row b { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-lib-row em { font-style: normal; font-size: .74rem; color: var(--faint); }
.mk-team-chat { position: absolute; right: -18px; bottom: -8px; width: min(360px, 88%); overflow: hidden; box-shadow: var(--shadow-lg); }
.mk-tc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mk-tc-head .avatar { width: 34px; height: 34px; border-radius: 3px; font-size: .9rem; }
.mk-tc-head strong { display: block; font-family: var(--font-display); font-size: .92rem; }
.mk-tc-head .small { display: flex; align-items: center; gap: 6px; }
.mk-tc-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 176px; }
.mk-tc-body .mk-msg.mk-bot:empty { display: none; }
.mk-tc-src { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 2px; background: var(--surface-2); border: 1px solid var(--border);
             font-size: .74rem; color: var(--text-2); animation: mk-in .4s var(--ease); }
.mk-tc-src i { color: #F43F5E; }
.mk-tc-src .badge { font-size: .62rem; padding: 1px 6px; }
@media (max-width: 980px) { .mk-team-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .mk-team-chat { right: 0; } }
@media (max-width: 560px) { .mk-team-feats { grid-template-columns: minmax(0, 1fr); } .mk-team-visual { padding-bottom: 0; } .mk-team-chat { position: relative; width: 100%; margin-top: 14px; } }

/* ---- ROI ----------------------------------------------------------------------------------------------------------- */

.mk-roi-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; overflow: hidden; }
.mk-roi-inputs { padding: 36px; display: grid; gap: 26px; }
.mk-range label { font-weight: 600; color: var(--text-2); font-size: .95rem; }
.mk-range b { font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.mk-range input[type=range] { --fill: 50%; width: 100%; margin-top: 12px; appearance: none; -webkit-appearance: none; height: 8px; border-radius: 2px; cursor: pointer;
                              background: linear-gradient(90deg, var(--brand) 0%, var(--brand-2) var(--fill), var(--surface-3) var(--fill)); }
.mk-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid var(--brand); box-shadow: 0 4px 14px rgba(0, 155, 219, .5); }
.mk-range input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--brand); }
.mk-roi-results { padding: 36px; background: var(--grad-soft); border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.mk-roi-money { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 5vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.05; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.mk-roi-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mk-roi-row div { padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); }
.mk-roi-row b { display: block; font-family: var(--font-display); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.mk-roi-row span { font-size: .8rem; color: var(--muted); }
.mk-roi-pays { display: flex; gap: 10px; align-items: center; font-weight: 600; color: var(--text-2); }
.mk-roi-pays i { color: var(--success); }
.mk-roi-pays b { color: var(--success); font-size: 1.2rem; }
@media (max-width: 860px) { .mk-roi-grid { grid-template-columns: minmax(0, 1fr); } .mk-roi-results { border-left: 0; border-top: 1px solid var(--border); } .mk-roi-inputs, .mk-roi-results { padding: 24px; } }

/* ---- COMPARISON + MATRIX ------------------------------------------------------------------------------------------- */

.mk-compare-table td:first-child, .mk-matrix td:first-child { font-weight: 600; color: var(--text); white-space: nowrap; }
.mk-compare-table td, .mk-matrix td { font-size: .9rem; }
.mk-col-us { background: var(--grad-soft); color: var(--text) !important; }
th.mk-col-us { color: var(--brand) !important; }
.mk-compare-table .mk-col-us i, .mk-yes { color: var(--success); }
.mk-compare-table td:not(.mk-col-us) .fa-circle-xmark { color: var(--danger); }
.mk-no { color: var(--faint); }
.mk-matrix td:not(:first-child), .mk-matrix th:not(:first-child) { text-align: center; }

/* ---- INDUSTRIES ---------------------------------------------------------------------------------------------------- */

.mk-ind > i { font-size: 1.4rem; color: var(--brand); margin-bottom: 14px; display: block; }
.mk-ind h4 { margin-bottom: 8px; }
.mk-ind p { font-size: .9rem; color: var(--muted); font-style: italic; margin: 0; }

/* ---- PLAN CARDS (markup from Plans.card in js/pricing.js) ----------------------------------------------------------- */

.mk-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); transition: transform .3s var(--ease), box-shadow .3s; }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan-card.is-featured { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1.5px solid transparent;
                         box-shadow: 0 30px 70px -30px rgba(0, 155, 219, .6); transform: translateY(-8px); }
.plan-card.is-featured:hover { transform: translateY(-12px); }
.plan-card.is-current { border-color: var(--success); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 2px; background: var(--grad); color: #fff; font-size: .74rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; box-shadow: var(--glow); }
.plan-name { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
.plan-tagline { color: var(--muted); font-size: .88rem; min-height: 2.8em; margin-top: 4px; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 18px; }
.plan-amount { font-family: var(--font-display); font-weight: 800; font-size: 3rem; letter-spacing: -0.04em; line-height: 1; }
.plan-per { color: var(--muted); font-weight: 600; }
.plan-billed { font-size: .82rem; color: var(--muted); margin-top: 8px; min-height: 1.4em; }
.plan-save { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 2px; background: rgba(34, 197, 94, .14); color: var(--success); font-weight: 700; font-size: .75rem; }
.plan-cta { margin: 22px 0; }
.plan-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .9rem; color: var(--text-2); }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; }
.plan-features i { color: var(--success); margin-top: 4px; }
@media (max-width: 1100px) { .mk-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-card.is-featured { transform: none; } }
@media (max-width: 600px) { .mk-plans { grid-template-columns: minmax(0, 1fr); } }

.mk-assure { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px; }
.mk-assure div { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); font-size: .88rem; color: var(--text-2); }
.mk-assure i { color: var(--brand); font-size: 1.2rem; }
@media (max-width: 900px) { .mk-assure { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .mk-assure { grid-template-columns: minmax(0, 1fr); } }

.mk-enterprise { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; flex-wrap: wrap; }
.mk-enterprise h3 { margin: 4px 0 8px; }

/* ---- FAQ ----------------------------------------------------------------------------------------------------------- */

.mk-faq { display: grid; gap: 10px; }
.mk-faq-item { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: border-color .2s; }
.mk-faq-item.is-open { border-color: rgba(0, 155, 219, .4); }
.mk-faq-item > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; background: none; border: 0; color: var(--text);
                        font: 700 1rem var(--font-display); text-align: left; cursor: pointer; }
.mk-faq-item > button i { color: var(--brand); transition: transform .3s var(--ease); flex: none; }
.mk-faq-item.is-open > button i { transform: rotate(45deg); }
.mk-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.mk-faq-a p { padding: 0 20px 18px; margin: 0; color: var(--text-2); }

/* ---- FINAL CTA + STICKY BAR ---------------------------------------------------------------------------------------- */

.mk-final-card { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 72px 32px; border-radius: 4px; border: 1px solid transparent;
                 background: radial-gradient(700px 300px at 50% 0%, rgba(0, 155, 219, .3), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box,
                             linear-gradient(160deg, rgba(125, 211, 252, .6), rgba(255, 255, 255, .05) 40%, rgba(0, 99, 210, .45)) border-box;
                 box-shadow: var(--shadow-lg), 0 0 120px -50px rgba(0, 155, 219, .7); }
.mk-final-card h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 820px; margin: 0 auto 16px; }
.mk-final-hive { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mk-final-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: var(--brand-3); filter: blur(140px); opacity: .18; bottom: -260px; right: -100px; pointer-events: none; }

.mk-sticky-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 800; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 18px;
                 border-radius: 4px; background: var(--glass); border: 1px solid var(--border-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-lg);
                 transform: translateY(140%); transition: transform .4s var(--ease); line-height: 1.25; }
.mk-sticky-cta.is-shown { transform: none; }
@media (max-width: 760px) { .mk-sticky-cta { display: flex; } }

/* ---- ABOUT / SUPPORT ----------------------------------------------------------------------------------------------- */

.mk-tech { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.mk-tech-step .mk-step-num { width: 46px; height: 42px; border-radius: 3px; font-size: 1.05rem; margin: 0 0 16px; }
@media (max-width: 980px) { .mk-tech { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .mk-tech { grid-template-columns: minmax(0, 1fr); } }

.mk-support-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.mk-contact-card { position: sticky; top: calc(var(--nav-h) + 20px); }
.mk-company { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); font-size: .85rem; color: var(--muted); line-height: 1.5; }
.mk-company i { color: var(--brand); margin-top: 3px; }
.mk-company strong { display: block; color: var(--text); font-family: var(--font-display); }
.mk-company span { display: block; }
@media (max-width: 900px) { .mk-support-grid { grid-template-columns: minmax(0, 1fr); } .mk-contact-card { position: static; } }

/* /support: the how-to guides, as one big panel above the answers. */
.mk-help-guides-wrap { padding-top: 0; }
.mk-help-guides { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; align-items: center; padding: 36px 40px;
                  background: radial-gradient(90% 120% at 0% 0%, rgba(0, 155, 219, .12), transparent 60%), var(--surface); }
.mk-help-guides-icon { width: 60px; height: 60px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 4px; color: #fff; font-size: 1.6rem;
                       background: var(--grad); box-shadow: 0 14px 30px -14px rgba(0, 99, 210, .8); }
.mk-help-guides h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; margin: 8px 0 10px; }
.mk-help-guides h2 a { color: var(--text); text-decoration: none; }
.mk-help-guides h2 a:hover { color: var(--brand); }
.mk-help-guides-main p { margin: 0 0 20px; max-width: 46ch; }
.mk-help-guides-list { display: flex; flex-direction: column; gap: 8px; }
.mk-help-guides-h { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); margin-bottom: 2px; }
.mk-help-guides-list a { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2);
                         color: var(--text); text-decoration: none; font-weight: 600; font-size: .94rem; transition: border-color .2s, transform .2s var(--ease); }
.mk-help-guides-list a span { flex: 1; min-width: 0; }
.mk-help-guides-list a i:first-child { color: var(--brand); width: 20px; text-align: center; }
.mk-help-guides-list a i:last-child { color: var(--faint); font-size: .8rem; transition: transform .2s var(--ease), color .2s; }
.mk-help-guides-list a:hover { border-color: var(--brand); transform: translateX(3px); }
.mk-help-guides-list a:hover i:last-child { color: var(--brand); transform: translateX(2px); }
@media (max-width: 900px) { .mk-help-guides { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 24px; } }
@media (max-width: 560px) { .mk-help-guides { padding: 22px 16px; } .mk-help-guides .btn { width: 100%; justify-content: center; } }

.guide-card { display: flex; flex-direction: column; color: var(--text); }
.guide-card h3 { font-size: 1.15rem; }
.guide-card:hover { color: var(--text); }


/* =====================================================================================================================
   THE BUILD EXPERIENCE (js/builder.js)
   ===================================================================================================================== */

.bld-overlay { position: fixed; inset: 0; z-index: 1050; overflow-y: auto; opacity: 0; transition: opacity .35s var(--ease);
               background: radial-gradient(900px 600px at 20% 10%, rgba(0, 155, 219, .22), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(0, 99, 210, .15), transparent 60%),
                           color-mix(in srgb, var(--bg) 94%, transparent);
               backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bld-overlay.is-open { opacity: 1; }
.bld-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.bld-close { position: fixed; top: 18px; right: 18px; z-index: 4; width: 44px; height: 44px; border-radius: 3px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 1.1rem; }
.bld-close:hover { color: var(--text); }

.bld-stage { max-width: 1120px; min-height: 100%; margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; transition: opacity .4s, filter .4s; }
.bld-overlay.is-done .bld-stage { opacity: .25; filter: blur(4px); pointer-events: none; }
.bld-left { text-align: center; }

.bld-orb { position: relative; width: 210px; height: 210px; margin: 0 auto 26px; }
.bld-orb span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; }
.bld-orb .o1 { border-top-color: var(--brand); border-right-color: var(--brand); animation: spin 2.4s linear infinite; }
.bld-orb .o2 { inset: 18px; border-bottom-color: var(--brand-2); border-left-color: var(--brand-2); animation: spin 3.4s linear infinite reverse; }
.bld-orb .o3 { inset: 36px; border-top-color: var(--brand-3); animation: spin 1.8s linear infinite; }
.bld-core { position: absolute; inset: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 2.6rem;
            box-shadow: 0 0 60px rgba(0, 155, 219, .7), inset 0 0 30px rgba(255, 255, 255, .2); animation: bld-breathe 2.2s ease-in-out infinite; }
@keyframes bld-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 50px rgba(0, 155, 219, .55); } 50% { transform: scale(1.06); box-shadow: 0 0 90px rgba(0, 212, 170, .8); } }

.bld-pct { font-family: var(--font-display); font-weight: 800; font-size: 5rem; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
           background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bld-pct small { font-size: 2rem; }
.bld-title { margin: 10px 0 18px; color: var(--text-2); font-size: 1.05rem; }
.bld-title b { color: var(--text); }
.bld-bar { height: 8px; max-width: 380px; margin: 0 auto; }
.bld-counters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.bld-counters div { padding: 14px 8px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: transform .25s, border-color .25s; }
.bld-counters div.bump { animation: bld-bump .5s var(--ease); }
@keyframes bld-bump { 40% { transform: scale(1.07); border-color: var(--brand); } }
.bld-counters b { display: block; font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bld-counters span { font-size: .78rem; color: var(--muted); }

.bld-steps { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.bld-steps li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 3px; color: var(--faint); transition: all .35s var(--ease); border: 1px solid transparent; }
.bld-step-dot { width: 34px; height: 34px; border-radius: 3px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); flex: none; transition: all .35s; }
.bld-steps li.is-active { color: var(--text); background: var(--surface); border-color: rgba(0, 155, 219, .35); box-shadow: var(--glow); }
.bld-steps li.is-active .bld-step-dot { background: var(--grad); color: #fff; border-color: transparent; animation: pulse 1.6s infinite; }
.bld-steps li.is-done { color: var(--text-2); }
.bld-steps li.is-done .bld-step-dot { background: rgba(34, 197, 94, .14); color: var(--success); border-color: rgba(34, 197, 94, .3); }
.bld-step-label { font-weight: 600; }

/* The page feed (js/builder.js pageFeed): three rows on a conveyor, ticked off as each page is read and again as its
   passages are stored as vectors. Rows are placed by --slot (0-2 on screen, -1 and 3 just out of it), so moving one is a
   transform, and the panel keeps one height from the first second to the last. */
.bld-feed { --row-h: 54px; --row-gap: 6px; position: relative; padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border-strong);
            box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.bld-feed::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); background-size: 200% 100%; animation: shimmer-bar 2.4s linear infinite; }
.bld-feed[data-stage="done"]::before { background: var(--success); animation: none; }
.bld-feed[data-stage="failed"]::before { background: var(--warning); animation: none; }

.bld-feed-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bld-feed-icon { width: 30px; height: 30px; flex: none; border-radius: 3px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: .88rem;
                 box-shadow: 0 0 18px rgba(0, 155, 219, .45); transition: background .4s, box-shadow .4s; }
.bld-feed-icon.is-swap i { animation: bld-swap .45s var(--ease); }
@keyframes bld-swap { from { opacity: 0; transform: scale(.4) rotate(-30deg); } }
.bld-feed[data-stage="done"] .bld-feed-icon { background: var(--success); box-shadow: 0 0 18px rgba(34, 197, 94, .45); }
.bld-feed[data-stage="failed"] .bld-feed-icon { background: var(--warning); box-shadow: none; }
.bld-feed-label { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-feed-count { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bld-feed-count b { color: var(--text); }

/* one sliver per page: the whole crawl at a glance, the three on screen lifted */
.bld-feed-strip { display: flex; gap: 3px; height: 4px; margin-bottom: 12px; border-radius: 2px; }
.bld-feed-strip:empty { background: var(--surface-2); }
.bld-feed-strip i { flex: 1; border-radius: 2px; background: var(--surface-3); transition: background .4s, transform .3s var(--ease); }
.bld-feed-strip i.s-read { background: var(--brand); }
.bld-feed-strip i.s-stored { background: var(--success); }
.bld-feed-strip i.s-skip { opacity: .4; }
.bld-feed-strip i.is-on { transform: scaleY(1.8); }
.bld-feed-strip i.is-on.s-todo { background: color-mix(in srgb, var(--brand) 45%, var(--surface-3)); animation: pulse 1.2s infinite; }

.bld-feed-rows { position: relative; list-style: none; margin: 0; padding: 0; overflow: hidden; height: calc(3 * var(--row-h) + 2 * var(--row-gap)); }
.bld-row { position: absolute; left: 0; right: 0; top: 0; height: var(--row-h); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px;
           padding: 0 12px 0 10px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden;
           transform: translateY(calc(var(--slot, 0) * (var(--row-h) + var(--row-gap))));
           transition: transform .45s var(--ease), opacity .45s, background .35s, border-color .35s; }
.bld-row-ico { width: 34px; height: 34px; border-radius: 3px; display: grid; place-items: center; background: var(--surface-3); color: var(--brand); font-size: .9rem; transition: background .35s, color .35s; }
.bld-row-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bld-row-txt b { font-size: .92rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-row-txt small { font-family: var(--font-mono); font-size: .72rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bld-row-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.bld-row-badge b { color: inherit; font-variant-numeric: tabular-nums; }

/* reading: a beam sweeps across the row */
.bld-row[data-look="reading"] { border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.bld-row[data-look="reading"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 250% 100%; animation: bld-beam 1.6s linear infinite;
                                       background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--brand) 16%, transparent) 50%, transparent 70%); }
@keyframes bld-beam { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.bld-row[data-look="reading"] .bld-row-badge, .bld-row[data-look="read"] .bld-row-badge { color: var(--brand); }
.bld-row[data-look="read"] .bld-row-ico { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.bld-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); border-top-color: var(--brand); animation: spin .8s linear infinite; }

/* embedding: bits stream into the database */
.bld-row[data-look="embedding"] { border-color: color-mix(in srgb, var(--brand-2) 40%, transparent); }
.bld-row[data-look="embedding"] .bld-row-ico { background: var(--grad); color: #fff; animation: bld-glow 1.4s ease-in-out infinite; }
.bld-row[data-look="embedding"] .bld-row-badge { color: var(--brand-2); }
@keyframes bld-glow { 50% { box-shadow: 0 0 16px rgba(0, 212, 170, .65); } }
.bld-bits { position: relative; width: 26px; height: 10px; }
.bld-bits i { position: absolute; top: 3px; left: 0; width: 4px; height: 4px; border-radius: 1px; background: var(--brand-2); opacity: 0; animation: bld-bit 1.1s linear infinite; }
.bld-bits i:nth-child(2) { animation-delay: .37s; }
.bld-bits i:nth-child(3) { animation-delay: .74s; }
@keyframes bld-bit { 20%, 80% { opacity: 1; } 100% { transform: translateX(22px); opacity: 0; } }

/* stored: green, with a check that pops and a flash behind it */
.bld-row[data-look="stored"] { border-color: color-mix(in srgb, var(--success) 40%, transparent); background: color-mix(in srgb, var(--success) 8%, var(--surface-2)); }
.bld-row[data-look="stored"] .bld-row-ico { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.bld-row[data-look="stored"] .bld-row-badge { color: var(--success); }
.bld-row.is-ticked .bld-row-badge .fa-check { animation: bld-tick .55s var(--ease); }
.bld-row.is-ticked::before { content: ""; position: absolute; inset: 0; pointer-events: none; animation: bld-flash .9s ease-out forwards;
                             background: radial-gradient(circle at 90% 50%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 45%); }
.bld-row.is-ticked[data-look="stored"]::before { background: radial-gradient(circle at 90% 50%, color-mix(in srgb, var(--success) 32%, transparent), transparent 45%); }
@keyframes bld-tick { 0% { transform: scale(0) rotate(-45deg); } 60% { transform: scale(1.5); } }
@keyframes bld-flash { to { opacity: 0; } }

.bld-row[data-look="skip"] { opacity: .5; }
.bld-row[data-look="skip"] .bld-row-txt b { text-decoration: line-through; text-decoration-color: var(--faint); }
.bld-row.is-leaving { opacity: 0 !important; }

.bld-row.is-skeleton { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.bld-sk { display: block; height: 9px; border-radius: 2px; background: linear-gradient(90deg, var(--surface-3) 25%, color-mix(in srgb, var(--brand) 16%, var(--surface-3)) 50%, var(--surface-3) 75%);
          background-size: 200% 100%; animation: shimmer-bar 1.4s linear infinite; }
b.bld-sk { width: 58%; margin-bottom: 7px; }
small.bld-sk { width: 34%; height: 7px; }

@media (prefers-reduced-motion: reduce) {
    .bld-feed::before, .bld-feed *, .bld-feed *::before, .bld-feed *::after { animation: none !important; }
    .bld-row { transition: none; }
}

.bld-result { position: fixed; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 24px; }
.bld-done { width: 100%; max-width: 520px; text-align: center; animation: bld-rise .6s var(--ease); box-shadow: var(--shadow-lg); }
@keyframes bld-rise { from { opacity: 0; transform: translateY(30px) scale(.96); } }
.bld-done-badge { display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px; border-radius: 2px; background: rgba(34, 197, 94, .14); color: var(--success); font-weight: 700; font-size: .85rem; margin-bottom: 22px; }
.bld-meet { display: flex; align-items: center; justify-content: center; gap: 16px; text-align: left; margin-bottom: 18px; }
.bld-meet h2 { margin: 0; font-size: 1.7rem; }
.bld-bubble { text-align: left; padding: 14px 16px; border-radius: 4px 4px 4px 3px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); margin: 0 auto 18px; }
.bld-done-stats { display: flex; justify-content: center; gap: 22px; margin-bottom: 22px; color: var(--muted); font-size: .9rem; }
.bld-done-stats b { color: var(--text); }
.bld-fail-icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 4px; display: grid; place-items: center; background: rgba(245, 158, 11, .14); color: var(--warning); font-size: 1.6rem; }
.bld-done .row { justify-content: center; }

/* The ready card grew a look and a name to choose (js/builder.js persona): taller than a short screen, so the result
   scrolls, and the card centres itself while it fits (margin auto in a flex box never pushes it off the top). */
.bld-result { overflow-y: auto; align-items: flex-start; }
.bld-result > .bld-done { margin: auto; max-width: 560px; }
.bld-face { transition: transform .35s var(--ease); }
.bld-face.is-photo { background: var(--surface-3) !important; }
.bld-face img { animation: bld-pop .35s var(--ease); }
@keyframes bld-pop { from { opacity: 0; transform: scale(.8); } }

.bld-persona { text-align: left; margin: 0 0 20px; padding: 16px 0 0; border-top: 1px solid var(--border); }
.bld-pick-h { margin: 0 0 8px; font: 700 .7rem var(--font-display); font-stretch: 112%; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bld-pick-h:not(:first-child) { margin-top: 16px; }

.bld-looks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bld-look { display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; cursor: pointer; color: var(--text);
            background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); transition: border-color .2s, background .2s, box-shadow .2s; }
.bld-look:hover { border-color: var(--border-strong); }
.bld-look.is-active { border-color: #009BDB; background: rgba(0, 155, 219, .08); box-shadow: 0 0 0 1px #009BDB, 0 12px 28px -18px rgba(0, 155, 219, .9); }
.bld-look-face { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; color: #fff; font-size: 1.05rem;
                 background: var(--grad); clip-path: var(--hex); }
.bld-look-face.is-photo { background: var(--surface-3); }
.bld-look-face img { width: 100%; height: 100%; object-fit: cover; }
.bld-look-t { display: flex; flex-direction: column; min-width: 0; }
.bld-look-t b { font-size: .92rem; }
.bld-look-t b i { color: #009BDB; margin-right: 3px; font-size: .85em; }
.bld-look-t small { color: var(--muted); font-size: .78rem; line-height: 1.3; }

.bld-photos { margin-top: 10px; animation: bld-pop .3s var(--ease); }
.bld-gender button { padding: 6px 12px; }
.bld-ph-grid { display: flex; gap: 8px; margin-top: 10px; padding: 4px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.bld-ph { position: relative; width: 52px; height: 52px; flex: none; padding: 0; border: 0; cursor: pointer; background: var(--surface-3); clip-path: var(--hex);
          scroll-snap-align: center; transition: transform .2s var(--ease), filter .2s; filter: saturate(.85); }
.bld-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bld-ph:hover { transform: translateY(-2px); filter: none; }
.bld-ph.is-active { filter: none; transform: scale(1.06); }
.bld-ph.is-active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 155, 219, .75)); }

.bld-names { display: flex; flex-wrap: wrap; gap: 6px; }
.bld-name { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; cursor: pointer; color: var(--text-2); font: 600 .86rem var(--font-display);
            background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); transition: border-color .2s, background .2s, color .2s, transform .2s var(--ease); }
.bld-name:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.bld-name i { font-size: .8em; color: var(--muted); }
.bld-name small { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #009BDB; }
.bld-name.is-ai i { color: #009BDB; }
.bld-name.is-active { color: var(--text); border-color: #009BDB; background: rgba(0, 155, 219, .1); box-shadow: 0 0 0 1px #009BDB; }
.bld-name.is-active i { color: #009BDB; }
.bld-own { margin-top: 10px; animation: bld-pop .25s var(--ease); }

@media (max-width: 520px) {
    .bld-looks { grid-template-columns: 1fr; }
    .bld-result { padding: 72px 16px 16px; }       /* clear of the close button */
}
@media (prefers-reduced-motion: reduce) {
    .bld-face img, .bld-photos, .bld-own { animation: none; }
}

.bld-inline-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bld-mini-hero { text-align: center; }
.bld-mini-icon { width: 60px; height: 60px; margin: 6px auto 14px; border-radius: 4px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 1.5rem; box-shadow: var(--glow); }
.bld-ticks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; text-align: left; }
.bld-ticks i { color: var(--success); margin-right: 8px; }

/* "Back to my preview" in the you've-used-your-free-preview popup: the visitor's own assistant, one click away. */
.bld-back { display: flex; align-items: center; gap: 14px; margin: 16px 0 4px; padding: 12px 14px; border-radius: 4px; text-align: left; color: var(--text);
            background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 1px solid transparent;
            box-shadow: 0 10px 30px -16px rgba(0, 155, 219, .7); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.bld-back:hover { color: var(--text); transform: translateY(-2px); box-shadow: 0 16px 36px -14px rgba(0, 155, 219, .85); }
.bld-back-icon { width: 42px; height: 42px; flex: none; border-radius: 3px; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 1.05rem; }
.bld-back-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bld-back-txt b { font-family: var(--font-display); font-size: 1rem; }
.bld-back-txt small { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.bld-back-go { color: var(--brand); transition: transform .35s var(--ease); }
.bld-back:hover .bld-back-go { transform: translateX(4px); }

/* One column on phones, with the page feed moved up to sit just under the progress bar: the two columns dissolve
   (display: contents) so every block can be ordered on its own. */
@media (max-width: 900px) {
    .bld-stage { display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 70px 16px 40px; text-align: center; }
    .bld-left, .bld-right { display: contents; }
    .bld-orb { order: 1; width: 150px; height: 150px; } .bld-core { inset: 40px; font-size: 1.8rem; }
    .bld-pct { order: 2; font-size: 3.6rem; }
    .bld-title { order: 3; }
    .bld-bar { order: 4; width: 100%; }
    .bld-feed { order: 5; margin-top: 16px; --row-h: 48px; --row-gap: 5px; padding: 12px; }
    .bld-counters { order: 6; margin-top: 18px; }
    .bld-steps { order: 7; margin: 26px 0 0; text-align: left; }
}
/* Phones held upright: the percentage sits beside the orb rather than under it (the stage wraps as rows, so the two
   share the first one). The feed's rows go to one line each, and the step list is left out - the feed's own heading
   names the stage - so the whole build fits on one screen without scrolling. */
@media (max-width: 600px) and (orientation: portrait) {
    .bld-stage { flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; }
    .bld-title, .bld-bar, .bld-feed, .bld-counters { flex-basis: 100%; }
    .bld-orb { margin: 0 18px 12px 0; }
    .bld-pct { margin-bottom: 12px; }
    .bld-steps { display: none; }
    .bld-feed { --row-h: 42px; padding: 10px; }
    .bld-feed-head { margin-bottom: 8px; }
    .bld-feed-icon { width: 26px; height: 26px; font-size: .8rem; }
    .bld-feed-strip { margin-bottom: 10px; }
    .bld-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 0 10px 0 7px; }
    .bld-row-ico { width: 28px; height: 28px; font-size: .8rem; }
    .bld-row-txt b { font-size: .86rem; }
    .bld-row-txt small { display: none; }
    b.bld-sk { margin-bottom: 0; }
}

/* the pricing matrix's group rows */
.mk-matrix tr.mk-mx-head td { background: var(--surface-2); padding-top: 12px; padding-bottom: 12px; text-align: left !important; }
.mk-mx-group { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 800; }
.mk-matrix tr.mk-mx-head:hover { background: var(--surface-2); }

/* Avatars in the replicas are Font Awesome icons now; size them like the glyphs they replaced. */
.mk-chat-avatar i { font-size: .95em; line-height: 1; }
.footer-socials i { font-size: 15px; line-height: 1; }

/* ---- BOOKINGS AND CALLBACKS (home 6a) - a chat that books: the card, the chosen time, the confirmation ---------------- */
.mk-book-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.mk-book-visual { position: relative; padding: 30px 30px 40px 0; }
.mk-book-chat { max-width: 400px; margin: 0 auto; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-lg), 0 0 90px -40px rgba(0, 155, 219, .6); }
.mk-bc-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; color: #fff; background: linear-gradient(135deg, #00D4AA, #009BDB 50%, #0063D2); }
.mk-bc-head strong { display: block; font-family: var(--font-display); }
.mk-bc-head span { display: flex; align-items: center; gap: 6px; font-size: .78rem; opacity: .9; }
.mk-bc-head span i { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; border: 2px solid #fff; box-sizing: content-box; }
.mk-bc-av { width: 38px; height: 38px; border-radius: 4px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); font-size: 1.2rem; color: #fff; }
.mk-bc-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 14px 18px; background: var(--surface); }
.mk-bc-msg { align-self: flex-start; max-width: 85%; padding: 9px 13px; border-radius: 3px 3px 3px 2px; font-size: .88rem; background: var(--surface-2); border: 1px solid var(--border); }
.mk-bc-msg.is-user { align-self: flex-end; border-radius: 3px 3px 2px 3px; color: #fff; border: 0; background: linear-gradient(135deg, #009BDB, #0063D2); }
.mk-bc-card { padding: 12px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); animation: mk-bc-in 9s var(--ease) infinite; }
.mk-bc-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mk-bc-card-head > span { width: 30px; height: 30px; border-radius: 4px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #009BDB, #0063D2); font-size: .85rem; }
.mk-bc-card-head b { display: block; font-size: .86rem; } .mk-bc-card-head small { font-size: .74rem; color: var(--muted); }
.mk-bc-days { display: flex; gap: 6px; margin-bottom: 9px; }
.mk-bc-days span { flex: 1; padding: 5px 0; border-radius: 3px; text-align: center; font-size: .66rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--border); }
.mk-bc-days b { display: block; font-size: .84rem; color: var(--text); }
.mk-bc-days .is-on { color: #fff; background: linear-gradient(135deg, #009BDB, #0063D2); border-color: transparent; } .mk-bc-days .is-on b { color: #fff; }
.mk-bc-days .is-off { opacity: .4; }
.mk-bc-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mk-bc-times span { padding: 6px 0; border-radius: 3px; text-align: center; font-size: .74rem; font-weight: 600; background: var(--surface); border: 1px solid var(--border); }
.mk-bc-times .is-on { color: #009BDB; border-color: #009BDB; box-shadow: 0 0 0 3px rgba(0, 155, 219, .16); animation: mk-bc-pick 9s ease infinite; }
.mk-bc-done { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 3px; font-size: .84rem; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .3);
              animation: mk-bc-done 9s var(--ease) infinite; }
.mk-bc-done i { color: var(--success); margin-top: 3px; }
.mk-book-feats { margin-top: 22px; }
@keyframes mk-bc-in { 0%, 8% { opacity: 0; transform: translateY(10px); } 14%, 100% { opacity: 1; transform: none; } }
@keyframes mk-bc-pick { 0%, 30% { color: inherit; border-color: var(--border); box-shadow: none; } 36%, 100% { color: #009BDB; border-color: #009BDB; box-shadow: 0 0 0 3px rgba(0, 155, 219, .16); } }
@keyframes mk-bc-done { 0%, 44% { opacity: 0; transform: translateY(8px) scale(.98); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 980px) { .mk-book-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .mk-book-visual { padding: 20px 0 30px; } }
@media (prefers-reduced-motion: reduce) { .mk-bc-card, .mk-bc-times .is-on, .mk-bc-done { animation: none; } }

/* the hero's website box, when a "Start" / "Build my AI free" link brings someone to it: three pulses of a ring */
.mk-build-form.is-spotlit .mk-build-field { border-color: rgba(0, 155, 219, .8); animation: spot-ring 1.3s ease-out 3; }
.mk-build-form.is-spotlit .mk-build-field::before { opacity: 1; }
@keyframes spot-ring {
    0%   { box-shadow: 0 0 0 0 rgba(0, 155, 219, .6), 0 0 60px -6px rgba(0, 155, 219, .6), 0 24px 70px -20px rgba(0, 212, 170, .8); }
    100% { box-shadow: 0 0 0 22px rgba(0, 155, 219, 0), 0 0 60px -6px rgba(0, 155, 219, .6), 0 24px 70px -20px rgba(0, 212, 170, .8); }
}
@media (prefers-reduced-motion: reduce) { .mk-build-form.is-spotlit .mk-build-field { animation: none; box-shadow: 0 0 0 6px rgba(0, 155, 219, .3); } }
/* room above the hero's box for that tip, so it never covers the paragraph above */
.mk-build-form[data-spotlight] { margin-top: 50px; }


/* =====================================================================================================================
   CASE STUDIES  (/case-studies - content/case-studies.inc, js/case-studies.js)
   Logos sit on their own tiles (white for a dark logo, ink for a white one) so every brand reads on either theme.
   Screenshots wear a flat browser frame. Text still to come from the client is a dashed [[placeholder]] tag.
   ===================================================================================================================== */

.cs-hero { padding-bottom: 28px; }
.cs-hero h1 { font-size: clamp(2.2rem, 5.2vw, 4rem); }
.cs-hero-lead { max-width: 680px; margin-left: auto; margin-right: auto; }
.cs-stats { display: inline-flex; margin-top: 30px; border: 1px solid var(--border); background: var(--surface); }
.cs-stats:empty { display: none; }
.cs-stat { padding: 16px 30px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cs-stat + .cs-stat { border-left: 1px solid var(--border); }
.cs-stat b { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1;
             background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.cs-stat span { font-family: var(--font-display); font-stretch: 112%; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.cs-admin-note .alert { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 8px; }
.cs-admin-note code { font-size: .82em; }

/* ---- placeholders the client fills in ----------------------------------------------------------------------------- */
.cs-ph { display: inline; padding: 1px 6px; border: 1px dashed color-mix(in srgb, var(--warning) 70%, transparent); background: color-mix(in srgb, var(--warning) 10%, transparent);
         color: var(--text-2); font-style: italic; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone;
         -webkit-text-fill-color: currentColor; font-family: var(--font-sans); font-stretch: 100%; letter-spacing: 0; text-transform: none; font-size: .92em; line-height: 1.5; }

/* ---- logo tiles --------------------------------------------------------------------------------------------------- */
.cs-logo-tile { --cut: 7px; display: inline-flex; align-items: center; justify-content: center; height: 46px; min-width: 96px; max-width: 170px; padding: 9px 14px; flex: none;
                background: #fff; clip-path: var(--chamfer); }
.cs-logo-tile.is-dark { background: #0A0D12; }
.cs-logo-tile img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.cs-logo-tile.is-lg { height: 58px; min-width: 120px; max-width: 210px; padding: 11px 18px; }
.cs-logo-tile.is-empty { background: var(--grad); min-width: 0; width: 46px; padding: 0; clip-path: var(--hex); }
.cs-logo-tile.is-empty.is-lg { width: 58px; }
.cs-logo-initials { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: .9rem; color: #fff; letter-spacing: .02em; }

/* ---- the logo wall ------------------------------------------------------------------------------------------------ */
.cs-logos { position: relative; padding: 18px 0 8px; overflow: hidden;
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cs-marquee-track { display: flex; width: max-content; animation: cs-marquee calc(var(--cs-n, 12) * 3.2s) linear infinite; }
.cs-marquee-dup { display: flex; }
.cs-logos:hover .cs-marquee-track, .cs-logos:focus-within .cs-marquee-track { animation-play-state: paused; }
.cs-marquee-item { margin: 0 9px; padding: 0; border: 0; background: none; cursor: pointer; opacity: .78; filter: grayscale(.35); transition: opacity .25s, filter .25s, transform .25s var(--ease); }
.cs-marquee-item:hover, .cs-marquee-item:focus-visible { opacity: 1; filter: none; transform: translateY(-2px); }
@keyframes cs-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .cs-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 14px; }
    .cs-marquee-dup { display: none; }
    .cs-logos { -webkit-mask-image: none; mask-image: none; }
}

/* ---- browser frame ------------------------------------------------------------------------------------------------ */
.cs-browser { position: relative; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); overflow: hidden; }
.cs-browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cs-browser-bar > span { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-3); }
.cs-browser-bar > span:nth-child(1) { background: #FF5F57; } .cs-browser-bar > span:nth-child(2) { background: #FEBC2E; } .cs-browser-bar > span:nth-child(3) { background: #28C840; }
.cs-browser-url { flex: 1; min-width: 0; margin-left: 8px; padding: 4px 10px; background: var(--bg); color: var(--muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-browser-url i { color: var(--success); font-size: .68rem; margin-right: 4px; }
.cs-browser-body { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.cs-browser-body img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cs-shot-empty { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, #009BDB 18%, var(--surface-2)), var(--surface-3)); }
.cs-shot-empty span { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(2rem, 6vw, 3.4rem); color: color-mix(in srgb, var(--text) 22%, transparent); }

/* ---- featured story ----------------------------------------------------------------------------------------------- */
.cs-featured { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 40px; background: var(--surface); border: 1px solid var(--border); }
.cs-featured::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, #00D4AA, #009BDB 50%, #0063D2); }
.cs-featured::after { content: ""; position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; background: linear-gradient(225deg, #009BDB 0 50%, transparent 50%); }
.cs-featured-visual { position: relative; }
.cs-featured-visual .cs-browser { transform: perspective(1400px) rotateY(5deg) rotateX(2deg); transition: transform .6s var(--ease); }
.cs-featured:hover .cs-featured-visual .cs-browser { transform: none; }
.cs-live-pill { position: absolute; left: -14px; bottom: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface); border: 1px solid var(--border-strong);
                box-shadow: var(--shadow); font-family: var(--font-display); font-stretch: 112%; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cs-featured-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cs-kicker { font-family: var(--font-display); font-stretch: 125%; font-size: .68rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--eyebrow-ink); }
.cs-featured-title { font-size: clamp(1.4rem, 2.5vw, 2rem); margin: 12px 0 12px; }
.cs-featured-summary { color: var(--text-2); margin-bottom: 22px; }
.cs-featured .btn { margin-top: 6px; }

.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--line-accent); color: var(--text-2);
          font-family: var(--font-display); font-stretch: 112%; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cs-tag i { color: var(--brand); }
.cs-tag.is-quiet { border-color: var(--border); color: var(--muted); }
.cs-tag.is-quiet i { color: var(--muted); }
.cs-tag.is-draft { border-color: var(--warning); color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }

.cs-results { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); margin-bottom: 22px; }
.cs-result { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cs-result + .cs-result { border-left: 1px solid var(--border); }
.cs-result b { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.05;
               background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; overflow-wrap: anywhere; }
.cs-result span { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.cs-results.is-wide { margin: 28px 0; }
.cs-results.is-wide .cs-result { padding: 20px 22px; }

.cs-quote { position: relative; margin: 0 0 22px; padding: 18px 20px 16px 22px; background: var(--surface-2); border-left: 2px solid #009BDB; }
.cs-quote-mark { position: absolute; top: -12px; right: 16px; font-size: 1.7rem; color: #009BDB; opacity: .5; }
.cs-quote blockquote { margin: 0 0 12px; font-size: 1.02rem; line-height: 1.55; color: var(--text); }
.cs-quote.is-compact blockquote { font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cs-quote figcaption { display: flex; align-items: center; gap: 12px; }
.cs-quote figcaption > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-quote figcaption b { font-size: .9rem; }
.cs-quote figcaption small { color: var(--muted); font-size: .78rem; }
.cs-quote-face { width: 40px; height: 36px; flex: none; display: grid; place-items: center; clip-path: var(--hex); background: var(--grad); color: #fff; overflow: hidden;
                 font-family: var(--font-display); font-stretch: 118%; font-weight: 800; font-size: .74rem; }
.cs-quote-face img { width: 100%; height: 100%; object-fit: cover; }

/* ---- the library: filters, grid, pages ---------------------------------------------------------------------------- */
.cs-library { scroll-margin-top: 80px; }
.cs-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer;
           font-family: var(--font-display); font-stretch: 112%; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: border-color .2s, color .2s, background .2s; }
.cs-chip i { color: var(--muted); transition: color .2s; }
.cs-chip small { font-family: var(--font-sans); font-size: .7rem; letter-spacing: 0; color: var(--faint); font-weight: 600; }
.cs-chip:hover { border-color: var(--border-strong); color: var(--text); }
.cs-chip.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }
.cs-chip.is-active i, .cs-chip.is-active small { color: inherit; opacity: .8; }
.cs-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-search { position: relative; display: block; }
.cs-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .85rem; pointer-events: none; }
.cs-search .input { padding-left: 34px; width: 230px; }
.cs-tools .select { width: auto; min-width: 180px; }
.cs-count { min-height: 22px; margin: 16px 0 18px; color: var(--muted); font-size: .88rem; }
.cs-count b { color: var(--text); font-weight: 600; }
.cs-count .link-btn { margin-left: 10px; font-size: .8rem; }

.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cs-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); overflow: hidden;
           transition: transform .35s var(--ease), border-color .25s, box-shadow .35s var(--ease); animation: cs-in .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
.cs-card::after { content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; z-index: 2; background: linear-gradient(225deg, #009BDB 0 50%, transparent 50%); opacity: .9; }
.cs-card:hover, .cs-card:focus-within { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.cs-card-hit { position: absolute; inset: 0; z-index: 3; border: 0; background: none; cursor: pointer; }
.cs-card-hit:focus-visible { outline: 2px solid #009BDB; outline-offset: -2px; }
.cs-card-shot { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cs-card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .8s var(--ease); }
.cs-card:hover .cs-card-shot img { transform: scale(1.04); }
.cs-card-shot::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 82%, transparent)); pointer-events: none; }
.cs-card-logo { position: absolute; left: 16px; bottom: 14px; z-index: 1; height: 40px; min-width: 84px; max-width: 150px; padding: 8px 12px; box-shadow: var(--shadow); }
.cs-card-logo.is-empty { width: 40px; min-width: 0; padding: 0; }
.cs-card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.cs-card-name { margin: 2px 0 0; font-size: 1.12rem; text-transform: uppercase; font-stretch: 118%; }
.cs-card-headline { margin: 0; color: var(--text-2); font-size: .93rem; line-height: 1.5; }
.cs-card-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.cs-card-results > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cs-card-results b { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 1.15rem; line-height: 1.1; color: var(--text); overflow-wrap: anywhere; }
.cs-card-results span { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.cs-card-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; color: var(--brand);
                font-family: var(--font-display); font-stretch: 112%; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cs-card-more i { transition: transform .3s var(--ease); }
.cs-card:hover .cs-card-more i { transform: translateX(4px); }
.cs-skel { animation: none; }
.cs-skel .cs-card-shot { border-bottom: 0; }
.cs-empty { grid-column: 1 / -1; border: 1px dashed var(--border-strong); }
@keyframes cs-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cs-card { animation: none; } .cs-card:hover, .cs-card:focus-within { transform: none; } .cs-featured-visual .cs-browser { transform: none; } }

.cs-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 40px; }
.cs-pages { display: flex; align-items: center; gap: 6px; }
.cs-page-btn { --cut: 6px; min-width: 42px; height: 42px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
               background: var(--surface); border: 0; box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-2); clip-path: var(--chamfer);
               font-family: var(--font-display); font-stretch: 118%; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums;
               transition: background .2s, color .2s, box-shadow .2s; }
.cs-page-btn:hover:not(:disabled):not(.is-current) { background: var(--text); color: var(--bg); box-shadow: inset 0 0 0 1px var(--text); }
.cs-page-btn.is-current { background: var(--grad); background-origin: border-box; color: #fff; box-shadow: none; cursor: default; }
.cs-page-btn:disabled { opacity: .35; cursor: not-allowed; }
.cs-page-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #009BDB; }
.cs-page-btn.is-step { padding: 0 16px; }
.cs-page-gap { min-width: 22px; text-align: center; color: var(--muted); }
.cs-page-of { display: none; color: var(--muted); font-size: .85rem; }

/* ---- the full story (its own page, /case-studies/<slug>: CaseStudies.PageHtml) ------------------------------------ */
.cs-story-pos { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.cs-story-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.cs-story-head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.cs-story-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0; }
.cs-story-head .lead { margin: 0; font-size: 1rem; }
.cs-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; margin: 4px 0 0; border: 1px solid var(--border); }
.cs-facts > div { padding: 10px 14px; min-width: 0; }
.cs-facts > div:nth-child(even) { border-left: 1px solid var(--border); }
.cs-facts > div:nth-child(n+3) { border-top: 1px solid var(--border); }
.cs-facts dt { font-family: var(--font-display); font-stretch: 112%; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.cs-facts dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.cs-facts a { color: var(--brand); }
.cs-story-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cs-story h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; font-stretch: 118%; }
.cs-story p { color: var(--text-2); line-height: 1.65; }
.cs-num { font-family: var(--font-mono); font-size: .7rem; color: var(--brand); padding: 2px 6px; border: 1px solid var(--line-accent); letter-spacing: 0; }
.cs-benefits { margin: 10px 0 26px; }
.cs-benefits ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.cs-benefits li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); line-height: 1.5; }
.cs-benefits li i { color: var(--success); margin-top: 4px; }
.cs-story .cs-quote { margin-bottom: 26px; padding: 26px 28px 22px 30px; }
.cs-story .cs-quote blockquote { font-size: 1.15rem; }
.cs-story-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; background: var(--grad-soft); border: 1px solid var(--line-accent); }
.cs-story-cta > div { display: flex; flex-direction: column; gap: 2px; }
.cs-story-cta span { color: var(--text-2); font-size: .9rem; }

/* ---- smaller screens ---------------------------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .cs-featured { grid-template-columns: 1fr; gap: 30px; padding: 28px; }
    .cs-featured-visual .cs-browser { transform: none; }
    .cs-live-pill { left: 12px; }
    .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-story-hero { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 720px) {
    .cs-stats { display: flex; width: 100%; }
    .cs-stat { flex: 1; padding: 14px 8px; }
    .cs-featured { padding: 20px 16px; }
    .cs-results { grid-template-columns: 1fr; }
    .cs-result + .cs-result { border-left: 0; border-top: 1px solid var(--border); }
    .cs-grid { grid-template-columns: 1fr; }
    .cs-toolbar { flex-direction: column; align-items: stretch; }
    .cs-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
    .cs-chips::-webkit-scrollbar { display: none; }
    .cs-chip { flex: none; }
    .cs-tools { flex-direction: column; }
    .cs-search .input, .cs-tools .select { width: 100%; }
    .cs-story-cols, .cs-benefits ul, .cs-facts { grid-template-columns: 1fr; }
    .cs-facts > div:nth-child(even) { border-left: 0; }
    .cs-facts > div:nth-child(n+2) { border-top: 1px solid var(--border); }
    .cs-pages { display: none; }
    .cs-page-of { display: inline; }
}

/* =====================================================================================================================
   THE BUILD PAGE  (/build - content/build.inc, js/build.js)
   The home hero's heading and form, given a stage of their own: a centred glow over a slowly drifting honeycomb, and
   beside the form a replay of a build - address typed, a scan line reading the page, the pages found stacking up under
   a hexagon that fills, then the finished assistant answering. The replay's state is a class on [data-bd-scan]:
   is-typing -> is-scanning -> is-ready. --bd-accent is the made-up business's colour.
   ===================================================================================================================== */

.bd-hero { position: relative; padding: 64px 0 56px; overflow: hidden; isolation: isolate;
           --h1-a: #2EE6C0; --h1-b: #38B6F0; --h1-c: #60A5FA; --h1-glow: rgba(56, 189, 248, .55); }
@supports (overflow: clip) { .bd-hero { overflow: visible; overflow-x: clip; } }
[data-theme="light"] .bd-hero { --h1-a: #00B894; --h1-b: #009BDB; --h1-c: #0063D2; --h1-glow: rgba(0, 155, 219, .35); }
.bd-hero::before { content: ""; position: absolute; left: 50%; top: -200px; width: 1200px; height: 760px; margin-left: -600px; z-index: -1; pointer-events: none;
                   background: radial-gradient(closest-side, rgba(0, 155, 219, .22), rgba(0, 212, 170, .08) 55%, transparent); }
.bd-hero::after { content: ""; position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none; opacity: .55;
                  background: var(--hive-svg) 0 0 / 48px 83.14px; animation: bd-drift 60s linear infinite;
                  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 62% 40%, #000 18%, transparent 75%); mask-image: radial-gradient(ellipse 70% 62% at 62% 40%, #000 18%, transparent 75%); }
[data-theme="light"] .bd-hero::before { opacity: .5; }
[data-theme="light"] .bd-hero::after { opacity: .35; }
@keyframes bd-drift { to { background-position: 48px 166.28px; } }

.bd-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.bd-hero .display.bd-h1 { font-size: clamp(2rem, 3.7vw, 3.1rem); margin: 18px 0 20px; }      /* over design.css .display */
.bd-hero-copy .lead { max-width: 580px; }
.bd-hero-copy .bd-form { max-width: 600px; }

/* the rest of the hero waits for the heading, as on the home page */
.bd-hero .bd-lead.reveal { transition-delay: 1.35s; }
.bd-hero .bd-form.reveal { transition-delay: 1.5s; }
.bd-hero .bd-micro.reveal { transition-delay: 1.65s; }
.bd-hero .bd-visual.reveal { transition-delay: .9s; }

/* ---- the replay ---- */
.bd-visual { position: relative; isolation: isolate; }
.bd-visual::before { content: ""; position: absolute; inset: 6% -3% -6% 10%; z-index: -1; border: 1px solid var(--line-accent); transform: skewX(-6deg); pointer-events: none; }
.bd-scan { --bd-accent: #0EA5E9; position: relative; }
.bd-browser { overflow: hidden; }
.bd-browser .mk-browser-url { min-width: 0; white-space: nowrap; overflow: hidden; }
.bd-caret { display: none; width: 1.5px; height: 1em; margin-left: -6px; background: var(--brand); animation: bd-blink 1s steps(1) infinite; }
.is-typing .bd-caret { display: inline-block; }
@keyframes bd-blink { 50% { opacity: 0; } }
.bd-browser-body { height: 540px; overflow: hidden; }

.bd-site { position: relative; transition: opacity .6s var(--ease), filter .6s var(--ease); }
.is-ready .bd-site { opacity: .45; filter: saturate(.6); }
.bd-site .mk-skel { transition: background .4s; }
.is-scanning .bd-site .mk-skel { background: color-mix(in srgb, var(--bd-accent) 9%, var(--surface-2)); }
.bd-beam { position: absolute; left: -22px; right: -22px; top: 0; height: 2px; opacity: 0; pointer-events: none;
           background: linear-gradient(90deg, transparent, var(--bd-accent) 20%, #fff 50%, var(--bd-accent) 80%, transparent);
           box-shadow: 0 0 18px 3px color-mix(in srgb, var(--bd-accent) 60%, transparent), 0 -40px 60px -20px color-mix(in srgb, var(--bd-accent) 35%, transparent); }
.is-scanning .bd-beam { opacity: 1; animation: bd-beam 1.7s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes bd-beam { 0% { top: 0; } 50% { top: 100%; } 100% { top: 0; } }

.bd-panel { --cut: 12px; position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 18px; clip-path: var(--chamfer);
            background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
            transition: opacity .45s var(--ease), transform .45s var(--ease); }
.is-ready .bd-panel { opacity: 0; transform: translateY(24px); pointer-events: none; }
.bd-panel-head { display: flex; align-items: center; gap: 14px; }
.bd-panel-head b { display: block; font-family: var(--font-display); font-stretch: 112%; font-size: .92rem; }
.bd-panel-head small { color: var(--muted); font-size: .8rem; }
.bd-ring { --p: 0; position: relative; flex: none; width: 56px; height: 56px; display: grid; grid-auto-flow: column; align-content: center; justify-content: center; clip-path: var(--hex);
           background: conic-gradient(var(--bd-accent) calc(var(--p) * 1%), var(--surface-3) 0); font-family: var(--font-display); font-weight: 800; font-size: .95rem; }
.bd-ring::before { content: ""; position: absolute; inset: 4px; clip-path: var(--hex); background: var(--surface); }
.bd-ring span, .bd-ring small { position: relative; }
.bd-ring small { font-size: .6rem; color: var(--muted); margin-top: 3px; }
.bd-found { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-height: 120px; align-content: start; }
.bd-found li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; font-size: .8rem; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
               animation: bd-chip .45s var(--ease) both; }
.bd-found li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-found li > i:first-child { color: var(--bd-accent); width: 14px; text-align: center; }
.bd-found-ok { color: var(--success); font-size: .72rem; }
@keyframes bd-chip { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 100% { opacity: 1; transform: none; } }

.bd-ready { position: absolute; right: 22px; bottom: 22px; width: min(350px, calc(100% - 44px)); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
            opacity: 0; transform: translateY(26px) scale(.96); transform-origin: bottom right; pointer-events: none; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.is-ready .bd-ready { opacity: 1; transform: none; }
.bd-ready-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bd-accent); color: #fff; transition: background .5s; }
.bd-ready-head b { display: block; font-family: var(--font-display); font-size: .95rem; }
.bd-ready-head small { display: flex; align-items: center; gap: 6px; font-size: .75rem; opacity: .92; }
.bd-ready-avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; clip-path: var(--hex); background: rgba(255, 255, 255, .22); font-size: 1.05rem; }
.bd-ready-body { --hc: var(--bd-accent); min-height: 210px; padding: 14px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }

.bd-tag { --cut: 6px; position: absolute; top: -13px; right: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; clip-path: var(--chamfer);
          background: var(--surface); border: 1px solid var(--border-strong); color: var(--muted);
          font-family: var(--font-display); font-stretch: 118%; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.bd-tag i { color: var(--brand); }

/* ---- shared marks ---- */
.bd-hex { width: 48px; height: 48px; flex: none; display: grid; place-items: center; clip-path: var(--hex); background: var(--grad); color: #fff; font-size: 1.15rem; }

/* ---- the next 60 seconds ---- */
.bd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bd-step { position: relative; padding: 28px 26px 26px; background: var(--surface); border: 1px solid var(--border); text-align: center; }
.bd-step .bd-hex { position: relative; width: 58px; height: 58px; margin: 6px auto 18px; font-size: 1.35rem; }
.bd-step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.bd-step p { margin: 0; }
.bd-step-n { position: absolute; top: 14px; left: 18px; font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 1.6rem; line-height: 1;
             color: transparent; -webkit-text-stroke: 1px var(--border-strong); }

/* ---- six reasons ---- */
.bd-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.bd-reason { position: relative; padding: 30px 28px; background: var(--bg); transition: background .3s; }
.bd-reason::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.bd-reason:hover { background: var(--surface); }
.bd-reason:hover::before { transform: scaleX(1); }
.bd-reason .bd-hex { width: 44px; height: 44px; margin-bottom: 18px; font-size: 1.05rem; transition: transform .4s var(--ease); }
.bd-reason .bd-hex i { transition: transform .4s var(--ease); }
.bd-reason:hover .bd-hex { transform: rotate(30deg) scale(1.06); }
.bd-reason:hover .bd-hex i { transform: rotate(-30deg); }
.bd-reason h3 { font-size: 1.08rem; margin-bottom: 8px; }
.bd-reason p { margin: 0; }

/* ---- 9:47pm: the messages arrive one after another once the section is in view ---- */
.bd-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; }
.bd-vs-card { position: relative; display: flex; flex-direction: column; padding: 24px; background: var(--surface); border: 1px solid var(--border); }
.bd-vs-card.is-with { border-color: transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--rule) border-box; box-shadow: 0 30px 70px -40px rgba(0, 155, 219, .8); }
.bd-vs-label { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--muted);
               font-family: var(--font-display); font-stretch: 118%; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.is-with .bd-vs-label { color: var(--eyebrow-ink); }
.bd-vs-chat { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 190px; }
.bd-vs-chat .mk-msg { max-width: 88%; font-size: .9rem; }
.is-without .mk-msg.mk-user { --hc: #64748B; }
.bd-vs-auto { color: var(--muted); font-style: italic; }
.bd-vs-auto b { font-style: normal; color: var(--text-2); }
.bd-vs-end { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-weight: 600; font-size: .95rem; }
.is-without .bd-vs-end { color: var(--danger); }
.is-with .bd-vs-end { color: var(--success); }
.bd-vs .bd-vs-m { opacity: 0; animation: none; }
.bd-vs.is-visible .bd-vs-m { animation: bd-pop .55s var(--ease) calc(.35s + var(--d) * .9s) both; }
@keyframes bd-pop { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: none; } }

/* ---- no risk ---- */
.bd-assure { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bd-assure > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 22px 20px; }
.bd-assure > div + div { border-left: 1px solid var(--border); }
.bd-assure i { grid-row: span 2; color: var(--brand); font-size: 1.3rem; }
.bd-assure b { font-family: var(--font-display); font-stretch: 112%; font-size: .95rem; }
.bd-assure small { color: var(--muted); font-size: .82rem; line-height: 1.4; }

/* ---- final ---- */
.bd-final .lead { max-width: 620px; margin-left: auto; margin-right: auto; }
.bd-final .mk-build-form { max-width: 600px; text-align: left; }

/* ---- smaller screens ---- */
@media (max-width: 980px) {
    .bd-hero { padding-top: 40px; }
    .bd-hero-inner { grid-template-columns: 1fr; gap: 48px; }
    .bd-visual { width: 100%; max-width: 620px; margin: 0 auto; }
    .bd-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .bd-steps, .bd-vs { grid-template-columns: 1fr; }
    .bd-assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bd-assure > div:nth-child(3) { border-left: 0; }
    .bd-assure > div:nth-child(n+3) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
    .bd-browser-body { height: 470px; padding: 16px; }
    .bd-panel { left: 12px; right: 12px; bottom: 12px; padding: 14px; }
    .bd-ready { right: 12px; bottom: 12px; width: calc(100% - 24px); }
    .bd-found li { padding: 7px 8px; font-size: .74rem; }
    .bd-reasons { grid-template-columns: 1fr; }
    .bd-reason { padding: 24px 20px; }
    .bd-assure { grid-template-columns: 1fr; }
    .bd-assure > div + div { border-left: 0; border-top: 1px solid var(--border); }
    .bd-visual::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bd-hero::after, .bd-beam, .bd-caret, .bd-found li { animation: none !important; }
    .bd-hero .reveal { transition-delay: 0s !important; }
    .bd-vs .bd-vs-m { opacity: 1; animation: none !important; }
}