/* Product pages for Carmen Monitor, Carmen Email and Carmen Guardian. Loaded after kit.css; shared rules live here, prefixed pp-. */

.pp-b { display: none; }
[data-pp="b"] .pp-a { display: none; }
[data-pp="b"] .pp-b { display: block; }

/* one type scale: h1 is the hero, every h2 44px, every h3 24px */
.pp-b .k-sec:not(.pp-hero) h2.k-h, .pp-b .k-faq__side .k-h { font-size: 44px; line-height: 1.06; }
@media (max-width: 700px) { .pp-b .k-sec:not(.pp-hero) h2.k-h, .pp-b .k-faq__side .k-h { font-size: 36px; } }
.k-sec.pp-g-plum { background: var(--k-plum); }

/* ═════ 1. hero: copy left, the product right. Objects are drawn in a 600x600 box (.pp-col) and scaled as one piece. ═════ */
.pp-hero .k-verdict__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 680px; }
.pp-hero .k-verdict__copy { padding: 88px 0 96px; }
.pp-hero h1.k-h { max-width: 12ch; font-size: min(var(--k-h1, clamp(2.6rem, 4.6vw, 4.4rem)), 4rem); line-height: 1; letter-spacing: -0.028em; }
.pp-hero .k-p { max-width: 36ch; }
.pp-hero .k-row__id { margin-bottom: 22px; }
.pp-hero .k-pill { --c: #fffdf8; color: var(--pp-ground, var(--k-blue)); }
.pp-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.pp-ctas .k-link { color: var(--k-on-dark); }
.pp-hero .k-verdict__stage > .k-dith { inset: 24px -30% 0 -8%; }
.pp-col { position: absolute; z-index: 1; left: 0; top: 50%; width: 600px; height: 600px; translate: 0 -50%; transform-origin: left center; }
.pp-col > * { position: absolute; }
/* a capture lying on the field: the kit's soft lift in the hero's own dark tint */
.pp-col .pp-lift { filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.4)) drop-shadow(-12px 20px 22px var(--pp-sh, rgba(6, 14, 48, 0.5))) drop-shadow(-6px 44px 64px var(--pp-sh, rgba(6, 14, 48, 0.55))); }
/* the one thing on top: a tighter shadow under it as well */
.pp-col .pp-raised { z-index: 2; filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.3)) drop-shadow(-2px 3px 2px var(--pp-sh, rgba(4, 10, 40, 0.6))) drop-shadow(-14px 26px 30px var(--pp-sh, rgba(4, 10, 40, 0.6))); }
.pp-hero .pp-col .k-phone { left: auto; top: auto; transform: none; } /* the kit centres a stage phone; here the page places it */
.pp-col img { display: block; width: 100%; height: auto; }
@media (max-width: 1240px) { .pp-col { scale: 0.88; } }
@media (max-width: 1060px) { .pp-col { scale: 0.78; } }
@media (max-width: 860px) {
  .pp-hero .k-verdict__grid { grid-template-columns: 1fr; min-height: 0; }
  .pp-hero .k-verdict__copy { padding: 56px 0 8px; }
  .pp-hero .k-verdict__stage { height: 640px; }
  .pp-hero .k-verdict__stage > .k-dith { inset: 0 -16px; }
  .pp-col { scale: 1; left: 36px; }
}
@media (max-width: 700px) { .pp-hero .k-verdict__stage { height: 560px; } .pp-col { scale: 0.84; left: 30px; } }
@media (max-width: 560px) { .pp-hero .k-verdict__stage { height: 520px; } .pp-col { scale: 0.62; left: 4px; } }
@media (max-width: 400px) { .pp-col { scale: 0.56; left: 0; } }

