/* The landing kit: the parts every getsales.io page bundle is assembled from (the brandbook is the umbrella's
   marketing/landing/BRANDBOOK.md, its living page the local lab's /lab/brand/v1/). Every part here is lifted from a
   design that is live in the theme, never invented: the static block, the hero and the finale from the agency page
   (theme/pages/agencies/, assembled from these parts since 2026-10-18 and pixel for pixel what it was), the section
   heads from the homepage's route (.rw-eyebrow, .rw-h2, .rw-lead), the chips from pillar.css, the window from the
   shared demo (demo.css), the logo wall from the homepage's proof, the review card and the brand-blue ground from the
   legacy brandbook (shapes only, never its words).
   Loaded on every page bundle and every lab variant after pages.css (inc/page-parts.php gs_page_parts_enqueue()),
   before the bundle's own styles, so a page's rule wins its ties. Every class starts with k-, every new token with
   --k-; the theme's tokens (app.min.css :root) are used where one exists, so the dark theme follows. Nothing here
   moves: no transition, no transform on hover, no keyframes. Only the hero demo and the finale move, and they bring
   their own styles. */

/* ==== tokens: only what the theme does not have yet ========================================================== */
:root{
  /* the second ground of the blocks (the warm grey) and the logo wall */
  --k-warm:#F7F6F2;--k-wall:#F4F3EF;--k-card:#FFFFFF;
  --k-card-sh:0 1px 2px rgba(20,21,28,.05),0 0 0 1px rgba(20,21,28,.06);
  /* text steps between ink and mute (the demo's --gsd-text and --gsd-faint) */
  --k-text:color-mix(in srgb,var(--ink) 82%,var(--panel));
  --k-faint:color-mix(in srgb,var(--mute) 62%,var(--panel));
  /* AI and structure wear the product's primary (--ai: #4B64FF, dark #8E92FF) */
  --k-ai-ink:color-mix(in srgb,var(--ai) 84%,var(--ink));
  --k-ai-soft:color-mix(in srgb,var(--ai) 10%,var(--panel));
  --k-ok-ink:color-mix(in srgb,var(--ok) 84%,var(--ink));
  /* the channels: LinkedIn blue, email amber (the product's --gs-linkedin and --gs-email) */
  --k-li:#0A66C2;--k-li-ink:#0A5BAE;--k-em:#E8862B;--k-em-ink:#A45A13;
  /* the brand-blue ground of the legacy brandbook (the shield, the review card, the covers); fixed in both themes */
  --k-brand:#4B64FF;--k-brand-deep:#3A50E6;--k-lav:#7488FF;--k-rim:#E5EAF5;
  --k-on-brand:#FFFFFF;--k-on-brand-2:#E3E8FF;
  /* the finale's night, fixed in both themes */
  --k-navy-1:#141938;--k-navy-2:#181A43;--k-navy-3:#1B1C48;--k-navy-line:#2A2F5C;
  --k-on-navy:#C9CCF0;--k-navy-eye:#96A5FF;--k-navy-mute:#8D93C4;--k-amber:#F2C46B;
  --k-navy-g:radial-gradient(1100px 520px at 50% 0%,rgba(75,100,255,.2),rgba(75,100,255,0) 70%),linear-gradient(180deg,var(--k-navy-1) 0%,var(--k-navy-2) 52%,var(--k-navy-3) 100%);
  /* the second glow of the picture stage wears the sample agency's colour (YourBrand's lime) */
  --k-pic-b:#C8F051;
  /* shadows: a resting card, a window, a card lifted over a window */
  --k-sh:0 1px 2px rgba(20,21,28,.05),0 8px 22px -12px rgba(20,21,28,.16);
  --k-sh-lg:0 1px 2px rgba(20,21,28,.05),0 2px 6px rgba(20,21,28,.03),0 40px 80px -40px rgba(20,21,28,.34);
  --k-sh-up:0 1px 2px rgba(20,21,28,.06),0 18px 40px -16px rgba(20,21,28,.32);
  /* the grid and the rhythm */
  --k-wrap:1280px;--k-gutter:24px;--k-pad:136px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --k-warm:#110E21;--k-wall:#120F22;--k-card:#1A1630;
    --k-card-sh:0 0 0 1px rgba(255,255,255,.07);
    --k-li:#5BA3E8;--k-li-ink:#7DB6EE;--k-em:#F09A4E;--k-em-ink:#F3AE6E;
    --k-sh:0 1px 2px rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.7);
    --k-sh-lg:0 1px 2px rgba(0,0,0,.4),0 40px 80px -36px rgba(0,0,0,.9);
    --k-sh-up:0 0 0 1px rgba(255,255,255,.04),0 24px 48px -18px rgba(0,0,0,.85);
    --k-pbg-o:.22;
  }
}
:root[data-theme="dark"]{
  --k-warm:#110E21;--k-wall:#120F22;--k-card:#1A1630;
  --k-card-sh:0 0 0 1px rgba(255,255,255,.07);
  --k-li:#5BA3E8;--k-li-ink:#7DB6EE;--k-em:#F09A4E;--k-em-ink:#F3AE6E;
  --k-sh:0 1px 2px rgba(0,0,0,.4),0 10px 26px -14px rgba(0,0,0,.7);
  --k-sh-lg:0 1px 2px rgba(0,0,0,.4),0 40px 80px -36px rgba(0,0,0,.9);
  --k-sh-up:0 0 0 1px rgba(255,255,255,.04),0 24px 48px -18px rgba(0,0,0,.85);
  --k-pbg-o:.22;
}
@media (max-width:1200px){:root{--k-pad:104px}}
@media (max-width:760px){:root{--k-pad:80px;--k-gutter:16px}}

/* ==== the section and its grounds =============================================================================== */
/* A page is a stack of full-width sections. Two grounds alternate under the hero (white, warm grey); the brand blue
   is for the CTA band and a review card; the navy is the finale's alone. A ground sets the colours its type reads. */
