/* Ink and Lime homepage (Vytas, 2026-11-03), English / on dev only. Template: frontend/home/home_ink.pug.
   Plan: tasks/todo-redesign-rollout-2026-11-03.md. Inspired by launchdarkly.com: ink canvas, light sheets, product screens in colour frames.
   Motion plays once: the hero on load, the rest when it scrolls into view. Default styles are the final state, so no JavaScript
   and reduced motion both show the finished page. look/home-en.css is not loaded here; this file owns the whole page. */

:root {
  --cf-ink: #141414;
  --cf-ink-2: #1e1e1e;
  --cf-ink-3: #262626;
  --cf-ink-line: #2e2e2e;
  --cf-on-ink: #f5f5f5;
  --cf-on-ink-2: #a8a8ad;
  --cf-mist: #f4f4f5;
  --cf-line: #e4e4e7;
  --cf-field: #d4d4d8;
  --cf-text: #18181b;
  --cf-text-2: #52525b;
  --cf-text-3: #63636b;
  --cf-lime: #d1fe17;
  --cf-lime-lo: #bfe80a;
  --cf-ig: #3797f0;
  --cf-ink-mark: #262626;
  --cf-grad-lime: linear-gradient(180deg, #e0ff66 0%, #d1fe17 55%, #bfe80a 100%);
  --cf-grad-ink: linear-gradient(180deg, #2e2e2e 0%, #141414 100%);
  /* No colour backgrounds behind visuals, on any page (Vytas, 2026-11-03: "never add background colors like on right
     side visual", "never add this background like here in yellow"). The --art-* names stay for the templates that use
     them; every frame is the plain mist surface, and the white mocks inside get a line (rule after .ik-art below). */
  --art-lime: var(--cf-mist);
  --art-sky: var(--cf-mist);
  --art-mint: var(--cf-mist);
  --art-peach: var(--cf-mist);
  --art-lilac: var(--cf-mist);
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --lk-black: #141414;
  --lk-on-black-2: #a8a8ad;
}

/* ---------- Base ---------- */
html:has(body.ik), html body.ik:not(#_) { background: var(--cf-ink); }
html body.ik:not(#_) { --ik-y: clamp(40px, 4.2vw, 64px); color: var(--cf-on-ink); overflow-x: clip; }
/* :where keeps this reset at the weight of its prefix, so every component rule below it wins. */
html body.ik:not(#_) [role="main"] :where(h1, h2, h3, p, ul, ol, li) { margin: 0; padding: 0; }
html body.ik:not(#_) [role="main"] :is(ul, ol) { list-style: none; }
html body.ik:not(#_) [role="main"] img { display: block; max-width: 100%; }
html body.ik:not(#_):not(#_) [role="main"] :is(h1, h2, h3) { font-weight: 500 !important; }
/* The hero heading is bold (Vytas, 2026-11-03). */
html body.ik:not(#_):not(#_) [role="main"] h1.ik-h1 { font-weight: 600 !important; letter-spacing: -.05em; }
/* Same left and right edge as the header: its container is 1400px wide with clamp(40px, 5vw, 92px) inside it (common/navigation_sitemap.pug). */
.ik-w { width: calc(min(1400px, 100%) - 2 * clamp(40px, 5vw, 92px)); margin: 0 auto; }
/* A sheet sits 12px in from each side, so its content adds that back to keep the same edge. */
html body.ik:not(#_) .ik-sheet .ik-w { width: calc(min(1400px, 100% + 24px) - 2 * clamp(40px, 5vw, 92px)); }
/* Below 1024 the sheet is still 12px in from each side, so its content is 24px less narrow than a band's: same edge. */
@media (max-width: 1023px) { .ik-w { width: calc(100% - 80px); } html body.ik:not(#_) .ik-sheet .ik-w { width: calc(100% - 56px); } }
@media (max-width: 768px) { .ik-w { width: calc(100% - 48px); } html body.ik:not(#_) .ik-sheet .ik-w { width: calc(100% - 24px); } }
.ik-band { padding: var(--ik-y) 0; }
.ik-band--tight { padding: clamp(40px, 4.6vw, 72px) 0; }
html body.ik:not(#_) section.ik-sheet { margin: 12px 12px 0; padding: var(--ik-y) 0; border-radius: 32px; background: var(--cf-mist); color: var(--cf-text); }
html body.ik:not(#_) section#faq.ik-sheet { padding: var(--ik-y) 0 !important; }
/* pricing-redesign-2026-07.css paints #faq white with !important on the pages that still load it; every FAQ sheet stays mist. */
html body.ik:not(#_) section#faq.ik-sheet { background: var(--cf-mist) !important; }
html body.ik:not(#_) section.ik-sheet--tight { padding: clamp(36px, 4vw, 56px) 0; }

/* ---------- Type ---------- */
html body.ik:not(#_) p.ik-eyebrow { margin-bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--cf-lime); }
html body.ik:not(#_) p.ik-tag { display: inline-flex; margin-bottom: 18px; padding: 5px 12px; border: 1px solid var(--cf-ink-line); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--cf-on-ink-2); }
html body.ik:not(#_) .ik-sheet p.ik-tag { border-color: var(--cf-field); color: var(--cf-text-2); }
html body.ik:not(#_) h2.ik-h2 { max-width: 720px; font-size: clamp(30px, 3.2vw, 46px) !important; line-height: 1.04; letter-spacing: -.04em; color: var(--cf-on-ink); text-align: left; text-wrap: balance; }
html body.ik:not(#_) .ik-sheet h2.ik-h2 { color: var(--cf-text); }
html body.ik:not(#_) h2.ik-h2--sm { font-size: clamp(26px, 2.4vw, 36px) !important; }
/* Links inside text keep the text colour, underlined (Vytas: the browser purple read as random). */
html body.ik:not(#_):not(#_) [role="main"] p a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
html body.ik:not(#_):not(#_) [role="main"] p a:hover { color: var(--cf-on-ink); }
html body.ik:not(#_) p.ik-lead { max-width: 540px; font-size: 18px; line-height: 1.55; color: var(--cf-on-ink-2); text-align: left; text-wrap: pretty; }
html body.ik:not(#_) .ik-sheet p.ik-lead { color: var(--cf-text-2); }
html body.ik:not(#_) h3.ik-h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; color: var(--cf-on-ink); text-align: left; }
html body.ik:not(#_) .ik-sheet h3.ik-h3 { color: var(--cf-text); }
html body.ik:not(#_) p.ik-p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--cf-on-ink-2); text-align: left; }
html body.ik:not(#_) .ik-sheet p.ik-p { color: var(--cf-text-2); }
.ik-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; align-items: end; margin-bottom: 24px; }
html body.ik:not(#_) .ik-head p.ik-lead { padding-bottom: 6px; }
.ik-center { display: flex; justify-content: center; margin-top: 24px; }
.ik-head.ik-head--cta { display: block; }
html body.ik:not(#_) .ik-head--cta p.ik-head__sub { margin-top: 16px; padding-bottom: 0; }
.ik-head__row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
html body.ik:not(#_) .ik-head__row a.ik-cta-top { flex: none; }
.ik-cta-bottom { display: none; }
@media (max-width: 767px) {
  html body.ik:not(#_):not(#_) a.ik-cta-top { display: none; }
  .ik-cta-bottom { display: flex; }
}

/* ---------- Buttons ---------- */
html body.ik:not(#_) a.ik-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; border-radius: 8px; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease); }
html body.ik:not(#_) a.ik-btn:active { transform: translateY(1px); }
html body.ik:not(#_) a.ik-btn--lime { background: var(--cf-grad-lime); color: var(--cf-ink); }
html body.ik:not(#_) a.ik-btn--line { border: 1px solid #4a4a50; background: transparent; color: var(--cf-on-ink); }
html body.ik:not(#_) .ik-sheet a.ik-btn--line { border-color: var(--cf-field); color: var(--cf-text); }
@media (hover: hover) {
  html body.ik:not(#_) a.ik-btn--lime:hover { background: var(--cf-lime-lo); }
  html body.ik:not(#_) a.ik-btn--line:hover { border-color: var(--cf-on-ink); background: var(--cf-on-ink); color: var(--cf-ink); }
  html body.ik:not(#_) .ik-sheet a.ik-btn--line:hover { border-color: var(--cf-text); background: var(--cf-text); color: #fff; }
}
html body.ik:not(#_) :is(a, button, summary):focus-visible { outline: 2px solid var(--cf-lime); outline-offset: 2px; }
html body.ik:not(#_) .ik-sheet :is(a, button, summary):focus-visible { outline-color: var(--cf-ink); }
.ik-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* Header, menu, footer, closing section on ink. */
html body.ik:not(#_):not(#_) #navbar .nav-actions .btn-primary,
html body.ik:not(#_):not(#_) #navbar .nvm a.nvm-bar .nvm-bar__cta,
html body.ik:not(#_):not(#_) .mobile-menu-fullscreen a.mobile-footer-cta { background: var(--cf-grad-lime) !important; border: 0 !important; color: var(--cf-ink) !important; }
html body.ik:not(#_):not(#_) #navbar .nav-actions .btn-primary * { color: var(--cf-ink) !important; }
html body.ik:not(#_):not(#_) #navbar .nav-actions .btn-primary { height: 36px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
html body.ik:not(#_):not(#_) .mobile-menu-fullscreen { background: var(--cf-ink) !important; }
html body.ik:not(#_):not(#_) :is(.footer-modern, .footer-brand-statement) { background: var(--cf-ink) !important; }
html body.ik:not(#_):not(#_) .footer-brand-statement-text { color: var(--cf-ink-mark) !important; }
html body.ik:not(#_):not(#_) .footer-modern.is-acc .footer-column { border-bottom-color: var(--cf-ink-line); }
html body.ik:not(#_):not(#_) .cf-final-cta { padding: 12px 12px 0 !important; background: transparent !important; }
html body.ik:not(#_):not(#_) .cf-final-cta__inner { width: auto !important; margin: 0 !important; }
html body.ik:not(#_):not(#_) .cf-final-cta__card { padding: clamp(40px, 5vw, 64px) 24px !important; border-radius: 32px !important; background: var(--cf-lime) !important; }
html body.ik:not(#_):not(#_) .cf-final-cta__content { max-width: 1120px !important; }
html body.ik:not(#_):not(#_) section h2.cf-final-cta__title { font-size: clamp(30px, 3.4vw, 48px) !important; font-weight: 500 !important; line-height: 1.05 !important; letter-spacing: -.04em !important; color: var(--cf-ink) !important; -webkit-text-fill-color: var(--cf-ink) !important; }
html body.ik:not(#_):not(#_) section h2.cf-final-cta__title * { color: var(--cf-ink) !important; -webkit-text-fill-color: var(--cf-ink) !important; background: none !important; }
html body.ik:not(#_):not(#_) .cf-final-cta__subtitle { max-width: 560px !important; margin: 14px auto 24px !important; font-size: 17px !important; color: #2e3300 !important; }
html body.ik:not(#_):not(#_) a.cf-final-cta__button { height: 54px !important; padding: 0 30px !important; border: 1px solid #383838 !important; background: var(--cf-grad-ink) !important; color: #fff !important; font-size: 17px !important; font-weight: 500 !important; }
html body.ik:not(#_):not(#_) a.cf-final-cta__button * { color: #fff !important; }

/* ---------- Product pieces: Instagram post, phone, DM, widgets ---------- */
.ik-post { overflow: hidden; border-radius: 22px; background: #fff; color: #111; }
.ik-post__top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; }
html body.ik:not(#_) .ik-post__top img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ik-post__top b { font-weight: 600; }
.ik-post__more { margin-left: auto; font-size: 10px; letter-spacing: 1px; color: #737373; }
.ik-post__pic { aspect-ratio: 4 / 5; overflow: hidden; background: #e9eef6; }
html body.ik:not(#_) .ik-post__pic img { width: 100%; height: 100%; object-fit: cover; }
.ik-post__bar { display: flex; gap: 14px; padding: 10px 12px 4px; }
.ik-post__cmt { display: flex; align-items: center; gap: 8px; padding: 4px 12px 12px; font-size: 13px; line-height: 1.3; }
html body.ik:not(#_) .ik-post__cmt img, .ik-ava { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ik-ava { display: grid; place-items: center; background: #111; font-size: 11px; font-weight: 600; color: #fff; }
.ik-post__cmt b { font-weight: 600; }
.ik-kw, .hx-kw, .cf-trigm__kw { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--cf-lime); font-size: .92em; font-weight: 600; color: #111; }

.ik-phone { position: relative; padding: 9px; border: 1.5px solid #3a3a3f; border-radius: 46px; background: #0b0b0c; }
.ik-phone::before { content: ""; position: absolute; z-index: 3; top: 19px; left: 50%; width: 86px; height: 25px; margin-left: -43px; border-radius: 14px; background: #000; }
.ik-phone__scr { position: relative; display: flex; flex-direction: column; min-height: 560px; padding-top: 50px; border-radius: 37px; background: #fff; color: #111; overflow: hidden; }
.ik-dm__head { display: flex; align-items: center; gap: 10px; padding: 6px 14px 12px; border-bottom: 1px solid #efeff0; }
html body.ik:not(#_) .ik-dm__head img { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ik-dm__head span { display: flex; flex-direction: column; font-size: 14px; line-height: 1.2; }
.ik-dm__head b { font-weight: 600; }
.ik-dm__head i { font-style: normal; font-size: 12px; color: #737373; }
.ik-dm__msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; font-size: 14px; line-height: 1.35; }
html body.ik:not(#_) :is(p.ik-dm__in, p.ik-dm__me, p.ik-dm__code, p.ik-dm__btn) { max-width: 84%; padding: 9px 13px; border-radius: 20px; }
html body.ik:not(#_) p.ik-dm__in { align-self: flex-start; border-bottom-left-radius: 6px; background: #efefef; color: #111; }
html body.ik:not(#_) p.ik-dm__me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--cf-ig); color: #fff; }
html body.ik:not(#_) p.ik-dm__code { align-self: flex-start; padding: 8px 18px; border: 1.5px dashed #111; border-radius: 10px; font-size: 16px; font-weight: 600; letter-spacing: .06em; }
html body.ik:not(#_) p.ik-dm__btn { align-self: flex-start; min-width: 60%; border: 1px solid #dcdce0; border-radius: 14px; font-weight: 600; color: #0a64d8; text-align: center; }
.ik-dm__link { align-self: flex-start; width: 84%; overflow: hidden; border: 1px solid #e4e4e7; border-radius: 16px; }
html body.ik:not(#_) .ik-dm__link img { width: 100%; height: 96px; object-fit: cover; }
.ik-dm__link span { display: flex; flex-direction: column; padding: 8px 12px 10px; }
.ik-dm__link b { font-size: 14px; font-weight: 600; color: #0a64d8; }
.ik-dm__link i, .ik-dm__card i { font-style: normal; font-size: 12px; color: #737373; }
.ik-dm__card { align-self: flex-start; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 1px solid #e4e4e7; border-radius: 14px; }
html body.ik:not(#_) .ik-dm__card img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.ik-dm__card span { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 13px; white-space: nowrap; }
.ik-dm__card span > * { overflow: hidden; text-overflow: ellipsis; }
.ik-dm__card b { font-weight: 600; }
.ik-dm__card em { flex: none; padding: 7px 10px; border-radius: 8px; background: #111; font-size: 12px; font-style: normal; font-weight: 600; color: #fff; }
.ik-dm__slots { align-self: flex-start; display: flex; gap: 6px; }
.ik-dm__slots span { padding: 7px 9px; border: 1px solid #e4e4e7; border-radius: 8px; font-size: 12px; font-weight: 500; }
.ik-dm__slots .is-on { border-color: #111; background: #111; color: #fff; }
.ik-dm__inp { margin: 0 12px 14px; padding: 10px 14px; border-radius: 999px; background: #f1f1f2; font-size: 13px; color: #8a8a8f; }
.ik-dmcard { position: relative; width: min(260px, 100%); padding: 10px; border-radius: 18px; background: #fff; color: #111; }
.ik-dmcard .ik-dm__head { padding: 2px 4px 10px; }
.ik-dmcard .ik-dm__msgs { padding: 12px 2px 4px; }
.ik-note { position: absolute; z-index: 4; right: 24px; bottom: 24px; padding: 8px 14px; border-radius: 999px; background: var(--cf-ink); font-size: 13px; font-weight: 500; color: var(--cf-on-ink); }
.ik-note--in { position: static; display: inline-block; margin-top: 10px; }

.ik-widget { padding: 16px; border: 1px solid var(--cf-ink-line); border-radius: 22px; background: var(--cf-ink-2); color: var(--cf-on-ink); }
.ik-widget__h { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 12px; color: var(--cf-on-ink-2); }
.ik-live { color: var(--cf-lime); }
.ik-widget__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ik-widget__stats span { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--cf-ink-3); }
.ik-widget__stats b { font-size: 26px; font-weight: 500; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ik-widget__stats i { font-style: normal; font-size: 12px; color: var(--cf-on-ink-2); }
.ik-widget__bars { display: flex; align-items: flex-end; gap: 4px; height: 64px; margin-top: 12px; }
.ik-widget__bars i { flex: 1; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 3px 3px 0 0; background: #3a3a3f; transform-origin: bottom; }
.ik-widget__bars i.is-on { background: var(--cf-lime); }
.ik-feed { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: #fff; font-size: 13px; line-height: 1.35; color: #111; }
.ik-feed b { font-weight: 600; }
.ik-feed__ok { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cf-lime); color: #111; }

.ik-ui { width: min(300px, 100%); padding: 14px; border-radius: 16px; background: #fff; font-size: 13px; line-height: 1.35; color: #111; }
.ik-ui b { font-weight: 600; }
.ik-ui i { font-style: normal; font-size: 12px; color: #737373; }
.ik-ui--acct, .ik-ui--fg { display: flex; align-items: center; gap: 10px; }
html body.ik:not(#_) :is(.ik-ui--acct, .ik-ui--fg) img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
:is(.ik-ui--acct, .ik-ui--fg) > span:not(.ik-ok) { display: flex; flex-direction: column; min-width: 0; }
/* A long handle wraps beside the Connected pill instead of running under it or being cut (2026-11-04, @tomas.plans.money at 390). */
html body.ik:not(#_) :is(.ik-ui--acct, .ik-ui--fg) > span:not(.ik-ok) { flex: 1 1 auto; }
html body.ik:not(#_) :is(.ik-ui--acct, .ik-ui--fg) > span:not(.ik-ok) b { overflow-wrap: anywhere; }
/* The account type under the handle wraps instead ("Instagram Business account" must stay whole). */
html body.ik:not(#_) :is(.ik-ui--acct, .ik-ui--fg) > span:not(.ik-ok) i { white-space: normal; }
html body.ik:not(#_) :is(.ik-ui--acct, .ik-ui--fg) > .ik-ok { flex: none; }
.ik-ok { flex: none; margin-left: auto; padding: 5px 10px; border-radius: 999px; background: var(--cf-lime); font-size: 12px; font-weight: 600; color: #111; }
html body.ik:not(#_) p.ik-ui__label { margin-bottom: 6px; font-size: 12px; font-weight: 500; color: #63636b; }
.ik-ui__field { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 7px; border: 1px solid var(--cf-field); border-radius: 10px; }
.ik-ui__tag { padding: 3px 8px; border-radius: 6px; background: var(--cf-lime); font-size: 12px; font-weight: 600; }
.ik-ui__ph { font-size: 12px; color: #a1a1aa; }
html body.ik:not(#_) p.ik-ui__msg { padding: 9px 12px; border-radius: 14px; background: #efefef; }
.ik-ui__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ik-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--cf-lime); transition: background-color .3s var(--ease) .5s; }
.ik-switch::after { content: ""; position: absolute; top: 3px; left: 19px; width: 18px; height: 18px; border-radius: 50%; background: #111; transition: transform .35s var(--ease-out) .5s; }
html body.ik:not(#_) p.ik-ui__state { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; font-weight: 500; color: #1f7a3d; }
.ik-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.ik-ui--rw { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ik-ui--rw .ik-ui__row { justify-content: flex-start; width: 100%; padding: 8px; border-radius: 12px; background: var(--cf-mist); }
html body.ik:not(#_) .ik-ui--rw img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.ik-ui--rw .ik-ui__row span { display: flex; flex-direction: column; }
.ik-ui__btn { width: 100%; padding: 10px; border-radius: 10px; background: #111; font-weight: 600; color: #fff; text-align: center; }
.ik-ui--rw .ik-ok { margin: 0; }
.ik-ui--ws { display: flex; flex-direction: column; gap: 6px; }
.ik-ui--ws .ik-ui__row { justify-content: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--cf-mist); }
html body.ik:not(#_) .ik-ui--ws img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ik-ui--ws b { flex: 1; }
html body.ik:not(#_) p.ik-fg__sent { margin-top: 10px; align-self: flex-end; }

.hx-stars { display: inline-flex; gap: 2px; }
.hx-stars span { display: grid; place-items: center; width: 18px; height: 18px; background: #00b67a; color: #fff; }
.hx-stars span.is-off { background: #3a3a3f; }
.hx-i { flex: none; }

/* Colour frames */
.ik-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border-radius: 22px; }
.ik-art--lime { background: var(--art-lime); }
.ik-art--sky { background: var(--art-sky); }
.ik-art--mint { background: var(--art-mint); }
.ik-art--peach { background: var(--art-peach); }
.ik-art--lilac { background: var(--art-lilac); }
/* White mocks on the mist frame need an edge. An inset outline draws it without changing any mock's size. */
html body.ik:not(#_) :is(.ik-art, .ik-voice, [class*="ik-art--"]) :is(.ik-ui, .ik-dmcard, .ik-post, .ik-inbox, .ik-panel, .ik-aud__post, .ik-ucard__pic, .ikh-post, .ikh-cmts, .ikf-web, .ikf-shot, .uc-cmts, .uc-web, .uc-pr__thread, .vs-cmt, .vs-bill, .ika-dash, .ika-cts, .gd-start__card, .fp-story__reply) { outline: 1px solid var(--cf-line); outline-offset: -1px; }

/* ---------- 1. Hero: five versions (/?hero=1..5), one focal picture each, as on manychat.com ---------- */
.ik-hero { padding: 116px 0 0; }
.ik-hero__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ik-hero__copy.is-left { align-items: flex-start; text-align: left; }
html body.ik:not(#_):not(#_) h1.ik-h1 { max-width: 1000px; font-size: clamp(40px, 5vw, 72px) !important; line-height: 1.02; letter-spacing: -.045em; color: var(--cf-on-ink); text-align: center; text-wrap: balance; }
html body.ik:not(#_):not(#_) .is-left h1.ik-h1 { max-width: 740px; font-size: clamp(46px, 5.9vw, 88px) !important; line-height: .98; text-align: left; }
html body.ik:not(#_) p.ik-hero__sub { max-width: 580px; margin-top: 20px; font-size: 18px; line-height: 1.55; color: #bdbdc2; text-align: center; text-wrap: pretty; }
html body.ik:not(#_) .is-left p.ik-hero__sub { max-width: 520px; text-align: left; }
.ik-hero .ik-btns { justify-content: center; margin-top: 28px; }
.ik-hero .is-left .ik-btns { justify-content: flex-start; }
html body.ik:not(#_) .ik-proof { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; margin-top: 28px; font-size: 14px; color: var(--cf-on-ink-2); }
html body.ik:not(#_) .ik-proof li { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-left: 1px solid var(--cf-ink-line); white-space: nowrap; }
html body.ik:not(#_) .ik-proof li:first-child { padding-left: 0; border-left: 0; }
/* A translated proof item can be wider than a phone column; it may wrap there instead of pushing the hero past the screen. */
@media (max-width: 480px) { html:not([lang^="en"]) body.ik:not(#_) .ik-proof li { white-space: normal; } }
.ik-proof__tp { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: #00b67a; color: #fff; }
html body.ik:not(#_) .is-left .ik-proof { justify-content: flex-start; }
.ik-proof svg { color: var(--cf-on-ink); }
.ik-proof .hx-stars span { width: 15px; height: 15px; }
.ik-proof .hx-stars svg { width: 10px; height: 10px; color: #fff; }
.ik-faces { display: inline-flex; }
html body.ik:not(#_) .ik-faces img { display: block; width: 26px; height: 26px; border: 2px solid var(--cf-ink); border-radius: 50%; object-fit: cover; }
/* Each creator photo shows a small tooltip with the follower count on hover, keyboard focus or tap. */
.ik-face { position: relative; display: inline-block; margin-left: -7px; border-radius: 50%; outline: none; cursor: default; transition: transform .15s var(--ease); }
.ik-face:first-child { margin-left: 0; }
.ik-face::after { content: attr(data-tip); position: absolute; z-index: 20; bottom: calc(100% + 10px); left: 50%; padding: 6px 10px; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 500; line-height: 1.2; color: #111; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .15s var(--ease), transform .2s var(--ease-out); }
.ik-face::before { content: ""; position: absolute; z-index: 20; bottom: calc(100% + 5px); left: 50%; width: 10px; height: 10px; background: #fff; opacity: 0; pointer-events: none; transform: translate(-50%, 4px) rotate(45deg); transition: opacity .15s var(--ease), transform .2s var(--ease-out); }
.ik-face:is(:hover, :focus-visible, :focus) { z-index: 5; transform: translateY(-2px); }
.ik-face:is(:hover, :focus-visible, :focus)::after { opacity: 1; transform: translate(-50%, 0); }
.ik-face:is(:hover, :focus-visible, :focus)::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }
.ik-face:focus-visible img { outline: 2px solid var(--cf-lime); outline-offset: 1px; }
/* On the lime closing card the tooltip is ink. */
.ik-close .ik-face::after, .ik-close .ik-face::before { background: var(--cf-ink); color: #fff; }
.ik-close .ik-face:focus-visible img { outline-color: var(--cf-ink); }
@media (prefers-reduced-motion: reduce) {
  .ik-face, .ik-face::after, .ik-face::before { transition: opacity .15s linear; }
  .ik-face:is(:hover, :focus-visible, :focus) { transform: none; }
}
.ik-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: min(620px, calc(100svh - 180px)); padding-bottom: 56px; }
.ik-hero__visual { position: relative; display: flex; justify-content: center; }
.ik-phone--hero { width: 300px; }
.ik-phone--hero .ik-phone__scr { min-height: 560px; }
html body.ik:not(#_) .ik-dm__msgs.is-top { justify-content: flex-start; }

/* v1: the sitewide hero phone (look/phone.css) with a coaching thread, turned slightly (Vytas: "make slightly 3d"). */
.ik-cfph { width: 320px; perspective: 1600px; }
/* The phone sits on the right edge of the content, under the header button (Vytas, 2026-11-03). */
.ik-hero--v1 .ik-hero__visual { justify-content: flex-end; }
@media (max-width: 1099px) { .ik-hero--v1 .ik-hero__visual { justify-content: center; } }
html body.ik:not(#_) .ik-cfph .cfph { transform: rotateY(-8deg) rotateX(3deg); transform-origin: 60% 50%; }
/* No "DM sent by CreatorFlow" line on this phone (Vytas, 2026-11-03). The shared mixin stays as it is for other pages. */
html body.ik:not(#_) .ik-cfph .cfph-sent { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ikCf { from { opacity: 0; transform: translateY(32px) rotateY(-2deg) rotateX(1deg); } to { opacity: 1; transform: rotateY(-8deg) rotateX(3deg); } }
  html body.ik:not(#_) .ik-hero--v1 .ik-cfph .cfph { animation: ikCf 1.1s var(--ease-out) .2s both; }
}
/* Phones: only the top half of the phone shows, cut by the next panel, so the first screens stay short (Vytas, 2026-11-03). */
@media (max-width: 767px) {
  .ik-hero--v1 { padding-bottom: 0; }
  .ik-hero--v1 .ik-hero__grid { gap: 32px; padding-bottom: 0; }
  .ik-hero--v1 .ik-hero__visual { align-items: flex-start; height: 400px; overflow: hidden; }
  .ik-cfph { width: min(300px, 100%); }
  html body.ik:not(#_) .ik-cfph .cfph { transform: none; }
  @keyframes ikCf { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
}

/* v2: one phone rising from the bottom edge */
.ik-hero__rise { height: 430px; margin-top: 56px; overflow: hidden; }
.ik-hero--v2 .ik-phone--hero { width: 320px; }

/* v3: the Reel on top, the DM sheet over it */
.ik-phone__scr--reel { padding-top: 0; }
.ik-reel { position: relative; height: 300px; overflow: hidden; }
html body.ik:not(#_) .ik-reel > img { width: 100%; height: 100%; object-fit: cover; }
.ik-reel__cmt { position: absolute; left: 12px; right: 12px; bottom: 40px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .94); font-size: 13px; }
html body.ik:not(#_) .ik-reel__cmt img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.ik-reel__cmt b { font-weight: 600; }
.ik-sheet-dm { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; margin-top: -22px; padding-top: 10px; border-radius: 24px 24px 0 0; background: #fff; }
html body.ik:not(#_) .ik-sheet-dm .ik-dm__link img { display: none; }

/* v4: a comment, an arrow, the DM */
.ik-hero__flow { display: flex; align-items: center; justify-content: center; gap: 20px; width: min(760px, calc(100% - 48px)); margin: 56px auto 0; padding-bottom: 8px; }
.ik-flow__card { flex: 1; max-width: 320px; overflow: hidden; border-radius: 24px; background: #fff; color: #111; }
.ik-flow__pic { height: 230px; overflow: hidden; }
html body.ik:not(#_) .ik-flow__pic img { width: 100%; height: 100%; object-fit: cover; }
.ik-flow__card--dm { align-self: stretch; display: flex; flex-direction: column; padding: 10px; }
.ik-flow__card--dm .ik-dm__head { padding: 4px 4px 10px; }
.ik-flow__arrow { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--cf-lime); color: var(--cf-ink); }

/* v5: one flat lime panel, ink words, one phone */
.ik-hero--v5 { padding: 88px 12px 0; }
.ik-hero__lime { border-radius: 32px; background: var(--cf-lime); color: var(--cf-ink); overflow: hidden; }
.ik-hero__lime .ik-hero__grid { width: min(1288px, calc(100% - 48px)); margin: 0 auto; padding: 56px 0 0; align-items: end; }
.ik-hero__lime .ik-hero__copy { align-self: center; padding-bottom: 56px; }
html body.ik:not(#_):not(#_) .ik-hero__lime h1.ik-h1 { color: var(--cf-ink); }
html body.ik:not(#_) .ik-hero__lime p.ik-hero__sub { color: #2e3300; }
html body.ik:not(#_) .ik-hero__lime p.ik-eyebrow { color: var(--cf-ink); }
html body.ik:not(#_) .ik-hero__lime .ik-proof { color: #2e3300; }
.ik-hero__lime .ik-proof svg { color: var(--cf-ink); }
html body.ik:not(#_) .ik-hero__lime .ik-faces img { border-color: var(--cf-lime); }
html body.ik:not(#_) .ik-hero__lime a.ik-btn--lime { border: 1px solid #383838; background: var(--cf-grad-ink); color: #fff; }
html body.ik:not(#_) .ik-hero__lime a.ik-btn--line { border-color: rgba(20, 20, 20, .35); color: var(--cf-ink); }
.ik-hero__lime .ik-hero__visual { height: 560px; overflow: hidden; align-items: flex-start; }

/* ---------- 2. Value ---------- */
.ik-value { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: end; }
html body.ik:not(#_) .ik-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
html body.ik:not(#_) .ik-facts li { padding: 18px 20px; border: 1px solid var(--cf-ink-line); border-radius: 22px; background: var(--cf-ink-2); }
.ik-facts b { display: block; font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; line-height: 1.05; letter-spacing: -.04em; color: var(--cf-lime); }
.ik-facts span { display: block; margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--cf-on-ink-2); }

/* ---------- 3. How it works ---------- */
html body.ik:not(#_) .ik-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body.ik:not(#_) .ik-step { padding: 8px; border-radius: 28px; background: #fff; }
.ik-step .ik-art { height: 160px; padding: 18px; }
.ik-step__txt { padding: 16px 12px 12px; }
.ik-step__n { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; background: var(--cf-ink); font-size: 13px; font-weight: 600; color: var(--cf-lime); }

/* ---------- 4. Use cases: cards in the Triggers style, on the ink band ---------- */
html body.ik:not(#_) .ik-ucs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body.ik:not(#_) .ik-ucard { padding: 8px 8px 14px; border-radius: 28px; background: #fff; }
.ik-ucard .ik-art { position: relative; display: block; height: 184px; }
.ik-ucard__pic { position: absolute; top: 14px; left: 16px; width: 36%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: #fff; transform: rotate(-3deg); }
html body.ik:not(#_) .ik-ucard__pic > img { width: 100%; height: 100%; object-fit: cover; }
.ik-ucard__cmt { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 10px; background: #fff; font-size: 11px; color: #111; }
html body.ik:not(#_) .ik-ucard__cmt img { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.ik-ucard__cmt b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ik-ucard__cmt .ik-kw { font-size: 10px; }
.ik-ucard__dm { position: absolute; right: 14px; bottom: 12px; width: 60%; padding: 8px; border-radius: 16px; transform: rotate(1.5deg); }
.ik-ucard__dm .ik-dm__head { gap: 8px; padding: 0 2px 8px; }
html body.ik:not(#_) .ik-ucard__dm .ik-dm__head img { width: 26px; height: 26px; }
.ik-ucard__dm .ik-dm__head span { font-size: 12px; }
.ik-ucard__dm .ik-dm__msgs { gap: 6px; padding: 8px 0 0; font-size: 12px; }
html body.ik:not(#_) .ik-ucard__dm :is(p.ik-dm__in, p.ik-dm__me, p.ik-dm__btn) { max-width: 92%; padding: 7px 10px; border-radius: 14px; }
html body.ik:not(#_) .ik-ucard__dm p.ik-dm__code { padding: 6px 14px; font-size: 14px; }
.ik-ucard__dm .ik-dm__card { padding: 6px; }
html body.ik:not(#_) .ik-ucard__dm .ik-dm__card img { width: 34px; height: 34px; }
.ik-ucard__dm .ik-dm__card em { padding: 5px 8px; font-size: 11px; }
html body.ik:not(#_) .ik-ucard :is(.ik-trg__eye, .ik-h3, .ik-p) { padding: 0 12px; }
html body.ik:not(#_) .ik-ucard p.ik-trg__eye { margin-top: 12px; }
html body.ik:not(#_) .ik-ucard h3.ik-h3 { font-size: 19px; }
html body.ik:not(#_) .ik-ucard p.ik-p { margin-top: 4px; font-size: 15px; line-height: 1.45; }
html body.ik:not(#_) .ik-ucard h3.ik-h3 { color: var(--cf-text); }
html body.ik:not(#_) .ik-ucard p.ik-p { color: var(--cf-text-2); }

/* ---------- 5. Triggers ---------- */
html body.ik:not(#_) .ik-trg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
html body.ik:not(#_) .ik-trg__card { padding: 8px 8px 18px; border-radius: 28px; background: #fff; }
.ik-trg__card .ik-art { justify-content: flex-start; height: 220px; padding: 14px 14px 52px; }
.ik-post--tile { width: 150px; transform: rotate(-2deg); }
.ik-post--tile .ik-post__pic { aspect-ratio: 1 / 1; }
.ik-post--tile .ik-post__cmt { padding: 8px 10px 10px; font-size: 12px; }
html body.ik:not(#_) p.ik-trg__reply { position: absolute; right: 16px; bottom: 14px; font-size: 13px; }
html body.ik:not(#_) p.ik-trg__eye { margin: 14px 12px 4px; font-size: 13px; font-weight: 500; color: var(--cf-text-3); }
html body.ik:not(#_) .ik-trg__card :is(.ik-h3, .ik-p) { padding: 0 12px; }

/* ---------- 6. Proof ---------- */
html body.ik:not(#_) .ik-voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body.ik:not(#_) .ik-voice { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 168px; padding: 22px; border-radius: 28px; color: var(--cf-text); }
html body.ik:not(#_) p.ik-voice__q { font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.ik-voice__by { display: flex; align-items: center; gap: 12px; }
html body.ik:not(#_) .ik-voice__by img { width: 48px; height: 48px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.ik-voice__by span { display: flex; flex-direction: column; font-size: 15px; }
.ik-voice__by b { font-weight: 600; }
.ik-voice__by i { font-style: normal; font-size: 13px; color: #3f3f46; }
.ik-tp { margin-top: 12px; padding: 20px 24px; border: 1px solid var(--cf-ink-line); border-radius: 28px; background: var(--cf-ink-2); }
.ik-tp__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px; color: var(--cf-on-ink-2); }
.ik-tp__top b { color: var(--cf-on-ink); }
html body.ik:not(#_) .ik-tp__top a { margin-left: auto; padding: 12px 0; color: var(--cf-on-ink); text-decoration: underline; text-underline-offset: 3px; }
html body.ik:not(#_) .ik-tp__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--cf-ink-line); }
html body.ik:not(#_) .ik-tp__list h3 { margin-top: 12px; font-size: 18px; line-height: 1.25; color: var(--cf-on-ink); text-align: left; }
html body.ik:not(#_) .ik-tp__list p { margin: 6px 0 12px; font-size: 15px; line-height: 1.5; color: var(--cf-on-ink-2); text-align: left; }
.ik-tp__by { font-size: 13px; color: var(--cf-on-ink); }
.ik-tp__by i { font-style: normal; color: var(--cf-on-ink-2); }

/* ---------- 7. Why: the same inbox by hand and with CreatorFlow, in the trigger-card style he liked ---------- */
.ik-art--grey { background: var(--cf-mist); }
.ik-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html body.ik:not(#_) .ik-vs__card { padding: 8px 8px 20px; border-radius: 28px; background: #fff; }
.ik-vs__card .ik-art { height: 210px; padding: 16px; }
.ik-inbox { width: min(360px, 100%); padding: 10px 12px; border-radius: 18px; background: #fff; color: #111; transform: rotate(-1.5deg); }
.ik-inbox.is-cf { transform: rotate(1.5deg); }
html body.ik:not(#_) p.ik-inbox__h { padding: 0 2px 6px; font-size: 12px; font-weight: 600; color: #63636b; }
.ik-inbox__row { display: flex; align-items: center; gap: 10px; padding: 5px 2px; border-top: 1px solid #efeff0; font-size: 13px; }
html body.ik:not(#_) .ik-inbox__row img { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ik-inbox__txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-inbox__txt b { font-weight: 600; }
.ik-inbox__tag { flex: none; padding: 4px 9px; border-radius: 999px; background: #f1f1f2; font-size: 11px; font-weight: 500; color: #8a8a92; }
.ik-inbox__tag.is-sent { background: var(--cf-ink); color: var(--cf-lime); }
html body.ik:not(#_) p.ik-vs__t { margin: 16px 14px 2px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--cf-text); }
html body.ik:not(#_) .ik-vs ul { padding: 0 14px; }
html body.ik:not(#_) .ik-vs li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--cf-text-2); }
.ik-vs li > i { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--cf-mist); font-size: 11px; font-style: normal; color: #8a8a92; }
.ik-vs__card--cf li > i { background: var(--cf-lime); color: var(--cf-ink); }
html body.ik:not(#_) .ik-own { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
html body.ik:not(#_) .ik-own li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; padding: 16px 18px; border-radius: 24px; background: #fff; }
.ik-own__ico { display: grid; place-items: center; grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; color: var(--cf-ink); }
.ik-own b { font-size: 17px; font-weight: 600; }
.ik-own li > span:last-child { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--cf-text-2); }
@media (prefers-reduced-motion: no-preference) {
  html.ik-js .ik-vs:not(.is-in) .ik-inbox.is-cf .ik-inbox__tag { opacity: 0; transform: scale(.8); }
  html.ik-js .ik-vs.is-in .ik-inbox.is-cf .ik-inbox__tag { transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
  html.ik-js .ik-vs.is-in .ik-inbox__row:nth-child(2) .ik-inbox__tag { transition-delay: .5s; }
  html.ik-js .ik-vs.is-in .ik-inbox__row:nth-child(3) .ik-inbox__tag { transition-delay: .8s; }
  html.ik-js .ik-vs.is-in .ik-inbox__row:nth-child(4) .ik-inbox__tag { transition-delay: 1.1s; }
  html.ik-js .ik-vs.is-in .ik-inbox__row:nth-child(5) .ik-inbox__tag { transition-delay: 1.4s; }
}

/* ---------- 8. All features ---------- */
html body.ik:not(#_) .ik-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ik-tile { display: flex; flex-direction: column; padding: 8px 8px 16px; border: 1px solid var(--cf-ink-line); border-radius: 28px; background: var(--cf-ink-2); }
.ik-tile--wide { grid-column: span 2; }
.ik-tile .ik-art { height: 170px; padding: 16px; }
html body.ik:not(#_) .ik-tile > :is(.ik-h3, .ik-p) { padding: 0 14px; }
html body.ik:not(#_) .ik-tile > .ik-h3 { margin-top: 14px; }
.ik-tile .ik-dmcard { padding: 12px; }
.ik-panel { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; width: min(600px, 100%); padding: 14px; border-radius: 16px; background: #fff; color: #111; }
.ik-panel__stats { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ik-panel__stats span { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: var(--cf-mist); }
.ik-panel__stats b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ik-panel__stats i { font-style: normal; font-size: 12px; color: #63636b; }
html body.ik:not(#_) .ik-panel__geo p { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.ik-bar { display: grid; grid-template-columns: 18px 96px 1fr 30px; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
.ik-bar i { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: #ececee; }
.ik-bar u { display: block; height: 100%; border-radius: 3px; background: #111; transform: scaleX(var(--w)); transform-origin: left; }
.ik-bar b { font-weight: 600; text-align: right; }
.ik-ui--fg { align-self: stretch; }
/* Every other feature as a compact list under the tiles, so the page names all of them. */
html body.ik:not(#_) .ik-flist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin-top: 20px; }
html body.ik:not(#_) .ik-flist li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--cf-ink-line); }
.ik-flist__ico { display: grid; place-items: center; grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; background: var(--cf-ink-3); color: var(--cf-lime); }
html body.ik:not(#_) .ik-flist h3 { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; color: var(--cf-on-ink); text-align: left; }
html body.ik:not(#_) .ik-flist p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--cf-on-ink-2); text-align: left; }

/* ---------- 9. Pricing preview ---------- */
html body.ik:not(#_) .ik-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html body.ik:not(#_) .ik-plan { padding: 28px; border: 1px solid transparent; border-radius: 28px; background: #fff; }
html body.ik:not(#_) p.ik-plan__n { font-size: 16px; font-weight: 600; color: var(--cf-text); }
html body.ik:not(#_) p.ik-plan__p { display: flex; align-items: baseline; gap: 4px; margin: 10px 0 18px; }
.ik-plan__p b { font-size: 44px; font-weight: 500; letter-spacing: -.04em; color: var(--cf-text); }
.ik-plan__p span { font-size: 15px; color: var(--cf-text-3); }
html body.ik:not(#_) .ik-plan li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cf-line); font-size: 15px; line-height: 1.4; color: var(--cf-text-2); }
.ik-plan li .hx-i { margin-top: 3px; color: var(--cf-text); }
.ik-plans__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
html body.ik:not(#_) .ik-plans__foot p { font-size: 15px; color: var(--cf-text-2); }

/* ---------- Niches, inside Use cases: small photo chips ---------- */
html body.ik:not(#_) .ik-nch { margin-top: 24px; }
html body.ik:not(#_) h3.ik-nch__h { margin-bottom: 14px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--cf-on-ink-2); text-align: left; }
html body.ik:not(#_) .ik-nch__list { display: flex; flex-wrap: wrap; gap: 8px; }
html body.ik:not(#_) .ik-nch__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 6px; border: 1px solid var(--cf-ink-line); border-radius: 999px; background: var(--cf-ink-2); font-size: 14px; font-weight: 500; color: var(--cf-on-ink); text-decoration: none; transition: border-color .15s var(--ease), background-color .15s var(--ease); }
html body.ik:not(#_) .ik-nch__list img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
@media (hover: hover) {
  html body.ik:not(#_) .ik-nch__list a:hover { border-color: #4a4a50; background: var(--cf-ink-3); }
}

/* ---------- 11. FAQ ---------- */
html body.ik:not(#_) .ik-faqw { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.ik-faqw__side { position: sticky; top: 96px; }
html body.ik:not(#_) .ik-faqw__side p.ik-lead { margin-top: 16px; }
.ik-faq { border-top: 1px solid var(--cf-field); }
.ik-faq details { border-bottom: 1px solid var(--cf-field); }
html body.ik:not(#_) .ik-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; padding: 8px 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--cf-text); cursor: pointer; list-style: none; }
.ik-faq summary::-webkit-details-marker { display: none; }
.ik-faq__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease), background-color .25s var(--ease); }
.ik-faq details[open] .ik-faq__ico { transform: rotate(45deg); background: var(--cf-lime); }
html body.ik:not(#_) .ik-faq p { padding: 0 60px 22px 0; font-size: 16px; line-height: 1.6; color: var(--cf-text-2); text-align: left; }

/* ---------- Phone bottom bar ---------- */
.ik-sticky { display: none; }

/* ---------- Motion: plays once, rests ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes ikUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes ikPop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes ikGrow { from { transform: scaleY(.04); } to { transform: none; } }
  @keyframes ikKw { 40% { transform: scale(1.14); } 100% { transform: none; } }

  .ik-hero__copy > * { animation: ikUp .8s var(--ease-out) both; }
  .ik-hero__copy > :nth-child(2) { animation-delay: .06s; }
  .ik-hero__copy > :nth-child(3) { animation-delay: .14s; }
  .ik-hero__copy > :nth-child(4) { animation-delay: .2s; }
  .ik-hero__copy > :nth-child(5) { animation-delay: .26s; }
  .ik-hero:not(.ik-hero--v1) .ik-hero__visual { animation: ikUp 1s var(--ease-out) .25s both; }
  .ik-hero__cmt, .ik-reel__cmt { animation: ikPop .5s var(--ease-out) 1s both; }
  .ik-hero__visual .ik-kw { animation: ikKw .5s var(--ease-out) 1.4s both; }
  .ik-hero__shot .ik-post__cmt { animation: ikPop .5s var(--ease-out) .9s both; }
  .ik-hero__reply > :nth-child(1) { animation: ikPop .5s var(--ease-out) 1.7s both; }
  .ik-hero__reply > :nth-child(2) { animation: ikPop .5s var(--ease-out) 2.2s both; }
  .ik-hero__visual .ik-dm__msgs > :nth-child(1) { animation: ikPop .45s var(--ease-out) 1.7s both; }
  .ik-hero__visual .ik-dm__msgs > :nth-child(2) { animation: ikPop .45s var(--ease-out) 2.1s both; }
  .ik-hero__visual .ik-dm__msgs > :nth-child(3) { animation: ikPop .45s var(--ease-out) 2.8s both; }
  .ik-flow__arrow { animation: ikPop .45s var(--ease-out) 1.3s both; }

  html.ik-js .rv { opacity: 0; transform: translateY(22px); }
  html.ik-js .rv.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out) var(--rd, 0s), transform 1s var(--ease-out) var(--rd, 0s); }
  /* Step 3 switches on, the keyword tag lands, once each. */
  html.ik-js [data-play]:not(.is-in) .ik-switch { background: var(--cf-field); }
  html.ik-js [data-play]:not(.is-in) .ik-switch::after { transform: translateX(-16px); }
  html.ik-js [data-play].is-in .ik-ui__tag { animation: ikPop .45s var(--ease-out) .5s both; }
  html.ik-js [data-play].is-in .ik-ok { animation: ikPop .45s var(--ease-out) .55s both; }
  html.ik-js .hx-an:not(.is-in) .ik-bar u { transform: scaleX(0); }
  html.ik-js .hx-an.is-in .ik-bar u { transition: transform 1.1s var(--ease-out) calc(.3s + var(--d, 0s)); }
  /* Each goal card plays its DM once when it scrolls in. */
  html.ik-js .ik-ucard:not(.is-in) .ik-ucard__dm { opacity: 0; transform: translateY(14px) rotate(1.5deg); }
  html.ik-js .ik-ucard.is-in .ik-ucard__dm { transition: opacity .5s var(--ease-out) calc(var(--rd, 0s) + .35s), transform .6s var(--ease-out) calc(var(--rd, 0s) + .35s); }
  html.ik-js .ik-sticky { transition: transform .25s var(--ease); }
}

/* ---------- Tablets ---------- */
@media (max-width: 1099px) {
  .ik-head, .ik-value { display: block; }
  html body.ik:not(#_) :is(.ik-head, .ik-value) p.ik-lead { margin-top: 16px; padding-bottom: 0; }
  .ik-hero__grid { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
  .ik-hero__copy.is-left { align-items: center; text-align: center; }
  html body.ik:not(#_):not(#_) .is-left h1.ik-h1, html body.ik:not(#_) .is-left p.ik-hero__sub { text-align: center; }
  .ik-hero .is-left .ik-btns, html body.ik:not(#_) .is-left .ik-proof { justify-content: center; }
  html body.ik:not(#_) .ik-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.ik:not(#_) .ik-ucs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.ik:not(#_) .ik-faqw { grid-template-columns: 1fr; gap: 28px; }
  .ik-faqw__side { position: static; }
  html body.ik:not(#_) :is(.ik-trg, .ik-bento) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body.ik:not(#_) .ik-flist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  html body.ik:not(#_) { --ik-y: 36px; }
  .ik-w { width: calc(100% - 48px); }
  html body.ik:not(#_) section.ik-sheet { margin: 8px 8px 0; border-radius: 24px; }
  html body.ik:not(#_) .ik-sheet .ik-w { width: calc(100% - 32px); }
}
@media (max-width: 480px) {
  .ik-w { width: calc(100% - 32px); }
  html body.ik:not(#_) .ik-sheet .ik-w { width: calc(100% - 32px); }
}
@media (max-width: 767px) {
  .ik-head { margin-bottom: 20px; }
  html body.ik:not(#_) p.ik-lead { font-size: 17px; }

  .ik-hero { padding-top: 100px; }
  html body.ik:not(#_):not(#_) h1.ik-h1, html body.ik:not(#_):not(#_) .is-left h1.ik-h1 { font-size: 49px !important; line-height: 1.02; }
  html body.ik:not(#_) p.ik-hero__sub { margin-top: 16px; font-size: 17px; }
  .ik-hero .ik-btns { flex-direction: column; align-self: stretch; margin-top: 26px; }
  html body.ik:not(#_) .ik-hero a.ik-btn { width: 100%; height: 52px; }
  html body.ik:not(#_) .ik-proof { flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
  html body.ik:not(#_) .ik-proof li { padding: 0; border-left: 0; }
  .ik-phone--hero, .ik-hero--v2 .ik-phone--hero { width: min(290px, calc(100% - 64px)); }
  .ik-phone--hero .ik-phone__scr { min-height: 500px; }
  .ik-hp { width: 300px; height: 600px; }
    .ik-hp__phone { width: 300px; height: 600px; }
  .ik-3d__thread { font-size: 13px; }
  .ik-hero__rise { height: 380px; margin-top: 40px; }
  .ik-hero__flow { flex-direction: column; gap: 12px; width: calc(100% - 40px); margin-top: 40px; }
  .ik-flow__card { width: 100%; max-width: 340px; }
  .ik-flow__arrow { transform: rotate(90deg); }
  .ik-hero--v5 { padding: 76px 8px 0; }
  .ik-hero__lime { border-radius: 24px; }
  .ik-hero__lime .ik-hero__grid { width: calc(100% - 40px); padding-top: 40px; }
  .ik-hero__lime .ik-hero__copy { padding-bottom: 0; }
  .ik-hero__lime .ik-hero__visual { height: 420px; }

  html body.ik:not(#_) .ik-facts { margin-top: 24px; gap: 8px; }
  html body.ik:not(#_) .ik-facts li { padding: 16px; }
  .ik-facts b { font-size: 26px; }
  .ik-facts span { font-size: 14px; }

  /* Rows of cards swipe sideways on a phone; the next one peeks in. Sideways only: overflow-x alone makes the row scroll up and down too (Vytas, 2026-11-03). */
  html body.ik:not(#_) .ik-scroll { display: flex; gap: 12px; margin-right: -20px; padding-right: 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  html body.ik:not(#_) .ik-sheet .ik-scroll { margin-right: -24px; padding-right: 24px; }
  html body.ik:not(#_) .ik-scroll::-webkit-scrollbar { display: none; }
  html body.ik:not(#_) .ik-scroll > * { flex: 0 0 82%; scroll-snap-align: start; }
  .ik-tile--wide { grid-column: auto; }
  .ik-step .ik-art, .ik-tile .ik-art { height: 160px; }
  .ik-trg__card .ik-art { height: 210px; }
  .ik-panel { grid-template-columns: 1fr; }
  .ik-panel__geo { display: none; }
  html body.ik:not(#_) .ik-flist { grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 20px; }
  html body.ik:not(#_) .ik-flist li { grid-template-columns: 1fr; row-gap: 8px; }
  .ik-flist__ico { grid-row: auto; }
  /* Two rows of chips that swipe sideways, so the list stays short on a phone. */
  html body.ik:not(#_) .ik-nch__list { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; justify-content: start; margin-right: -20px; padding-right: 20px; overflow-x: auto; scrollbar-width: none; }
  html body.ik:not(#_) .ik-nch__list::-webkit-scrollbar { display: none; }
  html body.ik:not(#_) .ik-nch__list a { white-space: nowrap; }
  html body.ik:not(#_) .ik-flist li { padding: 16px 0; }

  .ik-ucard .ik-art { height: 184px; }
  .ik-note { right: 12px; bottom: 12px; }

  .ik-vs { grid-template-columns: 1fr; gap: 12px; }
  .ik-vs__card .ik-art { height: 200px; padding: 12px; }
  html body.ik:not(#_) .ik-own { grid-template-columns: 1fr; gap: 8px; }
  html body.ik:not(#_) .ik-own li { padding: 18px; }

  .ik-tp { padding: 20px; }
  html body.ik:not(#_) .ik-tp__top a { margin-left: 0; }
  /* Trustpilot reviews swipe sideways on a phone, like the creator quotes above them. */
  html body.ik:not(#_) .ik-tp__list { gap: 20px; margin-right: -20px; padding-right: 20px; }
  html body.ik:not(#_) .ik-tp__list > li { flex: 0 0 84%; }
  html body.ik:not(#_) .ik-voice { min-height: 160px; padding: 20px; }

  .ik-plans__foot { flex-direction: column; align-items: stretch; }
  .ik-plans__foot .ik-btns { flex-direction: column; }
  html body.ik:not(#_) .ik-plans__foot a.ik-btn { width: 100%; }

  html body.ik:not(#_) .ik-faq summary { font-size: 17px; }
  html body.ik:not(#_) .ik-faq p { padding-right: 0; }

  html body.ik:not(#_):not(#_) .cf-final-cta { padding: 8px 8px 0 !important; }
  html body.ik:not(#_):not(#_) .cf-final-cta__card { padding: 48px 20px !important; border-radius: 24px !important; }
  html body.ik:not(#_):not(#_) section h2.cf-final-cta__title { font-size: 30px !important; }

  /* Bottom bar: ink, the lit button, clear of the iPhone home bar. It hides while another main button is on screen. */
  html body.ik:not(#_) .ik-sticky { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: block; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--cf-ink); transform: translateY(150%); }
  html body.ik:not(#_) .ik-sticky.is-on { transform: none; }
  html body.ik:not(#_) .ik-sticky a.ik-btn { width: 100%; }
}

/* ---------- Closing: this page's own close. A flat lime card: words and buttons left, one comment and its DM right ---------- */
.ik-close { padding: 12px 12px 0; }
.ik-close__card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 48px; padding: clamp(40px, 5vw, 72px) calc((100vw - min(1400px, 100vw)) / 2 + clamp(40px, 5vw, 92px) - 12px); border-radius: 32px; background: var(--cf-lime); color: var(--cf-ink); }
html body.ik:not(#_):not(#_) [role="main"] h2.ik-close__h { max-width: 640px; font-size: clamp(32px, 3.4vw, 48px) !important; font-weight: 600 !important; line-height: 1.04; letter-spacing: -.04em; color: var(--cf-ink); text-align: left; text-wrap: balance; }
html body.ik:not(#_) p.ik-close__p { max-width: 520px; margin-top: 16px; font-size: 18px; line-height: 1.5; color: #2e3300; text-align: left; }
.ik-close .ik-btns { margin-top: 28px; }
html body.ik:not(#_) a.ik-btn--ink { border: 1px solid #383838; background: var(--cf-grad-ink); color: #fff; }
html body.ik:not(#_) a.ik-btn--quiet { border: 1px solid rgba(20, 20, 20, .3); background: transparent; color: var(--cf-ink); }
@media (hover: hover) {
  html body.ik:not(#_) a.ik-btn--ink:hover { background: var(--cf-ink); }
  html body.ik:not(#_) a.ik-btn--quiet:hover { border-color: var(--cf-ink); }
}
html body.ik:not(#_) .ik-close a:focus-visible { outline-color: var(--cf-ink); }
/* The hero proof row, dark on lime. */
html body.ik:not(#_) .ik-close .ik-proof { justify-content: flex-start; margin-top: 28px; color: #2e3300; }
html body.ik:not(#_) .ik-close .ik-proof li { border-left-color: rgba(20, 20, 20, .22); }
html body.ik:not(#_) .ik-close .ik-proof svg { color: var(--cf-ink); }
.ik-close__art { justify-self: end; width: min(460px, 100%); }
/* The Triggers card look: a soft colour frame, a tilted post with the comment, the DM card over its corner. */
/* No frame: the post and the DM sit straight on the lime card (Vytas, 2026-11-03: no blue, no dark background). */
.ik-cl { position: relative; display: block; height: 380px; border-radius: 0; background: none; overflow: visible; }
.ik-cl__post { position: absolute; top: 10px; left: 0; width: 210px; transform: rotate(-4deg); }
.ik-cl__post .ik-post__pic { aspect-ratio: 1 / 1.05; }
.ik-cl__post .ik-post__cmt { padding: 8px 10px 10px; font-size: 12px; white-space: nowrap; }
html body.ik:not(#_) .ik-cl__post .ik-post__cmt img { width: 22px; height: 22px; }
.ik-cl__dm { position: absolute; right: 0; bottom: 6px; width: 270px; padding: 10px; border-radius: 18px; transform: rotate(1.5deg); }
.ik-cl__dm .ik-dm__head { gap: 8px; padding: 0 2px 8px; }
html body.ik:not(#_) .ik-cl__dm .ik-dm__head img { width: 28px; height: 28px; }
.ik-cl__dm .ik-dm__head span { font-size: 13px; }
.ik-cl__dm .ik-dm__msgs { gap: 7px; padding: 10px 0 0; font-size: 13px; }
html body.ik:not(#_) .ik-cl__dm p.ik-dm__in { max-width: 100%; background: var(--cf-ig); color: #fff; border-radius: 18px 18px 6px 18px; }
html body.ik:not(#_) .ik-cl__dm .ik-dm__card { width: 100%; }
html body.ik:not(#_) .ik-cl__dm .ik-dm__card img { width: 38px; height: 38px; }
.ik-cl__sent { position: absolute; z-index: 3; top: auto; bottom: 192px; right: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 7px; border-radius: 999px; background: var(--cf-lime); font-size: 13px; font-weight: 600; color: var(--cf-ink); }
.ik-cl__sent { background: var(--cf-ink); color: #fff; transform: rotate(3deg); }
.ik-cl__sent .ik-inbx__ok { background: var(--cf-lime); color: var(--cf-ink); }
.ik-inbx__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cf-lime); color: var(--cf-ink); }
@media (prefers-reduced-motion: no-preference) {
  /* Plays once when the card scrolls in: the post rises, the comment pops, the DM rises from the bottom, then "DM sent". */
  html.ik-js .ik-close__art:not(.is-in) .ik-cl__post { opacity: 0; transform: translateY(48px) rotate(-3deg); }
  html.ik-js .ik-close__art:not(.is-in) .ik-cl__post .ik-post__cmt { opacity: 0; transform: translateY(8px); }
  html.ik-js .ik-close__art:not(.is-in) .ik-cl__dm { opacity: 0; transform: translateY(80px) rotate(1.5deg); }
  html.ik-js .ik-close__art:not(.is-in) .ik-cl__sent { opacity: 0; transform: rotate(3deg) scale(.85); }
  html.ik-js .ik-close__art.is-in .ik-cl__post { transition: opacity .6s var(--ease-out) .1s, transform .9s var(--ease-out) .1s; }
  html.ik-js .ik-close__art.is-in .ik-cl__post .ik-post__cmt { transition: opacity .4s var(--ease-out) .7s, transform .5s var(--ease-out) .7s; }
  html.ik-js .ik-close__art.is-in .ik-cl__dm { transition: opacity .6s var(--ease-out) 1.1s, transform 1s var(--ease-out) 1.1s; }
  html.ik-js .ik-close__art.is-in .ik-cl__sent { transition: opacity .4s var(--ease-out) 1.9s, transform .5s var(--ease-out) 1.9s; }
  html.ik-js .ik-close__art.is-in .ik-cl__sent { transform: rotate(3deg); }
}
@media (max-width: 899px) {
  .ik-close__card { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px; }
  .ik-close__art { justify-self: start; }
}
@media (max-width: 767px) {
  .ik-close { padding: 8px 8px 0; }
  .ik-close__card { padding: 40px 16px; border-radius: 24px; }
  html body.ik:not(#_):not(#_) [role="main"] h2.ik-close__h { font-size: 32px !important; }
  html body.ik:not(#_) p.ik-close__p { font-size: 17px; }
  .ik-close .ik-btns { flex-direction: column; }
  html body.ik:not(#_) .ik-close a.ik-btn { width: 100%; }
  .ik-close__art { display: none; }
  html body.ik:not(#_) .ik-close .ik-proof { align-items: flex-start; }
}

/* Header dropdowns: one design for every page and language lives in common/navigation_sitemap.pug (2026-11-04). */
/* Phone menu: no "All use cases" row either. */
html body.ik:not(#_):not(#_) .mobile-menu-fullscreen a[href$="#uses"] { display: none !important; }

/* Creator photos in the trust line: the ring matches the surface behind them. */
html body.ik:not(#_) .ik-close .ik-faces img { border-color: var(--cf-lime); }


/* How it works, step 2: the post picker. Step 3: the three dashboard numbers. */
.ik-ui__posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.ik-step .ik-art:has(.ik-ui--pick) { height: auto; min-height: 160px; }
.ik-ui__posts span { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; opacity: .55; }
.ik-ui__posts span.is-on { opacity: 1; outline: 2px solid var(--cf-ink); outline-offset: 1px; }
.ik-ui__posts span.is-on::after { content: "\2713"; position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--cf-lime); font-size: 11px; font-weight: 700; color: var(--cf-ink); }
html body.ik:not(#_) .ik-ui__posts img { width: 100%; height: 100%; object-fit: cover; }
.ik-ui__rule { display: flex; align-items: center; gap: 6px; }
.ik-ui__arrow { color: #8a8a92; }
.ik-ui__rule .ik-ui__msg { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 12px; background: var(--cf-ig); font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-ui__live { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: #1f7a3d; }
.ik-ui__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.ik-ui__nums span { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; border-radius: 10px; background: var(--cf-mist); }
.ik-ui__nums b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html body.ik:not(#_) .ik-ui__nums i { font-size: 11px; color: #63636b; }
@media (prefers-reduced-motion: no-preference) {
  html.ik-js [data-play]:not(.is-in) .ik-ui__posts span.is-on { outline-color: transparent; }
  html.ik-js [data-play].is-in .ik-ui__posts span.is-on { transition: outline-color .3s var(--ease-out) .5s; }
  html.ik-js [data-play]:not(.is-in) .ik-ui__rule { opacity: 0; transform: translateY(8px); }
  html.ik-js [data-play].is-in .ik-ui__rule { transition: opacity .4s var(--ease-out) .8s, transform .5s var(--ease-out) .8s; }
}


/* ---------- Who uses it: one audience at a time (Vytas, 2026-11-03: the cards "look kind the same" as Use cases) ---------- */
/* The list on the left, one large picture on the right. Use cases is a grid of cards; this is a list and a stage, so the two read as different sections. */
html body.ik:not(#_) .ik-aud { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head stage" "list stage"; grid-template-rows: auto 1fr; column-gap: 64px; }
html body.ik:not(#_) .ik-aud__head { grid-area: head; }
html body.ik:not(#_) .ik-aud__head p.ik-lead { margin-top: 16px; }
html body.ik:not(#_) ul.ik-aud__list { grid-area: list; align-self: end; display: flex; flex-direction: column; gap: 6px; margin: 32px 0 0; padding: 0; list-style: none; }
html body.ik:not(#_) .ik-aud__item { position: relative; padding: 16px 56px 16px 22px; border: 1px solid transparent; border-radius: 22px; transition: background-color .3s var(--ease), border-color .3s var(--ease); }
html body.ik:not(#_) .ik-aud__item.is-on { border-color: var(--cf-ink-line); background: var(--cf-ink-2); }
/* A plus on the closed items says "open me"; it goes when the item opens. */
html body.ik:not(#_) .ik-aud__item::after { content: "+"; position: absolute; top: 50%; right: 20px; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; border: 1px solid var(--cf-ink-line); border-radius: 50%; font-size: 18px; line-height: 1; color: var(--cf-on-ink-2); pointer-events: none; transition: opacity .2s; }
html body.ik:not(#_) .ik-aud__item.is-on::after { opacity: 0; }
html body.ik:not(#_) p.ik-aud__eye { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: #7a7a80; transition: color .3s; }
html body.ik:not(#_) .ik-aud__item.is-on p.ik-aud__eye { color: var(--cf-lime); }
html body.ik:not(#_) h3.ik-aud__h { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; text-align: left; }
html body.ik:not(#_) button.ik-aud__tab { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--cf-on-ink-2); text-align: left; cursor: pointer; transition: color .2s; }
html body.ik:not(#_) .ik-aud__item.is-on button.ik-aud__tab { color: var(--cf-on-ink); cursor: default; }
/* The whole item is the button's hit area; the link inside sits above it. */
html body.ik:not(#_) button.ik-aud__tab::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
html body.ik:not(#_) button.ik-aud__tab:focus-visible { outline: none; }
html body.ik:not(#_) button.ik-aud__tab:focus-visible::after { outline: 2px solid var(--cf-lime); outline-offset: 2px; }
@media (hover: hover) { html body.ik:not(#_) .ik-aud__item:not(.is-on):hover button.ik-aud__tab { color: var(--cf-on-ink); } .ik-aud__item:not(.is-on):hover::after { border-color: #4a4a50; color: var(--cf-on-ink); } }
html body.ik:not(#_) .ik-aud__body { display: grid; grid-template-rows: 1fr; }
html body.ik:not(#_) .ik-aud__body > div { min-height: 0; overflow: hidden; }
html.ik-js body.ik:not(#_) .ik-aud__item:not(.is-on) .ik-aud__body { grid-template-rows: 0fr; }
html.ik-js body.ik:not(#_) .ik-aud__item:not(.is-on) .ik-aud__body > div { visibility: hidden; }
html body.ik:not(#_) .ik-aud__body p.ik-p { max-width: 46ch; margin-top: 10px; }
html body.ik:not(#_) a.ik-aud__link { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--cf-on-ink); text-decoration: none; }
@media (hover: hover) { html body.ik:not(#_) a.ik-aud__link:hover { color: var(--cf-lime); } }

/* The stage: a white card, as everywhere on the page, and one colour frame per audience. */
html body.ik:not(#_) .ik-aud__stage { grid-area: stage; position: relative; min-height: 560px; padding: 8px; border-radius: 30px; background: #fff; }
html body.ik:not(#_) .ik-aud__scene { position: absolute; inset: 8px; display: block; opacity: 0; visibility: hidden; }
html body.ik:not(#_) .ik-aud[data-on="0"] .ik-aud__scene:nth-child(1),
html body.ik:not(#_) .ik-aud[data-on="1"] .ik-aud__scene:nth-child(2),
html body.ik:not(#_) .ik-aud[data-on="2"] .ik-aud__scene:nth-child(3) { opacity: 1; visibility: visible; }
html body.ik:not(#_) .ik-aud__post { position: absolute; top: 10%; left: 7%; width: 44%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 20px; background: #fff; transform: rotate(-3deg); }
html body.ik:not(#_) .ik-aud__post > img { width: 100%; height: 100%; object-fit: cover; }
html body.ik:not(#_) .ik-aud__cmts { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
html body.ik:not(#_) .ik-aud__cmts .ik-ucard__cmt { position: static; gap: 7px; padding: 6px 8px; border-radius: 12px; font-size: 13px; }
html body.ik:not(#_) .ik-aud__cmts .ik-ucard__cmt img { width: 24px; height: 24px; }
html body.ik:not(#_) .ik-aud__cmts .ik-kw { font-size: 11px; }
html body.ik:not(#_) .ik-aud__ui { position: absolute; z-index: 3; right: 6%; bottom: 13%; width: min(340px, 52%); transform: rotate(1.5deg); }
html body.ik:not(#_) .ik-aud .ik-ui { padding: 16px; border-radius: 18px; font-size: 14px; }
html body.ik:not(#_) .ik-aud .ik-ui--list { gap: 8px; }
html body.ik:not(#_) .ik-aud .ik-ui__li { gap: 10px; padding: 8px 10px; border-radius: 12px; }
html body.ik:not(#_) .ik-aud .ik-ui__li img { width: 32px; height: 32px; }
html body.ik:not(#_) .ik-aud .ik-ui__li b { font-size: 13px; }
html body.ik:not(#_) .ik-aud .ik-ui__li i { font-size: 12px; }
html body.ik:not(#_) .ik-aud .ik-ui--ws { gap: 8px; }
html body.ik:not(#_) .ik-aud .ik-ui--ws .ik-ui__row { gap: 10px; padding: 10px 12px; border-radius: 12px; }
html body.ik:not(#_) .ik-aud .ik-ui--ws img { width: 30px; height: 30px; }
html body.ik:not(#_) .ik-aud .ik-dmcard { padding: 12px; border-radius: 20px; }
html body.ik:not(#_) .ik-aud .ik-dm__msgs { font-size: 14px; }
html body.ik:not(#_) .ik-aud .ik-dm__card { padding: 8px; }
/* Agencies: three client posts fanned out, one per account. */
html body.ik:not(#_) .ik-aud__fan { position: absolute; top: 9%; left: 5%; width: 48%; height: 74%; }
html body.ik:not(#_) .ik-aud__fan img { position: absolute; width: 60%; height: auto; aspect-ratio: 3 / 4; border: 4px solid #fff; border-radius: 18px; object-fit: cover; }
html body.ik:not(#_) .ik-aud__fan img:nth-child(1) { top: 10%; left: 0; transform: rotate(-8deg); }
html body.ik:not(#_) .ik-aud__fan img:nth-child(2) { top: 0; left: 22%; z-index: 1; transform: rotate(-1deg); }
html body.ik:not(#_) .ik-aud__fan img:nth-child(3) { top: 14%; left: 44%; z-index: 2; transform: rotate(6deg); }
@media (prefers-reduced-motion: no-preference) {
  html.ik-js body.ik:not(#_) .ik-aud__body { transition: grid-template-rows .45s var(--ease); }
  html.ik-js body.ik:not(#_) .ik-aud__item:not(.is-on) .ik-aud__body > div { transition: visibility 0s .45s; }
  html body.ik:not(#_) .ik-aud__scene { transition: opacity .4s var(--ease), visibility 0s .4s; }
  html body.ik:not(#_) .ik-aud[data-on="0"] .ik-aud__scene:nth-child(1),
  html body.ik:not(#_) .ik-aud[data-on="1"] .ik-aud__scene:nth-child(2),
  html body.ik:not(#_) .ik-aud[data-on="2"] .ik-aud__scene:nth-child(3) { transition: opacity .4s var(--ease); }
  html body.ik:not(#_) .ik-aud__scene .ik-aud__ui { transition: transform .6s var(--ease-out); }
  html body.ik:not(#_) .ik-aud[data-on="0"] .ik-aud__scene:not(:nth-child(1)) .ik-aud__ui, html body.ik:not(#_) .ik-aud[data-on="1"] .ik-aud__scene:not(:nth-child(2)) .ik-aud__ui, html body.ik:not(#_) .ik-aud[data-on="2"] .ik-aud__scene:not(:nth-child(3)) .ik-aud__ui { transform: translateY(16px) rotate(1.5deg); }
}
.ik-ui--list { display: flex; flex-direction: column; gap: 6px; }
.ik-ui__li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--cf-mist); }
html body.ik:not(#_) .ik-ui__li img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ik-ui__li span { display: flex; flex-direction: column; line-height: 1.2; }
.ik-ui__li b { font-size: 12px; font-weight: 600; }
.ik-ui__li i { font-size: 11px; }
/* Tablets: a squarer stage, so the picture does not stretch to the height of the open list. */
@media (min-width: 900px) and (max-width: 1199px) { html body.ik:not(#_) .ik-aud__stage { align-self: center; min-height: 0; aspect-ratio: 1 / 1.05; } }
/* Niches close the Who section. */
html body.ik:not(#_) #who .ik-nch { margin-top: 40px; }
@media (max-width: 899px) {
  html body.ik:not(#_) .ik-aud { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "list"; grid-template-rows: auto; }
  html body.ik:not(#_) .ik-aud__stage { min-height: 0; aspect-ratio: 4 / 3; margin-top: 24px; }
  html body.ik:not(#_) ul.ik-aud__list { margin-top: 12px; }
}
@media (max-width: 767px) {
  html body.ik:not(#_) .ik-aud__stage { aspect-ratio: auto; height: 340px; padding: 6px; border-radius: 24px; }
  html body.ik:not(#_) .ik-aud__scene { inset: 6px; border-radius: 18px; }
  html body.ik:not(#_) .ik-aud__post { top: 7%; left: 5%; width: 40%; border-radius: 16px; }
  html body.ik:not(#_) .ik-aud__cmts .ik-ucard__cmt { gap: 5px; padding: 4px 6px; font-size: 11px; }
  html body.ik:not(#_) .ik-aud__cmts .ik-ucard__cmt img { width: 18px; height: 18px; }
  html body.ik:not(#_) .ik-aud__cmts .ik-kw { font-size: 10px; }
  html body.ik:not(#_) .ik-aud__ui { right: 4%; bottom: 8%; width: 54%; }
  html body.ik:not(#_) .ik-aud .ik-ui { padding: 10px; font-size: 12px; }
  html body.ik:not(#_) .ik-aud .ik-ui__li { padding: 5px 6px; }
  html body.ik:not(#_) .ik-aud .ik-ui__li img { width: 24px; height: 24px; }
  html body.ik:not(#_) .ik-aud .ik-ui__li b, html body.ik:not(#_) .ik-aud .ik-ui__li i { font-size: 11px; }
  html body.ik:not(#_) .ik-aud .ik-ui--ws .ik-ui__row { padding: 7px 8px; }
  html body.ik:not(#_) .ik-aud .ik-ui--ws img { width: 22px; height: 22px; }
  html body.ik:not(#_) .ik-aud .ik-dmcard { padding: 8px; }
  html body.ik:not(#_) .ik-aud .ik-dm__msgs { font-size: 12px; }
  html body.ik:not(#_) .ik-aud__item { padding: 16px 52px 16px 18px; border-radius: 18px; }
  html body.ik:not(#_) h3.ik-aud__h { font-size: 19px; }
  html body.ik:not(#_) #who .ik-nch { margin-top: 32px; }
}

/* ---------- Phones, pass 2 (Vytas, 2026-11-03: "buttons too wide, title too big") ---------- */
@media (max-width: 767px) {
  html body.ik:not(#_):not(#_) h1.ik-h1, html body.ik:not(#_):not(#_) .is-left h1.ik-h1 { font-size: 40px !important; line-height: 1.04; }
  html body.ik:not(#_) p.ik-hero__sub { font-size: 16px; line-height: 1.55; }
  /* Buttons: stacked, no wider than 320px, centred. */
  .ik-hero .ik-btns { align-self: center; width: 100%; max-width: 320px; }
  html body.ik:not(#_) .ik-hero a.ik-btn { height: 50px; }
  html body.ik:not(#_) .ik-close a.ik-btn, html body.ik:not(#_) .ik-cta-bottom a.ik-btn { width: 100%; max-width: 320px; }
  .ik-close .ik-btns { align-items: stretch; max-width: 320px; }
}
@media (max-width: 480px) {
  /* A 20px gutter on content and header alike, so the edges still line up. A sheet is 8px in here: 12px inside it. */
  .ik-w { width: calc(100% - 40px); }
  html body.ik:not(#_) .ik-sheet .ik-w { width: calc(100% - 24px); }
  html body.ik:not(#_):not(#_) .navbar .nav-container { padding-left: 20px !important; padding-right: 20px !important; }
}
/* The menu icon's lines sit inside a wider tap box; move the box so the lines end on the content edge, as the logo
   starts on it. Measured 2026-11-03 (Vytas: "all properly aligned, so not discrepancies"). */
@media (min-width: 769px) and (max-width: 1024px) { html body.ik:not(#_):not(#_) #navbar .mobile-menu-btn { translate: 10px 0; } }
@media (min-width: 768px) and (max-width: 768px) { html body.ik:not(#_):not(#_) #navbar .mobile-menu-btn { translate: 8px 0; } }
@media (max-width: 767px) { html body.ik:not(#_):not(#_) #navbar .mobile-menu-btn { translate: 6px 0; } }
@media (max-width: 374px) {
  html body.ik:not(#_):not(#_) h1.ik-h1, html body.ik:not(#_):not(#_) .is-left h1.ik-h1 { font-size: 36px !important; }
}

/* ---------- Proof row: short labels, one line on phones (Vytas, 2026-11-03) ---------- */
html body.ik:not(#_):not(#_) .ik-proof .ik-proof__short { display: none; }
@media (max-width: 767px) {
  html body.ik:not(#_) .ik-proof, html body.ik:not(#_) .ik-close .ik-proof { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0; margin-top: 20px; font-size: 12px; white-space: nowrap; }
  html body.ik:not(#_) .ik-close .ik-proof { justify-content: flex-start; }
  html body.ik:not(#_) .ik-proof li { gap: 5px; padding: 0 9px; border-left: 1px solid var(--cf-ink-line); }
  html body.ik:not(#_) .ik-close .ik-proof li { border-left-color: rgba(20, 20, 20, .22); }
  html body.ik:not(#_) .ik-proof li:first-child { padding-left: 0; border-left: 0; }
  html body.ik:not(#_) .ik-proof li:last-child { padding-right: 0; }
  html body.ik:not(#_) .ik-proof svg { width: 15px; height: 15px; }
  .ik-proof__tp { width: 15px; height: 15px; }
  .ik-proof__tp svg { width: 10px; height: 10px; }
  html body.ik:not(#_) .ik-faces img { width: 20px; height: 20px; }
  .ik-face { margin-left: -6px; }
  html body.ik:not(#_):not(#_) .ik-proof .ik-proof__long { display: none; }
  html body.ik:not(#_):not(#_) .ik-proof .ik-proof__short { display: inline; }
  /* The hero label: smaller on phones. */
  html body.ik:not(#_) p.ik-eyebrow { margin-bottom: 14px; font-size: 11px; letter-spacing: .12em; }
}

/* ---------- Hero phone: a calmer turn, and the thread arrives message by message (once) ---------- */
html body.ik:not(#_) .ik-cfph .cfph { transform: rotateY(-5deg) rotateX(1.5deg); }
html body.ik:not(#_) .ik-cfph .cfph-dev { border-color: #48484d; background: #0b0b0c; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes ikCf { from { opacity: 0; transform: translateY(28px) rotateY(-1deg); } to { opacity: 1; transform: rotateY(-5deg) rotateX(1.5deg); } }
  @keyframes ikMsg { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
  html body.ik:not(#_) .ik-cfph .cfph-thread > .cfph-line:first-of-type { animation: ikMsg .45s var(--ease-out) .9s both; }
  html body.ik:not(#_) .ik-cfph .cfph-dm .cfph-b--out { transform-origin: right bottom; animation: ikMsg .45s var(--ease-out) 1.7s both; }
  html body.ik:not(#_) .ik-cfph .cfph-dm .cfph-card { transform-origin: right top; animation: ikMsg .5s var(--ease-out) 2.1s both; }
  html body.ik:not(#_) .ik-cfph .cfph-thread > .cfph-line:last-of-type { animation: ikMsg .45s var(--ease-out) 3s both; }
}
@media (max-width: 767px) {
  html body.ik:not(#_) .ik-cfph .cfph { transform: none; }
  @keyframes ikCf { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
}
/* Proof row on desktop: smaller and tighter (Vytas, 2026-11-03: "slightly smaller and less spacing"). */
@media (min-width: 768px) {
  html body.ik:not(#_):not(#_) .ik-proof { flex-wrap: nowrap; font-size: 13px; white-space: nowrap; }
  html body.ik:not(#_):not(#_) .ik-proof li { gap: 6px; padding: 0 11px; }
  html body.ik:not(#_):not(#_) .ik-proof li:first-child { padding-left: 0; }
  html body.ik:not(#_):not(#_) .ik-proof svg { width: 16px; height: 16px; }
  html body.ik:not(#_):not(#_) .ik-proof .ik-proof__tp { width: 16px; height: 16px; }
  html body.ik:not(#_):not(#_) .ik-proof .ik-proof__tp svg { width: 10px; height: 10px; }
  html body.ik:not(#_):not(#_) .ik-proof .ik-faces img { width: 22px; height: 22px; }
  html body.ik:not(#_):not(#_) .ik-proof .ik-face { margin-left: -6px; }
  html body.ik:not(#_):not(#_) .ik-proof .ik-face:first-child { margin-left: 0; }
}
/* Hero phone: slightly more 3D on desktop (Vytas, 2026-11-03), with a thin side edge so the turn reads as depth, not skew. */
@media (min-width: 768px) {
  .ik-hero--v1 .ik-hero__visual { perspective: 1400px; }
  html body.ik:not(#_):not(#_) .ik-cfph .cfph { transform: rotateY(-11deg) rotateX(3deg); transform-style: preserve-3d; }
  html body.ik:not(#_):not(#_) .ik-cfph .cfph-dev::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #2a2a2e; transform: translateZ(-8px) translateX(-3px); }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  @keyframes ikCf { from { opacity: 0; transform: translateY(28px) rotateY(-3deg) rotateX(1deg); } to { opacity: 1; transform: rotateY(-11deg) rotateX(3deg); } }
}
/* The closing card's proof row: keep one line at 1440 too. */
@media (min-width: 768px) {
  html body.ik:not(#_):not(#_) .ik-close .ik-proof { font-size: 13px; }
}
/* Pointer tilt on the hero phone: the wrapper turns, the phone keeps its own resting angle. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html body.ik:not(#_) .ik-cfph { transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transform-style: preserve-3d; transition: transform .6s var(--ease-out); will-change: transform; }
}
/* Phones: audience links tall enough to tap; the use-case mock gets more room for the DM card. */
@media (max-width: 767px) {
  .ik-ucard__pic { width: 32%; }
  .ik-ucard__dm { width: 66%; right: 10px; }
}
/* Hero phone link card: title line under the picture. */
html body.ik:not(#_) .ik-cfph .cfph-card__t { display: flex; flex-direction: column; padding: 8px 12px 2px; font-size: 13px; line-height: 1.3; color: #111; }
html body.ik:not(#_) .ik-cfph .cfph-card__t b { font-weight: 600; }
html body.ik:not(#_) .ik-cfph .cfph-card__t i { font-style: normal; font-size: 11px; color: #737373; }
/* Hero phone: a calmer plan card so the phone supports the headline instead of competing with it. */
html body.ik:not(#_) .ik-cfph .cfph-card__img { height: 104px; object-fit: cover; }


/* ---------- Closing visual: one results card and the comment that feeds it ---------- */
.ik-close__art { position: relative; justify-self: end; width: min(400px, 100%); padding: 40px 0 0 28px; }
html body.ik:not(#_) .ik-close__art > :is(.ik-cl, .ik-cl__sent) { display: none; }
.ik-res { padding: 18px; border-radius: 24px; background: #fff; color: #111; transform: rotate(1.5deg); }
.ik-res__top { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.ik-res__top b { font-weight: 600; }
.ik-res__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.ik-res__nums span { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--cf-mist); }
.ik-res__nums b { font-size: 22px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
html body.ik:not(#_) .ik-res__nums i { font-style: normal; font-size: 12px; color: #63636b; }
html body.ik:not(#_) p.ik-res__lbl { margin: 16px 0 8px; font-size: 12px; font-weight: 600; color: #52525b; }
.ik-res__bars { display: flex; align-items: flex-end; gap: 5px; height: 72px; }
.ik-res__bars i { flex: 1; height: calc(var(--h) * 100%); min-height: 4px; border-radius: 4px 4px 0 0; background: #e4e4e7; transform-origin: bottom; }
.ik-res__bars i.is-on { background: var(--cf-ink); }
.ik-res__cmt { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 9px; border-radius: 18px; background: #fff; font-size: 13px; color: #111; transform: rotate(-3deg); }
html body.ik:not(#_) .ik-res__cmt img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ik-res__cmt b { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  html.ik-js .ik-close__art:not(.is-in) .ik-res__bars i { transform: scaleY(.05); }
  html.ik-js .ik-close__art.is-in .ik-res__bars i { transition: transform .9s var(--ease-out) calc(.3s + var(--d, 0s)); }
  html.ik-js .ik-close__art:not(.is-in) .ik-res__cmt { opacity: 0; transform: translateY(12px) rotate(-3deg); }
  html.ik-js .ik-close__art.is-in .ik-res__cmt { transition: opacity .45s var(--ease-out) .9s, transform .55s var(--ease-out) .9s; }
}

/* How it works: the three pictures share one height, so the step numbers and titles line up (step 2 was 30px taller). */
@media (min-width: 768px) { html body.ik:not(#_) .ik-step .ik-art, html body.ik:not(#_) .ik-step .ik-art:has(.ik-ui--pick) { height: 192px; min-height: 0; } }

/* Homepage feature tiles: each title opens its page (2026-11-03). The whole tile is the hit area; the title keeps its colour. */
html body.ik:not(#_):not(#_) a.ik-tile__a { color: inherit; text-decoration: none; }
html body.ik:not(#_) .ik-tile:has(a.ik-tile__a) { position: relative; }
html body.ik:not(#_) a.ik-tile__a::after { content: ""; position: absolute; inset: 0; border-radius: 28px; }
@media (hover: hover) { html body.ik:not(#_) .ik-tile:has(a.ik-tile__a):hover { border-color: #4a4a50; } }
/* A long handle in a DM card header wraps instead of running past the card (2026-11-04, spanish.with.clara at 390). */
html body.ik:not(#_) .ik-dm__head > span { min-width: 0; }
html body.ik:not(#_) .ik-dm__head b { display: block; overflow-wrap: anywhere; }

/* Setup account card on phones (2026-11-04): the card is about 235px wide at 390, and the Connected pill (95px) left the
   handle 56px, so every handle broke over two or three lines. Below 600px the pill moves under the handle, in line with it. */
@media (max-width: 600px) {
  html body.ik:not(#_) :is(.ik-ui--acct, .ik-ui--fg) { flex-wrap: wrap; row-gap: 8px; }
  html body.ik:not(#_) :is(.ik-ui--acct, .ik-ui--fg) > span:not(.ik-ok) { flex: 1 1 calc(100% - 46px); }
  html body.ik:not(#_) :is(.ik-ui--acct, .ik-ui--fg) > .ik-ok { margin-left: 46px; }
}

/* A hyphenated word in a heading stays on one line (for_ink.pug nb, 2026-11-04). */
html body.ik:not(#_) .ik-nb { white-space: nowrap; }
/* The no-break spans keep short English terms (auto-reply, comment-to-DM) on one line. A translation of the term can be
   four words long and wider than a phone, so on translated pages it wraps like normal text. */
html:not([lang^="en"]) body.ik:not(#_) :is(.ik-nb, .ixx-nb, .uc-nb, .gd-nb, .hg-nb, .vs-nb) { white-space: normal; }