/* =====================================================================
   Kopou v2 - Traffic Partners page (Why Kopou, Partner Types, Traffic
   standards, contact). Locked 29 Oct 2026 | v1.
   Upload to /wp-content/uploads/kopou-tp/ as kopou-tp.css (with kopou-tp.js).
   02 Why Kopou: Conicorn "Capabilities" bento (tall card left, two right,
      wide card below); kopou-tp.js draws the live graphics into .kp-tp-art.
   03 Partner Types: Conicorn "Why choose us" cards, drawn in CSS only.
   04 Traffic standards: Conicorn pricing frame, two cards with live graphics.
   Contact (footer block): kopou-tp.js swaps the copy and fields on this page.
   The hero is on hold (unchanged). Without JS / in the editor: plain cards
   with soft colour panels instead of graphics. ASCII only.
   ===================================================================== */

/* ---------- 0. Shared: section shells ---------- */
body .kp-tp-why.kp-tp-why,
body .kp-tp-types.kp-tp-types,
body .kp-tp-standards.kp-tp-standards {
  --kp-carbon: #0F1417; --kp-purple: #6045F4; --kp-deep: #3218C4; --kp-mint: #53E6D4;
  --kp-mist: #F4F3F8; --kp-ink2: #4A4F5C; --kp-ease: cubic-bezier(.2,.7,.2,1); --kp-seam: 40px;
  position: relative;                                  /* no z-index: later sheets stay on top */
  box-sizing: border-box;
  width: 100% !important; max-width: none !important; min-height: 0 !important;
  margin: 0 !important;
  padding: 140px 24px 0 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important;
  background: #FFFFFF !important;
  color: var(--kp-carbon);
  font-family: 'Quicksand', system-ui, sans-serif;
}
/* 02 is the white sheet that rises over the hero */
body .kp-tp-why.kp-tp-why {
  margin: calc(var(--kp-seam) * -1) 0 0 !important;
  padding-top: 120px !important;
  border-radius: var(--kp-seam) var(--kp-seam) 0 0 !important;
}
/* 04 is last before the contact block, which rises 40px over it */
body .kp-tp-standards.kp-tp-standards { padding-bottom: 180px !important; }

body .kp-tp-why *, body .kp-tp-why *::before, body .kp-tp-why *::after,
body .kp-tp-types *, body .kp-tp-types *::before, body .kp-tp-types *::after,
body .kp-tp-standards *, body .kp-tp-standards *::before, body .kp-tp-standards *::after { box-sizing: border-box; }

body .kp-tp-why .kp-sec-head, body .kp-tp-types .kp-sec-head, body .kp-tp-standards .kp-sec-head {
  padding: 0 !important; margin: 0 auto !important; min-height: 0; width: 100% !important; max-width: 1100px;
  display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center; gap: 0 !important;
}
body .kp-tp-why .kp-sec-head h2 span, body .kp-tp-types .kp-sec-head h2 span, body .kp-tp-standards .kp-sec-head h2 span,
body .kp-tp-why .kp-sec-head .kp-h2 span, body .kp-tp-types .kp-sec-head .kp-h2 span, body .kp-tp-standards .kp-sec-head .kp-h2 span { color: var(--kp-purple); }
body .kp-tp-standards .kp-sec-head .kp-lede { max-width: 640px; }

/* the live graphic panels (kopou-tp.js puts a canvas inside) */
body .kp-tp-art {
  position: relative !important; overflow: hidden !important; isolation: isolate;
  margin: 0 !important; padding: 0 !important; min-width: 0; min-height: 0;
  display: block !important;
}
body .kp-tp-art canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  touch-action: pan-y; cursor: crosshair;
}