.k-sec,section.k-sec{position:relative;padding:var(--k-pad) 0;background:var(--k-g,var(--ground));color:var(--k-body,var(--ink))}
.k-sec.k-sec-tight{padding:72px 0}
.k-g-white{--k-g:var(--ground)}
.k-g-warm{--k-g:var(--k-warm)}
.k-g-brand{--k-g:var(--k-brand);--k-head:var(--k-on-brand);--k-sub:var(--k-on-brand-2);--k-eye:#DDE3FF;--k-num:#DDE3FF;--k-body:var(--k-on-brand)}
.k-g-navy{--k-g:var(--k-navy-g);--k-head:#FFFFFF;--k-sub:var(--k-on-navy);--k-eye:var(--k-navy-eye);--k-num:var(--k-navy-eye);--k-body:#FFFFFF}
.k-wrap{max-width:var(--k-wrap);margin:0 auto;padding:0 var(--k-gutter)}
.k-wrap-text{max-width:860px}
/* the legacy covers' sparkles and swooshes on the brand blue, still (Cover 7, Header Image): add .k-deco to a brand
   ground or to the CTA band */
.k-deco{position:relative;isolation:isolate;overflow:hidden}
.k-deco::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 0C25.6 13.6 34.4 22.4 48 24 34.4 25.6 25.6 34.4 24 48 22.4 34.4 13.6 25.6 0 24 13.6 22.4 22.4 13.6 24 0Z' fill='%23B9C3FF' fill-opacity='.55'/%3E%3C/svg%3E") right 7% bottom 16%/76px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 2C25.5 14.6 33.4 22.5 46 24 33.4 25.5 25.5 33.4 24 46 22.5 33.4 14.6 25.5 2 24 14.6 22.5 22.5 14.6 24 2Z' fill='none' stroke='white' stroke-opacity='.7' stroke-width='1.6'/%3E%3C/svg%3E") right 16% bottom 7%/40px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 2C25.5 14.6 33.4 22.5 46 24 33.4 25.5 25.5 33.4 24 46 22.5 33.4 14.6 25.5 2 24 14.6 22.5 22.5 14.6 24 2Z' fill='none' stroke='white' stroke-opacity='.55' stroke-width='1.6'/%3E%3C/svg%3E") right 4% top 12%/30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M-60 540C240 380 520 660 860 430S1180 110 1270 40' stroke='white' stroke-opacity='.14' stroke-width='2'/%3E%3Cpath d='M-60 590C280 440 560 700 900 480S1210 170 1290 100' stroke='white' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

/* ==== the section head: eyebrow, H2, lead =========================================================================== */
.k-head{max-width:760px}
.k-head-c{margin-inline:auto;text-align:center}
.k-eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 16px;font:500 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--k-eye,var(--k-ai-ink))}
.k-head-c .k-eyebrow{justify-content:center}
/* the slash between two names in an eyebrow: a feature's parent and its name, Alternatives and the rival, an article's trail */
.k-eyebrow .k-sep{opacity:.5}
.k-h1{margin:0;font:600 clamp(38px,4.9vw,66px)/1.02 var(--display);letter-spacing:-.04em;color:var(--k-head,var(--ink2));text-wrap:balance}
.k-h2{margin:0;font:600 clamp(34px,3.7vw,52px)/1.04 var(--display);letter-spacing:-.035em;color:var(--k-head,var(--ink2));text-wrap:balance}
.k-h3{margin:0;font:600 17px/1.3 var(--display);color:var(--k-head,var(--ink2));text-wrap:balance}
.k-lead{margin:18px 0 0;max-width:56ch;font:400 18.5px/1.6 var(--sans);color:var(--k-sub,var(--mute));text-wrap:pretty}
.k-head-c .k-lead{margin-inline:auto}
.k-text{margin:0;font:400 16px/1.55 var(--sans);color:var(--k-sub,var(--mute));text-wrap:pretty}

/* ==== the hero (the agency page's): the persona switch, H1, dek, two calls, the demo on the runway =============== */
.k-hero,section.k-hero{padding:36px 0 112px;background:var(--ground)}
.k-hero-txt{display:flex;flex-direction:column;align-items:center;max-width:var(--k-wrap);margin:0 auto;padding:0 var(--k-gutter);text-align:center}
.k-hero .k-h1{margin:20px auto 0;max-width:14.5em;text-align:center}
.k-hero-dek{margin:18px auto 0;max-width:62ch;font:400 18.5px/1.55 var(--sans);color:var(--mute);text-wrap:pretty}
.k-hero .k-btns{justify-content:center}
.k-hero-stage{position:relative;display:flow-root;max-width:1440px;margin:36px auto 0;padding:0 24px}
.k-hero-sky{position:absolute;left:24px;right:24px;top:0;height:clamp(230px,26vw,360px);border-radius:28px;overflow:hidden;background:var(--night)}
.k-hero-sky img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.k-hero-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,9,22,.28))}
.k-hero-stage>.gsd{width:min(1280px,100% - 56px);margin-top:clamp(48px,4.6vw,66px)}
.k-hero-stage>.gsd .gsd-win{box-shadow:0 -18px 36px -18px rgba(4,3,12,.35),var(--gsd-sh-lg)}
/* the persona switch: "GetSales for" and a native details menu */
.k-for{position:relative;display:inline-flex;align-items:center;gap:10px;padding:5px 5px 5px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);font:500 14.5px/1 var(--sans);color:var(--mute)}
.k-for summary{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px 0 12px;border-radius:10px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line);font:600 14.5px/1 var(--sans);color:var(--ink2);cursor:pointer;list-style:none}
.k-for summary::-webkit-details-marker{display:none}
.k-for summary svg{width:16px;height:16px;color:var(--mute)}
.k-for details[open] summary svg{transform:rotate(180deg)}
.k-for ul{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:210px;margin:0;padding:6px;list-style:none;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:var(--shadow);text-align:left}
.k-for li a{display:block;padding:10px 12px;border-radius:8px;font:500 14.5px/1.2 var(--sans);color:var(--ink);text-decoration:none}
.k-for li a:hover,.k-for li a[aria-current]{background:var(--sunk);color:var(--ink2)}
.k-for li a[aria-current]{font-weight:600}

/* ==== the static block (the agency page's seven blocks) ========================================================== */
/* One reason per block: the words (42%) beside one large picture (58%), the picture's side and the ground
   alternating; under 1200 the two stack, words first. Markup: section.k-sec.k-blk[.k-g-warm][.k-blk-flip] >
   .k-blk-in > .k-blk-txt (.k-num, .k-h, .k-p, .k-checks, .k-fine, .k-link) + figure.k-pic (.k-sample, the picture). */