/* ═════ 2. what it does: the facts in a white list beside the heading ═════ */
.pp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pp-split .k-h { max-width: 12ch; margin: 0 0 20px; }
.pp-split .k-p { max-width: 36ch; margin: 0; }
.pp-rows { list-style: none; margin: 0; padding: 0; background: var(--k-white); border-radius: var(--k-r); box-shadow: 0 0 0 1px var(--k-line); }
.pp-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 6px 28px; padding: 22px 26px; align-items: baseline; }
.pp-row + .pp-row { border-top: 1px solid var(--k-line); }
.pp-row h3 { font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.pp-row p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--k-soft); }
@media (max-width: 860px) { .pp-split { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 700px) { .pp-row { grid-template-columns: 1fr; padding: 18px 20px; } }

/* ═════ 3. an example: the real result on a tile, the story and what Carmen checked beside it ═════ */
.pp-ex { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pp-ex__tile { height: 540px; }
.pp-ex__tile .k-obj { left: 50%; top: 50%; translate: -50% -50%; }
.pp-risk { display: block; margin: 0 0 14px; font-weight: 600; font-size: 1rem; color: var(--k-rust-deep); }
.pp-ex .k-h { max-width: 14ch; }
.pp-ex .k-p + .k-p { margin-top: 12px; }
.pp-checks { margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--k-line); display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.pp-checks > h3 { grid-column: 1 / -1; margin: 0 0 2px; font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.15; }
.pp-checks h4 { margin: 0 0 4px; font-size: 0.98rem; font-weight: 600; color: var(--k-navy); }
.pp-checks p { margin: 0; font-size: 0.94rem; line-height: 1.5; color: var(--k-soft); }
@media (max-width: 860px) { .pp-ex { grid-template-columns: 1fr; } .pp-ex__tile { height: 460px; } }
@media (max-width: 560px) { .pp-checks { grid-template-columns: 1fr; } .pp-ex__tile { height: 400px; } }

/* a text as it arrives: white bubble, app icon, sender, the message */
.pp-note { position: relative; z-index: 1; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; width: min(460px, 100%);
  padding: 14px 18px 16px 14px; border-radius: 20px; background: rgba(255, 253, 248, 0.97); color: var(--k-navy);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, -8px 16px 30px -12px rgba(3, 8, 16, 0.7); }
.pp-note__ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: #5b87d8; }
.pp-note__ic svg { width: 22px; height: 22px; }
.pp-note__hd { display: flex; justify-content: space-between; gap: 12px; font-size: 0.82rem; color: var(--k-soft); }
.pp-note__hd b { font-weight: 500; color: var(--k-navy); }
.pp-note__t { margin: 2px 0; font-weight: 600; font-size: 0.98rem; }
.pp-note__m { margin: 0; font-size: 0.96rem; line-height: 1.42; color: #3a4d61; }
.pp-notes { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px clamp(20px, 5vw, 56px); }
.pp-notes > canvas.gground { opacity: 0.5; }
.pp-notes .pp-note:nth-of-type(2) { margin-left: 48px; }
.pp-notes .pp-note:nth-of-type(3) { margin-left: 20px; }
@media (max-width: 560px) { .pp-notes .pp-note:nth-of-type(n) { margin-left: 0; } .pp-notes .pp-note:nth-of-type(2) { margin-left: 16px; } }

/* ═════ 4. privacy: five plain statements on navy ═════ */
.pp-priv__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 40px; }
.pp-priv__head .k-h { margin: 0; max-width: 12ch; }
.pp-priv__head .k-p { justify-self: end; max-width: 38ch; }
.pp-priv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.pp-priv li { padding: 22px 0 26px; border-top: 1px solid rgba(248, 241, 232, 0.16); }
.pp-priv h3 { margin: 0 0 8px; font-family: Zodiak, Georgia, serif; font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--k-on-dark); }
.pp-priv p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--k-on-dark-soft); max-width: 34ch; }
@media (max-width: 860px) { .pp-priv__head { grid-template-columns: 1fr; gap: 14px; } .pp-priv__head .k-p { justify-self: start; } .pp-priv { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pp-priv { grid-template-columns: 1fr; } }

/* ═════ 6. close ═════ */
.pp-b .k-close { padding-bottom: 10px; }
.pp-b .k-close__copy .k-h { font-size: 56px; line-height: 1.02; margin-bottom: 16px; max-width: 11ch; }
.pp-b .k-close__copy .k-p { color: var(--k-on-dark-soft); max-width: 40ch; margin: 0 0 28px; }
@media (max-width: 760px) { .pp-b .k-close__copy .k-h { font-size: 42px; } }