/* ---------- 1. 02 Why Kopou: capabilities bento ---------- */
body .kp-tp-why .kp-tp-why__grid {
  width: 100% !important; max-width: 1200px !important;
  margin: 64px 0 0 !important; padding: 0 !important;
  display: grid !important;
  grid-template-columns: 470px minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 420px 420px;
  gap: 16px !important;
  background: none !important;
}
body .kp-tp-why .kp-tp-cap {
  position: relative; min-width: 0; min-height: 0;
  width: auto !important; margin: 0 !important; padding: 10px !important;
  display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important;
  border-radius: 56px !important;
  background: var(--kp-mist) !important;
  box-shadow: inset 0 0 0 1px #FFFFFF, 0 18px 44px rgba(15,20,23,.05);
  transition: transform .25s var(--kp-ease), box-shadow .25s var(--kp-ease);
}
body .kp-tp-why .kp-tp-cap:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px #FFFFFF, 0 22px 50px rgba(50,24,196,.09); }
body .kp-tp-why .kp-tp-cap--ecpm { grid-row: 1 / 3; }
body .kp-tp-why .kp-tp-cap--priority {
  grid-column: 2 / 4;
  display: grid !important; grid-template-columns: 290px minmax(0, 1fr); gap: 10px !important;
}

/* copy: bold title runs into the text, Conicorn style */
body .kp-tp-why .kp-tp-cap__copy {
  display: block !important; flex: none; width: auto !important; min-height: 0;
  margin: 0 !important; padding: 26px 26px 18px !important;
  font-family: 'Quicksand', system-ui, sans-serif; font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--kp-ink2);
}
body .kp-tp-why .kp-tp-cap--ecpm .kp-tp-cap__copy { padding: 30px 30px 22px !important; font-size: 18px; }
body .kp-tp-why .kp-tp-cap--priority .kp-tp-cap__copy { padding: 26px 16px 26px 26px !important; }
body .kp-tp-why .kp-tp-cap__title, body .kp-tp-why .kp-tp-cap h3 {
  display: inline !important; margin: 0 !important; padding: 0 !important;
  font-family: 'Switzer', 'Inter Tight', system-ui, sans-serif !important; font-weight: 600 !important;
  font-size: inherit !important; line-height: inherit !important; letter-spacing: -.01em !important; color: var(--kp-carbon) !important;
}
body .kp-tp-why .kp-tp-cap__title::after { content: " "; white-space: pre; }
body .kp-tp-why .kp-tp-cap__text {
  display: inline !important; margin: 0 !important; padding: 0 !important;
  font: inherit !important; color: inherit !important;
}
body .kp-tp-why .kp-tp-cap--priority .kp-tp-cap__copy { align-self: end; }