.k-blk-in{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:72px;align-items:center;max-width:var(--k-wrap);margin:0 auto;padding:0 var(--k-gutter)}
.k-blk-flip .k-blk-in{grid-template-columns:minmax(0,58fr) minmax(0,42fr)}
.k-blk-flip .k-pic{order:-1}
.k-blk-txt{min-width:0;max-width:500px}
.k-num{display:flex;align-items:center;gap:14px;margin:0;font:500 14px/1 var(--mono);letter-spacing:.14em;color:var(--k-num,var(--k-ai-ink))}
.k-num::after{content:"";width:40px;height:1px;background:currentColor;opacity:.4}
.k-h{margin:22px 0 0;font:600 clamp(34px,3.7vw,52px)/1.04 var(--display);letter-spacing:-.035em;color:var(--k-head,var(--ink2));text-wrap:balance}
.k-p{margin:20px 0 0;font:400 18.5px/1.6 var(--sans);color:var(--k-sub,var(--mute));text-wrap:pretty}
.k-checks{display:grid;gap:14px;margin:30px 0 0;padding:0;list-style:none}
.k-checks li{display:flex;align-items:flex-start;gap:12px;margin:0;font:500 16.5px/1.45 var(--sans);color:var(--k-body,var(--ink));text-wrap:pretty}
.k-checks svg{display:block;flex:none;width:24px;height:24px;padding:5px;border-radius:50%;background:var(--k-ai-soft);color:var(--ai)}
.k-fine{margin:20px 0 0;font:400 14px/1.5 var(--sans);color:var(--mute)}
.k-link{display:inline-flex;align-items:center;gap:8px;margin-top:34px;font:600 16px/1.3 var(--sans);color:var(--k-head,var(--ink2));text-decoration:none}
.k-link svg{display:block;flex:none;width:18px;height:18px;color:var(--ai)}
.k-link:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
/* a row of links where a block points to several pages (a product page's run block): wrapping, 24 px apart */
.k-links{display:flex;flex-wrap:wrap;gap:14px 24px;margin:34px 0 0}
.k-links .k-link{margin-top:0}
/* the stage every picture sits on: a soft violet corner, the sample agency's glow, a dotted grid, a hairline */
.k-pic{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-width:0;min-height:580px;margin:0;padding:76px 36px 60px;
  border-radius:28px;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(90% 70% at 0% 0%,color-mix(in srgb,var(--ai) 10%,transparent),transparent 70%),
    radial-gradient(80% 70% at 100% 100%,color-mix(in srgb,var(--k-pic-b) 8%,transparent),transparent 70%),
    color-mix(in srgb,var(--ai) 3%,var(--k-g,var(--ground)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 7%,transparent);
}
.k-pic::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1.5px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(75% 65% at 50% 50%,#000 20%,transparent 100%);
  opacity:.55;
}
.k-pic>.k-sample{position:absolute;top:22px;right:22px;padding:4px 8px}
.k-pic-short{min-height:420px}
/* a still of the shared demo carries its Sample chip in its own bar, so its stage keeps no room for one: the window
   sits centred, the same margin on every side */
.k-pic:has(>.gsd){padding:36px}

/* ==== buttons ======================================================================================================= */
/* Two per view at most: the dark one first, the voice one second. On the navy and the blue, the light one leads. */
.k-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.k-btns-c,.k-head-c .k-btns{justify-content:center}
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font:500 16px/1 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer}
.k-btn:hover{border-color:var(--mute)}
.k-btn-dark{background:var(--ink2);border-color:var(--ink2);color:var(--ground)}
.k-btn-dark:hover{border-color:var(--ink2);background:color-mix(in srgb,var(--ink2) 86%,var(--ground))}
.k-btn-light{background:#FFFFFF;border-color:#FFFFFF;color:#0B0B0F}
.k-btn-light:hover{border-color:#FFFFFF;background:#EEF0FF}
.k-btn-glass{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.07);color:#FFFFFF}
.k-btn-glass:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.13)}
.k-btn-sm{height:40px;padding:0 16px;border-radius:10px;font-size:14.5px}
.k-btn-lg{height:54px;padding:0 26px;border-radius:14px;font-size:18px}
/* the voice button: the brand-orange tile with its bars, the words, the arrow in the primary */
.k-voice{display:inline-grid;grid-template-columns:36px auto 16px;align-items:center;gap:0 12px;height:48px;padding:0 16px 0 6px;border-radius:13px;font:600 16px/1 var(--sans);color:var(--ink2);text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ai) 32%,transparent)}
.k-voice:hover{background:color-mix(in srgb,var(--ai) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ai) 55%,transparent)}
.k-voice-ic,.k-tile.k-tile-voice{
  display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;color:var(--white);
  background:radial-gradient(120% 120% at 30% 22%,color-mix(in srgb,var(--brand-red) 84%,var(--white)) 0%,var(--brand-red) 48%,color-mix(in srgb,var(--brand-red) 86%,var(--mesa-3)) 100%);
  box-shadow:0 6px 14px -7px color-mix(in srgb,var(--brand-red) 70%,transparent),inset 0 1px 1px color-mix(in srgb,var(--white) 22%,transparent);
}
.k-voice-ic svg,.k-tile-voice svg{width:18px;height:18px}
.k-voice-ar{display:block;width:16px;height:16px;flex:none;color:var(--ai)}
:is(.k-g-navy,.k-finale) .k-voice,.k-voice.k-on-dark{color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,106,84,.5)}
:is(.k-g-navy,.k-finale) .k-voice:hover,.k-voice.k-on-dark:hover{background:rgba(255,106,84,.12)}
.k-g-brand .k-voice,.k-cta .k-voice{color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.k-g-brand .k-voice:hover,.k-cta .k-voice:hover{background:rgba(255,255,255,.1)}
.k-g-brand .k-voice-ar,.k-cta .k-voice-ar{color:#FFFFFF}

/* ==== chips and statuses ============================================================================================ */
.k-sample{display:inline-flex;align-items:center;flex:none;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.k-g-brand .k-sample,.k-cta .k-sample,.k-review-blue .k-sample{border-color:rgba(255,255,255,.45);background:transparent;color:#FFFFFF}
:is(.k-g-navy,.k-finale) .k-sample{border-color:#343A70;background:transparent;color:#B8BDE8}
.k-pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.k-pill-coming,.k-pill-soon{background:color-mix(in srgb,var(--coral) 14%,transparent);color:var(--coral)}
.k-ch{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:7px;font:500 12px/1 var(--mono);white-space:nowrap}
.k-ch::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.k-ch-li{color:var(--k-li-ink);background:color-mix(in srgb,var(--k-li) 11%,transparent)}
.k-ch-em{color:var(--k-em-ink);background:color-mix(in srgb,var(--k-em) 14%,transparent)}
.k-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:var(--sunk);font:500 11px/1.4 var(--mono);color:var(--mute);white-space:nowrap}
/* a fact: the legacy review card's white chip ("Scaled to 10+ senders"), the primary's tint on a light ground */
.k-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.k-fact{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:999px;background:var(--k-ai-soft);font:600 14.5px/1 var(--sans);color:var(--k-ai-ink);white-space:nowrap}
.k-g-brand .k-fact,.k-cta .k-fact,.k-review-blue .k-fact{background:#FFFFFF;color:var(--k-brand)}

/* ==== the product window (the shared demo's frame) and cards ======================================================= */
.k-win,.k-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--k-sh-lg);color:var(--k-text);font:400 14px/1.4 var(--sans);text-align:left}
.k-win-bar{display:flex;align-items:center;gap:14px;height:46px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--sunk)}
.k-win-dots{display:flex;gap:6px}
.k-win-dots i{display:block;width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--ink) 13%,transparent)}
.k-win-addr{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;max-width:280px;height:28px;margin:0 auto;padding:0 12px;border-radius:8px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font:400 13px/1 var(--mono);color:var(--k-text);white-space:nowrap}
.k-win-addr svg{display:block;width:13px;height:13px;color:var(--ok)}
.k-win-title,.k-card-h{display:flex;align-items:center;gap:9px;min-width:0;height:50px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--sunk);font:500 14px/1 var(--sans);color:var(--k-text);white-space:nowrap}
.k-card-h{height:46px;font-weight:600;color:var(--ink)}
.k-win-title b{font-weight:600;color:var(--ink)}
.k-win-body{padding:18px}
.k-card{border-radius:18px;box-shadow:var(--k-sh-up)}
/* the 36px tile of the nav panels: a module colour at 12%, its glyph at 80% */
.k-tile{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;color:color-mix(in srgb,var(--m,var(--ai)) 80%,var(--ink));background:color-mix(in srgb,var(--m,var(--ai)) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--m,var(--ai)) 20%,transparent)}
.k-tile svg{display:block;width:18px;height:18px}
.k-tile-li{--m:var(--k-li)}
.k-tile-em{--m:var(--k-em)}
.k-tile-ok{--m:var(--ok)}
.k-tile-enrich{--m:var(--d-enrich)}
/* the rest of the nav's product colours (template-parts/nav.php, the Product panel's pm-c-* rows): AI Search, Workflows,
   Unibox, the AI SDR and Signals; Playtables is .k-tile-enrich above, Creator the voice tile */
