/* English product pages, Ink and Lime (Vytas, 2026-11-03). Template: frontend/product/product_ink.pug, screens in _mocks.pug.
   Loads after ink/home.css and ink/use-case.css. Every section uses the homepage components; new classes start with pi-.
   No colour frame behind any screen (INK-SYSTEM.md section 4): screens sit on ink, on plain mist, or on the lime close. */

/* ---------- Hero: words left, the product screen right ---------- */
.pi-hero__visual { justify-content: flex-end; }
.pi-stage-hero { position: relative; width: min(540px, 100%); padding-bottom: 140px; }
.pi-stage-hero--ws { padding-bottom: 150px; }
/* Template cards in the small card frames: title, chat and button only, so the whole card fits. */
html body.ik:not(#_) .ik-art .pi-tpl__d { display: none; }
.pi-hero__visual > .pi-app { width: min(540px, 100%); }
/* Turned slightly, like the homepage phone (8° there; less here because the screen is wider). */
html body.ik:not(#_) .pi-hero__visual > :is(.pi-stage-hero, .pi-app) { transform: perspective(1800px) rotateY(-6deg) rotateX(2deg); transform-origin: 60% 50%; }
.pi-float { position: absolute; z-index: 3; }
.pi-float--dm { left: -40px; bottom: 0; width: 252px; transform: rotate(-2deg); }
.pi-float--dm .ik-dmcard { width: 100%; }
html body.ik:not(#_) .pi-float--dm .ik-dm__msgs { padding-top: 2px; }
.pi-float--sw { left: -44px; bottom: 0; width: 272px; transform: rotate(-2deg); }

/* ---------- The app screen ---------- */
.pi-app { position: relative; width: min(540px, 100%); overflow: hidden; border-radius: 22px; background: #fff; font-size: 13px; line-height: 1.35; color: #111; text-align: left; }
.pi-app__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 12px 18px; border-bottom: 1px solid #efeff0; }
.pi-app__bar b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.pi-app__r { font-size: 12px; color: #63636b; white-space: nowrap; }
.pi-app__body { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
html body.ik:not(#_) p.pi-lbl { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; line-height: 1.3; color: #52525b; text-align: left; }
html body.ik:not(#_) p.pi-lbl span { font-weight: 500; color: #8a8a92; }

.pi-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pi-stats:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pi-stats > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--cf-mist); }
.pi-stats i { overflow: hidden; font-style: normal; font-size: 12px; color: #63636b; text-overflow: ellipsis; white-space: nowrap; }
.pi-stats b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pi-stats em { font-style: normal; font-size: 11px; font-weight: 600; color: #1f7a3d; }

.pi-chart__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pi-seg { display: inline-flex; flex: none; padding: 2px; border-radius: 8px; background: var(--cf-mist); font-size: 11px; }
.pi-seg span { padding: 3px 8px; border-radius: 6px; color: #63636b; }
.pi-seg .is-on { background: #fff; font-weight: 600; color: #111; outline: 1px solid var(--cf-line); outline-offset: -1px; }
.pi-bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; }
.pi-bars i { flex: 1; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 3px 3px 0 0; background: #e4e4e7; transform-origin: bottom; }
.pi-bars i.is-on { background: var(--cf-ink); }

.pi-post, .pi-auto { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--cf-line); border-radius: 12px; }
html body.ik:not(#_) .pi-post > img { flex: none; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.pi-post > span:not(.pi-chip), .pi-grow { display: flex; flex: 1; flex-direction: column; min-width: 0; }
:is(.pi-post, .pi-grow) b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
:is(.pi-post, .pi-grow) i { overflow: hidden; font-style: normal; font-size: 12px; color: #737373; text-overflow: ellipsis; white-space: nowrap; }
html body.ik:not(#_) img.pi-th { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.pi-chip { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--cf-mist); font-size: 11px; font-weight: 500; color: #3f3f46; white-space: nowrap; }
.pi-badge, .pi-on, .pi-done { flex: none; padding: 3px 9px; border-radius: 999px; background: #dcfce7; font-size: 11px; font-weight: 600; color: #166534; white-space: nowrap; }
.pi-num { display: flex; flex: none; flex-direction: column; align-items: flex-end; min-width: 38px; }
.pi-num b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pi-num i { font-style: normal; font-size: 11px; color: #737373; }

.pi-prog { display: flex; flex-direction: column; gap: 6px; }
.pi-prog > i { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: #ececee; }
.pi-prog u { display: block; height: 100%; border-radius: 4px; background: var(--cf-ink); transform: scaleX(var(--w)); transform-origin: left; }

.pi-feed { display: flex; flex-direction: column; }
.pi-feed__row { display: flex; align-items: center; gap: 8px; padding: 7px 2px; border-top: 1px solid #efeff0; font-size: 12.5px; }
html body.ik:not(#_) :is(.pi-feed__row, .pi-log__row) > img { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.pi-feed__row > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-feed__row b, .pi-log__row b { font-weight: 600; }
:is(.pi-feed__row, .pi-log__row, .pi-mini__row) > em { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--cf-ink); font-size: 11px; font-style: normal; font-weight: 600; color: var(--cf-lime); }
:is(.pi-feed__row, .pi-mini__row) > em:is(.is-wait, .is-skip) { background: var(--cf-mist); color: #63636b; }
.pi-log__row > em.is-fail { background: #fee2e2; color: #b91c1c; }
.pi-age { flex: none; margin-left: auto; font-style: normal; font-size: 11px; color: #8a8a92; }
.uc-cmts__row .pi-age { padding-left: 4px; }

/* ---------- Small screens inside the cards ---------- */
.pi-mini { display: flex; flex-direction: column; gap: 6px; width: min(280px, 100%); padding: 12px; border-radius: 16px; background: #fff; font-size: 12.5px; line-height: 1.3; color: #111; text-align: left; transform: rotate(-1.5deg); }
.pi-mini--wide { width: min(340px, 100%); }
.pi-mini__row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--cf-mist); }
html body.ik:not(#_) .pi-mini__row > img:not(.pi-th) { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.pi-mini__row > span:not(.pi-num):not(.pi-chip):not(.pi-sw__ico) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.pi-mini__row b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pi-mini__row i { font-style: normal; font-size: 11.5px; color: #737373; }
.pi-mini__row .ik-kw { font-size: 11px; }
html body.ik:not(#_) p.pi-mini__note { font-size: 11.5px; color: #737373; text-align: left; }
html body.ik:not(#_) p.pi-mini__ws { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; font-size: 13px; text-align: left; }
.pi-mini__ws b { font-weight: 600; }
html body.ik:not(#_) .pi-mini__ws .pi-sw__ico { width: 26px; height: 26px; border-radius: 8px; }

.pi-meter { display: grid; grid-template-columns: 44px 1fr 34px; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; }
.pi-meter--ws { grid-template-columns: 84px 1fr 40px; }
.pi-meter i { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: #ececee; }
.pi-meter u { display: block; height: 100%; background: var(--cf-ink); transform: scaleX(var(--w)); transform-origin: left; }
.pi-meter b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Tables: contacts, content performance, the CSV file. */
.pi-tbl { display: grid; align-items: center; column-gap: 10px; row-gap: 7px; font-size: 12px; }
.pi-tbl--content { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.pi-tbl--ct { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.45fr) auto; }
.pi-tbl--csv { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 0; }
.pi-tbl__h { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a8a92; }
.pi-tbl__c { display: flex; align-items: center; gap: 8px; min-width: 0; }
html body.ik:not(#_) .pi-tbl__c > img:not(.pi-th) { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
html body.ik:not(#_) .pi-tbl__c > img.pi-th { width: 26px; height: 26px; border-radius: 6px; }
.pi-tbl__c > span { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-tbl__c b { font-weight: 600; }
.pi-tbl__c i { font-style: normal; font-size: 11px; color: #737373; }
.pi-tbl__mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-tbl__mail em { margin-left: 4px; font-style: normal; font-weight: 700; color: #16a34a; }
.pi-tbl__mail i { font-style: normal; color: #a1a1aa; }
.pi-tbl--csv > span { padding: 6px 0; border-top: 1px solid #efeff0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-tbl--csv > span.pi-tbl__h { border-top: 0; }
html body.ik:not(#_) p.pi-search { padding: 8px 12px; border: 1px solid var(--cf-field); border-radius: 10px; font-size: 12px; color: #a1a1aa; text-align: left; }
.pi-export { position: absolute; z-index: 2; top: 11px; right: 14px; padding: 6px 10px; border-radius: 8px; background: var(--cf-ink); font-size: 12px; font-weight: 600; color: #fff; }

/* Templates: the app's template cards. */
.pi-tabs { display: flex; gap: 6px; overflow: hidden; white-space: nowrap; }
.pi-tabs span { flex: none; padding: 5px 10px; border: 1px solid var(--cf-line); border-radius: 999px; font-size: 11.5px; color: #3f3f46; }
.pi-tabs .is-on { border-color: var(--cf-ink); background: var(--cf-ink); color: #fff; }
.pi-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pi-tpl { position: relative; display: flex; flex-direction: column; gap: 4px; width: min(250px, 100%); padding: 12px; border: 1px solid var(--cf-line); border-radius: 14px; background: #fff; color: #111; text-align: left; }
.pi-tpls .pi-tpl { width: auto; }
.pi-tpl__t { font-size: 13px; font-weight: 600; }
.pi-tpl__d { display: -webkit-box; overflow: hidden; font-style: normal; font-size: 11px; line-height: 1.3; color: #737373; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pi-tpl__chat { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 4px; padding: 8px; border-radius: 10px; background: var(--cf-mist); }
html body.ik:not(#_) p.pi-tpl__in { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.25; text-align: left; }
html body.ik:not(#_) .pi-tpl__in .ik-ava { width: 18px; height: 18px; font-size: 9px; }
.pi-tpl__in b { font-weight: 600; }
html body.ik:not(#_) p.pi-tpl__me { align-self: flex-end; max-width: 92%; padding: 5px 9px; border-radius: 12px 12px 4px 12px; background: var(--cf-ig); font-size: 11px; line-height: 1.25; color: #fff; text-align: left; }
.pi-tpl__btn { align-self: flex-end; padding: 3px 9px; border: 1px solid #dcdce0; border-radius: 8px; background: #fff; font-size: 10.5px; font-weight: 600; color: #0a64d8; }
.pi-tpl__use { padding: 6px; border-radius: 8px; background: var(--cf-ink); font-size: 11.5px; font-weight: 600; color: #fff; text-align: center; }
.pi-tpl__badge { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--cf-lime); font-size: 10px; font-weight: 700; letter-spacing: .06em; color: var(--cf-ink); }
.pi-menu { display: flex; flex-wrap: wrap; gap: 6px; }
html body.ik:not(#_) .pi-menu p.pi-lbl { width: 100%; }
.pi-menu span { padding: 5px 9px; border: 1px solid var(--cf-line); border-radius: 8px; font-size: 11.5px; }
.pi-menu .is-on { border-color: var(--cf-ink); background: var(--cf-ink); color: #fff; }
.pi-run { align-self: flex-start; padding: 8px 14px; border-radius: 8px; background: var(--cf-ink); font-size: 12.5px; font-weight: 600; color: #fff; }
.pi-run--go { align-self: flex-end; background: var(--cf-lime); color: var(--cf-ink); }

/* Workspaces: the switcher and the Create New Workspace window. */
.pi-sw { display: flex; flex-direction: column; gap: 2px; width: min(280px, 100%); padding: 8px; border-radius: 16px; background: #fff; font-size: 13px; color: #111; text-align: left; }
html body.ik:not(#_) p.pi-sw__h { padding: 6px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a8a92; text-align: left; }
.pi-sw__row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; }
.pi-sw__row.is-on { background: var(--cf-mist); }
.pi-sw__ico { display: grid; flex: none; place-items: center; width: 32px; height: 32px; padding: 2px; border-radius: 9px; background: var(--c); }
html body.ik:not(#_) .pi-sw__ico img { width: 100%; height: 100%; border-radius: 7px; object-fit: cover; }
.pi-sw__ok { font-weight: 700; }
.pi-sw__row.pi-sw__add { margin-top: 4px; padding-top: 10px; border-top: 1px solid #efeff0; border-radius: 0; font-weight: 500; color: #52525b; }
.pi-modal { display: flex; flex-direction: column; gap: 6px; width: min(380px, 100%); padding: 16px; border-radius: 16px; background: #fff; font-size: 12.5px; color: #111; text-align: left; }
.pi-modal__top { display: flex; justify-content: space-between; font-size: 15px; }
.pi-modal__top b { font-weight: 600; }
.pi-modal__top span { color: #8a8a92; }
html body.ik:not(#_) p.pi-modal__sub { margin-bottom: 6px; font-size: 12px; color: #63636b; text-align: left; }
html body.ik:not(#_) p.pi-field { margin-bottom: 4px; padding: 8px 10px; border: 1.5px solid var(--cf-ink); border-radius: 10px; font-size: 13px; text-align: left; }
.pi-colors { display: flex; gap: 8px; margin-bottom: 4px; }
.pi-colors i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); }
.pi-colors i.is-on { outline: 2px solid var(--cf-ink); outline-offset: 2px; }
html body.ik:not(#_) p.pi-modal__note { font-size: 11.5px; color: #737373; text-align: left; }
.pi-modal__btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.pi-modal__btns span { padding: 7px 12px; border: 1px solid var(--cf-field); border-radius: 8px; font-size: 12px; font-weight: 600; }
.pi-modal__btns .is-go { border-color: var(--cf-lime); background: var(--cf-lime); }

/* Analytics: the Activity Log and its tip box (the app's own yellow box). */
html body.ik:not(#_) p.pi-tip { padding: 8px 10px; border-radius: 10px; background: #fef9c3; font-size: 11.5px; line-height: 1.4; color: #713f12; text-align: left; }
.pi-tip b { font-weight: 600; }
.pi-log { display: flex; flex-direction: column; }
.pi-log__row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #efeff0; font-size: 12px; }
.pi-log__row .pi-grow { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-log__a { flex: none; font-style: normal; font-size: 11px; color: #737373; }
.pi-log__t { flex: none; width: 60px; font-style: normal; font-size: 11px; color: #8a8a92; text-align: right; }

/* Contacts: the CSV file. */
.pi-file { display: flex; flex-direction: column; gap: 10px; width: min(380px, 100%); padding: 14px; border-radius: 16px; background: #fff; font-size: 12.5px; color: #111; text-align: left; }
.pi-file__top { display: flex; align-items: center; gap: 10px; }
.pi-file__ico { display: grid; flex: none; place-items: center; width: 38px; height: 44px; border-radius: 8px; background: var(--cf-ink); font-size: 11px; font-weight: 700; color: var(--cf-lime); }

/* White screens on mist get the same 1px edge as the homepage mocks (INK-SYSTEM.md section 4). */
html body.ik:not(#_) :is(.ik-art, .pi-stage) :is(.pi-app, .pi-mini, .pi-modal, .pi-sw, .pi-file, .pi-tpl) { outline: 1px solid var(--cf-line); outline-offset: -1px; }
html body.ik:not(#_) .pi-tpls .pi-tpl { outline: 0; }

/* ---------- What you see: three cards ---------- */
html body.ik:not(#_) .ik-trg.pi-trg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body.ik:not(#_) .pi-trg .ik-trg__card .ik-art { justify-content: center; padding: 14px; }
html body.ik:not(#_) .pi-trg .ik-dmcard { padding: 12px; }

/* ---------- How: steps left, one screen right ---------- */
html body.ik:not(#_) .pi-how { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
html body.ik:not(#_) .pi-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--cf-ink-line); }
html body.ik:not(#_) .pi-steps li:last-child { border-bottom: 1px solid var(--cf-ink-line); }
.pi-steps__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cf-ink-3); font-size: 14px; font-weight: 600; color: var(--cf-lime); }
html body.ik:not(#_) .pi-steps p.ik-p { margin-top: 6px; }
.pi-stage { display: flex; align-items: center; justify-content: center; min-height: 360px; padding: 32px; border-radius: 28px; background: var(--cf-mist); }
.pi-stage > .pi-app { width: min(440px, 100%); min-width: 0; }

/* ---------- Good to know: two plain lists on the sheet, no cards (the creator quotes come next) ---------- */
html body.ik:not(#_) .pi-know { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
html body.ik:not(#_) p.pi-know__h { margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--cf-text-3); text-align: left; }
html body.ik:not(#_) .pi-know li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--cf-field); font-size: 16px; line-height: 1.45; color: var(--cf-text); text-align: left; }
.pi-know__ico { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 0; border-radius: 50%; background: #fff; color: #63636b; }
.pi-know__ico.is-yes { background: var(--cf-lime); color: var(--cf-ink); }

/* ---------- Close: this feature's result on the lime card ---------- */
html body.ik:not(#_) .pi-close__art :is(.pi-sw, .pi-tpl, .pi-app) { width: min(340px, 100%); transform: rotate(1.5deg); }
html body.ik:not(#_) .pi-close__art .pi-close-ct .pi-app { width: min(380px, 100%); }
html body.ik:not(#_) .pi-close__art .pi-close-ct .pi-stats b { font-size: 20px; }

/* ---------- Motion: plays once, rests ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes piGrow { from { transform: scaleY(.05); } }
  @keyframes piBar { from { transform: scaleX(0); } }
  @keyframes piIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
  @keyframes piRise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
  .pi-hero__visual > * { animation: piRise 1s var(--ease-out) .2s both; }
  .pi-hero .pi-bars i { animation: piGrow .9s var(--ease-out) calc(.7s + var(--d, 0s)) both; }
  .pi-hero .pi-prog u { animation: piBar 1.6s var(--ease-out) .8s both; }
  .pi-hero .pi-float { animation: piIn .5s var(--ease-out) 1.5s both; }
  .pi-hero .pi-feed__row em { animation: piIn .4s var(--ease-out) both; }
  .pi-hero .pi-feed__row:nth-child(1) em { animation-delay: 1.2s; }
  .pi-hero .pi-feed__row:nth-child(2) em { animation-delay: 1.6s; }
  .pi-hero .pi-feed__row:nth-child(3) em { animation-delay: 2s; }
  html.ik-js [data-play]:not(.is-in) :is(.pi-meter, .pi-prog) u { transform: scaleX(0); }
  html.ik-js [data-play].is-in :is(.pi-meter, .pi-prog) u { transition: transform 1.1s var(--ease-out) .3s; }
  html.ik-js .pi-close__art:not(.is-in) :is(.pi-sw, .pi-tpl, .pi-app) { opacity: 0; translate: 0 24px; }
  html.ik-js .pi-close__art.is-in :is(.pi-sw, .pi-tpl, .pi-app) { transition: opacity .6s var(--ease-out) .15s, translate .9s var(--ease-out) .15s; }
}

/* ---------- Tablets ---------- */
@media (max-width: 1099px) {
  .pi-hero__visual { justify-content: center; }
  html body.ik:not(#_) .ik-trg.pi-trg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* minmax(0, 1fr): a long translated row in the app mock must not widen the column past the screen. */
  html body.ik:not(#_) .pi-how { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  /* The screen shows its top part only, cut by the next panel, as the homepage phone does. */
  .pi-hero__visual { align-items: flex-start; max-height: 420px; overflow: hidden; }
  html body.ik:not(#_) .pi-hero__visual > :is(.pi-stage-hero, .pi-app) { transform: none; }
  .pi-stage-hero { padding-bottom: 40px; }
  .pi-float--dm { left: 8px; width: 230px; }
  .pi-float--sw { left: 8px; width: 240px; }
  .pi-app__body { padding: 14px; }
  .pi-app__bar { padding: 12px 14px; }
  .pi-stats b { font-size: 18px; }
  .pi-stats i { white-space: normal; }
  .pi-auto .pi-badge, .pi-auto .pi-num:last-child { display: none; }
  .pi-tbl--content .pi-tbl__c > span { white-space: normal; }
  .pi-float--dm .ik-dm__card em { display: none; }
  .pi-tpls { grid-template-columns: 1fr; }
  .pi-tpls .pi-tpl:nth-child(n + 3) { display: none; }
  .pi-log__a, .pi-log__t { display: none; }
  .pi-tbl--ct { grid-template-columns: minmax(0, 1fr) auto; }
  .pi-tbl--ct > :nth-child(3n + 2) { display: none; }
  .pi-stage { min-height: 0; padding: 20px 14px; border-radius: 22px; }
  html body.ik:not(#_) .pi-know { grid-template-columns: 1fr; gap: 20px; }
  html body.ik:not(#_) .pi-know li { font-size: 15px; padding: 10px 0; }
  html body.ik:not(#_) .pi-steps li { padding: 16px 0; grid-template-columns: 36px 1fr; gap: 12px; }
}


/* ==================== Why it matters and Ways to put it to work (2026-11-04) ==================== */
/* Vytas: "extend more on why it matters, what is cool about, how to use it or put in practice". Lists, not cards. */
html body.ik:not(#_) .pw-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 40px; margin: 0; padding: 0; list-style: none; }
html body.ik:not(#_) .pw-why li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--cf-ink-line); }
html body.ik:not(#_) .pw-why__n { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--cf-lime); }
html body.ik:not(#_) .pw-why h3 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; color: var(--cf-on-ink); }
html body.ik:not(#_) .pw-why p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cf-on-ink-2); }
html body.ik:not(#_) .pw-plays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 0; list-style: none; }
html body.ik:not(#_) .pw-plays li { display: flex; flex-direction: column; gap: 8px; padding: 22px 0; border-top: 1px solid var(--cf-line); }
html body.ik:not(#_) p.pw-plays__who { margin: 0; font-size: 13px; font-weight: 500; color: var(--cf-text-3); }
html body.ik:not(#_) .pw-plays h3 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; color: var(--cf-text); }
html body.ik:not(#_) p.pw-plays__p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cf-text-2); }
html body.ik:not(#_) p.pw-plays__do { margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: #fff; font-size: 15px; line-height: 1.5; color: var(--cf-text-2); }
html body.ik:not(#_) p.pw-plays__do b { font-weight: 600; color: var(--cf-text); }
@media (max-width: 899px) {
  html body.ik:not(#_) .pw-why, html body.ik:not(#_) .pw-plays { grid-template-columns: 1fr; }
}