body .kp-tp-why .kp-tp-cap .kp-tp-art { flex: 1 1 auto; border-radius: 46px !important; }
/* colour panels before the graphic draws (and without JS) */
body .kp-tp-cap--ecpm .kp-tp-art     { background: radial-gradient(circle at 25% 28%, rgba(143,120,250,.5), rgba(143,120,250,0) 55%), radial-gradient(circle at 80% 85%, rgba(96,69,244,.35), rgba(96,69,244,0) 55%), linear-gradient(135deg, #F5F2FF, #E3DBFF) !important; }
body .kp-tp-cap--payout .kp-tp-art   { background: radial-gradient(circle at 20% 22%, rgba(83,230,212,.42), rgba(83,230,212,0) 55%), radial-gradient(circle at 88% 45%, rgba(142,178,255,.45), rgba(142,178,255,0) 55%), linear-gradient(135deg, #EEFCF9, #E8EAFF) !important; }
body .kp-tp-cap--partner .kp-tp-art  { background: radial-gradient(circle at 18% 20%, rgba(246,166,234,.5), rgba(246,166,234,0) 55%), radial-gradient(circle at 60% 90%, rgba(143,120,250,.4), rgba(143,120,250,0) 55%), linear-gradient(135deg, #FFF3FA, #ECE8FF) !important; }
body .kp-tp-cap--priority .kp-tp-art { background: radial-gradient(circle at 50% 52%, rgba(96,69,244,.42), rgba(27,22,64,.9) 40%, #0F1417 75%) !important; }

/* ---------- 2. 03 Partner Types: Why-choose-us cards (CSS only) ---------- */
body .kp-tp-types .kp-tp-types__grid {
  width: 100% !important; max-width: 1200px !important;
  margin: 56px 0 0 !important; padding: 0 !important;
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px !important;
  counter-reset: kptype;
  background: none !important;
}
body .kp-tp-types .kp-tp-type {
  position: relative; min-width: 0; counter-increment: kptype;
  width: auto !important; margin: 0 !important; padding: 12px 12px 38px !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important;
  text-align: center;
  border-radius: 56px !important;
  background: var(--kp-mist) !important;
  box-shadow: inset 0 0 0 1px #FFFFFF;
  transition: transform .25s var(--kp-ease), box-shadow .25s var(--kp-ease);
}
body .kp-tp-types .kp-tp-type:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #FFFFFF, 0 18px 40px rgba(50,24,196,.10); }
body .kp-tp-types .kp-tp-type__tile {
  --kp-disc: 150px;
  position: relative !important; overflow: hidden !important;
  width: 100% !important; height: 320px !important; flex: none; min-height: 0;
  margin: 0 !important; padding: 0 !important; display: block !important;
  border-radius: 46px !important;
  background:
    radial-gradient(circle at 50% 47%, rgba(96,69,244,.62), rgba(96,69,244,0) 48%),
    radial-gradient(rgba(255,255,255,.11) 1px, transparent 1.5px) 0 0 / 14px 14px,
    radial-gradient(circle at 50% 50%, #262C34, #12171B 75%) !important;
}
/* the glass disc, its outer ring, and the icon */
body .kp-tp-types .kp-tp-type__tile::before,
body .kp-tp-types .kp-tp-type__tile::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--kp-disc); height: var(--kp-disc); margin: calc(var(--kp-disc) / -2) 0 0 calc(var(--kp-disc) / -2);
  border-radius: 999px;
  transition: transform .35s var(--kp-ease), box-shadow .35s ease;
}
body .kp-tp-types .kp-tp-type__tile::before {
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.98), rgba(222,218,236,.86) 38%, rgba(150,146,178,.78) 78%, rgba(118,112,150,.85) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -12px 26px rgba(15,20,23,.22), 0 18px 40px rgba(0,0,0,.5);
  outline: 1px solid rgba(255,255,255,.08); outline-offset: 28px;
}
body .kp-tp-types .kp-tp-type__tile::after {
  background-repeat: no-repeat; background-position: center; background-size: 60px 60px;
  filter: drop-shadow(0 1px 2px rgba(15,20,23,.45));
}
body .kp-tp-types .kp-tp-type:hover .kp-tp-type__tile::before { transform: translateY(-8px) scale(1.05); box-shadow: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -12px 26px rgba(15,20,23,.22), 0 26px 50px rgba(0,0,0,.55), 0 0 0 14px rgba(143,120,250,.10); }
body .kp-tp-types .kp-tp-type:hover .kp-tp-type__tile::after { transform: translateY(-8px) scale(1.05); }
body .kp-tp-types .kp-tp-type--direct .kp-tp-type__tile::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.4' stroke='%2353E6D4'/%3E%3Ccircle cx='4.5' cy='6' r='2'/%3E%3Ccircle cx='19.5' cy='6' r='2'/%3E%3Ccircle cx='4.5' cy='18' r='2'/%3E%3Ccircle cx='19.5' cy='18' r='2'/%3E%3Cpath d='M6.3 7.2l3.7 3.1M17.7 7.2L14 10.3M6.3 16.8l3.7-3.1M17.7 16.8L14 13.7'/%3E%3C/svg%3E"); }
body .kp-tp-types .kp-tp-type--app .kp-tp-type__tile::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2.6'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3Ccircle cx='17.5' cy='7.5' r='3.2' stroke='%2353E6D4' fill='%230F1417'/%3E%3Cpath d='M17.5 6.2v2.6M16.2 7.5h2.6' stroke='%2353E6D4'/%3E%3C/svg%3E"); }
body .kp-tp-types .kp-tp-type--api .kp-tp-type__tile::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 7l-5 5 5 5M16 7l5 5-5 5'/%3E%3Cpath d='M13.6 5L10.4 19' stroke='%2353E6D4'/%3E%3C/svg%3E"); }
/* number tab sitting on the tile's bottom edge */
body .kp-tp-types .kp-tp-type::before {
  content: "0" counter(kptype);
  position: absolute; z-index: 2; left: 50%; top: 298px; transform: translateX(-50%);
  width: 50px; height: 34px; border-radius: 14px 14px 0 0;
  background: var(--kp-mist);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Switzer', 'Inter Tight', system-ui, sans-serif; font-size: 14px; font-weight: 600; color: var(--kp-ink2);
}
body .kp-tp-types .kp-tp-type__title, body .kp-tp-types .kp-tp-type h3 {
  margin: 30px 0 0 !important; padding: 0 !important;
  font-family: 'Switzer', 'Inter Tight', system-ui, sans-serif !important; font-weight: 600 !important;
  font-size: 24px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; color: var(--kp-carbon) !important;
}
body .kp-tp-types .kp-tp-type__text {
  margin: 8px 0 0 !important; padding: 0 !important; max-width: 300px;
  font-family: 'Quicksand', system-ui, sans-serif !important; font-size: 16px !important; line-height: 1.55 !important; font-weight: 500 !important; color: var(--kp-ink2) !important;
}

/* ---------- 3. 04 Traffic standards: pricing frame ---------- */
body .kp-tp-standards .kp-tp-standards__frame {
  width: 100% !important; max-width: 1120px !important;
  margin: 56px 0 0 !important; padding: 30px !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px !important;
  border-radius: 64px !important;
  background: var(--kp-mist) !important;
}
body .kp-tp-standards .kp-tp-std {
  position: relative; min-width: 0;
  width: auto !important; margin: 0 !important; padding: 40px 30px 30px !important;
  display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important;
  background: transparent !important;
}
body .kp-tp-standards .kp-tp-std--stay {
  border-radius: 48px !important;
  background: #FFFFFF !important;
  box-shadow: 0 24px 60px rgba(50,24,196,.07);
}
body .kp-tp-standards .kp-tp-std__icon {
  width: 60px !important; height: 60px !important; flex: none; min-height: 0;
  margin: 0 10px !important; padding: 0 !important; display: block !important; position: relative;
  border-radius: 18px !important;
}
body .kp-tp-standards .kp-tp-std__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 999px; }
body .kp-tp-standards .kp-tp-std--clean .kp-tp-std__icon { background: radial-gradient(circle at 40% 30%, #5A6068, #1A2026 70%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(15,20,23,.2); }
body .kp-tp-standards .kp-tp-std--clean .kp-tp-std__icon::after { background: #FFFFFF; box-shadow: 0 0 10px rgba(255,255,255,.6); }
body .kp-tp-standards .kp-tp-std--stay .kp-tp-std__icon { background: radial-gradient(circle at 50% 50%, #8EB2FF, #B9A9FF 35%, #F6C8EE 70%, #FBE3F6) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px rgba(96,69,244,.18); }
body .kp-tp-standards .kp-tp-std--stay .kp-tp-std__icon::after { background: radial-gradient(circle, #6045F4, rgba(96,69,244,.2)); }
body .kp-tp-standards .kp-tp-std__title, body .kp-tp-standards .kp-tp-std h3 {
  margin: 26px 10px 0 !important; padding: 0 !important;
  font-family: 'Switzer', 'Inter Tight', system-ui, sans-serif !important; font-weight: 600 !important;
  font-size: 30px !important; line-height: 1.15 !important; letter-spacing: -.03em !important; color: var(--kp-carbon) !important;
}
body .kp-tp-standards .kp-tp-std__text {
  margin: 10px 10px 0 !important; padding: 0 !important; min-height: 52px;
  font-family: 'Quicksand', system-ui, sans-serif !important; font-size: 16px !important; line-height: 1.6 !important; font-weight: 500 !important; color: var(--kp-ink2) !important;
}
body .kp-tp-standards .kp-tp-std .kp-tp-art { flex: none; height: 250px !important; margin-top: 28px !important; border-radius: 34px !important; }
body .kp-tp-std--clean .kp-tp-art { background: radial-gradient(circle at 15% 20%, rgba(185,169,255,.45), rgba(185,169,255,0) 55%), radial-gradient(circle at 88% 85%, rgba(83,230,212,.3), rgba(83,230,212,0) 55%), linear-gradient(135deg, #F3F0FF, #E6F8F6) !important; }
body .kp-tp-std--stay .kp-tp-art  { background: radial-gradient(circle at 85% 15%, rgba(246,166,234,.4), rgba(246,166,234,0) 55%), radial-gradient(circle at 10% 95%, rgba(142,178,255,.35), rgba(142,178,255,0) 55%), linear-gradient(135deg, #FFF3FA, #ECE8FF) !important; }

/* ---------- 4. Contact (footer block) on this page ---------- */
.kp-close .kp-tp-next { width: 100%; margin-top: 28px; }
.kp-close .kp-tp-next p { margin: 0 0 10px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.kp-close .kp-tp-next ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kp-close .kp-tp-next li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); text-align: left; font-size: 15px; line-height: 1.45; font-weight: 500; color: rgba(255,255,255,.88); }
.kp-close .kp-tp-next li b { flex: none; font-family: 'Switzer','Inter Tight',sans-serif; font-size: 14px; font-weight: 700; color: #53E6D4; }
.kp-close .kp-tp-pillrow { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 36px; margin: 0 0 16px; }
.kp-close .kp-tp-pillrow .kp-close__pills { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; grid-column: auto; }
.kp-close .kp-tp-pillrow .kp-close__pills::after { display: none; }
.kp-close .kp-tp-pillrow .kp-close__pills legend { float: left; width: auto; margin: 0 12px 0 0; line-height: 44px; text-align: left; white-space: nowrap; }
.kp-close .kp-tp-pillrow .kp-close__pill { cursor: default; white-space: nowrap; }
.elementor .kp-close .kp-close__fields > .kp-tp-field { min-width: 0; padding: 0 !important; margin: 0 !important; }
.kp-close .kp-tp-field.kp-close__dd { position: relative; z-index: 6; }

/* ---------- 5. Tablet ---------- */
@media (max-width: 1099px) {
  body .kp-tp-why .kp-tp-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; }
  body .kp-tp-why .kp-tp-cap--ecpm { grid-column: 1 / -1; grid-row: auto; }
  body .kp-tp-why .kp-tp-cap--ecpm .kp-tp-art { flex: none; height: 380px; }
  body .kp-tp-why .kp-tp-cap--payout .kp-tp-art, body .kp-tp-why .kp-tp-cap--partner .kp-tp-art { flex: none; height: 280px; }
  body .kp-tp-why .kp-tp-cap--priority { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  body .kp-tp-why .kp-tp-cap--priority .kp-tp-art { min-height: 300px; }
  body .kp-tp-types .kp-tp-types__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .kp-tp-types .kp-tp-type { padding: 10px 10px 30px !important; border-radius: 44px !important; }
  body .kp-tp-types .kp-tp-type__tile { --kp-disc: 118px; height: 250px !important; border-radius: 36px !important; }
  body .kp-tp-types .kp-tp-type__tile::after { background-size: 50px 50px; }
  body .kp-tp-types .kp-tp-type::before { top: 226px; }
  body .kp-tp-types .kp-tp-type__title { font-size: 20px !important; }
  body .kp-tp-standards .kp-tp-standards__frame { padding: 16px !important; gap: 16px !important; border-radius: 52px !important; }
  body .kp-tp-standards .kp-tp-std { padding: 30px 20px 20px !important; }
  body .kp-tp-standards .kp-tp-std__title { font-size: 26px !important; }
}

/* ---------- 6. Phone ---------- */
@media (max-width: 767px) {
  body .kp-tp-why.kp-tp-why, body .kp-tp-types.kp-tp-types, body .kp-tp-standards.kp-tp-standards { padding: 88px 16px 0 !important; }
  body .kp-tp-why.kp-tp-why { --kp-seam: 32px; padding-top: 88px !important; }
  body .kp-tp-standards.kp-tp-standards { padding-bottom: 128px !important; }
  body .kp-tp-why .kp-tp-why__grid { margin-top: 40px !important; grid-template-columns: minmax(0, 1fr); gap: 12px !important; }
  body .kp-tp-why .kp-tp-cap { border-radius: 40px !important; padding: 8px !important; }
  body .kp-tp-why .kp-tp-cap--ecpm, body .kp-tp-why .kp-tp-cap--priority { grid-column: auto; }
  body .kp-tp-why .kp-tp-cap--priority { display: flex !important; flex-direction: column !important; }
  body .kp-tp-why .kp-tp-cap__copy, body .kp-tp-why .kp-tp-cap--ecpm .kp-tp-cap__copy, body .kp-tp-why .kp-tp-cap--priority .kp-tp-cap__copy { padding: 18px 14px 16px !important; font-size: 16px; }
  body .kp-tp-why .kp-tp-cap .kp-tp-art { border-radius: 32px !important; flex: none; }
  body .kp-tp-why .kp-tp-cap--ecpm .kp-tp-art { height: 300px; }
  body .kp-tp-why .kp-tp-cap--payout .kp-tp-art, body .kp-tp-why .kp-tp-cap--partner .kp-tp-art { height: 240px; }
  body .kp-tp-why .kp-tp-cap--priority .kp-tp-art { height: 260px; min-height: 0; }
  body .kp-tp-types .kp-tp-types__grid { margin-top: 40px !important; grid-template-columns: minmax(0, 1fr); gap: 12px !important; }
  body .kp-tp-types .kp-tp-type { padding: 10px 10px 28px !important; border-radius: 44px !important; }
  body .kp-tp-types .kp-tp-type__tile { --kp-disc: 128px; height: 260px !important; border-radius: 36px !important; }
  body .kp-tp-types .kp-tp-type__tile::after { background-size: 52px 52px; }
  body .kp-tp-types .kp-tp-type::before { top: 236px; }
  body .kp-tp-types .kp-tp-type__title { margin-top: 22px !important; font-size: 22px !important; }
  body .kp-tp-standards .kp-tp-standards__frame { margin-top: 40px !important; grid-template-columns: minmax(0, 1fr); padding: 10px !important; gap: 10px !important; border-radius: 40px !important; }
  body .kp-tp-standards .kp-tp-std { padding: 24px 14px 14px !important; }
  body .kp-tp-standards .kp-tp-std--stay { border-radius: 32px !important; }
  body .kp-tp-standards .kp-tp-std__icon { width: 52px !important; height: 52px !important; margin: 0 6px !important; }
  body .kp-tp-standards .kp-tp-std__title { margin: 20px 6px 0 !important; font-size: 24px !important; }
  body .kp-tp-standards .kp-tp-std__text { margin: 10px 6px 0 !important; min-height: 0; font-size: 15px !important; }
  body .kp-tp-standards .kp-tp-std .kp-tp-art { height: 200px !important; margin-top: 20px !important; border-radius: 26px !important; }
  .kp-close .kp-tp-next { margin-top: 22px; }
  .kp-close .kp-tp-next ol { grid-template-columns: minmax(0, 1fr); }
  .kp-close .kp-tp-next li { padding: 14px 16px; }
  .kp-close .kp-tp-pillrow { flex-direction: column; align-items: flex-start; gap: 12px; }
  .elementor .kp-close .kp-close__fields > .kp-tp-field { grid-column: 1 / -1; }
}

/* ---------- 7. Reveal, reduced motion, editor ---------- */
html.kp-js body .kp-tp-why.is-ready > *, html.kp-js body .kp-tp-types.is-ready > *, html.kp-js body .kp-tp-standards.is-ready > * { transition: opacity .9s var(--kp-ease), transform .9s var(--kp-ease); }
html.kp-js body .kp-tp-why.is-ready:not(.is-in) > *, html.kp-js body .kp-tp-types.is-ready:not(.is-in) > *, html.kp-js body .kp-tp-standards.is-ready:not(.is-in) > * { opacity: 0; transform: translateY(18px); }
html.kp-js body .kp-tp-why.is-ready > *:nth-child(2), html.kp-js body .kp-tp-types.is-ready > *:nth-child(2), html.kp-js body .kp-tp-standards.is-ready > *:nth-child(2) { transition-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  body .kp-tp-why .kp-tp-cap, body .kp-tp-types .kp-tp-type, body .kp-tp-types .kp-tp-type__tile::before, body .kp-tp-types .kp-tp-type__tile::after { transition: none !important; }
  html.kp-js body .kp-tp-why.is-ready:not(.is-in) > *, html.kp-js body .kp-tp-types.is-ready:not(.is-in) > *, html.kp-js body .kp-tp-standards.is-ready:not(.is-in) > * { opacity: 1; transform: none; }
}
body.elementor-editor-active .kp-tp-why *, body.elementor-editor-active .kp-tp-types *, body.elementor-editor-active .kp-tp-standards * { opacity: 1 !important; transform: none !important; }