.k-tile-data{--m:var(--d-data)}
.k-tile-flow{--m:var(--d-logic)}
.k-tile-inbox{--m:var(--d-health)}
.k-tile-ai{--m:var(--ai)}
.k-tile-sig{--m:var(--d-inbox)}
/* a product's tile in an eyebrow (a product page's hero: the tile, then the name), 24 px with its glyph at 14 */
.k-eyebrow .k-tile{width:24px;height:24px;border-radius:7px}
.k-eyebrow .k-tile svg{width:14px;height:14px}

/* ==== people and clients ============================================================================================ */
.k-av{display:block;flex:none;width:40px;height:40px;border-radius:50%}
.k-av-sm{width:30px;height:30px}
.k-av-lg{width:68px;height:68px}
.k-ini{display:grid;place-items:center;font:600 14px/1 var(--display);color:var(--ai);background:color-mix(in srgb,var(--ai) 16%,transparent)}
.k-av-lg.k-ini{font-size:24px}
/* the review template's coral ring around the author */
.k-ring{box-shadow:0 0 0 3px var(--k-ring-gap,var(--panel)),0 0 0 6px var(--coral)}
.k-avs{display:flex}
.k-avs>*+*{margin-left:-8px}
.k-avs>*{box-shadow:0 0 0 2.5px var(--k-ring-gap,var(--panel))}
/* a client's mark: a coloured square with its initial (set --c) */
.k-sq{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px;background:var(--c,var(--mute));color:#FFFFFF;font:700 12px/1 var(--sans);box-shadow:inset 0 1px 1px rgba(255,255,255,.2)}
.k-sq-lg{width:46px;height:46px;border-radius:13px;font-size:20px}

/* ==== the certified badge slot ====================================================================================== */
/* The badges are files (assets/img/badges/certified-agency.svg, -partner.svg, -expert.svg), never redrawn on a
   page. Two ways in: an <img> of an -outlined file inside .k-badge (certified-<name>-small-outlined.svg at 72 px and
   under), or an empty .k-badge
   with the badge's class, which paints the file from here and picks the small cut at .k-badge-xs and .k-badge-sm. .k-badge-ph adds a dashed shield under it, for a page drawn before the file lands; the file covers it. */
.k-badge{position:relative;display:inline-block;flex:none;width:var(--k-badge-w,120px);aspect-ratio:1;vertical-align:middle}
.k-badge>img,.k-badge>svg{display:block;width:100%;height:100%;object-fit:contain}
.k-badge:empty::after{content:"";position:absolute;inset:0;z-index:1;background:var(--k-badge-src,none) center/contain no-repeat}
/* each badge has a small cut (a straight ribbon, heavier letters) for 72 px and under */
/* painted as a background, an SVG cannot load the web font, so the slot takes the -outlined cuts (the label drawn as
   Onest outlines, 40 weight units heavier so it reads the same at 1x) */
.k-badge-agency{--k-badge-src:url(../img/badges/certified-agency-outlined.svg);--k-badge-src-sm:url(../img/badges/certified-agency-small-outlined.svg)}
.k-badge-partner{--k-badge-src:url(../img/badges/certified-partner-outlined.svg);--k-badge-src-sm:url(../img/badges/certified-partner-small-outlined.svg)}
.k-badge-expert{--k-badge-src:url(../img/badges/certified-expert-outlined.svg);--k-badge-src-sm:url(../img/badges/certified-expert-small-outlined.svg)}
.k-badge:is(.k-badge-xs,.k-badge-sm):empty::after{background-image:var(--k-badge-src-sm,var(--k-badge-src,none))}
.k-badge-xs{--k-badge-w:48px}
.k-badge-sm{--k-badge-w:72px}
.k-badge-md{--k-badge-w:120px}
.k-badge-lg{--k-badge-w:200px}
.k-badge-xl{--k-badge-w:280px}
.k-badge-ph::before{
  content:"";position:absolute;inset:0;background:var(--mute);opacity:.6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='1.4' stroke-dasharray='3 2.4' stroke-linejoin='round'%3E%3Cpath d='M50 18 73 26V48C73 62 63 72 50 79 37 72 27 62 27 48V26Z'/%3E%3Cpath d='M20 57H80V67H20Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='1.4' stroke-dasharray='3 2.4' stroke-linejoin='round'%3E%3Cpath d='M50 18 73 26V48C73 62 63 72 50 79 37 72 27 62 27 48V26Z'/%3E%3Cpath d='M20 57H80V67H20Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.k-g-brand .k-badge-ph::before,.k-g-navy .k-badge-ph::before{background:#FFFFFF;opacity:.55}
.k-badges{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:28px 40px;margin:0;padding:0;list-style:none}
.k-badge-fig{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0}
.k-badge-fig figcaption{font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--k-sub,var(--mute));text-align:center}

/* ==== the review card (the legacy template, adapted: light and blue) ============================================== */
/* figure.k-review[.k-review-blue] > .k-review-in > .k-review-top (.k-lockup, .k-sample), .k-facts, blockquote.k-review-q,
   figcaption.k-review-who. Sized by its own width (a container), so one card reads at 320 px and at 600 px. */
.k-reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.k-reviews>li{display:flex;min-width:0}
.k-reviews>li>.k-review{flex:1}
.k-review{container-type:inline-size;position:relative;margin:0;border-radius:24px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),var(--k-sh);color:var(--ink);--k-ring-gap:var(--panel)}
.k-review-in{display:flex;flex-direction:column;height:100%;padding:clamp(22px,7.5cqi,56px)}
.k-review-sq{aspect-ratio:1}
.k-review-top{display:flex;align-items:center;gap:12px;min-width:0}
.k-review-top .k-sample{margin-left:auto}
.k-lockup{display:flex;align-items:center;gap:clamp(8px,2.6cqi,16px);min-width:0;color:var(--ink2)}
.k-lockup-gs{display:block;flex:none;width:auto;height:clamp(26px,8cqi,46px)}
.k-lockup-amp{font:500 clamp(18px,5.4cqi,30px)/1 var(--display);color:var(--mute)}
.k-lockup-mark{display:inline-flex;align-items:center;gap:.45em;min-width:0;font:600 clamp(15px,4.4cqi,24px)/1 var(--display);letter-spacing:-.02em;color:var(--ink2);white-space:nowrap}
.k-lockup-mark svg{display:block;flex:none;width:1.25em;height:1.25em}
.k-review .k-facts{margin-top:clamp(20px,6.5cqi,44px)}
.k-review .k-fact{height:clamp(28px,7.4cqi,38px);padding:0 clamp(11px,3.4cqi,17px);font-size:clamp(12.5px,3.4cqi,16px)}
.k-review-q{margin:clamp(16px,4.6cqi,28px) 0 0;font:600 clamp(19px,5.4cqi,38px)/1.22 var(--display);letter-spacing:-.02em;color:var(--ink2);text-wrap:pretty;quotes:none}
.k-review-who{display:flex;align-items:center;gap:clamp(14px,4cqi,20px);margin:auto 0 0;padding-top:clamp(24px,8cqi,56px)}
.k-review-who .k-av{width:clamp(44px,12cqi,64px);height:clamp(44px,12cqi,64px)}
.k-review-who .k-ini{font-size:clamp(15px,4cqi,22px)}
.k-review-who b{display:block;font:600 clamp(15.5px,4cqi,22px)/1.2 var(--display);color:var(--ink2)}
.k-review-who small{display:block;margin-top:5px;font:400 clamp(13px,3.2cqi,16px)/1.35 var(--sans);color:var(--mute)}
.k-review-blue{background:var(--k-brand);box-shadow:none;color:#FFFFFF;--k-ring-gap:var(--k-brand)}
.k-review-blue :is(.k-lockup,.k-lockup-mark,.k-review-q,.k-review-who b){color:#FFFFFF}
.k-review-blue .k-lockup-amp{color:rgba(255,255,255,.72)}
.k-review-blue .k-review-who small{color:var(--k-on-brand-2)}
.k-review-blue .k-ini{background:#FFFFFF;color:var(--k-brand)}
/* the author's picture in the ring: a photo the person supplied (or a sample's drawn portrait) cropped to the circle at
   the face (the story's focus, set inline as object-position), on its tint while it loads (--k-av-bg) */
img.k-av{object-fit:cover;background:var(--k-av-bg,var(--sunk))}
/* the linked card (a case study's review, inc/customers.php gs_review_card()): .k-review-link on the figure, then
   a.k-review-more after the who line, "Read the story" with its .k-sr words and the arrow. Its ::after covers the card,
   so the whole card clicks while one link names it. Hover and focus move the inset edge from the 1 px line to 2 px
   coral (white at 60% on the blue card); nothing lifts. */
.k-review-link:is(:hover,:focus-within){box-shadow:inset 0 0 0 2px var(--coral),var(--k-sh)}
.k-review-blue.k-review-link:is(:hover,:focus-within){box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.k-review-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:clamp(18px,4.6cqi,28px);font:600 15px/1.3 var(--sans);color:var(--ink2);text-decoration:none}
.k-review-more svg{display:block;flex:none;width:17px;height:17px;color:var(--ai)}
.k-review-more::after{content:"";position:absolute;inset:0;border-radius:inherit}
.k-review-more:focus-visible{outline:none}
.k-review-link:hover .k-review-more{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.k-review-blue .k-review-more,.k-review-blue .k-review-more svg{color:#FFFFFF}
/* one card alone, 880 px wide at most, centred */
.k-reviews.k-reviews-1{grid-template-columns:minmax(0,1fr);max-width:880px;margin-inline:auto}
/* a customer's quote (inc/quotes.php gs_quote_card()): figure.k-review.k-review-quote, no link, their logo after the
   ampersand: a wordmark alone (img.k-qlogo, at the lockup's height) or a square mark on its white tile before the name
   (.k-qco). A wordmark drawn dark turns white on the blue card and in the dark theme; one drawn white (.k-qlogo-light)
   turns dark on a light card. On the local copy a quote getsales.io would drop carries a "Not cleared" chip (.k-qpend) */
.k-qlogo{display:block;flex:none;width:auto;max-width:100%;height:auto;filter:var(--k-qlogo-f,none)}
.k-qlogo-light{filter:var(--k-qlogo-lf,brightness(0))}
.k-lockup-mark .k-qlogo{height:clamp(18px,5.4cqi,30px)}
.k-qco{display:inline-flex;align-items:center;gap:.45em;min-width:0;white-space:nowrap}
.k-lockup-mark .k-qco .k-vlogo{--s:1.3em}
.k-review-blue .k-qlogo,.k-review-blue .k-qlogo-light{filter:brightness(0) invert(1)}
.k-review-top .k-qpend{margin-left:auto}
/* what the company is, under the logos (p.k-review-seg, the quote's company.segment), and where the words come from,
   under the person (p.k-review-src, its links: the webinar, the post, the guide); Peter, 2026-10-28 */
.k-review-seg{margin:clamp(12px,3.4cqi,18px) 0 0;font:500 clamp(10.5px,2.8cqi,12px)/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.k-review-src{margin:clamp(14px,4cqi,22px) 0 0;font:400 clamp(13px,3.2cqi,14.5px)/1.45 var(--sans);color:var(--mute)}
.k-review-src a{color:var(--ink2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.k-review-src a:hover{color:var(--ink)}
.k-review-blue .k-review-seg,.k-review-blue .k-review-src{color:var(--k-on-brand-2)}
.k-review-blue .k-review-src a,.k-review-blue .k-review-src a:hover{color:#FFFFFF}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--k-qlogo-f:brightness(0) invert(1);--k-qlogo-lf:none}
}
:root[data-theme="dark"]{--k-qlogo-f:brightness(0) invert(1);--k-qlogo-lf:none}

/* ==== the logo cloud (the homepage's proof wall, still) ============================================================ */
/* set --k-logos-n to a number that divides the count (4 for 8 marks, 3 for 6), so no row is left half empty */
.k-logos{display:grid;grid-template-columns:repeat(var(--k-logos-n,4),minmax(0,1fr));gap:12px;margin:0;padding:22px;border-radius:28px;background:var(--k-wall);box-shadow:inset 0 0 0 1px var(--line-2);list-style:none}
.k-logo{display:flex;align-items:center;justify-content:center;min-width:0;height:84px;margin:0;padding:0 24px;border-radius:16px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.k-logos-plain{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 56px;padding:0;background:none;box-shadow:none}
.k-logos-plain .k-logo{height:auto;padding:0;background:none;box-shadow:none;filter:grayscale(1);opacity:.72}
.k-logos-cap{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:16px 0 0;font:400 14px/1.45 var(--sans);color:var(--mute);text-align:center}
/* a sample mark: a glyph and a word, each in its own colour and cut (set --c, --g) */
.k-mark{display:inline-flex;align-items:center;gap:.5em;font-size:17px;line-height:1;white-space:nowrap;color:var(--c,var(--ink2))}
.k-mark svg{display:block;flex:none;width:1.32em;height:1.32em;color:var(--g,currentColor)}
.k-mark>span{font:600 1em/1 var(--display);letter-spacing:-.02em}

/* ==== the CTA band (the legacy blue band, in today's type) ========================================================= */
.k-cta{position:relative;max-width:calc(var(--k-wrap) - 2 * var(--k-gutter));margin:0 auto;padding:clamp(48px,6vw,88px) clamp(20px,5vw,72px);border-radius:28px;background:var(--k-brand);color:#FFFFFF;text-align:center;--k-head:#FFFFFF;--k-sub:var(--k-on-brand-2);--k-eye:#DDE3FF}
.k-cta .k-eyebrow{justify-content:center}
.k-cta .k-h2{max-width:18em;margin-inline:auto}
.k-cta .k-lead{margin-inline:auto}
.k-cta .k-facts{justify-content:center;margin-top:26px}
.k-cta .k-btns{justify-content:center;margin-top:32px}

/* ==== the FAQ (the Creator page's, for every page with questions) ================================================= */
/* The questions of a page's JSON, printed by the theme's faq component (template-parts/faq.php: div.gp-qs >
   details#faq-N > summary + p, the first one open), on the block grid: the head on the left (42%), the questions on
   the right (58%); under 1200 the two stack. Markup: section.k-sec[.k-g-warm]#faq > .k-wrap.k-faq > .k-head
   (.k-eyebrow, .k-h2) + <!-- component: faq <slug> -->. Each question is a card on the ground (--k-card), the open
   mark a plus in the primary's disc that turns to a minus; nothing slides open. */
.k-faq{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:72px;align-items:start}
.k-faq>.gp-qs{display:grid;gap:12px;min-width:0;margin:0}
.k-faq details{margin:0;border-radius:16px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.k-faq summary{position:relative;display:block;padding:22px 68px 22px 24px;font:600 18px/1.4 var(--display);letter-spacing:-.01em;color:var(--ink2);list-style:none;cursor:pointer;text-wrap:pretty}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq summary::after{
  content:"";position:absolute;top:19px;right:20px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(var(--ai),var(--ai)) center/12px 2px no-repeat,linear-gradient(var(--ai),var(--ai)) center/2px 12px no-repeat,var(--k-ai-soft);
}
.k-faq details[open] summary::after{background:linear-gradient(var(--ai),var(--ai)) center/12px 2px no-repeat,var(--k-ai-soft)}
.k-faq details>p{margin:0;padding:0 24px 24px;max-width:68ch;font:400 16.5px/1.6 var(--sans);color:var(--k-text);text-wrap:pretty}
.k-faq details a{color:var(--k-ai-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.k-faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:16px}

/* ==== the finale (the agency page's): night in both themes, the airfield drawn by the page ======================= */
.k-finale,section.k-finale{position:relative;padding:104px 0 0;overflow:hidden;background:var(--k-navy-g);color:#FFFFFF;text-align:center;--k-g:var(--k-navy-g);--k-head:#FFFFFF;--k-sub:var(--k-on-navy);--k-eye:var(--k-navy-eye);--k-body:#FFFFFF}
.k-finale .k-eyebrow{justify-content:center;margin-bottom:14px}
.k-finale-h{margin:4px auto 0;max-width:16em;font:600 clamp(36px,4.8vw,62px)/1.02 var(--display);letter-spacing:-.04em;color:#FFFFFF;text-wrap:balance}
.k-finale-sub{max-width:60ch;margin:18px auto 0;font:400 18px/1.58 var(--sans);color:var(--k-on-navy);text-wrap:pretty}
.k-finale .k-btns{justify-content:center;margin-top:28px}
.k-finale-art{position:relative;margin-top:52px}
.k-motto{position:relative;z-index:2;margin:-6px 0 0;padding:0 16px 52px;font:500 12px/1.4 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--k-navy-mute)}
/* the departures board's panel, for anything that sits on the night */
.k-navy-card{border-radius:18px;background:linear-gradient(180deg,#10132D,#0C0F23);box-shadow:0 0 0 1px var(--k-navy-line),0 1px 0 0 #3A4078 inset,0 46px 80px -34px rgba(3,4,18,.95);color:#F4F1E6;text-align:left}

/* ==== the comparison table (an alternative or compare page: template-parts/alternative.php) ======================== */
/* One row per thing a buyer weighs: the question, the rival's cell (its own words, a source number after each quote),
   ours (what the product does today, our column a faint primary), and "Not stated" where a vendor's pages say nothing.
   A card on the ground, hairlines between the rows. Under 760 px each row is a card of its own: the question, then
   each side under its name (the cell's data-th). Markup: .k-cmp-wrap > table.k-cmp > caption.k-sr, thead (th, th with
   a small, th.k-cmp-us), tbody tr (th[scope=row], td[data-th], td.k-cmp-us[data-th]); .k-not and .k-cmp-note in a cell
   that is not stated; .k-ref, a source's number, links to its line in .k-srcs. */
.k-cmp-wrap{margin-top:48px;border-radius:20px;background:var(--k-card);box-shadow:var(--k-card-sh);overflow:hidden}
.k-cmp{width:100%;border-collapse:collapse;table-layout:fixed;font:400 15.5px/1.55 var(--sans);color:var(--k-text);text-align:left}
.k-cmp th,.k-cmp td{padding:20px 24px;vertical-align:top;text-wrap:pretty}
.k-cmp thead th{padding:24px 24px 18px;vertical-align:bottom;border-bottom:1px solid var(--line);font:600 19px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink2)}
.k-cmp thead th:first-child{width:22%}
.k-cmp thead th small{display:block;margin-top:7px;font:500 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.k-cmp tbody th{font:600 15.5px/1.45 var(--sans);color:var(--ink2)}
.k-cmp tbody tr+tr>*{border-top:1px solid var(--line)}
.k-cmp .k-cmp-us{background:color-mix(in srgb,var(--ai) 4%,transparent);color:var(--ink)}
.k-cmp thead .k-cmp-us small{color:var(--k-ai-ink)}
.k-cmp .k-link{margin-top:0;font-size:15.5px}
.k-cmp .k-link svg{width:16px;height:16px}
.k-not{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line);font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--mute);white-space:nowrap}
.k-cmp-note{display:block;margin-top:8px;color:var(--mute)}
/* a source's number after a quote: the primary's tint, a link to the source's line under the table */
.k-ref{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:5px;padding:0 4px;border-radius:999px;background:var(--k-ai-soft);font:500 10.5px/1 var(--mono);color:var(--k-ai-ink);text-decoration:none;vertical-align:1px}
.k-ref+.k-ref{margin-left:3px}
.k-ref:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ai) 45%,transparent)}
.k-ref:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* the sources under the table: each page by its name and address, plain text (a rival is named, never linked), the
   day it was read in the head */
.k-srcs{margin-top:28px;padding:0 4px}
.k-srcs-h{margin:0 0 12px;font:500 11.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.k-srcs ol{columns:2;column-gap:48px;margin:0;padding:0;list-style:none}
.k-srcs li{display:flex;gap:10px;break-inside:avoid;margin:0 0 8px;font:400 14px/1.5 var(--sans);color:var(--mute);scroll-margin-top:calc(var(--nav-h) + 24px)}
.k-srcs li b{font-weight:500;color:var(--k-text)}
.k-srcs-n{flex:none;min-width:18px;font:500 11.5px/1.75 var(--mono);color:var(--k-ai-ink)}
.k-srcs-at{white-space:normal;overflow-wrap:anywhere}
@media (max-width:1200px){
  .k-cmp th,.k-cmp td{padding:18px 18px}
  .k-cmp thead th{padding:22px 18px 16px}
}
@media (max-width:760px){
  .k-cmp-wrap{margin-top:32px;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .k-cmp,.k-cmp tbody,.k-cmp tr,.k-cmp th,.k-cmp td{display:block;width:auto}
  .k-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .k-cmp tbody tr{margin:0 0 12px;border-radius:16px;background:var(--k-card);box-shadow:var(--k-card-sh);overflow:hidden}
  .k-cmp tbody tr+tr>*{border-top:0}
  .k-cmp tbody th{padding:16px 18px 6px;font-size:16.5px}
  .k-cmp td{padding:10px 18px 16px;font-size:15.5px}
  .k-cmp td+td{border-top:1px solid var(--line)}
  .k-cmp td::before{content:attr(data-th);display:block;margin:2px 0 6px;font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
  .k-cmp td.k-cmp-us::before{color:var(--k-ai-ink)}
  .k-srcs{margin-top:20px;padding:0}
  .k-srcs ol{columns:1}
}
/* a column head that names a vendor: its mark beside its name (.k-vlogo below), the small line under both */
.k-cmp-who{display:inline-flex;align-items:center;gap:10px;min-width:0}

/* ==== a vendor's mark beside its name (the alternative pages: inc/alternatives.php gs_alternative_logo()) ========== */
/* Lifted from the nav's Solutions rows (.sol-vi): the vendor's own icon on a white tile with a hairline ring, in both
   themes (some marks fade on a dark ground: assets/img/logos/SOURCES.txt). Nominative use: always beside the vendor's
   name, never alone, never a link, never larger than our own mark beside it. --s is its size, 20 to 40 px (the width
   and height attributes carry it too, so it never moves the layout). .k-vlogo-fill for a mark that is its own square,
   .k-vlogo-bleed for a square with a clear rim; .k-vlogo-gs is our own disc, bare. */
.k-vlogo{--s:28px;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .25);overflow:hidden;background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(22,22,26,.1);vertical-align:middle}
.k-vlogo img{display:block;width:calc(var(--s) * .84);height:calc(var(--s) * .84);object-fit:contain}
.k-vlogo-fill img{width:100%;height:100%;object-fit:cover}
.k-vlogo-bleed img{width:calc(100% + 2px);height:calc(100% + 2px);max-width:none;margin:-1px;object-fit:cover}
.k-vlogo-gs{border-radius:50%;background:none;box-shadow:none}
.k-vlogo-gs img{width:100%;height:100%}

/* ==== shared ======================================================================================================== */
.k-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a word that must not break at its hyphen ("sign-in", "sign-ups") */
.k-nw{white-space:nowrap}
:is(.k-btn,.k-voice,.k-link,.k-for summary,.k-for a):focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
:is(.k-g-navy,.k-g-brand,.k-cta,.k-finale) :is(.k-btn,.k-voice,.k-link):focus-visible{outline-color:#FFFFFF}

/* ==== widths ======================================================================================================== */
@media (max-width:1200px){
  .k-blk-in,.k-blk-flip .k-blk-in{grid-template-columns:minmax(0,1fr);gap:52px;max-width:780px}
  .k-blk-flip .k-pic{order:0}
  .k-blk-txt{max-width:620px}
  .k-faq{grid-template-columns:minmax(0,1fr);gap:40px;max-width:780px}
  .k-reviews{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .k-reviews{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .k-blk-in,.k-blk-flip .k-blk-in{gap:36px}
  .k-h{margin-top:18px;font-size:34px;line-height:1.06}
  .k-h2{font-size:34px;line-height:1.06}
  .k-p,.k-lead{font-size:17px}
  .k-checks{margin-top:24px;gap:12px}
  .k-checks li{font-size:16px}
  .k-link{margin-top:28px}
  .k-links{margin-top:28px}
  .k-faq{gap:28px}
  .k-faq>.gp-qs{gap:10px}
  .k-faq summary{padding:18px 58px 18px 18px;font-size:17px}
  .k-faq summary::after{top:16px;right:14px;width:28px;height:28px}
  .k-faq details>p{padding:0 18px 20px;font-size:16px}
  .k-pic{min-height:0;padding:60px 14px 22px;border-radius:22px}
  .k-pic:has(>.gsd){padding:14px}
  .k-pic>.k-sample{top:18px;right:16px}
  .k-btns{flex-direction:column;align-items:stretch;width:100%;max-width:360px}
  .k-btns-c,.k-head-c .k-btns,.k-hero .k-btns,.k-cta .k-btns,.k-finale .k-btns{margin-inline:auto}
  .k-voice{justify-content:center}
  .k-win-dots{display:none}
  .k-win-addr{max-width:none;font-size:12px}
  .k-hero,section.k-hero{padding:28px 0 72px}
  .k-hero-dek{font-size:17px}
  .k-for{font-size:13.5px;padding-left:12px}
  .k-hero-stage{margin-top:32px;padding:0 16px}
  /* on a phone the window is as wide as the band, so the band shows only above it: the window starts lower, so the
     runway picture reads as a band and not as a tab behind the window */
  .k-hero-sky{left:16px;right:16px;height:200px;border-radius:20px}
  .k-hero-stage>.gsd{width:100%;margin-top:88px}
  .k-cta{border-radius:22px}
  /* a phone keeps one small sparkle in the top corner and the swooshes, clear of the words and the calls */
  .k-deco::before{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 0C25.6 13.6 34.4 22.4 48 24 34.4 25.6 25.6 34.4 24 48 22.4 34.4 13.6 25.6 0 24 13.6 22.4 22.4 13.6 24 0Z' fill='%23B9C3FF' fill-opacity='.55'/%3E%3C/svg%3E") right 14px top 14px/34px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M-60 540C240 380 520 660 860 430S1180 110 1270 40' stroke='white' stroke-opacity='.14' stroke-width='2'/%3E%3Cpath d='M-60 590C280 440 560 700 900 480S1210 170 1290 100' stroke='white' stroke-opacity='.07' stroke-width='2'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  }
  .k-logos{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:8px;border-radius:22px}
  .k-logos-plain{gap:20px 32px}
  .k-logo{height:68px;padding:0 12px}
  .k-logo .k-mark{font-size:15px}
  .k-finale,section.k-finale{padding-top:76px}
  .k-finale-sub{font-size:16.5px}
  .k-finale .k-btns{max-width:340px}
  .k-finale-art{margin-top:40px}
  .k-motto{margin-top:2px;padding-bottom:40px;font-size:10.5px;letter-spacing:.2em}
}
@media (max-width:480px){
  /* on a phone a still of the demo takes the column's whole width: its window has its own frame (the bar, the
     outline, the shadow), so the stage around it gives way and every line of the product keeps its room */
  .k-pic:has(>.gsd){padding:0;overflow:visible;border-radius:0;background:none;box-shadow:none}
  .k-pic:has(>.gsd)::before{display:none}
}
@media (max-width:360px){
  .k-pic{padding-left:10px;padding-right:10px}
}