/*
 * BrandinAI marketing site (v2).
 *
 * Ported verbatim from the Claude Design export kept in
 * resources/themes/anchor/spec/v2/. Element-level styling stays inline in the
 * Blade partials because several rules below key off those inline values
 * (e.g. [data-cfg] > div[style*="border-top"]); rewriting them into classes
 * would silently detach the rule from its target.
 */

/* ---------------------------------------------------------------- fonts -- */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid #5B5CE6; outline-offset: 3px; border-radius: 6px; }
@media (min-width: 1000px) { body { zoom: 0.9; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ------------------------------------------------------------- podłoża -- *
 * PIĘĆ PODŁÓŻ. Nie trzy — tyle naprawdę leży w renderze i tyle ma leżeć.
 *
 * Liczone Z RENDERU, nie z arkuszy: 15 stron marketingu przy 1440 px (zoom 0.9),
 * każda po przewinięciu do samego dołu i po otwarciu wszystkich zakładek oraz
 * akordeonów — bez tego panele mają 0x0 i wypadają z pomiaru. „Podłoże” = albo
 * powierzchnia pełnej szerokości (≥1200 px), albo kafel/panel ≥300x100 px.
 * Liczby niżej to LICZBA ODMIAN (ten sam element o innej wysokości na PL i EN
 * liczy się dwa razy), a nie liczba reguł w CSS.
 *
 *   #FFFFFF                 sekcja jasna — i grunt samego dokumentu
 *     33 odmiany pełnej szerokości, wszystkie 15 stron; największa 1440x10252
 *     (body na /pl). To podłoże DOMYŚLNE, nie pasmo: dlatego biel wolno ciągnąć
 *     przez dwie sekcje z rzędu (#top 614 px i .hp-problem 692 px na /pl,
 *     przedzielone paskiem .hp-logos #FAFAFC 1440x99), a pasma
 *     szarego i kolorowego — nie.
 *
 *   --mkt-band    #F4F5F8   sekcja szara (rytm biały/szary) + stopka
 *     11 odmian pełnej szerokości: #system, #cennik, #wiedza, .hp-testi,
 *     .hp-audience-profiles, pasmo FAQ 1440x931, pasmo /blog 1440x1009 oraz
 *     .hp-footer 1440x338 na WSZYSTKICH 15 stronach (wartość trzyma css/hv-footer.css,
 *     tam jest jedyne źródło prawdy tła stopki).
 *
 *   --mkt-surface #FAFAFC   kafel/panel NA jednej z tych dwóch — ORAZ pasmo
 *     Tu poprzednia wersja tego komentarza mijała się z renderem: #FAFAFC nie jest
 *     wyłącznie kaflem. Pełna szerokość, 3 odmiany: #jak-dziala 1440x1997 na
 *     /pl/produkt i /product (wartość inline w partials/marketing/product/how-it-works),
 *     .hp-audience-how 1440x168 na /pl/dla-kogo i /for-whom, .hp-logos 1440x99 na
 *     /pl i /. Do tego 12 odmian kafli ≥300x100 — m.in. .mkt-cnk-card.is-recommended
 *     351x275 i .mkt-cnk-flex 1082x76, oba na czterech adresach (/pl, /pl/cennik,
 *     /, /pricing). Prawdziwe zostaje jedno: NIC z tego nie leży wprost na szarym
 *     paśmie. Sprawdzone dla każdej powierzchni ≥200x60 — najbliższe nieprzezroczyste
 *     podłoże to zawsze #FFFFFF.
 *
 *   #14162B                 BIA, asystent i finalne CTA (zostaje inline)
 *     3 odmiany pełnej szerokości: #bia 1440x747 (/pl, /), #asystent 1440x747
 *     (/pl/produkt, /product) i pasmo 1440x311 na /pl/faq, /faq i /blog; do tego
 *     .hp-final-card 1130x367 na ośmiu stronach.
 *
 *   #EEF0FE                 JEDYNY kolorowy akcent: pasmo darmowego audytu
 *     2 odmiany pełnej szerokości i obie to ta sama sekcja: #audyt 1440x749 na /pl
 *     i 1440x769 na /. To jest decyzja, nie osad — pełne uzasadnienie stoi przy
 *     regule .hp-audit w css/home-v2.css. Skrót: ujednolicone do --mkt-band #audyt
 *     skleja się z sąsiednią, też szarą .hp-testi w jedno pole 1246 px (PL) / 1266 px
 *     (EN) i granica sekcji przestaje istnieć. NIE ujednolicać.
 *
 * Dlaczego akurat #FAFAFC na kafle, a nie #FBFBFE ani #F7F8FE. Odcień kafla ma być
 * trzecim krokiem po paśmie i białym panelu, a nie powtórzeniem pierwszego.
 * Luminancja względna: biel 1.00000, szare pasmo 0.91315, ich środek 0.95658.
 *   #FAFAFC = 0.95723  — praktycznie dokładnie w połowie między podłożami strony,
 *   #FBFBFE = 0.96659  — klei się do bieli, na białym panelu ginie,
 *   #F7F8FE = 0.94065  — klei się do pasma, więc kafel na cenniku czytał się jak
 *                        dziura w białym panelu, a nie jak wyróżniony plan.
 * W kontraście #FAFAFC to 1.0425 wobec bieli i 1.0458 wobec szarego — jedyny
 * z trzech, który odsuwa się od obu tak samo.
 *
 * Tekst na #FAFAFC (wymóg 4.5:1): #14162B 17.08, #4C5163 7.56, #5F6478 5.63,
 * #656B7E 5.09, #5B5CE6 4.89. Każdy przechodzi.
 *
 * CO JESZCZE JEST W RENDERZE, ale podłożem NIE jest. Żadne nie osiąga pełnej
 * szerokości, wszystkie siedzą wewnątrz makiet widżetów:
 *   · #F7F8FE — podświetlona kolumna tabeli porównania planów i .mkt-wc-card.is-on;
 *     największa powierzchnia 211x43 px, 4 adresy. Do tej rundy niosło jeszcze
 *     .mkt-cnk-flex 1082x76, czyli NAJSZERSZĄ kartę strony — zdanie „tylko wewnątrz
 *     makiet” było wtedy nieprawdziwe. Teraz jest.
 *   · #FCFCFE — 8 deklaracji w css/product-v2.css, największa powierzchnia 502x368
 *     (.mkt-crawl-map na /pl/produkt i /product), czyli POWYŻEJ progu 300x100
 *     przyjętego wyżej dla kafla. Podłożem nie jest wyłącznie dlatego, że siedzi
 *     wewnątrz makiety widżetu. Szósty prawie-biały, poza listą z audytu
 *     właściciela, osobny przebieg.
 *   · #FFF7EA — nie prawie-biały, tylko ciepły znacznik ContentInAI (1.0636 wobec
 *     bieli); największa powierzchnia 488x36 (.hp-ciap-panel-bar), 4 adresy.
 *
 * CZEGO W RENDERZE NIE MA, choć bywało w arkuszach:
 *   · #F9FAFC — zero wystąpień. Paski kart ContentInAI (.hp-cia-card-bar 348x59 na
 *     /pl i /, .hp-ciap-panel-bar 488x36 na /pl/produkt i /product) zeszły w tej
 *     rundzie na --mkt-surface: różnica między tymi kolorami to jeden punkt kanału R
 *     i kontrast 1.0018:1, czyli nic widocznego.
 *   · #FBFBFE — zero wystąpień na 15 stronach. Została jedna deklaracja (.mkt-sc-q
 *     w css/product-v2.css), w stanie makiety, którego pomiar nie zastał.
 *
 * PUŁAPKA POMIARU — dwa „odcienie”, których nie ma. Kto zmierzy render bez rozbrojenia
 * animacji, znajdzie #F8F8FE i #F9F9FE na .mkt-rt-row.is-high (590x159) oraz #F8F9FE
 * na .mkt-sc-card.is-new (502x346). To KLATKI, nie kolory: pierwsze to @keyframes
 * rt-sweep-skin (tło spoczynkowe wiersza to #FFFFFF), drugie to klatka „from” w @keyframes
 * sc-settle. Przed każdą próbką trzeba rozbroić i uzbroić widżet (is-armed).
 *
 * Zmienne siedzą na :root, więc sięga po nie także arkusz stopki wstrzykiwany inline
 * z partials/marketing/footer.blade.php. Każde użycie ma fallback, bo podglądy
 * renderowane bez marketing.css nie mają tych zmiennych.
 * ------------------------------------------------------------------------- */
:root {
  --mkt-band: #F4F5F8;
  --mkt-surface: #FAFAFC;
}

body { margin: 0; background: #FFFFFF; font-family: Poppins, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #5B5CE6; text-decoration: none; }
a:hover { color: #3F40C4; }
/* Linki w odpowiedziach FAQ (/faq i bloki FAQ na stronach) stoją w zwykłym akapicie, więc są podkreślone. */
.mkt-faq-a a, .hp-pfaq-a a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

img { max-width: 100%; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
main { display: block; }

/* Several scripted panes carry an inline display, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }

/* Headline accents. Translations mark the highlighted phrase with these instead of
   carrying a hex value, so PL and EN can highlight different words. */
.mkt-accent { color: #5B5CE6; }
.mkt-accent-light { color: #9EA2F2; }

.mkt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mkt-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #14162B;
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
}
.mkt-skip-link:focus {
  left: 0;
  color: #FFFFFF;
}

/* ----------------------------------------------------- nav scroll states -- */
/* The nav is taken out of flow and laid over the first section, so the hero
   glow shows through. A white bar only appears after the page has scrolled
   (or when the mobile menu is open). */

:root { --mkt-nav-h: 84px; }

.mkt-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.mkt-nav.is-scrolled,
.mkt-nav.is-open {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: #EDEEF2;
}

.mkt-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 32px;
  min-height: 84px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  transition: padding 0.22s ease, min-height 0.22s ease;
}

.mkt-nav.is-scrolled .mkt-nav-inner,
.mkt-nav.is-open .mkt-nav-inner {
  padding: 12px 32px;
  min-height: 68px;
}

.mkt-nav-brand {
  display: flex;
  align-items: center;
  /* Never let the row balance itself by squeezing the wordmark: with the menu
     now in flow, an over-budget row shrank the logo instead of the empty
     spacer (measured at 861px in EN: 196.8px against its natural 205.4px). */
  flex: none;
}

.mkt-nav-logo {
  height: 36px;
  width: auto;
  display: block;
  transition: height 0.22s ease;
}

.mkt-nav.is-scrolled .mkt-nav-logo,
.mkt-nav.is-open .mkt-nav-logo {
  height: 22px;
}

/* The menu must not move when the bar compacts. With the tabs in flow, a
   wordmark that shrinks on scroll (205.4 -> 125.5 CSS px) used to drag them
   72px to the left — the only element in the bar that moved, against the
   brief's "nothing shifts on scroll". The logo now shrinks *inside* a box of
   its own resting width, so the tabs start at the same x in both states.
   min-width, not width: the box can still grow if the asset ever changes, and
   it is scoped above the burger breakpoint so phones keep the space. */
@media (min-width: 861px) {
  .mkt-nav-brand { min-width: 206px; }
}

/* --- menu, beside the wordmark -------------------------------------------
   The tabs sit in normal flow right after the logo, 46px from it: the 20px
   flex gap on .mkt-nav-inner plus the 26px margin here. A flex spacer after
   them pushes the language switch, the login link and the CTA to the right
   edge. They used to be centred with position:absolute;left:50%, which read
   as off-centre because the right cluster is ~115px wider than the wordmark:
   265px of air on one side of the menu against 150px on the other. */
[data-nav-tabs] {
  display: flex;
  align-items: center;
  gap: 26px;
  /* 26px, not the 20px it shipped with: the owner asked for a slightly wider
     breath between the wordmark and the first tab (40 -> 46px measured from
     the wordmark's right edge), without going back to the old centred menu
     that left ~265px of air on one side. */
  margin-left: 26px;
  white-space: nowrap;
}

/* Colour and weight live here rather than inline, so the hover and the
   current-page underline actually apply — an inline `color` beats any rule.
   The transparent border keeps current and non-current items on one
   baseline, so nothing shifts as the current page changes. */
/* Direct children only: the drawer's login link and CTA also live inside
   [data-nav-tabs], and they carry their own look. */
/* The padding is 11/9, not 10/10, because the 2px underline reserve below
   counts into the border box that align-items:center centres: with 10/10 the
   label's cap band sat 1.30px above the bar's centre while the wordmark sat
   0.23px below it, and the menu read high against the logo. Shifting 1px of
   padding from the bottom to the top drops the text by exactly that 1px and
   leaves the box height (and so the row) untouched. Measured after: cap band
   0.30px high in the tall bar, 0.08px in the compact one. */
[data-nav-tabs] > a {
  font-size: 14px;
  font-weight: 500;
  color: #4C5163;
  padding: 11px 0 9px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

[data-nav-tabs] > a:hover { color: #14162B; }

[data-nav-tabs] > a[aria-current="page"] {
  font-weight: 600;
  color: #14162B;
  border-bottom-color: #5B5CE6;
}

[data-nav-spacer] { flex: 1 1 auto; }

/* The bar's CTA, and its twin inside the drawer. The background is set here
   rather than inline so .hv-primary:hover (0,2,0) still outranks this (0,1,0)
   and the button reacts to the cursor. */
[data-nav-cta],
[data-nav-drawer-cta] {
  flex: none;
  background: #5B5CE6;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  white-space: nowrap;
}

/* The login link and the CTA, repeated inside the open drawer for the widths
   where the bar itself drops them. Hidden until the drawer exists. */
[data-nav-drawer-extra] { display: none; }

/* Keyboard focus has to stay visible on every control in the bar. */
.mkt-nav-inner a:focus-visible,
.mkt-nav-inner button:focus-visible {
  outline: 2px solid #5B5CE6;
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .mkt-nav,
  .mkt-nav-inner,
  .mkt-nav-logo,
  [data-nav-tabs] > a {
    transition: none;
  }
}

/* Same white + purple glow as the home / product heroes, for every subpage top. */
.mkt-page-hero {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
}
.mkt-page-hero-glow {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 980px;
  height: 520px;
  background: radial-gradient(closest-side, rgba(91, 92, 230, 0.10), rgba(91, 92, 230, 0));
  pointer-events: none;
}
.mkt-page-hero > *:not(.mkt-page-hero-glow) {
  position: relative;
  z-index: 1;
}

/* Screenshot slots. The export ships <image-slot> placeholders; where we have a
   real panel capture it is rendered as <img>, otherwise this frame stands in. */
.mkt-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F4F5F8;
  color: #9095AB;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  text-align: center;
  padding: 16px;
}
.mkt-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* --------------------------------------------------------------- hovers -- */
/* One class per unique style-hover value in the export. */

.hv-text:hover { color: #14162B; }
.hv-border:hover { border-color: #C4C8D6; color: #14162B; }
.hv-primary:hover { background: #3F40C4; color: #FFFFFF; }
.hv-card:hover { border-color: #C4C8D6; box-shadow: 0 16px 34px -26px rgba(20,22,43,0.4); }
.hv-soft:hover { border-color: #B9BDF0; color: #14162B; }
.hv-card-lg:hover { border-color: #C4C8D6; box-shadow: 0 20px 44px -32px rgba(20,22,43,0.45); }
.hv-primary-light:hover { background: #6E6FEA; color: #FFFFFF; }
.hv-row:hover { background: #FAFAFC; }
.hv-link:hover { color: #3F40C4; }
.hv-dark:hover { background: #262A47; color: #FFFFFF; }
.hv-onDark:hover { border-color: #5B5CE6; color: #FFFFFF; }
.hv-accent:hover { border-color: #5B5CE6; color: #5B5CE6; }

/* ------------------------------------------------ legal / CMS page shell -- */
/* Regulamin i polityka prywatnosci (theme::page). Trzy rzeczy, ktore trzeba
 * rozdzielic: RAMKA, STOPIEN PISMA i KOLUMNA TEKSTU.
 *
 * RAMKA. Szla wlasna szerokoscia 820px, czyli jako jedyna na serwisie - nawigacja,
 * stopka, FAQ, cennik siedza na 1180px inline, ktore [data-home-v2] podnosi do
 * --hp-container. Przez to H1 "Regulamin" zaczynal sie 250px CSS na prawo od logo.
 * Ramka jest teraz na siatce serwisu, wiec okruszki, H1 i tresc maja te sama lewa
 * krawedz co logo i pierwsza kolumna stopki - zmierzone przy 1440px okna: logo
 * 154.8, .hp-footer-grid 154.8, .mkt-legal-col 154.8 px urzadzenia.
 *
 * STOPIEN PISMA. Powyzej 1000px okna body { zoom: .9 } zmniejsza WSZYSTKO, wiec
 * zadeklarowane 16px/28px laduje jako 14.4px/25.2px urzadzenia. Na stronach, ktore
 * ludzie faktycznie czytaja linijka po linijce, to za malo. Globalnego zoomu nie
 * ruszamy - siedzi na nim caly serwis - wiec kompensujemy lokalnie. Kompensacja szla
 * najpierw na 19px/1.7, czyli 17.1px/29.07px urzadzenia, i to bylo o krok za daleko.
 * Zmierzone przy 1440px okna, w pikselach urzadzenia: /terms i /privacy-policy 17.1px,
 * wpis na blogu 14.4px, lead na /pl/dla-kogo 14.85px, wprowadzenie sekcji na
 * /pl/produkt 15.3px. Strony prawne mialy wiec najwiekszy tekst biezacy w calym
 * serwisie, o 19% wiekszy od artykulu - i tylko one. Teraz 17px/1.7 daje
 * 15.3px/26.01px urzadzenia: dalej KROK POWYZEJ artykulu (+0.9px, bo tu sie czyta
 * linijka po linijce), ale dokladnie na stopniu, ktory juz w serwisie istnieje -
 * lead wpisu na blogu i wprowadzenie sekcji na /pl/produkt tez maja 15.3px.
 * Naglowki ida w em, zeby zachowac oryginalne proporcje (h2 28/16 = 1.75em,
 * h3 21/16 = 1.3125em, h4 17/16 = 1.0625em) i urosnac razem z tekstem zamiast
 * splaszczyc hierarchie; h2 schodzi przez to z 29.93px na 26.78px urzadzenia, tuz
 * obok 25.2px, ktore ma h2 na blogu.
 *
 * KOLUMNA TEKSTU. Wlasciciel prosil o SZERZEJ, ale sama szerokosc tylko wydluza
 * wiersz. Miara (znaki na wiersz, Range.getBoundingClientRect na /terms, bez
 * ostatniej, poszarpanej linii kazdego akapitu) zalezy od ILORAZU szerokosc/stopien
 * pisma, nie od zoomu - zoom skaluje jedno i drugie tak samo. Zmierzone, mediana /
 * p90 / najdluzszy wiersz:
 *
 *   przy 16px:  700px 84/88/90   740px 88/92/93   756px 90/96/102
 *               760px 91/97/102  800px 97/101/107 820px 99/104/110
 *   przy 17px:  740px 85/91/93   750px 86/91/93   760px 87/92/93
 *   przy 19px:  740px 73/78/81   780px 78/83/88   820px 82/87/89
 *               860px 86/90/93   900px 90/93/102
 *
 * Komfortowa miara to 65-90. Sama szerokosc wyprowadza z pasma juz przy 756px
 * (p90 96), wiec "szerzej" musi byc kupione stopniem pisma - a kiedy stopien pisma
 * schodzi, szerokosc musi zejsc razem z nim, inaczej wiersz sie rozjezdza. Stad para
 * 750px + 17px: 86/91/93 na /terms, czyli ta sama miara co przy 820px + 19px
 * (82/87/89) i wyrazne polepszenie wzgledem stanu sprzed calej zmiany (756px + 16px,
 * 90/96/102). Kolumna ma 750px CSS = 675px urzadzenia, praktycznie tyle samo co
 * kolumna wpisu na blogu (680px urzadzenia) - strony prawne czytaja sie wiec z tej
 * samej szerokosci co artykuly, tylko o stopien wiekszym pismem.
 *
 * Oba parametry wchodza na tym samym progu co zoom (min-width: 1000px) i musza
 * wchodzic razem. Gdyby sama szerokosc weszla nizej, w pasie 884-999px okna - bez
 * zoomu, wiec pismo dalej 16px - wyszloby 97 znakow na wiersz. Ponizej progu
 * kolumna nie dobija do limitu (32px bocznego paddingu, pelna szerokosc ramki),
 * wiec telefon i tablet zostaja dokladnie takie jak byly.
 */
.mkt-legal-col {
  max-width: 740px;
}
/* Pasmo 820-999px. Ponizej 1000px nie dziala body { zoom: .9 }, wiec 16.5px to 16.5px
   urzadzenia - przy 16px wpisu na blogu w tej samej szerokosci okna dalej jest to krok w gore,
   ale juz nie skok (bylo 17.5px, czyli +9% nad blogiem). Szerokosc wraca tu do bazowych 740px,
   bo miara idzie za ILORAZEM szerokosc/stopien pisma, nie za sama szerokoscia: 16.5px + 740px
   daje 86/91/93 znaku, dokladnie tyle co poprzednie 17.5px + 780px (85/91/93). Wiersze lamia
   sie wiec tak samo jak przed zmiana, tylko pismo jest o 1px mniejsze. Na progu 1000px stopien
   schodzi z 16.5px na 15.3px urzadzenia - to ten sam kierunek, w ktorym idzie caly serwis przez
   body { zoom: .9 }, wiec nie widac tam skoku. */
@media (min-width: 820px) and (max-width: 999px) {
  .mkt-legal-col .mkt-prose { font-size: 16.5px; line-height: 1.7; }
}

@media (min-width: 1000px) {
  .mkt-legal-col { max-width: 750px; }
  .mkt-legal-col .mkt-prose { font-size: 17px; line-height: 1.7; }
  .mkt-legal-col .mkt-prose h2 { font-size: 1.75em; }
  .mkt-legal-col .mkt-prose h3 { font-size: 1.3125em; }
  .mkt-legal-col .mkt-prose h4 { font-size: 1.0625em; }
}

/* Rytm akapitow. Tresc z CMS-u przychodzi owinieta w jeden
 * <div class="container-narrow">, wiec .mkt-prose > * + * (odstep 1.15em) trafia
 * wylacznie w ten jeden wrapper - a on nie ma rodzenstwa. Akapity w srodku zostaja
 * z margin: 0 z resetu `h1, h2, h3, h4, p, figure, ul, ol`, wiec /terms i
 * /privacy-policy renderowaly sie z ZEROWYM odstepem miedzy akapitami na kazdej
 * szerokosci - jedna sciana tekstu. Odtwarzamy ten sam rytm o poziom glebiej i
 * tylko na stronach prawnych; blog, ktory przychodzi bez wrappera, dziala dalej na
 * regule wyzej. Naglowki i listy sa wylaczone: naglowki maja zachowac swoj wlasny,
 * wiekszy margines (1.9em / 1.6em / 1.4em), a listy maja przylegac do swojego
 * zdania wprowadzajacego, dokladnie jak na blogu. :where() ma specyficznosc 0,
 * wiec wyjatek nie podbija selektora ponad regule pierwszego dziecka nizej. */
.mkt-legal-col .mkt-prose > * > * + *:not(:where(h2, h3, h4, ul, ol)) {
  margin-top: 1.15em;
}

/* Pierwszy naglowek w tresci dostawal swoj wlasny margines 1.9em NA GORZE 56px
 * paddingu sekcji - razem 109px CSS pustki miedzy kreska pod H1 a "1. Wstep".
 * Rytm miedzy sekcjami zostaje bez zmian, znika tylko wiodacy margines. Drugi
 * selektor jest tu dlatego, ze tresc z CMS-u przychodzi owinieta w jeden
 * <div class="container-narrow">, wiec naglowek nie jest bezposrednim dzieckiem. */
.mkt-legal-col .mkt-prose > :first-child,
.mkt-legal-col .mkt-prose > :first-child > :first-child {
  margin-top: 0;
}

/* ------------------------------------------- long-form article / CMS body -- */
/* Blog posts and Wave pages arrive as raw HTML, so the typography lives here. */

.mkt-prose {
  font-size: 16px;
  line-height: 1.75;
  color: #262A47;
}
.mkt-prose > * + * { margin-top: 1.15em; }
.mkt-prose h2 {
  margin: 1.9em 0 0;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #14162B;
}
.mkt-prose h3 {
  margin: 1.6em 0 0;
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #14162B;
}
.mkt-prose h4 { margin: 1.4em 0 0; font-size: 17px; font-weight: 600; color: #14162B; }
/* Paragraph rhythm comes from the `> * + *` rule above; a `.mkt-prose p { margin: 0 }`
   here would outrank it on specificity and collapse the whole article. */
.mkt-prose a { color: #5B5CE6; text-decoration: underline; text-underline-offset: 3px; }
.mkt-prose a:hover { color: #3F40C4; }
.mkt-prose strong { font-weight: 600; color: #14162B; }
.mkt-prose ul, .mkt-prose ol { margin: 0; padding-left: 1.4em; }
.mkt-prose li + li { margin-top: 0.45em; }
.mkt-prose img { border-radius: 14px; border: 1px solid #DEE0E8; height: auto; display: block; }
.mkt-prose figure { margin: 0; }
.mkt-prose figcaption { margin-top: 10px; font-size: 13px; color: #656B7E; }
.mkt-prose blockquote {
  margin: 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid #5B5CE6;
  color: #4C5163;
  font-size: 17px;
}
.mkt-prose code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.88em;
  background: #F4F5F8;
  border: 1px solid #EDEEF2;
  border-radius: 6px;
  padding: 2px 6px;
}
.mkt-prose pre {
  background: #14162B;
  color: #E3E5EC;
  border-radius: 14px;
  padding: 20px 22px;
  overflow-x: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
}
.mkt-prose pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.mkt-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mkt-prose th, .mkt-prose td { border: 1px solid #E3E5EC; padding: 10px 12px; text-align: left; }
.mkt-prose th { background: #F4F5F8; font-weight: 600; color: #14162B; }
.mkt-prose hr { border: 0; border-top: 1px solid #E3E5EC; margin: 2.2em 0; }

/* ------------------------------------------------------- nav responsive -- */

/* One row, all the way down to the burger. The tabs used to become a
   full-width second row from 1200px down to 640px, which grew the bar from
   76px to 123px on every non-maximised laptop window and landscape tablet.
   Instead the gaps tighten, then the login link drops, and below 860px the
   whole menu moves into the drawer. Measured on the longest label set (PL:
   Produkt · Cennik · Dla kogo · Wiedza), the single row holds down to 861px,
   where the burger takes over.

   The login link is the one thing that cannot fit all the way down to 861px.
   Measured with the link forced visible, the row's right edge lands at 907.6px
   in PL and 877.6px in EN, so PL still fits at 910px and EN at 880px; below
   that the CTA runs off the right edge. PL is the binding case, and 910px
   leaves only 2.4px of slack — one font fallback away from breaking — so the
   link drops below 920px, where there is a comfortable 12.4px. It is the
   weakest item in the bar (the CTA and the language switch both stay), and
   with the burger capped at 860px there is no drawer to move it into. It
   comes back at 920px and is in the drawer below 861px. */

@media (max-width: 1180px) {
  [data-nav-tabs] { gap: 20px; margin-left: 16px; }
  .mkt-nav-inner { gap: 16px; }
}

/* The tightest band the full bar has to survive. EN is the wide case here —
   "Who it's for" and "Resources" make the menu 328px against the Polish
   285px — so the gutters and gaps come in to keep the row inside 861px
   without the wordmark or the CTA being compressed. */
@media (max-width: 979px) {
  .mkt-nav-inner { gap: 14px; padding-left: 24px; padding-right: 24px; }
  .mkt-nav.is-scrolled .mkt-nav-inner,
  .mkt-nav.is-open .mkt-nav-inner { padding-left: 24px; padding-right: 24px; }
  /* Held at 12px: PL already runs the row right up to the edge here (at 920px,
     where the login link comes back, the CTA overruns the gutter by 12px as it
     is), so the wider wordmark gap above stops at 980px. */
  [data-nav-tabs] { gap: 18px; margin-left: 12px; }
}

/* See the note above: the row genuinely stops fitting below 910px (PL) / 880px
   (EN), so the link survives ~60px further down than it used to. */
@media (max-width: 919px) {
  [data-nav-login] { display: none !important; }
}

@media (max-width: 860px) {
  [data-nav-tabs] { display: none !important; }
  [data-nav-burger] { display: flex !important; }
  /* Visually hidden rather than display:none, so the drawer can be opened from
     the keyboard; the ring is drawn on the label sitting next to it. */
  [data-nav-burger-toggle] {
    display: block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
    pointer-events: none;
  }
  [data-nav-burger-toggle]:focus-visible ~ [data-nav-burger] {
    outline: 2px solid #5B5CE6;
    outline-offset: 2px;
    border-radius: 8px;
  }
  [data-nav-burger-toggle]:checked ~ [data-nav-tabs] { display: flex !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; transform: none !important; order: 0; width: auto !important; margin: 0 !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; padding: 18px 0 24px !important; background: radial-gradient(120% 130% at 50% 0%, rgba(91,92,230,0.10), rgba(91,92,230,0)) #FFFFFF !important; border-bottom: 1px solid #EDEEF2 !important; box-shadow: 0 18px 32px -20px rgba(20,22,43,0.18); white-space: normal !important; }
  [data-nav-tabs] > a { font-size: 15.5px !important; padding: 11px 0 !important; }
  /* Centred in the drawer, the underline reads as a stray rule; bold ink is enough. */
  [data-nav-tabs] > a[aria-current="page"] { border-bottom-color: transparent; }
  [data-nav-drawer-extra] { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; margin-top: 8px; padding: 18px 24px 0; border-top: 1px solid #EDEEF2; }
  /* The bar still carries the CTA here, so the drawer does not repeat it. */
  [data-nav-drawer-cta] { display: none; }
  [data-nav-burger-toggle]:checked ~ [data-nav-burger] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  [data-nav-burger-toggle]:checked ~ [data-nav-burger] span:nth-child(2) { opacity: 0; }
  [data-nav-burger-toggle]:checked ~ [data-nav-burger] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Phones. The burger, the drawer and the hidden login link are already set up
   at 860px above; what is left here is the compact chrome. */
@media (max-width: 640px) {
  :root { --mkt-nav-h: 76px; }
  .mkt-nav-inner { gap: 10px; padding: 16px 16px; min-height: 76px; }
  .mkt-nav.is-scrolled .mkt-nav-inner,
  .mkt-nav.is-open .mkt-nav-inner { padding: 12px 16px; min-height: 64px; }
  .mkt-nav-logo { height: 28px; }
  .mkt-nav.is-scrolled .mkt-nav-logo,
  .mkt-nav.is-open .mkt-nav-logo { height: 19px; }
  nav > div > span { display: none !important; }
  nav > div > a:last-of-type:not([href="#top"]) { display: none !important; }
  /* The rule above drops the bar's CTA on phones, so the drawer takes it over —
     otherwise the one promise the site makes is unreachable on a phone. */
  [data-nav-drawer-cta] { display: inline-flex; align-items: center; justify-content: center; }
  [data-nav-burger] { margin-left: auto; }
  nav > div > a:last-child { padding: 8px 13px !important; font-size: 12.5px !important; }
  nav > div > span a { padding: 8px 3px !important; }
  /* The export had no language switcher, so its blanket `nav > div > span` hide would
     strip ours on phones. Keep it: PL/EN has to stay reachable on mobile. */
  nav > div > span[data-nav-locale] { display: inline-flex !important; }
}

/* ------------------------------------------------ shared mobile typography */

@media (max-width: 640px) {
  body { font-size: 14px; }
  h1 { font-size: clamp(28px, 8vw, 34px) !important; }
  h2 { font-size: clamp(23px, 6.6vw, 28px) !important; }
  h3 { font-size: 15px !important; }
  p { font-size: 14px !important; }
  /* Wyjatek: tresc regulaminu i polityki prywatnosci ma wlasny, wiekszy stopien pisma - to
     strony czytane linijka po linijce, a nie skanowane. Bez tego globalne 14px !important
     zbijalo je z powrotem do 14px/24.5px na telefonie. */
  .mkt-prose p, .mkt-prose li { font-size: inherit !important; }
  section h1, section h2 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  section#top h1 + p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  /* Podpisy sekcji NIE znikaja na telefonie. Stala tu regula
     `section h1 + p, section h2 + p { display: none !important }` - dziedzictwo starego motywu,
     ktore mialo skracac strone, a w praktyce kasowalo tresc: zmierzone na 390px, 8 z 10 sekcji
     strony glownej traciło swoj akapit wiodacy, w tym zdania pisane specjalnie pod te sekcje.
     Skracanie strony przez ukrywanie zdan, ktore ktos napisal, to nie jest oszczednosc miejsca -
     to milczace usuwanie komunikatu. Zostaje tylko stopien pisma dla podpisu w hero. */
  section#top h1 + p { font-size: 14.5px !important; }
  h1 span, h2 span { display: inline; }

  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  section > div, footer > div { padding-left: 20px !important; padding-right: 20px !important; }
  h1 br, h2 br { display: none; }
  footer > div { gap: 28px !important; }
  div:has(+ h1), div:has(+ h2) { text-align: center !important; }
}

/* ------------------------------------------------------- home responsive -- */

@media (max-width: 640px) {
  section { padding-top: 60px !important; padding-bottom: 60px !important; }
  section > div, footer > div { padding-left: 20px !important; padding-right: 20px !important; }
  [data-input-pill] { flex-direction: column !important; align-items: stretch !important; padding: 0 !important; gap: 12px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  [data-input-pill] input { background: #FFFFFF !important; border: 1px solid #DEE0E8 !important; border-radius: 12px !important; padding: 14px 16px !important; min-height: 48px; box-shadow: 0 1px 2px rgba(20,22,43,0.05); }
  [data-input-pill] > span:first-child { display: none; }
  /* :last-child also covers <button>: the export used a link, we submit a real form. */
  [data-input-pill] > span:last-child, [data-input-pill] > a:last-child, [data-input-pill] > button:last-child { width: 100%; display: flex !important; justify-content: center; text-align: center; padding: 14px 20px !important; border-radius: 12px !important; min-height: 48px; align-items: center; }
  [data-input-pill] svg { display: none; }
  [data-hero-desc-desktop] { display: none !important; }
  [data-hero-desc-mobile] { display: inline !important; }
  [data-cta-long] { width: 100%; justify-content: center !important; padding-left: 16px !important; padding-right: 16px !important; white-space: nowrap; font-size: 14px !important; }
  [data-try-note] { font-size: 12.5px !important; white-space: nowrap; gap: 6px !important; }
  [data-sys-col] { flex: 1 1 100% !important; }
  [data-sys-panel] { order: 3; }
  [data-cta-pair] > a { width: 100%; display: flex; justify-content: center; text-align: center; }
  [data-bia-tiles] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  [data-bia-tiles] > div { padding: 14px 10px !important; display: flex; align-items: center; justify-content: center; text-align: center; }
  [data-bia-tiles] > div > div:last-child { display: none; }
  section h2 { font-size: 22px !important; line-height: 1.25 !important; }
  [data-bia-h2] { font-size: 19px !important; }
  [data-wiedza] { background: #F4F5F8 !important; border-top: 1px solid #EDEEF2; }
  [data-wiedza-h2] { font-size: 22px !important; }
  [data-final-card] { border-radius: 0 !important; margin-left: -20px; margin-right: -20px; padding-left: 20px !important; padding-right: 20px !important; }
  [data-final-score] { display: block !important; }
  [data-problem-slider] > div { flex: 0 0 78% !important; min-height: 210px !important; padding: 20px !important; }
  [data-problem-slider] > div > a { display: none !important; }
  [data-final-ctas] > a:last-child { display: none !important; }
  [data-final-ctas] > a:first-child { width: 100%; display: flex; justify-content: center; text-align: center; }
  [data-blog-list] > a:nth-child(1), [data-blog-list] > a:nth-child(2), [data-blog-list] > a:nth-child(3) { display: none !important; }
  [data-blog-list] > a:last-child { margin-top: 0 !important; }
  [data-scope-slider] { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; scrollbar-width: none; padding-bottom: 6px; }
  [data-scope-slider]::-webkit-scrollbar { display: none; }
  [data-scope-slider] > div { flex: 0 0 85%; scroll-snap-align: center; border-top: 1px solid #E3E5EC; border-bottom: 1px solid #E3E5EC; }
  [data-scope-dots] { display: flex !important; }
  [data-cinai-demo] { display: none !important; }
  [data-cinai-h2] { font-size: 18px !important; }
  [data-cinai-img] { display: block !important; }
  [data-cinai-p] { display: none !important; }
  [data-cinai-h2] br { display: none; }
  [data-audyt-h2] { font-size: 19px !important; }
  [data-cinai-cta] { display: flex !important; width: 100%; justify-content: center; text-align: center; background: #5B5CE6 !important; border-radius: 12px !important; padding: 14px 20px !important; }
  [data-audit-steps] { display: none !important; }
  [data-audit-details-btn] { display: flex !important; }
  [data-plan-row] { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 4px 10px; scrollbar-width: none; }
  [data-plan-row] > div { flex: 0 0 82% !important; scroll-snap-align: center; }
  [data-audit-checks] { gap: 12px !important; }
  [data-audit-checks] span { font-size: 13px !important; }
  [data-audit-checks] > div { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; gap: 10px !important; }
  [data-testi-dots-desktop] { display: none !important; }
  [data-testi-dots-mobile] { display: flex !important; justify-content: center; }
  [data-sys-col] button { align-items: flex-start !important; text-align: left !important; }
  [data-aud-connector] { display: none !important; }
  [data-aud-track] { flex-wrap: nowrap !important; }
  [data-aud-track] > div { flex: 0 0 100% !important; min-width: 100%; padding: 24px 20px !important; transform: translateX(calc(var(--aud-slide, 0) * -100%)); transition: transform 0.55s cubic-bezier(0.22,1,0.36,1); }
  [data-aud-chips-pane] { display: flex !important; }
  [data-aud-chips] { display: none !important; }
  [data-aud-dots] { display: flex !important; }
  [data-aud-bubble] { height: auto !important; min-height: 96px !important; }
  [data-aud-spacer] { height: 0 !important; }
  [data-aud-chips] { height: auto !important; min-height: 30px; }
  [data-aud-chips] > span { flex: 1 1 100%; text-align: center; }
  [data-sys-panel] { order: -1; }
  [data-sys-col] { gap: 22px !important; }
  [data-sys-col] button { flex-direction: row !important; align-items: flex-start !important; text-align: left !important; gap: 14px !important; display: grid !important; grid-template-columns: 44px 1fr; }
  [data-sys-col] button > span:first-child { grid-row: span 2; }
  [data-hero-pad] { padding-top: calc(var(--mkt-nav-h) + 44px) !important; }
  [data-aud-personas] { gap: 6px !important; justify-content: center !important; }
  [data-aud-personas] button { font-size: 11.5px !important; padding: 8px 12px !important; }
}

/* ---------------------------------------------------- product responsive -- */

@media (max-width: 640px) {
  [data-asystent-h2] { font-size: 19px !important; }
  [data-cinai-center] { text-align: justify !important; text-wrap: initial !important; hyphens: auto; }
  [data-cinai-cta-wrap] { text-align: center !important; }
  [data-screen-label="ContentInAI"] { padding-bottom: 24px !important; }
  [data-screen-label="CTA"] { padding-top: 0 !important; padding-bottom: 28px !important; }
  [data-product-page] [data-final-card] { padding: 34px 22px !important; gap: 22px !important; }
  [data-step2-img] { order: 2 !important; }
  [data-step3-desc] { display: none !important; }
  [data-panel-cards], [data-feat-grid] { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px !important; padding: 4px 4px 12px; scrollbar-width: none; }
  [data-panel-cards] > div, [data-feat-grid] > div { flex: 0 0 82%; scroll-snap-align: center; }
  [data-asy-tiles] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  [data-asy-tiles] > div { padding: 14px 10px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  [data-asy-tiles] > div > p { display: none !important; }
  [data-komp-cta] { width: 100%; justify-content: center !important; text-align: center; }
}

/* ---------------------------------------------------- pricing responsive -- */

@media (max-width: 640px) {
  [data-pay-cta] > a { width: 100%; padding: 16px 24px !important; white-space: nowrap; }
  [data-tbl-chips] { display: flex !important; }
  [data-tbl] [data-tbl-firsthead] { display: block !important; }
  [data-tbl] { scrollbar-width: thin; scrollbar-color: #C9CCD8 transparent; }
  [data-tbl]::-webkit-scrollbar { height: 4px; }
  [data-tbl]::-webkit-scrollbar-track { background: transparent; }
  [data-tbl]::-webkit-scrollbar-thumb { background: #C9CCD8; border-radius: 999px; }
  [data-tbl]::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  /* Stała tu reguła chowająca ceny z nagłówków tabeli — została usunięta, bo cena ma
     zostać w nagłówku także wtedy, gdy chip zwęzi tabelę do jednej kolumny.
     Chowała w trybie jednokolumnowym każdy span poza etykietą „Pakiet",
     w założeniu, że cenę niesie chip — a chip niesie samą nazwę planu („Business"), nigdy
     kwoty. Skutek: przy ≤640px i włączonym JS cennik nie podawał żadnej ceny, dopóki nie
     wybrało się chipa „Wszystkie". Widoczna kolumna jest jedna i ma połowę szerokości, więc
     nazwa i kwota mieszczą się pod sobą. */
  [data-tbl]:not([data-showcol="all"]) { overflow-x: hidden; }
  [data-tbl]:not([data-showcol="all"]) table { min-width: 0 !important; width: 100% !important; font-size: 12px !important; table-layout: fixed; }
  [data-tbl]:not([data-showcol="all"]) th, [data-tbl]:not([data-showcol="all"]) td { width: 50% !important; text-align: center !important; }
  /* Row labels are <th scope="row"> here (the export used <td>), so both are matched. */
  [data-tbl]:not([data-showcol="all"]) tbody th:first-child,
  [data-tbl]:not([data-showcol="all"]) td:first-child { text-align: left !important; }
  [data-tbl]:not([data-showcol="all"]) thead th:first-child { text-align: center !important; padding-left: 12px !important; }
  [data-tbl]:not([data-showcol="all"]) th, [data-tbl]:not([data-showcol="all"]) td { padding: 16px 12px !important; line-height: 1.5 !important; }
  [data-tbl]:not([data-showcol="all"]) thead th { background: transparent !important; border-bottom: 2px solid #DEE0E8 !important; }
  [data-tbl]:not([data-showcol="all"]) thead th:not(:first-child) { background: #EEF0FE !important; border-bottom-color: #5B5CE6 !important; }
  [data-tbl]:not([data-showcol="all"]) tbody td { background: transparent !important; }
  [data-tbl]:not([data-showcol="all"]) tbody td:not(:first-child) { background: #F7F8FE !important; }
  /* Chip wybiera kolumnę po nazwie planu (data-col w partials/marketing/pricing/comparison),
     nie po numerze komórki. Poprzednia wersja liczyła nth-child i rozjechała się w chwili,
     w której z tabeli zniknęła kolumna Mini: "business" pokazywałby wtedy Pro, a "flexible"
     nie pokazywałby nic. Komórka etykiety wiersza i nagłówki sekcji (td[colspan]) nie mają
     data-col, więc zostają na ekranie zawsze.
     Chowanie jest bez !important, a pokazywanie z !important — inaczej wygrywałaby wyższa
     specyficzność selektora chowającego (0,4,1) nad pokazującym (0,3,0). */
  [data-tbl][data-showcol]:not([data-showcol="all"]) th[data-col],
  [data-tbl][data-showcol]:not([data-showcol="all"]) td[data-col] { display: none; }
  [data-tbl][data-showcol="lite"] [data-col="lite"],
  [data-tbl][data-showcol="business"] [data-col="business"],
  [data-tbl][data-showcol="pro"] [data-col="pro"],
  [data-tbl][data-showcol="flexible"] [data-col="flexible"] { display: table-cell !important; }
  [data-cfg] > div[style*="border-top"], [data-cfg] > div[style*="space-between"] { flex-wrap: nowrap !important; }
  [data-cfg] span[style*="13.5px"] { font-size: 12px !important; white-space: nowrap; }
  [data-cfg] button[style*="IBM Plex Mono"] { font-size: 10px !important; padding: 5px 8px !important; }
  [data-cfg-cta] > a { width: 100%; padding: 16px 20px !important; white-space: nowrap; font-size: 14px !important; }
  [data-pay-cta] > div { font-size: 12.5px !important; white-space: nowrap; }
}

/* -------------------------------------------------------- faq responsive -- */

@media (max-width: 640px) {
  section#faq { padding-top: 40px !important; padding-bottom: 20px !important; }
  section#faq + section { padding-top: 24px !important; }
}

/* ------------------------------------------------------- blog responsive -- */

@media (max-width: 640px) {
  [data-blog-chips] { gap: 6px !important; }
  section#artykuly { padding-bottom: 28px !important; }
  [data-blog-grid-sec] { padding-top: 0 !important; }
  [data-blog-chips] button { padding: 6px 12px !important; font-size: 12px !important; }
}

/* ----------------------------------------------------------- animations -- */

@keyframes bia-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bia-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes bia-pulse { 0% { box-shadow: 0 0 0 0 rgba(91,92,230,0.28); } 100% { box-shadow: 0 0 0 22px rgba(91,92,230,0); } }
@keyframes bia-dot { 0%, 100% { opacity: 0.22; } 50% { opacity: 1; } }
@keyframes bia-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bia-node { 0%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
@keyframes bia-eq { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }

.mkt-bia-icon {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  overflow: visible;
  line-height: 0;
}

.mkt-bia-icon .mkt-bia-bar,
.mkt-bia-icon .mkt-bia-mark {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 100%;
}

.mkt-bia-icon svg { display: block; }

.mkt-bia-icon.is-loading .mkt-bia-bar.is-s { animation: bia-eq 1.1s ease-in-out infinite; }
.mkt-bia-icon.is-loading .mkt-bia-bar.is-m { animation: bia-eq 1.1s ease-in-out 0.15s infinite; }
.mkt-bia-icon.is-loading .mkt-bia-bar.is-a { animation: bia-eq 1.1s ease-in-out 0.3s infinite; }

.mkt-bia-icon .mkt-bia-node { opacity: 0; }
.mkt-bia-icon.is-loading .mkt-bia-node.is-a { animation: bia-node 1.1s ease-in-out infinite; }
.mkt-bia-icon.is-loading .mkt-bia-node.is-b { animation: bia-node 1.1s ease-in-out 0.22s infinite; }
.mkt-bia-icon.is-loading .mkt-bia-node.is-c { animation: bia-node 1.1s ease-in-out 0.44s infinite; }

.mkt-bia-card {
  height: 610px;
  max-height: 610px;
  min-height: 0;
}

.mkt-bia-card [data-bia-thread] {
  overscroll-behavior: contain;
}

.mkt-bia-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  background: transparent;
}

.mkt-bia-md h3 {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #14162B;
}

.mkt-bia-md p {
  margin: 0 0 10px;
}

.mkt-bia-md ul,
.mkt-bia-md ol {
  margin: 0 0 10px;
  padding-left: 1.25em;
}

.mkt-bia-md li { margin: 3px 0; }

.mkt-bia-md strong { font-weight: 650; color: #14162B; }

.mkt-bia-md > :last-child { margin-bottom: 0; }

.mkt-bia-demo {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7A7F93;
  background: #F4F5F8;
  border-radius: 999px;
  padding: 5px 10px;
}

.mkt-bia-status {
  align-self: center;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 8px 0 2px;
  font-size: 13px;
  line-height: 1.4;
  color: #656B7E;
}

.mkt-bia-status-label {
  animation: mkt-bia-pulse 2s ease-in-out infinite;
}

.mkt-bia-dots {
  display: inline-flex;
  width: 1.15rem;
}

.mkt-bia-dots span {
  animation: mkt-bia-pulse 1.2s ease-in-out infinite;
}

.mkt-bia-dots span:nth-child(2) { animation-delay: 0.2s; }
.mkt-bia-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes mkt-bia-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.mkt-bia-send {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: #C4C8D6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease;
}

.mkt-bia-send.is-on { background: #5B5CE6; }

[data-bia-input]::placeholder { color: #656B7E; }
[data-bia-answers] { display: none; }
@keyframes aud-travel { from { left: -5px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: calc(100% - 6px); opacity: 0; } }
@keyframes aud-travel-v { from { top: -5px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { top: calc(100% - 6px); opacity: 0; } }
@keyframes aud-logo-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(91,92,230,0.35); } 45% { transform: scale(1.05); } 100% { transform: scale(1); box-shadow: 0 0 0 26px rgba(91,92,230,0); } }

[data-plan-row]::-webkit-scrollbar, [data-problem-slider]::-webkit-scrollbar { display: none; }
[data-problem-slider] > div:not(:last-child) > p { margin-top: 10px !important; }
[data-panel-cards]::-webkit-scrollbar, [data-feat-grid]::-webkit-scrollbar { display: none; }

/* First painted block starts at the top of the viewport so the hero glow sits
   under the overlay. Extra padding keeps copy below the wordmark. */
main#main > section:first-child,
main#main > [data-product-page] > section:first-child {
  padding-top: calc(var(--mkt-nav-h) + 76px) !important;
}
main#main > [data-product-page] > section:first-child {
  padding-top: calc(var(--mkt-nav-h) + 80px) !important;
}
main#main > article > div:first-child,
main#main > div:first-child:not([data-product-page]) {
  padding-top: calc(var(--mkt-nav-h) + 48px) !important;
}

@media (max-width: 640px) {
  main#main > section:first-child,
  main#main > [data-product-page] > section:first-child {
    padding-top: calc(var(--mkt-nav-h) + 60px) !important;
  }
  main#main > section[data-hero-pad]:first-child {
    padding-top: calc(var(--mkt-nav-h) + 44px) !important;
  }
  main#main > section#faq:first-child {
    padding-top: calc(var(--mkt-nav-h) + 40px) !important;
  }
  main#main > article > div:first-child,
  main#main > div:first-child:not([data-product-page]) {
    padding-top: calc(var(--mkt-nav-h) + 40px) !important;
  }
}

/* --------------------------------------------- code-built panel widgets -- */
/* Resting state is muted; .is-live plays the lift / sweep / stagger once. */

.mkt-widget {
  --mkt-score-c: 213.628;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}

.mkt-widget-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid #EDEEF2;
  background: #FAFAFC;
  flex: 0 0 auto;
}

.mkt-widget-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #E4E6EE;
  display: block;
}

.mkt-widget-crumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5F6478;
  margin-left: 6px;
}

.mkt-widget-body {
  flex: 1;
  min-height: 0;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.mkt-widget.is-compact .mkt-widget-body { padding: 12px 12px 10px; gap: 10px; }
.mkt-widget.is-compact .mkt-widget-chrome { padding: 8px 12px; }

.mkt-widget-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #656B7E;
}

.mkt-widget-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #14162B;
}

.mkt-widget.is-compact .mkt-widget-title { font-size: 13.5px; }

.mkt-widget-muted {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #4C5163;
}

.mkt-widget.is-compact .mkt-widget-muted {
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mkt-score {
  display: inline-flex;
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

.mkt-score svg { display: block; }

.mkt-score-track {
  fill: none;
  stroke: #F4F5F8;
  stroke-width: 6;
}

.mkt-score-ring {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: var(--mkt-score-c);
  stroke-dashoffset: calc(var(--mkt-score-c) * (1 - var(--mkt-score) / 100));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transition: stroke-dashoffset 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.mkt-widget.is-live .mkt-score-ring {
  stroke-dashoffset: calc(var(--mkt-score-c) * (1 - var(--mkt-score) / 100));
}

.mkt-score-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #14162B;
  line-height: 1;
  transform: translateY(2px);
}

.mkt-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.mkt-pill.is-1, .mkt-pill.is-2, .mkt-pill.is-3 {
  color: #15803D;
  background: rgba(34, 197, 94, 0.12);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #22C55E 28%, transparent);
}
.mkt-pill.is-4, .mkt-pill.is-5 {
  color: #1D4ED8;
  background: rgba(59, 130, 246, 0.12);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #3B82F6 28%, transparent);
}
.mkt-pill.is-6, .mkt-pill.is-7, .mkt-pill.is-8, .mkt-pill.is-9, .mkt-pill.is-10 {
  color: #B45309;
  background: rgba(245, 158, 11, 0.14);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #F59E0B 28%, transparent);
}
.mkt-pill.is-late {
  color: #B91C1C;
  background: rgba(239, 68, 68, 0.12);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #EF4444 28%, transparent);
}

.mkt-delta { display: inline-flex; align-items: center; gap: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; }
.mkt-delta.is-up { color: #15803D; }
.mkt-delta.is-down { color: #B91C1C; }
.mkt-delta.is-flat { color: #656B7E; }

.mkt-llm {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.mkt-bar {
  display: block;
  height: 8px;
  background: #EDEEF2;
  border-radius: 999px;
  overflow: hidden;
}

.mkt-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mkt-widget.is-live .mkt-bar-fill { transform: scaleX(1); }

.mkt-sent-stack {
  display: flex;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: #EDEEF2;
}

.mkt-sent-slice {
  height: 100%;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mkt-widget.is-live .mkt-sent-slice { transform: scaleX(1); }

.mkt-row {
  opacity: 1;
  transform: none;
}

.mkt-row:nth-child(1) { transition-delay: 0.04s; }
.mkt-row:nth-child(2) { transition-delay: 0.08s; }
.mkt-row:nth-child(3) { transition-delay: 0.12s; }
.mkt-row:nth-child(4) { transition-delay: 0.16s; }
.mkt-row:nth-child(5) { transition-delay: 0.2s; }
.mkt-row:nth-child(6) { transition-delay: 0.24s; }
.mkt-row:nth-child(7) { transition-delay: 0.28s; }
.mkt-row:nth-child(8) { transition-delay: 0.32s; }

.mkt-lift {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}

.mkt-widget.is-live .mkt-lift {
  transform: translateY(-3px);
  box-shadow: 0 16px 28px -22px rgba(20, 22, 43, 0.45);
}

/* Lift shifts layout inside overflow:hidden frames and clips the top. */
.mkt-how-preview .mkt-widget.is-live .mkt-lift,
.mkt-feat-preview .mkt-widget.is-live .mkt-lift,
.mkt-sys-stage .mkt-widget.is-live .mkt-lift {
  transform: none;
}

.mkt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 1px solid #DEE0E8;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12px;
  color: #14162B;
  white-space: nowrap;
}

.mkt-chip em {
  font-style: normal;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: #656B7E;
}

.mkt-chip.is-you {
  border-color: #D6DAFB;
  background: #EEF0FE;
  color: #4B4CD8;
  font-weight: 600;
}

.mkt-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  flex-shrink: 0;
}

.mkt-status.is-todo { color: #4C5163; background: #F4F5F8; }
.mkt-status.is-progress { color: #4B4CD8; background: #EEF0FE; }
.mkt-status.is-done { color: #15803D; background: #E3F3EA; }

.mkt-prio {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  flex-shrink: 0;
}

.mkt-prio.is-high { color: #B91C1C; background: rgba(239, 68, 68, 0.1); }
.mkt-prio.is-med { color: #B45309; background: rgba(245, 158, 11, 0.14); }
.mkt-prio.is-low { color: #656B7E; background: #F4F5F8; }

.mkt-models {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mkt-model {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 44px;
}

.mkt-model-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: #656B7E;
}

.mkt-grid-models {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mkt-widget.is-compact .mkt-grid-models { gap: 8px; }
.mkt-widget.is-compact .mkt-model-logo { width: 44px; height: 44px; }
.mkt-widget.is-compact .mkt-model-logo .mkt-llm { width: 28px; height: 28px; }

.mkt-model-card {
  border: 1px solid #DEE0E8;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.mkt-model-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #F4F5F8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mkt-model-logo .mkt-llm {
  width: 22px;
  height: 22px;
}

.mkt-model-card .mkt-model-name {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 650;
  color: #14162B;
  letter-spacing: -0.02em;
}

.mkt-board {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.mkt-board th {
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #656B7E;
  font-weight: 500;
  padding: 0 8px 8px;
}

.mkt-board td {
  padding: 8px 8px;
  border-top: 1px solid #F4F5F8;
  color: #14162B;
  vertical-align: middle;
}

.mkt-board tr.is-you td { background: #EEF0FE; }

.mkt-board .mkt-brand-chip {
  padding: 3px 7px 3px 4px;
}

.mkt-board .mkt-brand-chip-ico {
  width: 18px;
  height: 18px;
}

.mkt-board th:nth-child(3),
.mkt-board-score {
  text-align: center;
}

.mkt-board-score {
  width: 56px;
  padding-top: 10px;
  padding-bottom: 8px;
}

.mkt-board-score .mkt-score {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.mkt-board th.mkt-board-sov,
.mkt-board td.mkt-board-sov,
.mkt-board th.mkt-board-mentions,
.mkt-board td.mkt-board-mentions {
  text-align: center;
}

.mkt-sov-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

[data-sys-panel] .mkt-board th {
  padding-bottom: 6px;
}

[data-sys-panel] .mkt-board td {
  padding: 4px 8px;
}

[data-sys-panel] .mkt-board-score {
  padding-top: 6px;
  padding-bottom: 4px;
}

[data-sys-panel] .mkt-board-body {
  padding-top: 14px;
  padding-bottom: 12px;
  gap: 10px;
}

.mkt-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 88px;
  padding-top: 8px;
}

.mkt-widget.is-compact .mkt-bars { height: 64px; }

.mkt-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.mkt-col-bar {
  width: 100%;
  max-width: 22px;
  background: #EDEEF2;
  border-radius: 5px 5px 2px 2px;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.mkt-col-fill {
  width: 100%;
  background: #5B5CE6;
  border-radius: 5px 5px 2px 2px;
  transform: scaleY(1);
  transform-origin: bottom center;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mkt-widget.is-live .mkt-col-fill { transform: scaleY(1); }
.mkt-col.is-peak .mkt-col-fill { background: #3F40C4; }

.mkt-col-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: #9095AB;
}

.mkt-spark {
  width: 100%;
  height: 48px;
  display: block;
}

.mkt-spark path {
  fill: none;
  stroke: #5B5CE6;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mkt-widget.is-live .mkt-spark path { stroke-dashoffset: 0; }

.mkt-field {
  border: 1px solid #DEE0E8;
  background: #FAFAFC;
  border-radius: 10px;
  padding: 8px 12px;
}

.mkt-field-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #656B7E;
}

.mkt-field-value {
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 600;
  color: #14162B;
}

.mkt-proj {
  display: flex;
  gap: 8px;
}

.mkt-proj-tab {
  flex: 1;
  border: 1px solid #DEE0E8;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  font-size: 12px;
  color: #4C5163;
  background: #FFFFFF;
}

.mkt-proj-tab.is-on {
  border-color: #5B5CE6;
  background: #EEF0FE;
  color: #4B4CD8;
  font-weight: 600;
}

.mkt-query {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #EDEEF2;
  border-radius: 10px;
  padding: 6px 10px;
  background: #FAFAFC;
  min-height: 0;
}

.mkt-query-text {
  font-size: 12.5px;
  color: #14162B;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkt-query-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mkt-widget-body.is-queries { gap: 8px; }
.mkt-widget.is-compact .mkt-widget-body.is-queries { justify-content: center; }

.mkt-query .mkt-pill {
  width: 24px;
  height: 24px;
  font-size: 12px;
  border-radius: 7px;
}

.mkt-final-live { height: auto; }

.mkt-how-preview {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 54px -38px rgba(20, 22, 43, 0.5);
  aspect-ratio: 3 / 2;
  min-width: 0;
}

.mkt-how-preview--tall {
  aspect-ratio: 4 / 3;
}

.mkt-how-preview--setup {
  aspect-ratio: 5 / 4;
}

.mkt-how-preview--act {
  aspect-ratio: 1 / 1;
}

.mkt-how-preview .mkt-widget-body {
  overflow: hidden;
}

.mkt-how-preview .mkt-wiz {
  gap: 10px;
}

.mkt-how-preview .mkt-wiz-panel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mkt-how-preview .mkt-wiz-grid {
  align-content: start;
}

.mkt-how-preview .mkt-wiz-card {
  min-height: 0;
}

.mkt-how-preview--setup .mkt-wiz-hits {
  flex: 1;
  justify-content: center;
}

.mkt-how-preview--tall .mkt-stack-svg {
  max-height: 120px;
}

.mkt-how-preview--act .mkt-audit {
  gap: 10px;
}

.mkt-how-preview--act .mkt-site-svg {
  max-height: 168px;
}

.mkt-how-preview--act .mkt-task-split {
  overflow: hidden;
}

.mkt-how-preview--act .mkt-task-pane,
.mkt-how-preview--act .mkt-task-chat {
  padding: 10px;
  gap: 6px;
  overflow: hidden;
  min-height: 0;
}

.mkt-how-preview--act .mkt-task-msg {
  padding: 6px 8px;
  font-size: 11.5px;
}

.mkt-how-preview--act .mkt-task-pane .mkt-widget-muted {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mkt-how-preview--act .mkt-kanban-col > .mkt-kanban-card:nth-child(n+4) {
  display: none;
}

.mkt-how-preview--act .mkt-content-body {
  gap: 8px;
}

.mkt-how-preview--act .mkt-content-open {
  padding: 10px 12px;
  gap: 8px;
}

.mkt-how-preview--act .mkt-content-body > .mkt-content-row:nth-of-type(n+3) {
  display: none;
}

.mkt-how-preview--setup .mkt-wiz-grid.is-prompts > .mkt-wiz-card:not(.is-add):nth-child(n+8) {
  display: none;
}

.mkt-how-preview--setup .mkt-wiz-grid.is-dense > .mkt-wiz-card:not(.is-add):nth-child(n+10) {
  display: none;
}

.mkt-how-preview .mkt-board tbody tr:nth-child(n+5) {
  display: none;
}

.mkt-how-preview .mkt-sent-llm:nth-child(n+5) {
  display: none;
}

.mkt-how-preview--act .mkt-strategy .mkt-widget-muted {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mkt-widget-body.mkt-wiz { gap: 14px; }

.mkt-wiz-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mkt-wiz-steps {
  position: relative;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mkt-wiz-steps::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: #E3E5EC;
  z-index: 0;
}

.mkt-wiz-step {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #8B90A3;
}

.mkt-wiz-step-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #DEE0E8;
  background: #FFFFFF;
  color: #656B7E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
}

.mkt-wiz-step.is-on { color: #4B4CD8; }
.mkt-wiz-step.is-on .mkt-wiz-step-dot {
  background: #5B5CE6;
  border-color: #5B5CE6;
  color: #FFFFFF;
}
.mkt-wiz-step.is-done { color: #5B5CE6; }
.mkt-wiz-step.is-done .mkt-wiz-step-dot {
  background: #EEF0FE;
  border-color: #D6DAFB;
  color: #5B5CE6;
}

.mkt-wiz-step-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mkt-wiz-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #DEE0E8;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 7px 8px 7px 12px;
  min-height: 40px;
}

.mkt-wiz-search-ico {
  color: #8B90A3;
  display: flex;
  flex: 0 0 auto;
}

.mkt-wiz-search-field {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #14162B;
  line-height: 1.2;
}

.mkt-wiz-typed {
  display: inline-block;
  max-width: none;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}

.mkt-widget.is-live .mkt-wiz-typed {
  animation: mkt-wiz-type 0.5s steps(4, end) 0.12s forwards;
}

@keyframes mkt-wiz-type {
  to { max-width: 4.2em; }
}

.mkt-wiz-caret {
  display: inline-block;
  width: 1px;
  height: 13px;
  background: #5B5CE6;
  margin-left: 1px;
  vertical-align: -1px;
  opacity: 0;
}

.mkt-widget.is-live .mkt-wiz-caret {
  animation: mkt-wiz-caret 0.7s steps(1) 0.12s 4;
}

@keyframes mkt-wiz-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.mkt-wiz-search-go {
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  background: #5B5CE6;
  border-radius: 8px;
  padding: 7px 12px;
  opacity: 1;
  flex: 0 0 auto;
}

.mkt-widget.is-live .mkt-wiz-search-go {
  animation: mkt-wiz-go 0.25s ease 0.62s forwards;
}

@keyframes mkt-wiz-go {
  to { opacity: 1; }
}

.mkt-wiz-search-placeholder {
  flex: 1;
  font-size: 13px;
  color: #8B90A3;
}

.mkt-wiz-hits {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-wiz-hits .mkt-row { transition-delay: 0.7s; }
.mkt-wiz-hits .mkt-row:nth-child(2) { transition-delay: 0.82s; }
.mkt-wiz-hits .mkt-row:nth-child(3) { transition-delay: 0.94s; }

.mkt-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.mkt-wiz-hit {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #EDEEF2;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 8px 10px;
}

.mkt-wiz-hit.is-on {
  border-color: #5B5CE6;
  background: #F7F8FE;
  box-shadow: inset 0 0 0 1px #5B5CE6;
}

.mkt-wiz-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #EEF0FE;
  color: #4B4CD8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
}

.mkt-wiz-hit.is-on .mkt-wiz-avatar {
  background: #5B5CE6;
  color: #FFFFFF;
}

.mkt-wiz-hit-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mkt-wiz-hit-copy strong {
  font-size: 13.5px;
  color: #14162B;
}

.mkt-wiz-hit-copy span {
  font-size: 11.5px;
  color: #656B7E;
}

.mkt-wiz-btn {
  font-size: 11.5px;
  font-weight: 600;
  color: #FFFFFF;
  background: #5B5CE6;
  border-radius: 8px;
  padding: 6px 10px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.mkt-wiz-btn.is-ghost {
  background: #FFFFFF;
  color: #4B4CD8;
  border: 1px solid #D6DAFB;
}

.mkt-wiz-btn.is-wide {
  align-self: flex-start;
}

.mkt-wiz-hit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.mkt-wiz-hit.is-open {
  flex-wrap: wrap;
}

.mkt-wiz-hit.is-open .mkt-wiz-hit-actions {
  width: 100%;
  padding-left: 42px;
}

.mkt-wiz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mkt-wiz-grid.is-prompts .mkt-wiz-card,
.mkt-wiz-grid.is-dense .mkt-wiz-card {
  min-height: 0;
  padding: 8px;
}

.mkt-wiz-grid.is-dense {
  grid-template-columns: 1fr 1fr;
}

.mkt-wiz-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #EDEEF2;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 10px;
  min-height: 64px;
}

.mkt-wiz-card.is-name {
  min-height: 0;
  align-items: center;
}

.mkt-wiz-card.is-on {
  border-color: #5B5CE6;
  background: #F7F8FE;
  box-shadow: inset 0 0 0 1px #5B5CE6;
}

.mkt-wiz-card.is-add,
.mkt-strategy-add {
  border: 1.5px dashed #5B5CE6;
  background: #EEF0FE;
  color: #4B4CD8;
}

.mkt-wiz-card.is-add .mkt-wiz-card-text {
  font-size: 13px;
  font-weight: 650;
  color: #3D3FCF;
}

.mkt-wiz-add-plus {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #5B5CE6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: #FFFFFF;
  flex: 0 0 auto;
}

.mkt-wiz-card-text {
  font-size: 12px;
  line-height: 1.4;
  color: #14162B;
}

.mkt-wiz-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid #C4C8D6;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex: 0 0 auto;
  margin-top: 1px;
}

.mkt-wiz-card.is-name .mkt-wiz-check { margin-top: 0; }

.mkt-wiz-check.is-on {
  background: #5B5CE6;
  border-color: #5B5CE6;
  color: #FFFFFF;
}

.mkt-widget.is-compact .mkt-wiz-step-label { display: none; }
.mkt-widget.is-compact .mkt-wiz-grid > :nth-child(n+3) { display: none; }
.mkt-widget.is-compact .mkt-wiz-hit:nth-child(n+2) { display: none; }
.mkt-widget.is-compact .mkt-wiz-card { min-height: 58px; }

.mkt-wiz-avatar.is-sm {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
}

.mkt-proj-body { justify-content: flex-start; }

.mkt-select-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #656B7E;
}

.mkt-select {
  border: 1px solid #DEE0E8;
  border-radius: 12px;
  background: #FFFFFF;
  overflow: hidden;
}

.mkt-select-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.mkt-select-trigger strong {
  flex: 1;
  font-size: 14px;
  color: #14162B;
}

.mkt-select-caret { color: #8B90A3; }

.mkt-select-menu {
  border-top: 1px solid #EDEEF2;
}

.mkt-select-opt,
.mkt-select-add {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: #14162B;
}

.mkt-select-opt.is-on {
  background: #F7F8FE;
  color: #4B4CD8;
  font-weight: 600;
}

.mkt-select-radio {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1.5px solid #C4C8D6;
  flex: 0 0 auto;
}

.mkt-select-radio.is-on {
  border-color: #5B5CE6;
  box-shadow: inset 0 0 0 3px #5B5CE6;
}

.mkt-select-add {
  border-top: 1px solid #EDEEF2;
  color: #4B4CD8;
  font-weight: 600;
}

.mkt-select-plus {
  width: 18px;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}

.mkt-audit.is-overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mkt-audit-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
}

.mkt-audit-geo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.mkt-audit-geo-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mkt-audit-geo-copy strong {
  font-size: 14px;
  color: #14162B;
}

.mkt-audit-scan { flex: 0 0 auto; }

.mkt-scan-ring {
  position: relative;
  display: inline-flex;
  width: 88px;
  height: 88px;
  --mkt-scan-c: 201.06;
}

.mkt-scan-ring svg { display: block; }

.mkt-scan-track {
  fill: none;
  stroke: #EEF0FE;
  stroke-width: 8;
}

.mkt-scan-fill {
  fill: none;
  stroke: #5B5CE6;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: var(--mkt-scan-c);
  stroke-dashoffset: var(--mkt-scan-c);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transform-box: fill-box;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mkt-widget.is-live .mkt-scan-fill {
  stroke-dashoffset: calc(var(--mkt-scan-c) * (1 - var(--mkt-scan) / 100));
}

.mkt-scan-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.1;
}

.mkt-scan-label strong {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: #14162B;
}

.mkt-scan-label em {
  font-style: normal;
  font-size: 11px;
  color: #8B90A3;
}

.mkt-scan-label i {
  font-style: normal;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #656B7E;
}

.mkt-audit-stats,
.mkt-audit-metrics,
.mkt-vis-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mkt-vis-metrics.is-quad {
  grid-template-columns: 1fr 1fr;
}

.mkt-stat-tile {
  border: 1px solid #EDEEF2;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mkt-stat-tile span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #656B7E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkt-stat-tile strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: #14162B;
}

.mkt-stat-tile.is-primary { background: #F7F8FE; border-color: #D6DAFB; }
.mkt-stat-tile.is-success { background: #F0FDF4; border-color: #BBF7D0; }
.mkt-stat-tile.is-warn { background: #FFFBEB; border-color: #FDE68A; }
.mkt-stat-tile.is-info { background: #F0F9FF; border-color: #BAE6FD; }

.mkt-kanban {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 0;
}

.mkt-kanban-col {
  background: #FAFAFC;
  border: 1px solid #EDEEF2;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mkt-kanban-h {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: #656B7E;
}

.mkt-kanban-card {
  background: #FFFFFF;
  border: 1px solid #EDEEF2;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mkt-kanban-card.is-done { border-color: #BBF7D0; }
.mkt-kanban-card.is-progress { border-color: #D6DAFB; }

.mkt-kanban-card.is-sm {
  padding: 8px;
}

.mkt-kanban-card.is-sm .mkt-kanban-title {
  font-size: 12px;
}

.mkt-kanban-title {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  color: #14162B;
}

.mkt-kanban-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mkt-chip-soft {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  color: #4B4CD8;
  background: #EEF0FE;
  border-radius: 999px;
  padding: 2px 7px;
}

.mkt-kanban-more {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  border-radius: 7px;
  padding: 5px 8px;
  color: #FFFFFF;
  background: #5B5CE6;
}

.mkt-kanban-more.is-done { background: #22C55E; }

.mkt-task-table,
.mkt-content-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mkt-task-table-row,
.mkt-content-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #EDEEF2;
  border-radius: 10px;
  padding: 8px 10px;
}

.mkt-content-open {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #DEE0E8;
  border-radius: 14px;
  padding: 12px 14px;
  background: #FFFFFF;
}

.mkt-content-open strong {
  font-size: 14px;
  color: #14162B;
  line-height: 1.35;
}

.mkt-content-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mkt-content-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mkt-content-meta {
  font-size: 11.5px;
  font-weight: 600;
  color: #14162B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkt-content-cia {
  align-self: flex-start;
  background: #F97316;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  padding: 7px 12px;
}

.mkt-mention { justify-content: center; }

.mkt-mention-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #DEE0E8;
  border-radius: 14px;
  padding: 14px;
  background: #FFFFFF;
}

.mkt-mention-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mkt-mention-model {
  font-size: 12.5px;
  font-weight: 600;
  color: #14162B;
}

.mkt-mention-query {
  margin-left: auto;
  font-size: 11px;
  color: #656B7E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}

.mkt-mention-quote {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #262A47;
}

.mkt-mention-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mkt-sent-badge {
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 8px;
}

.mkt-sent-badge.is-pos {
  color: #15803D;
  background: rgba(34, 197, 94, 0.12);
}

.mkt-compare { gap: 8px; }

.mkt-compare-legend {
  display: flex;
  gap: 12px;
  font-size: 11.5px;
  color: #4C5163;
}

.mkt-compare-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
}

.mkt-final-live {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #2A2D4A;
  border-radius: 16px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mkt-final-live-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mkt-final-kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A8FB8;
}

.mkt-final-delta {
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  color: #7BD3A6;
}

.mkt-final-live-top p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: #A8ACC8;
}

.mkt-final-live .mkt-score-label { color: #FFFFFF; }
.mkt-final-live .mkt-score-track { stroke: #2A2D4A; }

.mkt-final-spark {
  width: 100%;
  height: 48px;
  display: block;
}

.mkt-final-spark path {
  fill: none;
  stroke: #5B5CE6;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
}

.mkt-widget.is-live .mkt-final-spark path {
  animation: mkt-final-draw 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

@keyframes mkt-final-draw {
  to { stroke-dashoffset: 0; }
}

.mkt-final-llms {
  display: flex;
  gap: 8px;
}

.mkt-final-llm {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: #1C1F3A;
  border: 1px solid #2A2D4A;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(6px);
}

.mkt-widget.is-live .mkt-final-llm {
  animation: mkt-final-llm 0.45s ease forwards;
}

.mkt-widget.is-live .mkt-final-llm:nth-child(1) { animation-delay: 0.2s; }
.mkt-widget.is-live .mkt-final-llm:nth-child(2) { animation-delay: 0.28s; }
.mkt-widget.is-live .mkt-final-llm:nth-child(3) { animation-delay: 0.36s; }
.mkt-widget.is-live .mkt-final-llm:nth-child(4) { animation-delay: 0.44s; }
.mkt-widget.is-live .mkt-final-llm:nth-child(5) { animation-delay: 0.52s; }
.mkt-widget.is-live .mkt-final-llm:nth-child(6) { animation-delay: 0.6s; }

@keyframes mkt-final-llm {
  to { opacity: 1; transform: none; }
}

.mkt-audit-hero {
  align-items: stretch;
}

.mkt-audit-stats.is-inline {
  grid-template-columns: 1fr;
  min-width: 112px;
}

.mkt-site-graph {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.mkt-site-svg {
  width: 100%;
  height: auto;
  display: block;
}

.mkt-site-edge {
  stroke: #E3E5EC;
  stroke-width: 1;
}

.mkt-site-node circle {
  stroke-width: 1.5;
}

.mkt-site-node.is-root circle {
  fill: #EEF0FE;
  stroke: #5B5CE6;
}

.mkt-site-node.is-root text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 650;
  fill: #4B4CD8;
}

.mkt-site-node.is-scanned circle { fill: #5B5CE6; stroke: #4B4CD8; }
.mkt-site-node.is-pending circle { fill: #EDEEF2; stroke: #C4C8D6; }
.mkt-site-node.is-issue circle { fill: #F59E0B; stroke: #D97706; }

.mkt-site-node { opacity: 1; }

.mkt-site-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 11px;
  color: #656B7E;
}

.mkt-site-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
}

.mkt-site-legend i.is-scanned { background: #5B5CE6; }
.mkt-site-legend i.is-pending { background: #C4C8D6; }
.mkt-site-legend i.is-issue { background: #F59E0B; }

.mkt-q-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #4B4CD8;
  background: #EEF0FE;
  border-radius: 999px;
  padding: 4px 9px;
}

.mkt-strategy-pin { margin-top: 10px; }

.mkt-strategy-add {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 650;
}

.mkt-task-num {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #F4F5F8;
  color: #656B7E;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.mkt-task.is-lead .mkt-task-body,
.mkt-task.is-hover-open .mkt-task-body { display: none; }

.mkt-feat-card.is-feat-hover .mkt-task.is-lead {
  background: #F7F8FE;
  box-shadow: inset 3px 0 0 #5B5CE6;
}

.mkt-task-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10px;
  min-height: 0;
  flex: 1;
}

.mkt-task-pane,
.mkt-task-chat {
  border: 1px solid #EDEEF2;
  border-radius: 12px;
  padding: 12px;
  background: #FFFFFF;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-task-pane-head {
  display: flex;
  gap: 6px;
}

.mkt-task-pane strong {
  font-size: 13.5px;
  color: #14162B;
  line-height: 1.35;
}

.mkt-task-pane-block .mkt-widget-muted { margin: 4px 0 0; }

.mkt-task-pane [data-task-refined] {
  display: block;
  margin-top: 8px;
  color: #4B4CD8;
  background: #EEF0FE;
  border-radius: 8px;
  padding: 8px;
}

.mkt-task-chat { background: #FAFAFC; }

.mkt-task-chat-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  color: #14162B;
}

.mkt-task-msg {
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 10px;
}

.mkt-task-msg.is-bot {
  background: #FFFFFF;
  border: 1px solid #EDEEF2;
  color: #262A47;
  align-self: flex-start;
}

.mkt-task-msg.is-user {
  background: #14162B;
  color: #FFFFFF;
  align-self: flex-end;
  max-width: 92%;
}

.mkt-mention-card.is-more { display: none; }

.mkt-sent-badge.is-neu {
  color: #B45309;
  background: rgba(245, 158, 11, 0.14);
}

.mkt-widget-body.is-queries { position: relative; }

.mkt-query-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.mkt-recs-demo {
  display: none;
  flex-direction: column;
  gap: 6px;
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 10px;
  overflow: hidden;
  background: #FAFAFC;
}

.mkt-feat-card.is-feat-hover .mkt-recs-demo { display: flex; }

.mkt-recs-demo .mkt-row {
  opacity: 1;
  transform: none;
}

.mkt-recs-table .mkt-recs-row:nth-child(n+4) { display: none; }

.mkt-recs-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  flex: 0 0 auto;
}

.mkt-recs-field {
  border: 1px solid #D6DAFB;
  background: #F7F8FE;
  border-radius: 10px;
  padding: 6px 8px;
}

.mkt-recs-field strong {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: #14162B;
}

.mkt-recs-table { display: flex; flex-direction: column; gap: 6px; }

.mkt-recs-head,
.mkt-recs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 72px;
  gap: 8px;
  align-items: center;
}

.mkt-recs-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #656B7E;
}

.mkt-recs-row {
  border: 1px solid #EDEEF2;
  border-radius: 10px;
  padding: 7px 10px;
  background: #FFFFFF;
}

.mkt-recs-dot {
  text-align: center;
  font-weight: 700;
  font-size: 13px;
}

.mkt-recs-dot.is-yes { color: #15803D; }
.mkt-recs-dot.is-no { color: #C4C8D6; }

.mkt-compare-legend.is-dark,
.mkt-compare-legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
}

.mkt-compare-legend .is-you i,
.mkt-compare-legend .is-them i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
}

.mkt-compare-legend .is-you { color: #4B4CD8; }
.mkt-compare-legend .is-you i { background: #5B5CE6; }
.mkt-compare-legend .is-them { color: #656B7E; }
.mkt-compare-legend .is-them i { background: #94A3B8; }

.mkt-compare-legend.is-dark .is-you { color: #C7C9F8; }
.mkt-compare-legend.is-dark .is-them { color: #8A8FB8; }
.mkt-compare-legend.is-dark .is-them i { background: #8A8FB8; }

.mkt-line.is-wide { stroke-width: 2.8; }

.mkt-line-fill {
  opacity: 1;
  transition: opacity 0.6s ease 0.2s;
}

.mkt-widget.is-live .mkt-line-fill { opacity: 1; }

.mkt-final-live .mkt-line-grid { stroke: #3A3E62; }
.mkt-final-live .mkt-line-axis { fill: #8A8FB8; }
.mkt-final-live .mkt-lines { height: 158px; background: transparent; }

.mkt-final-caption {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #A8ACC8;
}

.mkt-widget.is-compact .mkt-task-split { grid-template-columns: 1fr; }
.mkt-widget.is-compact .mkt-task-chat { display: none; }
.mkt-widget.is-compact .mkt-audit-stats.is-inline { grid-template-columns: repeat(3, 1fr); min-width: 0; }

@media (max-width: 640px) {
  .mkt-how-preview--act { aspect-ratio: 1 / 1 !important; }
  .mkt-task-split { grid-template-columns: 1fr; }
}

.mkt-task-table-title,
.mkt-content-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #14162B;
  line-height: 1.35;
}

.mkt-task-plus,
.mkt-content-write {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #5B5CE6;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
}

.mkt-content-write { background: #F97316; }

.mkt-content-more {
  font-size: 11.5px;
  font-weight: 600;
  color: #4B4CD8;
  white-space: nowrap;
}

.mkt-content-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mkt-content-head strong {
  font-size: 14px;
  color: #14162B;
}

.mkt-task-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mkt-task-detail-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mkt-task-detail-head strong {
  font-size: 15px;
  color: #14162B;
}

.mkt-task-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mkt-strategy-body { justify-content: flex-start; }

.mkt-strategy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #DEE0E8;
  border-radius: 14px;
  padding: 14px;
  background: #FFFFFF;
}

.mkt-strategy.is-peek {
  opacity: 0.72;
  padding: 12px 14px;
}

.mkt-strategy-main strong {
  display: block;
  font-size: 15px;
  color: #14162B;
  margin-bottom: 6px;
}

.mkt-strategy-queries {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.mkt-strategy-metrics {
  display: flex;
  gap: 18px;
}

.mkt-strategy-metric {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #656B7E;
}

.mkt-widget.is-compact .mkt-task-table-row:nth-child(n+4),
.mkt-widget.is-compact .mkt-content-row:nth-child(n+4) { display: none; }
.mkt-widget.is-compact .mkt-audit-hero { grid-template-columns: 1fr; }
.mkt-widget.is-compact .mkt-audit-metrics { display: none; }
.mkt-widget.is-compact .mkt-kanban { grid-template-columns: 1fr 1fr; }
.mkt-widget.is-compact .mkt-task-detail-grid { grid-template-columns: 1fr; }

.mkt-how-preview > .mkt-widget {
  position: absolute;
  inset: 0;
}

.mkt-feat-preview {
  background: #FAFAFC;
  border: 1px solid #EDEEF2;
  border-radius: 12px;
  overflow: hidden;
  height: 236px;
}

.mkt-feat-preview .mkt-widget { height: 100%; background: transparent; }

.mkt-sys-stage { position: relative; }
.mkt-sys-stage [data-sys-panel-item] {
  position: absolute;
  inset: 0;
}
[data-sys-panel] .mkt-widget { height: 100%; }
[data-sys-panel] .mkt-vis-body .mkt-lines { height: 100%; }
.mkt-widget.is-compact .mkt-models .mkt-score,
.mkt-widget.is-compact .mkt-model-card .mkt-score { display: none; }
.mkt-widget.is-compact .mkt-board { font-size: 12px; }
.mkt-widget.is-compact .mkt-board th:nth-child(n+4),
.mkt-widget.is-compact .mkt-board td:nth-child(n+4) { display: none; }
.mkt-widget.is-compact .mkt-board tbody tr:nth-child(n+4) { display: none; }
.mkt-widget.is-compact .mkt-widget-body:not(.is-queries) .mkt-query:nth-child(n+5) { display: none; }
.mkt-widget.is-compact .mkt-widget-body.is-queries .mkt-query:nth-child(n+7) { display: none; }

.mkt-vis-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mkt-vis-sov {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: #656B7E;
}

.mkt-vis-sov strong {
  font-size: 16px;
  color: #14162B;
}

.mkt-vis-body {
  gap: 10px;
}

.mkt-vis-mentions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.mkt-vis-bars {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.mkt-vis-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px 28px;
  align-items: center;
}

.mkt-vis-share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 22px;
  width: 100%;
}

.mkt-vis-share span {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 7px;
  font-size: 11px;
  color: #4C5163;
}

.mkt-vis-share i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: block;
}

.mkt-vis-share strong {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: #14162B;
  white-space: nowrap;
}

.mkt-stack-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 520 / 148;
  max-height: 168px;
  display: block;
}

.mkt-widget.is-compact .mkt-vis-foot { display: none; }
.mkt-widget.is-compact .mkt-stack-svg { aspect-ratio: 520 / 118; max-height: 118px; }
.mkt-vis-mentions:has(.is-quad) .mkt-stack-svg,
.mkt-widget.is-compact .mkt-vis-mentions .mkt-stack-svg { max-height: 72px; aspect-ratio: 520 / 72; }
.mkt-widget.is-compact .mkt-vis-metrics.is-quad { gap: 6px; }
.mkt-widget.is-compact .mkt-vis-metrics .mkt-stat-tile { padding: 7px 8px; }
.mkt-widget.is-compact .mkt-stat-tile strong { font-size: 14px; flex-wrap: wrap; }

.mkt-stack-grow {
  transform: scaleY(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mkt-widget.is-live .mkt-stack-grow { transform: scaleY(1); }

.mkt-lines {
  width: 100%;
  height: 188px;
  display: block;
  flex: 1 1 auto;
  min-height: 120px;
}

.mkt-widget.is-compact .mkt-lines { height: 112px; flex: 1 1 auto; min-height: 0; }

.mkt-line-grid {
  stroke: #EDEEF2;
  stroke-width: 1;
}

.mkt-line-axis {
  fill: #9095AB;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
}

.mkt-line {
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mkt-widget.is-live .mkt-line { stroke-dashoffset: 0; }

.mkt-line-dot {
  opacity: 1;
  transition: opacity 0.3s ease 0.7s;
}

.mkt-widget.is-live .mkt-line-dot { opacity: 1; }

.mkt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.mkt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #656B7E;
}

.mkt-legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: block;
}

.mkt-pos-list { display: flex; flex-direction: column; }

.mkt-pos-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid #F4F5F8;
}

.mkt-pos-row:last-child { border-bottom: 0; }

.mkt-pos-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: #14162B;
}

.mkt-sent {
  display: grid;
  grid-template-columns: minmax(132px, 0.36fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-height: 0;
}

.mkt-sent-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.mkt-sent-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #4C5163;
}

.mkt-sent-legend i,
.mkt-sent-legend span i,
.mkt-cite-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}

.mkt-sent-legend i,
.mkt-sent-legend span i {
  margin-right: 0;
}

.mkt-sent-legend > span {
  display: grid;
  grid-template-columns: 8px max-content;
  column-gap: 8px;
  align-items: center;
}

.mkt-sent-legend .mkt-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: block;
}

.mkt-cite-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mkt-sent-llms {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.mkt-sent-llm {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.mkt-sent-llm-mark {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mkt-sent-llm-mark .mkt-llm {
  width: 22px;
  height: 22px;
}

.mkt-sent-llm-main {
  flex: 1;
  min-width: 0;
}

.mkt-sent-llm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.mkt-mix-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono', monospace;
  white-space: nowrap;
  border: 1px solid #DEE0E8;
  border-radius: 6px;
  background: #FFFFFF;
  padding: 2px 8px;
}

.mkt-mix-badge i {
  font-style: normal;
  color: #9095AB;
  font-size: 11px;
}

.mkt-mix-badge b {
  font-size: 11.5px;
  font-weight: 600;
  padding: 0;
  background: none;
}

.mkt-mix-badge .is-pos { color: #16A34A; }
.mkt-mix-badge .is-neu { color: #D97706; }
.mkt-mix-badge .is-neg { color: #DC2626; }

.mkt-donut {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.mkt-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mkt-donut-center strong {
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #14162B;
  line-height: 1;
  padding: 0 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
}

.mkt-donut-center em {
  font-style: normal;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #656B7E;
  margin-top: 3px;
}

.mkt-cite-share {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  gap: 14px;
}

.mkt-cite-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #4C5163;
}

.mkt-cite-legend strong {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
}

.mkt-cite-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mkt-cite-url {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: #14162B;
}

.mkt-cite-table td em {
  display: inline-block;
  margin-left: 8px;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4B4CD8;
}

.mkt-share-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #EDEEF2;
}

.mkt-task {
  border: 1px solid #EDEEF2;
  border-left-width: 3px;
  border-radius: 10px;
  background: #FFFFFF;
}

.mkt-task.is-high { border-left-color: #EF4444; }
.mkt-task.is-med { border-left-color: #F59E0B; }
.mkt-task.is-low { border-left-color: #C4C8D6; }
.mkt-task.is-open { background: #FAFAFC; }

.mkt-task-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.mkt-task-title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #14162B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mkt-pages {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #656B7E;
  background: #F4F5F8;
  border-radius: 6px;
  padding: 3px 7px;
  flex-shrink: 0;
}

.mkt-chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #9095AB;
  border-bottom: 1.5px solid #9095AB;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.mkt-task.is-open .mkt-chevron { transform: rotate(-135deg); }

.mkt-task-body { padding: 2px 12px 12px 12px; display: flex; flex-direction: column; gap: 10px; }

.mkt-more-dots {
  letter-spacing: 0.14em;
  color: #C4C8D6;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px 0 0;
  font-weight: 500;
}

.mkt-comp-box {
  border: 1px solid #EDEEF2;
  background: #FAFAFC;
  border-radius: 12px;
  padding: 14px 16px;
}

.mkt-comp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mkt-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  outline: 1px solid #DEE0E8;
  outline-offset: -1px;
  background: transparent;
  border-radius: 6px;
  padding: 4px 8px 4px 5px;
  color: #14162B;
}

.mkt-brand-chip-ico {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #E8F1FB;
  color: #2563EB;
  flex-shrink: 0;
}

.mkt-brand-chip strong {
  font-size: 13px;
  font-weight: 600;
  color: #14162B;
}

.mkt-brand-chip.is-you {
  outline-color: #D6DAFB;
  background: #EEF0FE;
}

.mkt-brand-chip.is-you .mkt-brand-chip-ico {
  background: #5B5CE6;
  color: #FFFFFF;
}

.mkt-brand-chip.is-you strong { color: #4B4CD8; }

.mkt-page-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #14162B;
  background: #F4F5F8;
  border-radius: 6px;
  padding: 2px 7px;
  margin-right: 4px;
}

.mkt-path-chip {
  display: inline-flex;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #4C5163;
  outline: 1px solid #DEE0E8;
  outline-offset: -1px;
  border-radius: 6px;
  padding: 3px 8px;
  background: #FFFFFF;
}

.mkt-path-chip.is-more {
  letter-spacing: 0.16em;
  color: #9095AB;
  padding: 3px 10px;
}

.mkt-task-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mkt-task-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}

.mkt-widget.is-compact .mkt-legend-item:nth-child(n+5) { display: none; }
.mkt-widget.is-compact .mkt-content-metrics { grid-template-columns: 1fr 1fr; }
.mkt-widget.is-compact .mkt-strategy.is-peek { display: none; }
.mkt-widget.is-compact .mkt-sent { grid-template-columns: 1fr; }
.mkt-widget.is-compact .mkt-sent-llm:nth-child(n+3) { display: none; }
.mkt-widget.is-compact .mkt-cite-table tbody tr:nth-child(n+4) { display: none; }
.mkt-widget.is-compact .mkt-widget-body > .mkt-task:nth-child(n+4) { display: none; }
.mkt-widget.is-compact .mkt-task-cols { grid-template-columns: 1fr; }
.mkt-widget.is-compact .mkt-pos-row:nth-child(n+5) { display: none; }

@media (max-width: 640px) {
  .mkt-widget-body { padding: 14px; }
  .mkt-board th:nth-child(n+4),
  .mkt-board td:nth-child(n+4) { display: none; }
  .mkt-sys-stage,
  .mkt-how-preview,
  .mkt-how-preview--setup,
  .mkt-how-preview--tall,
  .mkt-how-preview--act { aspect-ratio: 1 / 1 !important; }
  .mkt-how-preview .mkt-wiz-grid.is-prompts > :nth-child(n+7) { display: none; }
  .mkt-how-preview .mkt-wiz-grid.is-dense > :nth-child(n+9) { display: none; }
  .mkt-how-preview .mkt-wiz-hit:nth-child(n+4) { display: none; }
  .mkt-content-metrics { grid-template-columns: 1fr 1fr; }
  .mkt-how-preview .mkt-kanban-col:nth-child(n+3) { display: none; }
  [data-sys-panel] .mkt-models,
  .mkt-how-preview .mkt-models { display: none; }
  [data-sys-panel] .mkt-widget-muted,
  .mkt-how-preview .mkt-widget-muted {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mkt-sent { grid-template-columns: 1fr; }
  .mkt-sent-llm:nth-child(n+4) { display: none; }
  .mkt-task-cols { grid-template-columns: 1fr; }
  .mkt-pages { display: none; }
}

/* Same grayscale wordmarks as /audyt */
.audyt-llm-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  column-gap: 2.5rem;
  row-gap: 1rem;
}

.audyt-llm-logos.is-start {
  justify-content: flex-start;
}

@media (min-width: 640px) {
  .audyt-llm-logos { column-gap: 3rem; }
}

.audyt-llm-logo {
  display: block;
  height: 1.25rem;
  width: auto;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0.9;
  filter: brightness(0) saturate(100%) invert(64%) sepia(7%) saturate(489%) hue-rotate(176deg) brightness(91%) contrast(88%);
  transition: opacity 0.2s, filter 0.2s;
}

@media (min-width: 640px) {
  .audyt-llm-logo { height: 1.375rem; }
}

.audyt-llm-logo:hover {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(49%) sepia(8%) saturate(571%) hue-rotate(176deg) brightness(88%) contrast(88%);
}

.audyt-llm-logo[data-llm="claude"] { height: 1.1875rem; }
.audyt-llm-logo[data-llm="gemini"] { height: 1.1875rem; }

@media (min-width: 640px) {
  .audyt-llm-logo[data-llm="claude"] { height: 1.25rem; }
  .audyt-llm-logo[data-llm="gemini"] { height: 1.3125rem; }
}

/* ----------------------------------------------------------- home cennik -- */

.mkt-cnk {
  background: #F4F5F8;
  /* 110px jak każda sekcja treści na landingu (przegląd odstępów przed wdrożeniem). */
  padding: 110px 0;
  border-top: 1px solid #EDEEF2;
}

.mkt-cnk-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.mkt-cnk-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.mkt-cnk-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5F6478;
}

.mkt-cnk-title {
  margin: 14px 0 0;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: #14162B;
  text-wrap: balance;
}

.mkt-cnk-lead {
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: #4C5163;
  text-wrap: pretty;
}

.mkt-cnk-shell {
  margin: 36px 0 0;
  background: #FFFFFF;
  border: 1px solid #E6E4FB;
  border-radius: 22px;
  padding: 26px 26px 30px;
  box-shadow: 0 34px 70px -56px rgba(20, 22, 43, 0.55);
}

.mkt-cnk-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/*
  Zdanie, które bez JS staje w miejscu paska z walutą i rozliczeniem (patrz <noscript>
  w partials/marketing/pricing/box). Pasek znika, bo jego kontrolki nie mają jak zadziałać,
  a to zdanie mówi dokładnie to, co pokazują liczby pod nim: za miesiąc, w walucie domyślnej
  dla języka, plus informacja o rozliczeniu rocznym, która razem z paskiem znikała z tych
  stron bez śladu. #5F6478 to kolor .mkt-cnk-currency-label — waga etykiety, którą zdanie
  zastępuje. margin:0, bo odstęp do kart niesie .mkt-cnk-grid (22px), tak samo jak niósł
  go przy pasku.

  UWAGA na 13.5px: obowiązuje dopiero od 645px. Niżej wygrywa wspólna typografia mobilna
  z tego samego pliku (@media max-width:640px { p { font-size: 14px !important } }), więc
  zdanie renderuje się tam 14px. Różnica pół piksela jest bez znaczenia wizualnego, ale
  deklaracja poniżej jest w tym paśmie bezczynna i nie należy jej czytać jako obowiązującej.

  Bez własnego max-width. Zmierzone co 5px od 320 do 1100px na czterech stronach z boxem,
  bez JS: 42px (dwa wiersze, po zdaniu na wiersz) do 425px po polsku i do 395px po angielsku,
  dalej jeden wiersz — 21px do 640px, 20.25px do 995px, 18.23px od 1000px, gdzie body dostaje
  zoom .9. Żadnego przewijania w poziomie na całym zakresie.

  Drugie zdanie jest związane twardymi spacjami w partialu, więc przechodzi do niższego wiersza
  w całości. Bez tego przy 390-425px zostawało samo „−16%.”, oderwane od swojej etykiety.
  Twarda spacja po „w” przychodzi z $tie, więc jednoliterowe słowo nie kończy wiersza.
*/
.mkt-cnk-nojs-basis {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5F6478;
}

.mkt-cnk-cycle {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  cursor: pointer;
  user-select: none;
}

.mkt-cnk-cycle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mkt-cnk-cycle-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #D3D6E1;
  flex: 0 0 auto;
  transition: background 0.18s ease;
}

.mkt-cnk-cycle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(20, 22, 43, 0.28);
  transition: transform 0.18s ease;
}

.mkt-cnk-cycle-input:checked + .mkt-cnk-cycle-track {
  background: #5B5CE6;
}

.mkt-cnk-cycle-input:checked + .mkt-cnk-cycle-track::after {
  transform: translateX(18px);
}

.mkt-cnk-cycle-text {
  font-size: 14px;
  font-weight: 500;
  color: #14162B;
  white-space: nowrap;
}

.mkt-cnk-save {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #276A4D;
  background: #E3F3EA;
  padding: 3px 7px;
  border-radius: 6px;
}

.mkt-cnk-currency {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mkt-cnk-back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  border: 0;
  background: transparent;
  color: #5B5CE6;
  font-family: Poppins, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.mkt-cnk-back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mkt-cnk-shell.is-calc-focus .mkt-cnk-compare-line {
  display: none !important;
}

.mkt-cnk-currency-label {
  font-size: 13.5px;
  color: #5F6478;
}

.mkt-cnk-currency-select,
.mkt-cnk-prompt-select,
.mkt-cnk-freq {
  font-family: Poppins, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #14162B;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
}

.mkt-cnk-prompt-select {
  max-width: 100%;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 8px;
}

.mkt-cnk-grid {
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.mkt-cnk-card,
.mkt-cnk-mini,
.mkt-cnk-flex {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 16px;
  cursor: pointer;
}

.mkt-cnk-card {
  padding: 22px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mkt-cnk-card.is-recommended {
  background: var(--mkt-surface, #FAFAFC);
}

.mkt-cnk-card.is-selected,
.mkt-cnk-mini.is-selected,
.mkt-cnk-flex.is-selected {
  z-index: 3;
  background: var(--mkt-surface, #FAFAFC);
  border-color: #5B5CE6;
  box-shadow: 0 0 0 1px #5B5CE6 inset, 0 18px 40px -34px rgba(91, 92, 230, 0.7);
}

.mkt-cnk-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #5B5CE6;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.mkt-cnk-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.mkt-cnk-name {
  flex: 1;
  font-size: 19px;
  font-weight: 600;
  color: #14162B;
}

.mkt-cnk-radio {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  border: 1.5px solid #D3D6E1;
  background: #FFFFFF;
}

.mkt-cnk-card.is-selected .mkt-cnk-radio {
  border-color: #5B5CE6;
  background-color: #5B5CE6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.mkt-cnk-benefit {
  font-size: 13px;
  line-height: 1.5;
  color: #5F6478;
}

.mkt-cnk-price-row {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.mkt-cnk-price {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #5B5CE6;
  white-space: nowrap;
}

.mkt-cnk-price.is-compact {
  font-size: 21px;
}

.mkt-cnk-cycle-label {
  font-size: 12.5px;
  color: #656B7E;
}

.mkt-cnk-credit-row {
  margin-top: 3px;
  min-height: 30px;
  display: flex;
  align-items: center;
  width: 100%;
}

.mkt-cnk-credit-text {
  font-size: 12px;
  color: #5F6478;
}

.mkt-cnk-credit-dd {
  position: relative;
  width: 100%;
}

.mkt-cnk-credit-dd[hidden] {
  display: none !important;
}

.mkt-cnk-credit-dd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #14162B;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
}

.mkt-cnk-credit-dd.is-open .mkt-cnk-credit-dd-btn {
  border-color: #5B5CE6;
}

.mkt-cnk-credit-dd-chevron {
  flex: 0 0 auto;
  color: #656B7E;
  transition: transform 0.15s ease;
}

.mkt-cnk-credit-dd.is-open .mkt-cnk-credit-dd-chevron {
  transform: rotate(180deg);
}

.mkt-cnk-credit-menu {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + 6px);
  z-index: 8;
  min-width: 100%;
  width: max(100%, 280px);
  background: #FFFFFF;
  border: 1px solid #E6E8F0;
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(20, 22, 43, 0.4);
  padding: 6px;
}

.mkt-cnk-credit-menu[hidden] {
  display: none !important;
}

.mkt-cnk-card:last-child .mkt-cnk-credit-menu {
  left: auto;
  right: 0;
}

.mkt-cnk-credit-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #14162B;
  text-align: left;
  white-space: nowrap;
}

.mkt-cnk-credit-option:hover {
  background: #F4F5FA;
}

.mkt-cnk-credit-option.is-selected {
  background: #5B5CE6;
  color: #FFFFFF;
}

.mkt-cnk-credit-option.is-selected:hover {
  background: #4F50D6;
}

.mkt-cnk-credit-option-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.mkt-cnk-credit-option-price {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #656B7E;
  white-space: nowrap;
}

.mkt-cnk-credit-option.is-selected .mkt-cnk-credit-option-price {
  color: #FFFFFF;
}

.mkt-cnk-credit-option-cycle {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}

.mkt-cnk-credit-option-cycle[hidden] {
  display: none !important;
}

.mkt-cnk-credit-included {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: #5B5CE6;
  white-space: nowrap;
}

.mkt-cnk-credit-option.is-selected .mkt-cnk-credit-included {
  color: #FFFFFF;
}

.mkt-cnk-credit-save {
  flex: 0 0 auto;
}

.mkt-cnk-credit-option.is-selected .mkt-cnk-credit-save {
  color: #276A4D;
  background: #E3F3EA;
}

.mkt-cnk-perks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.mkt-cnk-perks[hidden] {
  display: none !important;
}

.mkt-cnk-perk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #4C5163;
}

.mkt-cnk-perk-check {
  color: #5B5CE6;
  display: inline-flex;
  margin-top: 1px;
  flex: 0 0 auto;
}

.mkt-cnk-pills {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mkt-cnk-prompt-pill {
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 500;
  color: #14162B;
  border: 1px solid #DEE0E8;
  border-radius: 999px;
  padding: 5px 12px;
}

.mkt-cnk-models {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mkt-cnk-pills + .mkt-cnk-models {
  margin-top: 1px;
}

.mkt-cnk-models .mkt-cnk-prompt-pill {
  margin-top: 0;
}

.mkt-cnk-marks {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.mkt-cnk-marks .mkt-cnk-tip {
  align-items: center;
}

.mkt-cnk-marks .mkt-cnk-tip-bubble {
  max-width: none;
  padding: 5px 8px;
  font-size: 11px;
  white-space: nowrap;
}

.mkt-cnk-mark,
.mkt-cnk-models .pricing-preset-model-mark {
  display: block;
  height: 11px;
  width: auto;
  flex-shrink: 0;
}

.mkt-cnk-websearch,
.mkt-cnk-models .pricing-preset-websearch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1px solid #EEF1F5;
  border-radius: 4px;
  color: #64748B;
}

.mkt-cnk-flex > .mkt-cnk-customize {
  display: none;
}

.mkt-cnk-customize {
  position: absolute;
  right: 16px;
  bottom: -14px;
  left: auto;
  border: 1px solid #DEE0E8;
  background: #FFFFFF;
  color: #5B5CE6;
  font-family: Poppins, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 6px 16px -10px rgba(20, 22, 43, 0.4);
  z-index: 2;
}

.mkt-cnk-bottom {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.mkt-cnk-bottom[hidden],
[data-cnk-plans][hidden] {
  display: none !important;
}

.mkt-cnk-mini {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mkt-cnk-mini-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 160px;
}

.mkt-cnk-mini-title {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.mkt-cnk-mini-tag,
.mkt-cnk-flex-desc {
  font-size: 13px;
  color: #5F6478;
}

.mkt-cnk-mini .mkt-cnk-name {
  font-size: 16px;
}

.mkt-cnk-mini .mkt-cnk-models {
  margin-top: 0;
}

.mkt-cnk-mini .mkt-cnk-price-row {
  margin-top: 0;
}

/* Najszersza karta na stronie (zmierzone: 1082x76 px przy 1440) i jedyna, która ciągnie
   się przez całą szerokość .mkt-cnk-shell — renderuje się na /pl, /pl/cennik, / i /pricing.
   Dlatego jej podłoże jest widoczne mocniej niż podłoże trzech kafli planów nad nią i to
   od niej zaczęło się pytanie „czy tło nie powinno być bardziej białe?”.

   #F7F8FE → --mkt-surface. #F7F8FE ma wobec bieli 1,0599:1, a wobec szarego pasma tylko
   1,0285:1: kleiło się do pasma, nie do panelu, więc na białym .mkt-cnk-shell karta czytała
   się jak dziura wycięta w panelu. #FAFAFC to 1,0425 wobec bieli i 1,0458 wobec pasma —
   jedyny odcień rodziny, który odsuwa się od obu tak samo (blok „podłoża” wyżej).

   Uwaga na przyszłość: wariant .mkt-cnk-flex.is-selected NIGDY nie jest malowany. Kliknięcie
   karty otwiera kalkulator, a sama karta schodzi do 0x0 (zmierzone na /pl/cennik: spoczynek
   1082x76, po kliknięciu 0x0 przy klasie is-selected, a widoczny zostaje .mkt-cnk-calc-summary
   411x341 na #FAFAFC). Poprzednia runda podmieniła właśnie ten martwy wariant i zostawiła tę
   regułę — czyli jedyną, którą ktokolwiek widzi. */
.mkt-cnk-flex {
  background: var(--mkt-surface, #FAFAFC);
  border-color: #D6DAFB;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mkt-cnk-flex:hover {
  border-color: #B9BEF7;
}

.mkt-cnk-flex-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 220px;
}

.mkt-cnk-flex .mkt-cnk-name {
  font-size: 16px;
}

.mkt-cnk-flex-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: #4C5163;
}

.mkt-cnk-flex-cta {
  flex: 0 0 auto;
  background: #FFFFFF;
  border: 1px solid #D6DAFB;
  color: #5B5CE6;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 9px;
}

.mkt-cnk-calc-wrap {
  margin: 18px 0 0;
}

.mkt-cnk-calc-wrap[hidden] {
  display: none !important;
}

.mkt-cnk-calc {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.85fr);
  gap: 20px;
  align-items: start;
  margin: 0;
  animation: cnkRise 0.24s ease both;
}

.mkt-cnk-calc-box {
  position: relative;
  z-index: 4;
  margin: 0;
  border: 1px solid #E3E5EC;
  border-radius: 16px;
  overflow: visible;
  background: #FFFFFF;
}

.mkt-cnk-calc-summary {
  cursor: default;
}

.mkt-cnk-calc-models {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.mkt-cnk-calc-label,
.mkt-cnk-calc-row-label {
  font-size: 13.5px;
  color: #5F6478;
}

.mkt-cnk-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 10px;
}

.mkt-cnk-model {
  border: 1px solid #E3E5EC;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.mkt-cnk-model:has(.mkt-cnk-model-check:checked) {
  border-color: #C9CCF5;
  background: var(--mkt-surface, #FAFAFC);
}

.mkt-cnk-model-logo {
  height: 18px;
  width: auto;
  max-width: calc(100% - 28px);
  object-fit: contain;
  object-position: left center;
  flex: 1 1 auto;
}

.mkt-cnk-model-check {
  appearance: none;
  width: 19px;
  height: 19px;
  border-radius: 5px;
  border: 1.5px solid #D3D6E1;
  background: #FFFFFF;
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  cursor: pointer;
}

.mkt-cnk-model-check:checked {
  background: #5B5CE6;
  border-color: #5B5CE6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.mkt-cnk-calc-row {
  position: relative;
  padding: 14px 18px;
  border-top: 1px solid #EDEEF2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mkt-cnk-calc-row .mkt-cnk-stepper,
.mkt-cnk-calc-row .mkt-cnk-credit-dd,
.mkt-cnk-calc-row .mkt-cnk-freq {
  box-sizing: border-box;
  width: 160px;
  flex: 0 0 160px;
  min-width: 0;
}

.mkt-cnk-calc-row .mkt-cnk-stepper {
  overflow: hidden;
}

.mkt-cnk-calc-row .mkt-cnk-step {
  flex: 0 0 34px;
}

.mkt-cnk-calc-row .mkt-cnk-step-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.mkt-cnk-calc-row .mkt-cnk-credit-dd-btn {
  min-width: 0;
  height: 34px;
  padding: 6px 10px;
  box-sizing: border-box;
}

.mkt-cnk-calc-row .mkt-cnk-credit-dd-btn [data-pricing-credit-current] {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-cnk-calc-row .mkt-cnk-credit-menu {
  left: auto;
  right: 0;
  width: max-content;
  min-width: 360px;
  max-width: min(420px, calc(100vw - 32px));
  max-height: 280px;
  overflow-y: auto;
}

.mkt-cnk-calc-row .mkt-cnk-freq {
  height: 34px;
  padding: 6px 10px;
}

.mkt-cnk-calc-row-label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mkt-cnk-info {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #DEE0E8;
  color: #5F6478;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
}

.mkt-cnk-tip {
  position: relative;
  display: inline-flex;
  z-index: 6;
}

.mkt-cnk-tip-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #14162B;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  box-shadow: 0 10px 24px -16px rgba(20, 22, 43, 0.7);
}

.mkt-cnk-tip:hover .mkt-cnk-tip-bubble,
.mkt-cnk-tip:focus-within .mkt-cnk-tip-bubble {
  opacity: 1;
}

.mkt-cnk-switch {
  margin: 0;
  cursor: pointer;
}

.mkt-cnk-switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mkt-cnk-switch-track {
  position: relative;
  display: block;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #D3D6E1;
}

.mkt-cnk-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(20, 22, 43, 0.28);
  transition: transform 0.18s ease;
}

.mkt-cnk-switch-input:checked + .mkt-cnk-switch-track {
  background: #5B5CE6;
}

.mkt-cnk-switch-input:checked + .mkt-cnk-switch-track::after {
  transform: translateX(18px);
}

.mkt-cnk-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #DEE0E8;
  border-radius: 9px;
  overflow: hidden;
}

.mkt-cnk-step,
.mkt-cnk-step-input {
  border: 0;
  background: #FFFFFF;
  color: #14162B;
  font-family: Poppins, sans-serif;
}

.mkt-cnk-step {
  width: 34px;
  height: 34px;
  font-size: 15px;
  cursor: pointer;
}

.mkt-cnk-step-input {
  width: 72px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  border-left: 1px solid #EDEEF2;
  border-right: 1px solid #EDEEF2;
  height: 34px;
}

.mkt-cnk-actions {
  margin: 30px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.mkt-cnk-cta {
  background: #5B5CE6;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  padding: 16px 64px;
  border-radius: 12px;
  display: inline-flex;
  justify-content: center;
}

/* Ta sama konwencja co nad przypisami pod tabelą porównania: wcięcie o kolumnę znacznika (1.3em)
   i odstęp (8px) z comparison.blade.php, więc zdanie zaczyna się tam, gdzie tekst przypisów. */
.mkt-cnk-tax-note-box {
  margin: 14px 2px 0;
  padding-left: calc(1.3em + 8px);
  font-size: 12.5px;
  line-height: 1.65;
  color: #656B7E;
}

.mkt-cnk-compare-line {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: #4C5163;
}

.mkt-cnk-compare {
  font-size: inherit;
  font-weight: 600;
  color: #5B5CE6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes cnkRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .mkt-cnk-grid,
  .mkt-cnk-bottom,
  .mkt-cnk-calc {
    grid-template-columns: 1fr;
  }

  .mkt-cnk-cta {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-score-ring,
  .mkt-bar-fill,
  .mkt-sent-slice,
  .mkt-row,
  .mkt-lift,
  .mkt-col-fill,
  .mkt-stack-col-fill,
  .mkt-stack-grow,
  .mkt-spark path,
  .mkt-line,
  .mkt-line-dot,
  .mkt-bia-icon.is-loading .mkt-bia-bar,
  .mkt-bia-icon.is-loading .mkt-bia-node,
  .mkt-bia-status-label,
  .mkt-bia-dots span,
  .mkt-cnk-calc {
    transition: none !important;
    animation: none !important;
  }
  .mkt-widget .mkt-score-ring {
    stroke-dashoffset: calc(var(--mkt-score-c) * (1 - var(--mkt-score) / 100));
  }
  .mkt-widget .mkt-bar-fill,
  .mkt-widget .mkt-sent-slice,
  .mkt-widget .mkt-col-fill,
  .mkt-widget .mkt-stack-col-fill,
  .mkt-widget .mkt-stack-grow { transform: none; }
  .mkt-widget .mkt-row { opacity: 1; transform: none; }
  .mkt-widget .mkt-spark path,
  .mkt-widget .mkt-line { stroke-dashoffset: 0; }
  .mkt-widget .mkt-line-dot { opacity: 1; }
  .mkt-widget .mkt-wiz-typed { max-width: none; animation: none !important; }
  .mkt-widget .mkt-wiz-caret { display: none; }
  .mkt-widget .mkt-wiz-search-go { opacity: 1; animation: none !important; }
  .mkt-widget .mkt-line-fill { opacity: 1; }
  .mkt-widget .mkt-scan-fill {
    stroke-dashoffset: calc(var(--mkt-scan-c) * (1 - var(--mkt-scan) / 100));
  }
  .mkt-widget .mkt-final-spark path,
  .mkt-widget .mkt-final-llm {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .mkt-widget .mkt-final-spark path { stroke-dashoffset: 0; }
}

/* --- /cennik: dopisek pod ceną w nagłówku tabeli i karta „Potrzebujesz planu Enterprise?" --- */

/* Dopisek „rozliczenie roczne" pod ceną kolumny; widoczność przełącza marketing-pricing.js. */
[data-pricing-mirror-cycle] { display: block; }
[data-pricing-mirror-cycle][hidden] { display: none; }

/* Karta rozmowy: tekst po lewej, przycisk po prawej; bez ikony i bez etykiety (runda właściciela). */
.mkt-cnk-talk {
  margin: 48px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 32px;
  padding: 30px 36px;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 18px;
  box-shadow: 0 26px 54px -42px rgba(20, 22, 43, 0.4);
}
.mkt-cnk-talk-title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #14162B;
  text-wrap: balance;
}
.mkt-cnk-talk-text {
  margin: 6px 0 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.6;
  color: #4C5163;
  text-wrap: pretty;
}
.mkt-cnk-talk-cta {
  background: #5B5CE6;
  color: #FFFFFF;
  font-size: 14.5px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 11px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .mkt-cnk-talk { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; }
  .mkt-cnk-talk-cta { justify-self: stretch; text-align: center; }
}