/* Section kit. Selectors are prefixed .k-; canvas.gground is the dither engine's hook (ditherBands() finds canvas.gground[data-src]). */

:root {
  --k-cream: #faf6ee;
  --k-egg: #f3ecdf;
  --k-white: #fffdf8;
  --k-navy: #1e2f40;
  --k-ink: #21374b;
  --k-blue: #1e3d9a;
  --k-green: #10342a;
  --k-rust: #d65a39;
  --k-rust-deep: #b8492b; /* rust ground under running text: #d65a39 is 3.7:1 on cream, this is 4.95:1 */
  --k-on-dark: #f8f1e8;
  --k-on-dark-soft: rgba(248, 241, 232, 0.78);
  --k-soft: #51637a;
  --k-line: rgba(30, 47, 64, 0.1);
  --k-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --k-plum: #573a70; /* Carmen Guardian's product colour */
  --k-r: 16px;
  --k-w: min(1120px, calc(100% - 64px));
  /* type scale: one h1, one h2, one h3 for every block (44px / 24px at 1440) */
  --k-h1: clamp(2.6rem, 4.6vw, 4.4rem);
  --k-h2: clamp(2.1rem, 3.3vw, 2.9rem);
  --k-h3: 1.58rem;
}
@media (max-width: 900px) { :root { --k-h3: 1.5rem; } }
@media (max-width: 700px) { :root { --k-r: 12px; --k-w: calc(100% - 32px); } }

/* ----- shared ----- */
.k-sec { position: relative; padding: 104px 0; background: var(--k-cream); color: var(--k-navy); }
.k-sec.k-g-white { background: var(--k-white); }
.k-sec.k-g-egg { background: var(--k-egg); }
.k-sec.k-g-blue { background: var(--k-blue); }
.k-sec.k-g-navy { background: var(--k-navy); }
.k-sec.k-g-rust { background: var(--k-rust-deep); }
.k-sec.k-g-green { background: var(--k-green); }
.k-dark { color: var(--k-on-dark); }
.k-in { width: var(--k-w); margin: 0 auto; }
.k-in.k-wide { width: min(1240px, calc(100% - 64px)); }
@media (max-width: 700px) { .k-sec { padding: 72px 0; } .k-in.k-wide { width: calc(100% - 32px); } }

.k-h { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: var(--k-h2); line-height: 1.06;
  letter-spacing: -0.022em; margin: 0 0 16px; text-wrap: balance; color: inherit; }
.k-p { font-size: 1.06rem; line-height: 1.55; color: var(--k-soft); margin: 0; max-width: 42ch; text-wrap: pretty; }
.k-dark .k-p { color: var(--k-on-dark-soft); }
/* one underline under the words and the arrow: the arrow carries its own no-break space, which widens on hover, so the arrow nudges and the line stays in one piece */
.k-link { display: inline-block; font-weight: 500; font-size: 0.98rem; color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: currentColor; }
.k-link i { font-style: normal; word-spacing: 0; transition: word-spacing 200ms var(--k-ease); }
@media (hover: hover) and (pointer: fine) { .k-link:hover i { word-spacing: 3px; } }
.k-link:focus-visible, .k-tab:focus-visible, .k-q summary:focus-visible { outline: 2px solid #5b87d8; outline-offset: 3px; border-radius: 6px; }

/* product pill and place label */
.k-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--c, var(--k-ink));
  color: #fff; font-weight: 600; font-size: 0.84rem; white-space: nowrap; margin-left: -3px; }
/* IT teams | MSPs switch above the small business and partners heroes; the current page is the filled half, in the hero's colour (set --c-on on the page) */
.k-itmsp { display: inline-flex; height: 28px; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 253, 248, 0.38); margin-left: -3px; }
.k-itmsp a { display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 0.84rem; white-space: nowrap;
  color: rgba(255, 253, 248, 0.78); text-decoration: none; transition: color 160ms var(--k-ease), background-color 160ms var(--k-ease); }
.k-itmsp a[aria-current="page"] { background: #fffdf8; color: var(--c-on, var(--k-ink)); }
@media (hover: hover) and (pointer: fine) { .k-itmsp a:not([aria-current]):hover { color: #fffdf8; } }
.k-itmsp a:focus-visible { outline: 2px solid #5b87d8; outline-offset: 2px; }
.k-where { font-size: 0.86rem; font-weight: 500; color: rgba(33, 55, 75, 0.62); }
.k-dark .k-where { color: var(--k-on-dark-soft); }

/* ----- the colour tile and what sits on it ----- */
.k-tile { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--k-r); background: var(--c, var(--k-ink)); }
.k-tile::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url(grain-assets/print/grain.png) repeat;
  background-size: 128px 128px; opacity: 0.14; mix-blend-mode: overlay; }
.k-tile > canvas.gground, .k-dith > canvas.gground { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block;
  image-rendering: pixelated; pointer-events: none; opacity: 0; transition: opacity 700ms var(--k-ease); }
.k-tile > canvas.gground.inked, .k-dith > canvas.gground.inked { opacity: 1; }

/* a device on a colour tile: raised 6px, a light top edge, a shadow in a deep shade of the tile thrown down-left. Set --sh on the tile. */
.k-obj { position: absolute; z-index: 1; display: block; height: auto; max-width: none; translate: 0 -6px;
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.4)) drop-shadow(-10px 16px 14px var(--sh, rgba(3, 7, 12, 0.6))) drop-shadow(-4px 34px 50px var(--sh, rgba(3, 7, 12, 0.6))); }
img.k-obj { border-radius: 8px; }

/* a cropped window onto a larger capture: --ar is the crop's aspect, the img carries the offset */
.k-crop { overflow: hidden; border-radius: 10px; background: #f8f4ec; aspect-ratio: var(--ar); }
.k-crop > img { position: absolute; display: block; max-width: none; height: auto; width: var(--iw); left: var(--ix); top: var(--iy, 0); }
/* the web app, main pane only */
.k-crop.k-webapp { --ar: 1690 / 670; --iw: 151.48%; --ix: -37.87%; --iy: -34.33%; }
/* the Carmen Email capture without the poster's grey margin */
.k-crop.k-inbox { --ar: 2240 / 1360; --iw: 107.14%; --ix: -3.571%; --iy: -5.882%; background: #fff; }
/* the business portal's People page, main pane only */
.k-crop.k-people { --ar: 1864 / 1010; --iw: 126.6%; --ix: -26.6%; }
/* the web app result: case header, five checks and the High risk band */
.k-crop.k-webhero { --ar: 2125 / 896; --iw: 120.47%; --ix: -20.47%; --iy: 0%; }
/* print/ask-window.webp, right pane only. k-askwin: the checks and the verdict. k-askfollow: the verdict band and the follow-up box. */
.k-crop.k-askwin { --ar: 1060 / 465; --iw: 132.08%; --ix: -32.08%; --iy: -20.43%; }
.k-crop.k-askfollow { --ar: 1060 / 363; --iw: 132.08%; --ix: -32.08%; --iy: -118.46%; }
/* the personal portal home, the last three count cards only */
.k-crop.k-portal { --ar: 1485 / 338; --iw: 172.39%; --ix: -69.36%; --iy: -77.51%; }
/* Carmen Monitor in a browser: the High risk bar over a lookalike page and the panel beside it */
.k-crop.k-inpage { --ar: 2160 / 700; --iw: 100%; --ix: 0%; --iy: 0%; background: #fff; }

/* the phone: the real Guardian capture inside the iPhone 16 Pro frame (screen 1206x2622 at 102,100 of 1406x2822) */
.k-phone { aspect-ratio: 1406 / 2822; }
.k-phone > img { position: absolute; display: block; max-width: none; }
.k-phone .k-scr { left: 7.25%; top: 3.54%; width: 85.78%; height: 92.91%; border-radius: 12% / 5.6%; }
.k-phone .k-frame { inset: 0; width: 100%; height: 100%; }

/* Hero: copy on the 160px content edge, the web app on the right bleeding off the screen edge, the plant dither behind the capture only. Under 700px the app's type is about 8px, so it swaps to the phone capture. */
.k-hero { padding: 0; overflow: hidden; }
.k-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; min-height: 640px; }
.k-hero__copy { position: relative; z-index: 2; padding: 104px 0; }
.k-hero__h { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: var(--k-h1); line-height: 1.0; letter-spacing: -0.028em;
  margin: 0 0 22px; max-width: 10ch; text-wrap: balance; }
.k-hero .k-p { font-size: 1.15rem; max-width: 34ch; margin-bottom: 30px; }
.k-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.k-hero__ctas .k-link { color: var(--k-on-dark); }
.k-hero__stage { position: relative; align-self: stretch; min-height: 560px; }
.k-hero__stage > .k-dith { position: absolute; top: 0; bottom: 0; left: -24px; width: calc(100% + 240px); }
.k-hero__web { width: 880px; left: 0; top: 50%; translate: 0 calc(-50% - 6px); border-radius: 12px; --sh: rgba(6, 14, 48, 0.7); }
.k-hero__phone { display: none; }
@media (max-width: 860px) {
  .k-hero__grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .k-hero__copy { padding: 72px 0 12px; }
  .k-hero__stage { min-height: 0; height: 420px; }
  .k-hero__stage > .k-dith { left: -16px; width: calc(100% + 32px); }
  .k-hero__web { width: 130%; top: 48px; translate: 0 -6px; }
}
@media (max-width: 700px) {
  .k-hero__h { max-width: 11ch; }
  .k-hero__stage { height: 400px; } /* the phone bleeds off the bottom */
  .k-hero__web { display: none; }
  .k-hero__phone { display: block; position: absolute; z-index: 1; width: 236px; left: 50%; top: 32px; transform: translateX(-50%);
    filter: drop-shadow(-10px 20px 20px rgba(6, 14, 48, 0.55)) drop-shadow(-6px 44px 56px rgba(6, 14, 48, 0.55)); }
}

/* ═════ 1. Tile row ═════ */
.k-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.k-row + .k-row { margin-top: 104px; }
.k-row.k-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.k-row.k-flip .k-row__copy { order: 2; }
.k-row__id { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }
.k-row .k-h { max-width: 13ch; }
.k-leads { list-style: none; padding: 0; margin: 4px 0 26px; display: grid; gap: 12px; max-width: 40ch; }
.k-leads li { font-size: 1.06rem; line-height: 1.55; color: var(--k-soft); }
.k-leads b { color: var(--k-navy); font-weight: 600; }
.k-row__tile { height: clamp(360px, 34vw, 470px); }
.k-row__tile[data-k="email"] .k-obj { width: 118%; left: 9%; top: 15%; border-radius: 8px; }
.k-row__tile[data-k="ask"] .k-obj { width: 124%; left: 8%; top: 14%; border-radius: 10px; }
@media (max-width: 860px) {
  .k-row, .k-row.k-flip { grid-template-columns: 1fr; gap: 28px; }
  .k-row .k-row__tile { order: -1; height: clamp(260px, 62vw, 380px); }
  .k-row.k-flip .k-row__copy { order: 2; }
  .k-row + .k-row { margin-top: 72px; }
}

/* ═════ 2. Four products ═════ */
.k-family { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.k-family__head { padding-top: 8px; }
.k-family__head .k-p { margin-bottom: 26px; }
.k-family__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px; }
.k-fam__tile { height: 400px; }
.k-fam__cap { padding: 16px 4px 0; }
.k-fam__cap .k-top { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.k-fam__cap p { margin: 10px 0 0; font-size: 0.98rem; line-height: 1.5; color: var(--k-soft); text-wrap: pretty; }
.k-fam[data-k="ask"] .k-obj { width: 176%; left: 8%; top: 12%; }
.k-fam[data-k="monitor"] .k-obj { width: 94%; left: 11%; top: 11%; border-radius: 12px 12px 0 0; }
.k-fam[data-k="email"] .k-obj { width: 290%; left: 11%; top: 11%; }
.k-fam[data-k="guardian"] .k-obj { width: 80%; left: 10%; top: 9%; }
.k-fam[data-k="ask"] .k-obj.k-askwin { width: 150%; left: 9%; top: 14%; }
@media (max-width: 1100px) {
  .k-family { grid-template-columns: 1fr; }
  .k-family__head .k-p { max-width: 46ch; }
}
/* phones: a 2x2 grid so all four products are on screen at once */
@media (max-width: 760px) {
  .k-family__tiles { grid-template-columns: 1fr 1fr; gap: 20px 12px; }
  .k-fam__tile { height: 220px; }
  .k-fam__cap { padding-top: 12px; }
  .k-fam__cap p { font-size: 0.94rem; margin-top: 8px; }
  .k-fam[data-k="ask"] .k-obj.k-askwin { width: 230%; left: 10%; top: 16%; }
  .k-fam[data-k="monitor"] .k-obj { width: 100%; left: 10%; }
  .k-fam[data-k="email"] .k-obj { width: 360%; }
  .k-fam[data-k="guardian"] .k-obj { width: 76%; left: 12%; top: 10%; }
}
/* opt-in: add .k-snap to .k-snapclip for horizontal scroll-snap on phones */
.k-snapclip { overflow: hidden; }
@media (max-width: 760px) {
  .k-snapclip.k-snap { margin: 0 -16px; }
  .k-snap .k-family__tiles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 4px; scroll-padding: 0 16px;
    scrollbar-width: none; overscroll-behavior-x: contain; }
  .k-snap .k-family__tiles::-webkit-scrollbar { display: none; }
  .k-snap .k-fam { flex: 0 0 64vw; scroll-snap-align: start; }
  .k-snap .k-fam[data-k="ask"] { flex-basis: 84vw; }
  .k-snap .k-fam__tile { height: 340px; }
}

/* ═════ 3. Verdict moment ═════ */
.k-verdict { padding: 0; overflow: hidden; }
.k-verdict__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; min-height: 720px; }
.k-verdict__copy { padding: 96px 0; }
.k-verdict .k-h { max-width: 9ch; margin-bottom: 22px; }
.k-verdict .k-p { font-size: 1.15rem; max-width: 34ch; margin-bottom: 28px; }
.k-verdict__stage { position: relative; align-self: stretch; }
.k-verdict__stage > .k-dith { position: absolute; inset: 56px -8% 0; }
.k-verdict__stage .k-phone { position: absolute; z-index: 1; width: 320px; left: 50%; top: 116px; transform: translateX(-50%);
  filter: drop-shadow(-12px 22px 22px rgba(6, 14, 48, 0.55)) drop-shadow(-6px 48px 64px rgba(6, 14, 48, 0.6)); }
@media (max-width: 860px) {
  .k-verdict__grid { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .k-verdict__copy { padding: 72px 0 8px; }
  .k-verdict__stage { height: 470px; }
  .k-verdict__stage > .k-dith { inset: 0 -16px; }
  .k-verdict__stage .k-phone { width: 250px; top: 40px; }
}

/* ═════ 4. Audience chooser ═════ */
.k-aud__head { margin-bottom: 36px; }
.k-aud { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 16px; }
.k-aud__card { display: flex; flex-direction: column; height: 500px; color: var(--k-on-dark); }
.k-aud__card[data-k="personal"] { --c: var(--k-egg); color: var(--k-navy); }
.k-aud__vis { position: relative; flex: 0 0 60%; overflow: hidden; }
.k-aud__vis > canvas.gground { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; opacity: 0; transition: opacity 700ms var(--k-ease); }
.k-aud__vis > canvas.gground.inked { opacity: 1; }
.k-aud__txt { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; padding: 26px 28px 28px; }
.k-aud__txt h3 { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: var(--k-h3); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 10px; }
.k-aud__txt p { margin: 0; font-size: 1.02rem; line-height: 1.5; opacity: 0.84; max-width: 30ch; }
.k-aud__txt .k-link { margin-top: auto; padding-top: 18px; }
.k-aud__card[data-k="personal"] .k-phone { position: absolute; width: 44%; left: 50%; top: 13%; transform: translateX(-50%); z-index: 1;
  filter: drop-shadow(-10px 18px 18px rgba(80, 60, 30, 0.28)); }
.k-aud__card[data-k="personal"] .k-obj { width: 124%; left: 8%; top: 24%; --sh: rgba(80, 60, 30, 0.32); }
.k-aud__card[data-k="business"] .k-obj { width: 132%; left: 10%; top: 17%; --sh: rgba(1, 8, 5, 0.85); }
.k-aud__card { transition: transform 300ms var(--k-ease); }
@media (hover: hover) and (pointer: fine) { .k-aud__card:hover { transform: translateY(-3px); } }
@media (max-width: 900px) {
  .k-aud { grid-template-columns: 1fr 1fr; }
  .k-aud__card[data-k="enterprise"] { grid-column: 1 / -1; height: 380px; }
}
@media (max-width: 620px) {
  .k-aud { grid-template-columns: 1fr; }
  .k-aud__card, .k-aud__card[data-k="enterprise"] { height: auto; }
  .k-aud__vis { flex-basis: 250px; }
  .k-aud__card[data-k="enterprise"] .k-aud__vis { flex-basis: 180px; }
  .k-aud__txt { padding: 22px 22px 24px; }
}

/* ═════ 5. Three steps ═════ */
.k-steps__head { margin-bottom: 44px; }
.k-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.k-steps > li:nth-child(2) { margin-top: 56px; }
.k-steps > li:nth-child(3) { margin-top: 112px; }
.k-step__tile { height: 360px; }
.k-step__tile .k-obj { width: 80%; left: 10%; top: 11%; border-radius: 14px 14px 0 0; }
.k-step__tile[data-k="paste"] .k-obj { width: 140%; left: 9%; top: 30%; border-radius: 12px; }
.k-step__cap { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 18px 4px 0; }
.k-step__n { font-family: Zodiak, Georgia, serif; font-size: 1.5rem; line-height: 1.1; color: var(--k-on-dark-soft); font-variant-numeric: tabular-nums; }
.k-step__cap h3 { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: var(--k-h3); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 6px; }
.k-step__cap p { grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.5; color: var(--k-on-dark-soft); max-width: 34ch; text-wrap: pretty; }
/* phones: the three steps stack as rows, a small tile beside each caption */
@media (max-width: 760px) {
  .k-steps { grid-template-columns: 1fr; gap: 16px; }
  .k-steps > li:nth-child(n) { margin-top: 0; }
  .k-step { display: grid; grid-template-columns: 136px minmax(0, 1fr); column-gap: 18px; align-items: center; }
  .k-step__tile { height: 168px; }
  .k-step__cap { padding: 0; }
  .k-step__tile .k-obj { width: 86%; left: 7%; top: 9%; }
  .k-step__tile[data-k="paste"] .k-obj { width: 230%; left: 9%; top: 30%; }
}
/* opt-in: add .k-snap to .k-steps-clip for horizontal scroll-snap */
@media (max-width: 760px) {
  .k-steps-clip.k-snap { margin: 0 -16px; }
  .k-snap .k-steps { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 4px; scroll-padding: 0 16px; scrollbar-width: none; }
  .k-snap .k-steps::-webkit-scrollbar { display: none; }
  .k-snap .k-step { display: block; flex: 0 0 76vw; scroll-snap-align: start; }
  .k-snap .k-step__tile { height: 330px; }
  .k-snap .k-step__cap { padding: 18px 4px 0; }
}

/* ═════ 6. Stat field ═════ */
.k-stats__head { margin-bottom: 56px; }
.k-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.k-stat__n { position: relative; display: block; font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: clamp(3.8rem, 6.4vw, 6rem);
  line-height: 0.95; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; margin-bottom: 18px; }
.k-stat__l { margin: 0; font-size: 1.06rem; line-height: 1.5; max-width: 30ch; text-wrap: pretty; }
.k-stat__l span { display: block; margin-top: 4px; font-size: 0.9rem; color: var(--k-on-dark-soft); }
.k-stats__more { margin-top: 48px; }
/* option: numerals set through the dither engine as 1-bit type. The text stays in the DOM for readers. */
.k-stat__n canvas { position: absolute; left: 0; top: 50%; translate: 0 -50%; image-rendering: pixelated; pointer-events: none; display: none; }
[data-kdn="dither"] .k-stat__n { color: transparent; }
[data-kdn="dither"] .k-stat__n canvas { display: block; }
@media (max-width: 760px) { .k-stats { grid-template-columns: 1fr; gap: 36px; } .k-stats__head { margin-bottom: 40px; } }

/* ═════ 7. Price strip ═════ */
.k-price { padding: 0; }
.k-price__band { position: relative; min-height: 560px; display: grid; place-items: center; padding: 72px 0; overflow: hidden; }
.k-price__band > canvas.gground { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; pointer-events: none; opacity: 0; transition: opacity 700ms var(--k-ease);
  /* the flowers fade out before the band's edges instead of being sliced flat there */
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.k-price__band > canvas.gground.inked { opacity: 1; }
.k-price__card { position: relative; z-index: 1; width: min(880px, calc(100% - 64px)); background: var(--k-white); border-radius: var(--k-r);
  box-shadow: 0 1px 2px rgba(30, 47, 64, 0.08), 0 30px 60px -30px rgba(20, 36, 90, 0.45); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.k-price__l { padding: 44px 44px 40px; }
.k-price__l .k-h { max-width: 12ch; }
.k-price__r { padding: 44px 44px 40px; border-left: 2px dotted rgba(30, 47, 64, 0.2); display: flex; flex-direction: column; align-items: flex-start; }
.k-price__amt { font-family: Zodiak, Georgia, serif; font-size: clamp(3.6rem, 5.4vw, 4.8rem); line-height: 0.9; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.k-price__per { font-size: 1rem; color: var(--k-soft); margin: 8px 0 26px; }
.k-price__foot { grid-column: 1 / -1; margin: 0; padding: 16px 44px; border-top: 1px solid var(--k-line); background: var(--k-cream);
  border-radius: 0 0 var(--k-r) var(--k-r); font-size: 0.98rem; color: var(--k-soft); }
.k-price__foot a { color: var(--k-navy); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .k-price__band { min-height: 0; padding: 190px 0 64px; place-items: end center; }
  .k-price__band > canvas.gground + canvas.gground { display: none; } /* one flower, centred by the kit script, shows above the card */
  .k-price__card { width: calc(100% - 32px); grid-template-columns: 1fr; }
  .k-price__l { padding: 30px 24px 8px; }
  .k-price__r { border-left: 0; border-top: 2px dotted rgba(30, 47, 64, 0.2); margin: 20px 24px 0; padding: 24px 0 28px; }
  .k-price__foot { padding: 14px 24px; }
}

/* ═════ 8. Tabbed capture ═════ */
.k-tabs__head { text-align: center; }
.k-tabs__head .k-h { margin-left: auto; margin-right: auto; }
.k-tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 18px; }
.k-tab { font: inherit; font-size: 0.96rem; font-weight: 500; height: 42px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(30, 47, 64, 0.16); background: transparent; color: var(--k-navy);
  transition: background 200ms var(--k-ease), color 200ms var(--k-ease), border-color 200ms var(--k-ease), transform 150ms var(--k-ease); }
.k-tab:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .k-tab:not([aria-selected="true"]):hover { background: rgba(30, 47, 64, 0.05); } }
.k-tab[aria-selected="true"] { background: var(--k-navy); border-color: var(--k-navy); color: #fff; }
.k-tabs__line { text-align: center; margin: 0 auto 36px; max-width: 46ch; min-height: 3.1em; font-size: 1.06rem; line-height: 1.55; color: var(--k-soft); text-wrap: balance; }
.k-tabs__stage { height: clamp(380px, 38vw, 520px); transition: background-color 320ms var(--k-ease); }
.k-tabs__view { position: absolute; inset: 0; z-index: 1; transition: opacity 320ms var(--k-ease), filter 320ms var(--k-ease), transform 320ms var(--k-ease); }
.k-tabs__view.k-out { opacity: 0; filter: blur(10px); transform: scale(0.985); transition-duration: 150ms; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.k-tabs__panel { position: absolute; inset: 0; visibility: hidden; }
.k-tabs__panel.k-on { visibility: visible; }
.k-tabs__panel > canvas.gground { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; pointer-events: none; opacity: 0; transition: opacity 700ms var(--k-ease); }
.k-tabs__panel > canvas.gground.inked { opacity: 1; }
.k-tabs__panel[data-k="text"] .k-obj { width: 270px; left: 50%; margin-left: -135px; top: 48px; border-radius: 0; --sh: rgba(24, 10, 34, 0.8); }
.k-tabs__panel[data-k="email"] .k-obj { width: 52%; left: 24%; top: 9%; border-radius: 12px 12px 0 0; --sh: rgba(1, 8, 5, 0.85); }
.k-tabs__panel[data-k="page"] .k-obj { width: 86%; left: 7%; top: 12%; --sh: rgba(4, 10, 40, 0.85); }
.k-tabs__panel[data-k="link"] .k-obj { width: 74%; left: 13%; top: 14%; --sh: rgba(3, 7, 12, 0.85); }
@media (prefers-reduced-motion: reduce) { .k-tabs__view, .k-tabs__view.k-out, .k-tabs__stage { transition: none; } .k-tabs__view.k-out { filter: none; transform: none; } }
@media (max-width: 700px) {
  .k-tabs__head { text-align: left; }
  /* one row, always: it scrolls sideways before it wraps */
  .k-tablist { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 22px -16px 14px; padding: 2px 16px; }
  .k-tablist::-webkit-scrollbar { display: none; }
  .k-tab { flex: 0 0 auto; padding: 0 13px; font-size: 0.92rem; height: 40px; white-space: nowrap; }
  .k-tabs__line { text-align: left; margin-left: 0; margin-bottom: 24px; }
  .k-tabs__stage { height: 400px; }
  .k-tabs__panel[data-k="email"] .k-obj { width: 88%; left: 6%; top: 8%; }
  .k-tabs__panel[data-k="link"] .k-obj { width: 160%; left: 8%; top: 14%; }
  .k-tabs__panel[data-k="page"] .k-obj { width: 190%; left: -86%; top: 14%; } /* phones frame the panel and the edge of the page it is judging */
  .k-tabs__panel[data-k="text"] .k-obj { width: 200px; margin-left: -100px; top: 32px; }
}

/* ═════ 9. FAQ ═════ */
.k-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.k-faq__side { position: sticky; top: 32px; }
/* the side's visual: the real follow-up box, next to the link that goes to it */
.k-faq__cap { height: 210px; margin: 10px 0 20px; --c: var(--k-ink); --sh: rgba(3, 7, 12, 0.8); }
.k-faq__cap .k-obj { width: 150%; left: 9%; top: 18%; }
.k-faq__side .k-link { font-size: 1.02rem; }
.k-qs { display: grid; gap: 8px; }
.k-q { background: var(--k-white); border: 0; border-radius: var(--k-r); padding: 0; margin: 0; interpolate-size: allow-keywords; }
.k-q summary::after, .k-q[open] summary::after { content: none; }
.k-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 22px 20px 26px; font-weight: 500; font-size: 1.08rem; line-height: 1.4; color: var(--k-navy); }
.k-q summary::-webkit-details-marker { display: none; }
.k-q summary i { flex: 0 0 30px; height: 30px; border-radius: 999px; background: var(--k-egg); position: relative; transition: transform 300ms var(--k-ease), background 200ms var(--k-ease); }
.k-q summary i::before, .k-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.6px; background: var(--k-navy); translate: -50% -50%; border-radius: 1px; }
.k-q summary i::after { rotate: 90deg; }
.k-q[open] summary i { transform: rotate(45deg); }
.k-q::details-content { block-size: 0; overflow: hidden; transition: block-size 320ms var(--k-ease), content-visibility 320ms allow-discrete; }
.k-q[open]::details-content { block-size: auto; }
.k-q p { margin: 0; font-size: 1rem; padding: 0 64px 22px 26px; font-size: 1rem; line-height: 1.6; color: var(--k-soft); max-width: 62ch; }
.k-faq__more { margin-top: 22px; padding-left: 4px; }
@media (prefers-reduced-motion: reduce) { .k-q::details-content, .k-q summary i { transition: none; } }
@media (max-width: 860px) {
  .k-faq { grid-template-columns: 1fr; gap: 28px; }
  .k-faq__side { position: static; }
  .k-faq__cap { height: 190px; margin: 6px 0 16px; }
  .k-faq__cap .k-obj { width: 170%; }
  .k-q summary { padding: 18px 18px 18px 20px; }
  .k-q p { padding: 0 20px 20px; }
}

/* ═════ 10. Closing panel ═════ */
.k-close { padding: 24px 24px 0; }
/* green by default, so a page that opens on the blue verdict does not close on it too; .k-g-blue on the panel swaps it */
.k-close__panel { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--k-r); background: var(--k-green); color: var(--k-on-dark);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 380px; max-width: 1392px; margin: 0 auto; }
.k-close__panel.k-g-blue { background: var(--k-blue); }
.k-close__copy { padding: 64px clamp(28px, 6vw, 88px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.k-close__copy .k-h { margin-bottom: 28px; max-width: 12ch; }
.k-close__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.k-close__ctas .k-link { color: var(--k-on-dark); }
.k-close__art { position: relative; }
.k-close__art > .k-dith { position: absolute; inset: 0; }
@media (max-width: 760px) {
  .k-close { padding: 16px 16px 0; }
  .k-close__panel { grid-template-columns: 1fr; min-height: 0; }
  .k-close__art { order: -1; height: 200px; }
  .k-close__copy { padding: 28px 24px 40px; }
}

/* 11. Capture looks, one per section, on a colour tile (--c, --sh). Lift: .k-obj alone. Plate mark: .k-obj.lk-plate. Lit: .k-obj.lk-lit plus data-lamp="cx,cy,r,dim,haze" on the tile canvas. Collage: .lk-sheet layers, at most one a page. */
.k-obj.lk-plate, .k-obj .lk-plate { translate: none; filter: none;
  box-shadow: 0 1px 0 var(--sh, rgba(3, 7, 12, 0.6)), 0 0 0 var(--lk-gap, 12px) var(--c, transparent),
    -1px 1px 0 var(--lk-gap, 12px) rgba(255, 253, 248, 0.16), 1px -1px 0 var(--lk-gap, 12px) rgba(3, 7, 12, 0.34); }
.k-obj.lk-lit { translate: 0 -6px; box-shadow: none;
  filter: drop-shadow(0 -1px 0 rgba(255, 253, 248, 0.4)) drop-shadow(-8px 14px 12px rgba(26, 32, 42, 0.42)) drop-shadow(-4px 30px 44px rgba(26, 32, 42, 0.34)); }
.lk-sheet { position: absolute; z-index: 0; overflow: hidden; border-radius: 3px; pointer-events: none; box-shadow: -1px 1px 0 rgba(3, 7, 12, 0.42); }
.lk-sheet.lk-paper { background: var(--lk-stock, #d9ccb2) url(grain-assets/print/paper.png) center / 512px; background-blend-mode: soft-light; }
.lk-sheet.lk-print { background: var(--lk-print, #174536); }
.lk-sheet.lk-print > canvas.gground { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated;
  opacity: 0; transition: opacity 700ms var(--k-ease); }
.lk-sheet.lk-print > canvas.gground.inked { opacity: 1; }
.k-obj.lk-flat { translate: none; filter: none; box-shadow: -1px 1px 0 rgba(3, 7, 12, 0.42); }
.k-obj.lk-raised { filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.3)) drop-shadow(-2px 3px 2px var(--sh, rgba(3, 7, 12, 0.6)))
  drop-shadow(-14px 26px 30px var(--sh, rgba(3, 7, 12, 0.6))); }
@media (max-width: 700px) {
  :root { --lk-gap: 8px; }
  .lk-sheet.lk-print { display: none; } /* the collage keeps one sheet on a phone */
  .k-obj.lk-raised { filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.3)) drop-shadow(-1px 2px 1px var(--sh, rgba(3, 7, 12, 0.6)))
    drop-shadow(-8px 16px 18px var(--sh, rgba(3, 7, 12, 0.6))); }
}
@media (prefers-reduced-motion: reduce) { .lk-sheet.lk-print > canvas.gground { transition: none; } }

/* ----- kit annotations ----- */
.k-kitlabel { position: absolute; z-index: 20; top: 14px; left: 14px; display: inline-flex; gap: 8px; align-items: baseline; padding: 5px 11px;
  border-radius: 999px; background: rgba(255, 253, 248, 0.94); color: var(--k-navy); font-size: 0.8rem; font-weight: 500; box-shadow: 0 0 0 1px var(--k-line); }
.k-kitlabel code { font-family: inherit; color: var(--k-soft); font-weight: 400; }
[data-klabels="off"] .k-kitlabel { display: none; }
.k-kitsw { position: fixed; z-index: 90; left: 16px; bottom: 16px; display: flex; gap: 4px; align-items: center; padding: 4px; border-radius: 999px;
  background: rgba(255, 253, 248, 0.96); box-shadow: 0 0 0 1px var(--k-line), 0 8px 24px -12px rgba(30, 47, 64, 0.4); font-size: 0.8rem; }
.k-kitsw b { font-weight: 500; padding: 0 6px 0 8px; color: var(--k-soft); }
.k-kitsw button { font: inherit; font-weight: 500; border: 0; background: transparent; color: var(--k-navy); padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.k-kitsw button[aria-pressed="true"] { background: var(--k-navy); color: #fff; }
.k-intro { padding: 40px 0 56px; }
.k-intro h1 { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: clamp(2.6rem, 4.6vw, 3.8rem); line-height: 1.02; letter-spacing: -0.025em; margin: 0 0 14px; }
.k-intro p { font-size: 1.06rem; line-height: 1.55; color: var(--k-soft); max-width: 52ch; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .k-tile > canvas.gground, .k-dith > canvas.gground, .k-aud__vis > canvas.gground, .k-price__band > canvas.gground, .k-tabs__panel > canvas.gground, .k-aud__card, .k-link i { transition: none; }
  .k-aud__card:hover { transform: none; }
}

/* Comparison table (.k-vs): Carmen's column is one continuous soft strip, rounded at both ends, its name in brand blue and the competitor's muted. Hairlines run under the strip. On a phone it shows Carmen beside one competitor, picked by three buttons (site.js). */
.k-vs .k-p { max-width: 640px; }
.k-vs__t { width: 100%; margin-top: 40px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 1rem; line-height: 1.4; }
.k-vs__t th, .k-vs__t td { padding: 16px 18px; text-align: left; vertical-align: top; }
.k-vs__t thead th { font-weight: 600; font-size: 0.95rem; color: rgba(33, 55, 75, 0.6); padding-top: 18px; padding-bottom: 14px; }
.k-vs__t tbody th { font-weight: 600; font-size: 0.92rem; color: var(--k-navy); width: 19%; }
.k-vs__t tbody td { color: rgba(33, 55, 75, 0.72); }
.k-vs__t tbody th, .k-vs__t tbody td { border-top: 1px solid rgba(33, 55, 75, 0.14); }
.k-vs__t [data-c="carmen"] { background: rgba(91, 135, 216, 0.13); } /* periwinkle: the brand blue at low alpha read grey on cream */
.k-vs__t thead th[data-c="carmen"] { color: var(--k-blue); border-radius: 14px 14px 0 0; }
.k-vs__t tbody td[data-c="carmen"] { color: var(--k-navy); font-weight: 600; border-top-color: rgba(30, 61, 154, 0.12); }
.k-vs__t tbody tr:last-child td[data-c="carmen"] { border-radius: 0 0 14px 14px; }
.k-vs__src { margin: 18px 0 0; font-size: 0.84rem; color: rgba(33, 55, 75, 0.62); }
.k-vs__pick { display: none; }
@media (max-width: 700px) {
  .k-vs__pick { display: inline-flex; margin-top: 28px; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(33, 55, 75, 0.18); }
  .k-vs__pick button { border: 0; background: none; font: inherit; font-weight: 600; font-size: 0.86rem; color: rgba(33, 55, 75, 0.7); padding: 7px 13px; border-radius: 999px; cursor: pointer;
    transition: color 160ms var(--k-ease), background-color 160ms var(--k-ease); }
  .k-vs__pick button[aria-pressed="true"] { background: var(--k-navy); color: #fffdf8; }
  .k-vs__t { margin-top: 18px; font-size: 0.875rem; line-height: 1.38; }
  .k-vs__t th, .k-vs__t td { padding: 14px 10px; text-wrap: balance; }
  .k-vs__t thead th { font-size: 0.9rem; padding-top: 16px; padding-bottom: 12px; }
  .k-vs__t tbody th { padding-left: 0; font-size: 0.84rem; }
  /* a fixed table takes its widths from the first row: labels 25%, Carmen 42% (its answers are the longer ones), the competitor the rest */
  .k-vs__t thead td { width: 25%; padding-left: 0; }
  .k-vs__t thead th[data-c="carmen"] { width: 42%; }
  .k-vs:not([data-vs="proofpoint"]) [data-c="proofpoint"], .k-vs:not([data-vs="defender"]) [data-c="defender"], .k-vs:not([data-vs="knowbe4"]) [data-c="knowbe4"] { display: none; }
}
.k-vs__cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* On phones a phone mockup shows its screen without the frame, below the status bar, at most of the tile's width, so its
   text is phone size, as on the homepage tiles. A .k-ph image takes the place of a tile's wide capture on phones.
   Pages opt in with class="ph-fit" on <html>. */
.k-ph { display: none; }
@media (max-width: 760px) {
  html.ph-fit .k-tile .k-phone { width: 80%; left: 10%; margin-left: 0; top: 24px; aspect-ratio: auto; overflow: hidden; border-radius: 14px 14px 0 0; }
  html.ph-fit .k-tile .k-phone .k-frame { display: none; }
  html.ph-fit .k-tile .k-phone .k-scr { position: static; width: 100%; height: auto; margin-top: -13.4%; border-radius: 0; }
  html.ph-fit .k-tile:has(.k-ph) .k-obj:not(.k-ph) { display: none; }
  html.ph-fit .k-tile .k-ph { display: block; width: 80%; left: 10%; top: 24px; border-radius: 14px 14px 0 0; }
}