/*
 * Alternative home page — /homepage-claude-preview.
 *
 * Loaded after marketing.css, on the preview pages only. It holds three things:
 *   the page container, shared by every section, the nav and the footer
 *   adjustments to live sections that the wider column would otherwise throw off
 *   .hp-* styles for the reworked sections: logos, problem, reveal, testimonials, audit,
 *   knowledge, final CTA
 *
 * .hp- because marketing.css already owns .hv-* for its hover utilities (.hv-card,
 * .hv-primary-light…). The reworked markup still carries those for hover.
 */

/* --- container ------------------------------------------------------------
 * The live container is declared 1180px and renders at 1062px: `body { zoom: .9 }`
 * above 1000px scales the whole page, and the column never grows past that.
 * 1320px declared renders at 1188px.
 *
 * Sections and the footer carry the live width inline, so the attribute match reaches
 * all of them. The nav sets its width in marketing.css, and pricing had its own 1240px;
 * both now share the same edges as everything else.
 */
[data-home-v2] { --hp-container: 1320px; }
[data-home-v2] [style*="max-width: 1180px"] { max-width: var(--hp-container) !important; }
[data-home-v2] .mkt-nav-inner,
[data-home-v2] .mkt-cnk-wrap { max-width: var(--hp-container); }

.hp-wrap { max-width: var(--hp-container); margin: 0 auto; padding: 0 32px; }

/* --- live sections in the wider column ------------------------------------
 * These partials are shared with the live page, so each side effect of the wider
 * column is undone here, scoped, rather than in their markup. The !important ones
 * override an inline style.
 */

/* System: the stage the six widgets share.
 *
 * Every widget in the stage is height:100% (marketing.css), so the stage's height is a
 * decision, not a measurement: the widgets fill whatever it is given, and their own content
 * needs only 230-320px at these widths. The inline 16/10 made that decision from the
 * viewport instead of from the section, which is where the empty band came from: 558px of
 * stage at 600px wide (the widgets stretched to twice their natural height), 319px at
 * 1000px, and from 1000px up a card whose bottom edge stopped ~65px above the tab stack
 * beside it.
 *
 * All three rules below give one height per width, identical for the six tabs, so switching
 * tabs never moves the page. !important overrides the inline style on the stage.
 */

/* Desktop, tabs flanking the card: the card fills its row, so its bottom edge lands on the
   tab stacks', and the stage takes what is left under the chrome bar. With today's copy the
   band under the card is 0 from 1000px up, in both languages. The panel's max-height is the
   ceiling that keeps it deliberate: a longer tab description would stretch the widgets past
   the frame they were drawn for, and a few px of reserve under the card is the better price. */
@media (min-width: 1000px) {
  [data-home-v2] [data-sys-panel] { max-height: 560px; }
  [data-home-v2] [data-sys-panel] > .mkt-sys-card { height: 100%; display: flex; flex-direction: column; }
  [data-home-v2] .mkt-sys-stage {
    aspect-ratio: auto !important;
    flex: 1 1 auto;
    min-height: 380px !important;
  }
}

/* 641-999px: 200 + 560 + 200 stopped fitting one line, and the default wrap put one tab
   stack beside the card and the other one under it, leaving the card off-centre above a
   dead band. The card takes the full width first, the six tabs read 3 + 3 under it, in the
   same left-aligned rows the phone layout uses. */
@media (min-width: 641px) and (max-width: 999px) {
  [data-home-v2] [data-sys-panel] { order: -1; flex: 1 1 100% !important; }
  [data-home-v2] [data-sys-row] [data-sys-col] { flex: 1 1 240px !important; gap: 28px !important; }
  [data-home-v2] [data-sys-row] [data-sys-col] button { align-items: flex-start !important; text-align: left !important; }
  [data-home-v2] .mkt-sys-stage { min-height: 380px !important; max-height: 460px; }
}

/* Phones keep the square stage marketing.css asks for, only capped: at 600px wide a square
   is 558px tall, which stretches the same widgets to twice their natural height. 390px is
   under the cap and unchanged. */
@media (max-width: 640px) {
  [data-home-v2] .mkt-sys-stage { max-height: 420px; }
}

/* BIA: two equal columns left the 430px chat card floating in a half it could not fill,
   with a wide empty gutter beside the tiles. The card gets a fixed 480px column on the
   container edge, and the copy takes the rest. */
@media (min-width: 1000px) {
  [data-home-v2] [data-bia] > div > div { grid-template-columns: minmax(0, 1fr) 480px !important; column-gap: 112px !important; }
  [data-home-v2] [data-bia] .mkt-bia-card { max-width: none !important; justify-self: stretch !important; }
  /* The wider copy column would fit three tiles and strand the fourth; keep them 2 × 2. */
  [data-home-v2] [data-bia-tiles] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ContentInAI steps re-break in the wider column and leave a word alone on the last line. */
[data-home-v2] [data-cinai-p] + div span[style*="flex: 1"] { text-wrap: pretty; }

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

/* Blog: marketing.css zeroes this band's top padding below 641px, which leaves the first card
   touching the grey edge. The band keeps a smaller version of its desktop rhythm instead. */
@media (max-width: 640px) {
  [data-home-v2] [data-blog-grid-sec] { padding-top: 40px !important; }
}

/* --- client logos ---------------------------------------------------------- */

.hp-logos {
  border-top: 1px solid #EDEEF2;
  border-bottom: 1px solid #EDEEF2;
  background: var(--mkt-surface, #FAFAFC);
  padding: 30px 0;
}
/* Rząd bez etykiety nad sobą, więc padding jest po równo z góry i z dołu: pasek nie ma już
   ciężaru na górze, który trzeba by równoważyć. */

/* Osiem znaków i trzy układy, każdy bez samotnego logo w wierszu:
     · od 1180 px   — jeden rząd. Suma szerokości ośmiu znaków to 944 px CSS, z siedmioma
       przerwami po 40 px — 1224 px. Przy 1180 px okna (zoom .9, czyli 1311 px CSS minus 64 px
       paddingu) jest 1247 px miejsca, 23 px zapasu; mieściłby się od ok. 1160 px, ale bez zapasu.
     · 600–1179 px  — 4 + 4 w siatce, kolumny wspólne dla obu wierszy (647 px przy pełnej skali,
       506 px przy --s .82 poniżej 768 px; przy 600 px wnętrze ma 560 px).
     · poniżej 600 px — 2 × 4 (257 px, przy 320 px wnętrze ma 280 px), pary zwarty + szeroki
       w każdym wierszu.
   Sprawdzone co 5 px od 320 do 1920 px: żadnego wiersza z jednym logo, nic nie wystaje.
   Siatka, nie flex-wrap: zawijanie zachłanne zostawiało samotny znak w drugim wierszu (6 + 1
   przy ~990 px w wersji z sześcioma logotypami). Tu liczba kolumn jest ustalona dla pasma. */
.hp-logos-row {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  justify-items: center;
  align-items: center;
  column-gap: 44px;
  row-gap: 20px;
}
@media (min-width: 1180px) {
  .hp-logos-row { grid-template-columns: repeat(8, auto); column-gap: 40px; }
}
/* Logotypy: maska z pliku, kolor z tła — jeden odcień dla wszystkich ośmiu. Wysokość i proporcje
   niesie znacznik (--h, --r, wyliczone w partialu), szerokość wynika z nich. --s skaluje całość
   na węższych ekranach, bez ruszania proporcji między znakami. */
.hp-logo {
  --s: 1;
  display: block;
  flex: 0 0 auto;
  height: calc(var(--h) * var(--s));
  width: calc(var(--h) * var(--r) * var(--s));
  background: #8A8FA1;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

@media (max-width: 767px) {
  .hp-logos-row { column-gap: 28px; row-gap: 16px; }
  .hp-logo { --s: 0.82; }
}
/* marketing.css gives `section > div` 20px sides on mobile; this strip is not a section. */
@media (max-width: 640px) {
  .hp-logos { padding: 26px 0; }
  .hp-logos .hp-wrap { padding: 0 20px; }
}
@media (max-width: 599px) {
  .hp-logos-row { grid-template-columns: repeat(2, auto); column-gap: 32px; }
}

/* --- problem --------------------------------------------------------------- */

.hp-problem { background: #FFFFFF; padding: 110px 0; }
.hp-head { max-width: 720px; }
.hp-head h2 {
  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;
}
.hp-head p { margin: 18px 0 0; font-size: 16.5px; line-height: 1.65; color: #4C5163; text-wrap: pretty; }

.hp-problem-row { margin: 46px 0 0; }
.hp-card {
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hp-card-n { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #656B7E; }
.hp-card h3,
.hp-answer h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; text-wrap: balance; }
.hp-card h3 { color: #14162B; }
.hp-card p,
.hp-answer p { margin: 0; font-size: 14px; line-height: 1.6; }
.hp-card p { color: #4C5163; }

.hp-answer { background: #14162B; border-radius: 16px; padding: 24px 20px; }
.hp-answer h3 { color: #FFFFFF; }
.hp-answer p { color: #B8BBD6; text-wrap: balance; }
.hp-answer-cta {
  display: block;
  background: #5B5CE6;
  color: #FFFFFF;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 10px;
  text-align: center;
}

/* From 1000px: five equal columns. The problems' wrapper steps aside (display: contents) so
   all five cards are items of one grid, and every card takes the row's three tracks — number,
   title, text — so titles and descriptions line up across the row. The answer has no number:
   its title sits on the titles' line and its button at the bottom of the card. */
@media (min-width: 1000px) {
  .hp-problem-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: 16px;
  }
  .hp-problem-cards { display: contents; }
  .hp-card,
  .hp-answer { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 12px; }
  .hp-answer h3 { grid-row: 2; }
  .hp-answer-body { grid-row: 3; display: flex; flex-direction: column; gap: 18px; }
  .hp-answer-cta { margin-top: auto; }
}
/* Zoom .9 starts at 1000px, where the cards are ~180px wide: tighter type keeps the titles
   to two lines until the column reaches full width. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .hp-problem-row { column-gap: 12px; }
  .hp-card,
  .hp-answer { padding: 22px 16px; }
  .hp-card h3,
  .hp-answer h3 { font-size: 15.5px; }
  .hp-card p,
  .hp-answer p { font-size: 13.5px; }
  .hp-answer-cta { padding: 10px 8px; font-size: 12.5px; white-space: nowrap; }
}

/* Narrower: the problems scroll sideways, as on the live page, and the answer becomes a bar
   under them — title and text on the left, button on the right. The 4px padding keeps the
   hover shadow inside the scroll box; the negative margin keeps the cards on the edge. */
@media (max-width: 999px) {
  .hp-problem-cards {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
    margin: 0 -4px;
    padding: 4px 4px 12px;
  }
  .hp-problem-cards::-webkit-scrollbar { display: none; }
  .hp-card { flex: 0 0 264px; scroll-snap-align: start; }
  .hp-answer {
    margin-top: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title cta" "text cta";
    column-gap: 28px;
    row-gap: 4px;
    align-items: center;
    padding: 22px 24px 22px 28px;
  }
  .hp-answer h3 { grid-area: title; }
  .hp-answer-body { display: contents; }
  .hp-answer p { grid-area: text; }
  .hp-answer-cta { grid-area: cta; white-space: nowrap; }
}
@media (max-width: 760px) {
  .hp-answer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "text" "cta"; row-gap: 6px; padding: 22px 20px; }
  .hp-answer-cta { margin-top: 10px; }
}
@media (max-width: 640px) {
  .hp-card { flex-basis: 78%; padding: 20px; }
}

/* --- reveal ---------------------------------------------------------------- */

.hp-reveal { background: #FFFFFF; padding: 130px 0; }
.hp-reveal .hp-wrap { text-align: center; }
.hp-reveal-statement {
  font-size: clamp(26px, 4.4vw, 52px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* One sentence per block, each balanced on its own. */
.hp-reveal-line { display: block; text-wrap: balance; }
.hp-reveal-payoff {
  margin: 34px 0 0;
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hp-reveal [data-reveal-word] { color: #C7CAD6; transition: color 0.35s ease; }
/* Nine engine logos, larger than the shared 22px strip of marketing.css (owner: "odrobinę za
 * małe") and never a stranded logo. One height, --llm-h, drives the row; Claude and Gemini keep
 * the optical corrections marketing.css gives them at 640px and up (20/22 and 21/22 of the
 * height), as ratios, so the row stays even at every size.
 *   · from 720px  5 + 4, each row centred, the same brick as the nine marks in the "Dla kogo"
 *                 tile: ChatGPT … Copilot over Claude … DeepSeek (order in reveal.blade.php).
 *                 At 30px (from 1000px, i.e. 27 screen px under the body zoom) the rows are
 *                 550px + 4 x 56px = 774px over 473px + 3 x 56px = 641px; the column is 966px at
 *                 1024. At 28px (720-999px) the top row is 514px + four gaps of 4.2vw: 634px of
 *                 the 656px column at 720.
 *   · <=719px     3 x 3 grid with shared columns: 12.8 x --llm-h of logos (the widest logo of
 *                 each column) + two gaps. Height and gap both follow the viewport, 6vw and
 *                 4.5vw, i.e. 86% of it, which leaves the 40px of phone gutters free down to a
 *                 285px viewport (at 390: 23.4px logos, 334px of the 350px column).
 * The breaks are empty <i> after every logo (markup in reveal.blade.php); a band switches on only
 * the one it needs. A switched-on break is an extra flex line, i.e. one extra row-gap, so the
 * 5 + 4 bands halve row-gap: 11px is 22px between the two rows (10px, 20px, at 720-999px). */
.hp-reveal-llms { margin: 62px 0 0; --llm-h: 30px; column-gap: 56px; row-gap: 11px; }
.hp-reveal-llms .audyt-llm-logo { height: var(--llm-h); }
.hp-reveal-llms .audyt-llm-logo[data-llm="claude"] { height: calc(var(--llm-h) * 0.91); }
.hp-reveal-llms .audyt-llm-logo[data-llm="gemini"] { height: calc(var(--llm-h) * 0.955); }
.hp-reveal-llms-break { display: none; flex: 0 0 100%; height: 0; }
@media (min-width: 720px) {
  .hp-reveal-llms-break[data-after="5"] { display: block; }
}
@media (min-width: 720px) and (max-width: 999px) {
  .hp-reveal-llms { --llm-h: 28px; column-gap: clamp(28px, 4.2vw, 42px); row-gap: 10px; }
}
@media (max-width: 719px) {
  .hp-reveal-llms {
    --llm-h: min(6vw, 28px);
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    justify-items: center;
    align-items: center;
    column-gap: min(4.5vw, 36px);
    row-gap: 20px;
  }
}
@media (max-width: 640px) {
  .hp-reveal-llms { margin-top: 44px; row-gap: 18px; }
}

/* --- testimonials --------------------------------------------------------------
 *
 * Intro on the left, one quote card on the right, the switcher bars under the intro. Below 1000px
 * everything stacks: intro, card, bars. The cards are a native scroll-snap track at every width;
 * home-v2.js drives it and shows the bars.
 */

.hp-testi {
  background: #F4F5F8;
  padding: 110px 0;
  border-top: 1px solid #EDEEF2;
}

.hp-testi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 40px;
}

/* --- intro ----------------------------------------------------------------- */

.hp-testi-intro { max-width: 640px; }
.hp-testi-intro h2 {
  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;
}
/* The accent phrase always starts its own line; it is long enough to need two lines of its own in
 * the narrow intro column, so it balances instead of being held on one line ("już zyskują" and
 * "w AI" are tied with non-breaking spaces in the lang file). */
.hp-testi-accent { display: block; text-wrap: balance; }
.hp-testi-intro p {
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: #4C5163;
  text-wrap: pretty;
}

/* --- cards ----------------------------------------------------------------- */

.hp-testi-stage { min-width: 0; }

.hp-testi-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 20px;
}
.hp-testi-track::-webkit-scrollbar { display: none; }
.hp-testi-track:focus-visible { outline: 2px solid #5B5CE6; outline-offset: 4px; }

.hp-testi-card {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 20px;
  padding: 36px 44px 34px;
}

.hp-testi-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hp-testi-mark { display: block; width: 31px; height: 22px; fill: #5B5CE6; }
.hp-testi-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #656B7E;
}
.hp-testi-count b { font-weight: 500; color: #14162B; }

.hp-testi-quote {
  margin: 22px 0 0;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #14162B;
  text-wrap: pretty;
}

.hp-testi-person {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hp-testi-person img {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #EEF0FE;
}
.hp-testi-name { display: block; font-size: 15px; line-height: 1.3; font-weight: 600; color: #14162B; }
.hp-testi-role { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: #5F6478; }

/* --- switcher ---------------------------------------------------------------
 * The live page's bars, one per review. The active bar is longer; while autoplay runs, the script
 * grows its fill over the 6s, and the stylesheet alone shows it full. */

.hp-testi-nav { display: flex; align-items: center; }
.hp-testi-nav[hidden] { display: none; }
.hp-testi-dots { display: flex; gap: 8px; }

.hp-testi-dot {
  display: block;
  padding: 12px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hp-testi-dot-bar {
  position: relative;
  display: block;
  width: 30px;
  height: 4px;
  border-radius: 999px;
  background: #D2D5DF;
  overflow: hidden;
  transition: width 0.3s ease, background-color 0.2s ease;
}
.hp-testi-dot-bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #5B5CE6;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.hp-testi-dot:hover .hp-testi-dot-bar { background: #B9BDF0; }
.hp-testi-dot[aria-current="true"] .hp-testi-dot-bar { width: 44px; background: #D6DAFB; }
.hp-testi-dot[aria-current="true"] .hp-testi-dot-bar i { transform: scaleX(1); }
.hp-testi-dot:focus-visible { outline: 2px solid #5B5CE6; outline-offset: 2px; border-radius: 4px; }

/* --- desktop: two columns ----------------------------------------------------
 * The card spans both rows; the intro sits at the bottom of the first and the bars at the top of
 * the second, so the two stay together, centred against the card. */

@media (min-width: 1000px) {
  .hp-testi-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "intro stage" "nav stage";
    column-gap: 88px;
    row-gap: 34px;
  }
  .hp-testi-intro { grid-area: intro; align-self: end; }
  .hp-testi-stage { grid-area: stage; align-self: center; }
  .hp-testi-nav { grid-area: nav; align-self: start; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .hp-testi-grid { column-gap: 56px; }
  .hp-testi-intro h2 { font-size: 36px; }
  .hp-testi-card { padding: 32px 36px 30px; }
  .hp-testi-quote { font-size: 20px; }
}

/* --- tablet ------------------------------------------------------------------ */

@media (max-width: 999px) {
  .hp-testi-grid { row-gap: 36px; }
  .hp-testi-nav { margin-top: -12px; }
  .hp-testi-quote { font-size: 20px; }
}

/* --- phones -------------------------------------------------------------------
 * marketing.css centres the heading and hides the paragraph under it. The track runs to the
 * screen edges with the next card peeking in, and the photos centre under it. */

@media (max-width: 640px) {
  .hp-testi-grid { row-gap: 28px; }
  .hp-testi-intro { max-width: none; }
  .hp-testi-track {
    margin: 0 -20px;
    padding: 0 20px;
    scroll-padding-inline: 20px;
    gap: 12px;
    border-radius: 0;
  }
  .hp-testi-card { flex-basis: 88%; padding: 24px 20px 22px; border-radius: 18px; }
  .hp-testi-mark { width: 26px; height: 19px; }
  .hp-testi-quote { margin-top: 16px; font-size: 16px; line-height: 1.55; letter-spacing: -0.005em; }
  .hp-testi-person { padding-top: 22px; gap: 12px; }
  .hp-testi-person img { width: 44px; height: 44px; }
  .hp-testi-name { font-size: 14px; }
  .hp-testi-role { font-size: 12.5px; }
  .hp-testi-nav { margin-top: -8px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-testi-dot-bar { transition: none; }
}

/* --- audit --------------------------------------------------------------------- */

/* --- section + card ------------------------------------------------------- */

/* ŚWIADOMY AKCENT — NIE UJEDNOLICAĆ. To JEDYNE kolorowe pasmo na stronie i ma nim
   zostać: #audyt jest głównym wejściem do produktu (darmowy audyt), więc dostaje własne
   podłoże, a nie kolejny takt rytmu biały/szary.

   To nie jest przeoczenie po migracji tokenów. Runda wcześniej TO pasmo pojechało na
   --mkt-band i zostało z tego cofnięte, bo zmierzony render pokazał, dlaczego tak nie może
   być. Zanim ktoś „naprawi” tę niespójność, niech odtworzy pomiar:

     · #audyt sąsiaduje od góry z .hp-testi, która JEST szara (--mkt-band). Przy szarym
       #audyt oba pasma sklejały się w jedno ciągłe pole 1246 px przy 1440 px szerokości —
       najdłuższy jednolity blok na stronie — dłuższy niż którykolwiek biały odcinek, bo
       biel #top (614 px) i .hp-problem (692 px) rozdziela pasek .hp-logos #FAFAFC 1440x99,
       ale biel jest podłożem domyślnym strony, a nie pasmem wyróżnionym).
     · Ze 180 px tej wysokości to czysta pustka między treścią opinii a treścią audytu.
       Sam odstęp jest w normie (inne styki: 174–216 px, patrz tabela w raporcie) — problemem
       nie był odstęp, tylko to, że przy jednym odcieniu nic go nie przecinało. Granica
       sekcji przestawała istnieć.
     · #EEF0FE wobec #F4F5F8 daje kontrast luminancji tylko 1,0395:1, ale rozjazd kanałów
       (238/240/254 wobec 244/245/248) niesie różnicę odcienia, nie jasności — i to ona
       rysuje styk. Wobec bieli to już 1,1333:1, więc dolna granica (#audyt → .hp-scope)
       czyta się tak samo mocno jak każdy inny styk szare→białe.

   Dostępność: na samym paśmie nie leży ani jeden znak — cała treść siedzi w .hp-audit-card
   (#FFFFFF). Gdyby kiedyś coś na nie zeszło, na #EEF0FE przechodzą #14162B 15,71:1,
   #4C5163 6,95:1, #5F6478 5,18:1, #656B7E 4,68:1 i #5B5CE6 4,4996:1 — ten ostatni jest
   NA GRANICY 4,5:1 i na tym paśmie nie nadaje się na tekst.

   Nic innego w tej sekcji nie zależy od tła: karta, formularz i podgląd mają własne
   podłoża, więc wartość niżej jest jedynym miejscem, które trzyma kolor pasma. */
/* 110px jak każda sekcja treści na landingu (przegląd odstępów przed wdrożeniem; było 90px). */
.hp-audit { background: #EEF0FE; padding: 110px 0; }

.hp-audit-card {
  background: #FFFFFF;
  border-radius: 28px;
  box-shadow: 0 40px 80px -60px rgba(91, 92, 230, 0.5);
  padding: clamp(32px, 5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 44px;
  align-items: center;
}

/* --- copy + form ---------------------------------------------------------- */

/* Colour comes from .hp-kicker, like every other eyebrow on the page. */
.hp-audit-kicker { display: inline-block; }
.hp-audit-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;
}
.hp-audit-desc {
  margin: 18px 0 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.65;
  color: #4C5163;
  text-wrap: balance;
}

.hp-audit-form {
  margin: 30px 0 0;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 14px;
  padding: 8px 8px 8px 18px;
  box-shadow: 0 12px 30px -18px rgba(20, 22, 43, 0.28);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hp-audit-form:focus-within {
  border-color: #5B5CE6;
  box-shadow: 0 0 0 4px rgba(91, 92, 230, 0.14), 0 12px 30px -18px rgba(20, 22, 43, 0.28);
}
.hp-audit-prefix { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #656B7E; }
.hp-audit-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  color: #14162B;
}
.hp-audit-input::placeholder { color: #8C91A5; }
.hp-audit-submit {
  border: 0;
  cursor: pointer;
  font-family: Poppins, sans-serif;
  background: #5B5CE6;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.hp-audit-submit:hover { background: #3F40C4; }
.hp-audit-submit:focus-visible { outline: 2px solid #3F40C4; outline-offset: 3px; }

.hp-audit-note {
  margin: 12px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: #656B7E;
  /* Wyśrodkowana pod polem, tak jak w hero. Formularz zajmuje całą szerokość kolumny, więc środek
     kolumny jest środkiem pola. */
  text-align: center;
}
/* Kropka między podpisami pod polem adresu — w hero i w sekcji audytu ta sama. */
.hp-note-sep { margin: 0 4px; }
@media (max-width: 480px) { .hp-note-sep { margin: 0 1px; } }
/* Items never split; a wrap can only happen after a "·". */
.hp-audit-note-item { white-space: nowrap; }

/* --- preview ------------------------------------------------------------- */

.hp-audit-preview {
  margin: 0;
  background: #F4F5F8;
  border: 1px solid #EDEEF2;
  border-radius: 20px;
  padding: 22px;
}
.hp-audit-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.hp-audit-rows { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hp-audit-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid #EDEEF2;
  border-radius: 12px;
  padding: 13px 16px;
}
/* Neutral topic icons — a list of what is checked, not pass/fail results. */
.hp-audit-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #EEF0FE;
  color: #4B4CD8;
  display: grid;
  place-items: center;
}
.hp-audit-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-audit-row-title { font-size: 14.5px; font-weight: 600; color: #14162B; line-height: 1.35; }
.hp-audit-row-detail { font-size: 13px; line-height: 1.45; color: #5F6478; text-wrap: pretty; }

/* Sample-data variant (?audyt=wynik): tag, domain pill, label + value rows. */
.hp-audit-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #5F6478;
  border: 1px solid #DEE0E8;
  background: #FFFFFF;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.hp-audit-domain {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: #14162B;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 10px;
  padding: 10px 14px;
}
.hp-audit-dot { width: 7px; height: 7px; border-radius: 999px; background: #5B5CE6; flex: 0 0 auto; }
.hp-audit-preview--result .hp-audit-preview-head { flex-wrap: wrap; row-gap: 8px; }
.hp-audit-preview--result .hp-audit-preview-head .hp-kicker { white-space: nowrap; }
.hp-audit-preview--result .hp-audit-rows { margin-top: 10px; }
/* Label left, value right. Only the wide "GPTBot" pill may drop under its label on narrow cards. */
.hp-audit-row--value { align-items: center; justify-content: space-between; column-gap: 16px; row-gap: 6px; padding: 15px 16px; }
.hp-audit-row--value .hp-audit-row-title { flex: 1 1 auto; min-width: 0; }
.hp-audit-row--value.is-warn-row { flex-wrap: wrap; }
.hp-audit-val {
  flex: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: #14162B;
  white-space: nowrap;
}
.hp-audit-val.is-warn {
  font-size: 12px;
  font-weight: 500;
  color: #B42318;
  background: #FDF1F0;
  border-radius: 6px;
  padding: 3px 8px;
}

/* Rows come in one after another once the card scrolls into view. Only when JS armed the
   section and motion is allowed — otherwise the finished state is what renders. */
@media (prefers-reduced-motion: no-preference) {
  .hp-audit.is-armed .hp-audit-row { opacity: 0; transform: translateY(6px); }
  .hp-audit.is-armed.is-in .hp-audit-row {
    opacity: 1;
    transform: none;
    transition-property: opacity, transform;
    transition-duration: 0.45s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 140ms + 120ms);
  }
}

/* --- steps ---------------------------------------------------------------- */

/* Always three columns or one: auto-fit wrapped them 2 + 1 on tablets, leaving step 03 alone. */
.hp-audit-steps {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 26px 0 0;
  border-top: 1px solid #EDEEF2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 22px;
}
.hp-audit-step { display: flex; flex-direction: column; gap: 6px; }
.hp-audit-step-meta { display: flex; align-items: center; gap: 10px; }
.hp-audit-step-n { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #5B5CE6; }
.hp-audit-step-timing {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5F6478;
}
.hp-audit-step-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: #14162B; text-wrap: balance; }
.hp-audit-step-desc { font-size: 13.5px; line-height: 1.55; color: #4C5163; text-wrap: pretty; }

/* --- breakpoints ---------------------------------------------------------- */

/* Below 1000px the two columns get too narrow for the form: copy on top, preview under it. */
@media (max-width: 999px) {
  .hp-audit-card { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .hp-audit-desc { max-width: 620px; }
  .hp-audit-form { max-width: 620px; }
  .hp-audit-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Two preview columns get too narrow for the row titles below ~720px. */
@media (max-width: 720px) {
  .hp-audit-rows { grid-template-columns: minmax(0, 1fr); }
}

/* Tablet: three narrow columns still read well with slightly tighter type. */
@media (min-width: 641px) and (max-width: 899px) {
  .hp-audit-steps { column-gap: 22px; }
  .hp-audit-step-title { font-size: 14.5px; }
  .hp-audit-step-desc { font-size: 13px; }
}

@media (max-width: 640px) {
  .hp-audit-card { border-radius: 22px; padding: 28px 20px; row-gap: 28px; }
  .hp-audit-kicker { display: block; text-align: center; }
  .hp-audit-form { margin-top: 22px; }
  .hp-audit-note { text-align: center; }
  .hp-audit-preview { padding: 16px; border-radius: 16px; }
  .hp-audit-rows { grid-template-columns: minmax(0, 1fr); }
  .hp-audit-row { align-items: center; padding: 10px 12px; }
  .hp-audit-row--value { padding: 12px 14px; }
  .hp-audit-ico { width: 30px; height: 30px; border-radius: 9px; }
  .hp-audit-row-detail { display: none; }
  .hp-audit-steps { grid-template-columns: minmax(0, 1fr); padding-top: 22px; row-gap: 16px; }
  .hp-audit-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
  .hp-audit-step-meta { display: contents; }
  .hp-audit-step-n { grid-row: 1 / span 3; padding-top: 3px; }
  .hp-audit-step-timing { grid-column: 2; }
  .hp-audit-step-title,
  .hp-audit-step-desc { grid-column: 2; }
}

/* --- knowledge -----------------------------------------------------------------
 *
 * One real video on the left, the three newest articles on the right, from 1000px (where the
 * page zoom starts). Narrower, they stack at the full column width. Colours live here rather
 * than inline so the hover states apply.
 */

/* WIEDZA stoi na szarym — decyzja właściciela: „taka wiedza powinna być na szarym
   tle trzymając się konwencji jakiej trzymamy”. Dzięki temu alternacja biały/szary
   biegnie bez przerwy aż do stopki (ContentInAI biały → WIEDZA szara → finalne CTA
   białe → stopka szara), zamiast kończyć się czterema białymi sekcjami z rzędu.
   Poniżej 641px marketing.css robił to już od dawna ([data-wiedza] na #F4F5F8).

   Dopełnienie górne wraca do 110px. Przy zerze sekcja pożyczała odstęp od białej
   sekcji nad sobą — to działa, dopóki obie są białe; przy zmianie tła nagłówek
   siadałby wprost na krawędzi szarego pasma. 110px u góry i 110px u dołu to ta
   sama miara, co SYSTEM i opinie, a kreska #EDEEF2 u góry to ta sama krawędź,
   którą noszą wszystkie pozostałe szare pasma. */
.hp-know {
  background: var(--mkt-band, #F4F5F8);
  border-top: 1px solid #EDEEF2;
  padding: 110px 0;
}

.hp-know-head { max-width: 720px; }
.hp-know-head h2 {
  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;
}
.hp-know-head p { margin: 18px 0 0; font-size: 16.5px; line-height: 1.65; color: #4C5163; text-wrap: pretty; }

.hp-know-grid {
  margin: 44px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (min-width: 1000px) {
  .hp-know-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 64px; }
  .hp-know-grid--solo { grid-template-columns: minmax(0, 760px); }
}

/* Shared mono meta line: "YouTube · 22.05.2026", "Poradnik · 17.06.2026". */
.hp-know-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.4;
  color: #656B7E;
}
.hp-know-meta > * + *::before { content: "·"; margin-right: 8px; color: #A3A7B7; }
/* Content in another language than the page: "Poradnik · EN · 17.06.2026". The title is a tooltip. */
.hp-know-lang { color: #656B7E; letter-spacing: 0.06em; text-decoration: none; cursor: inherit; }

/* --- video ------------------------------------------------------------------ */

/* The whole card is one link, like an article row: the same colour, so the global link
   lilac never reaches the title, and the hover states below are driven from the card. */
.hp-know-video { display: flex; flex-direction: column; gap: 18px; min-width: 0; color: #14162B; }
.hp-know-video:hover { color: #14162B; }

.hp-know-thumb {
  position: relative;
  display: block;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #14162B;
  box-shadow: 0 30px 60px -40px rgba(20, 22, 43, 0.6);
}
.hp-know-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hp-know-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 52px;
  margin: -26px 0 0 -37px;
  border-radius: 14px;
  background: rgba(20, 22, 43, 0.82);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
/* The triangle sits 2px right of centre, where it looks centred. */
.hp-know-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -11px 0 0 -7px;
  border-left: 18px solid #FFFFFF;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
/* Hovering anywhere on the card lifts all of it, the way a row's title lifts with the row. */
.hp-know-video:hover .hp-know-thumb img { transform: scale(1.03); }
.hp-know-video:hover .hp-know-play { background: #5B5CE6; }
.hp-know-video:hover .hp-know-video-title { color: #3F40C4; }
.hp-know-video:hover .hp-know-watch { border-color: #5B5CE6; color: #3F40C4; }

/* Meta across the top; the title and summary on the left, the button beside the title. */
.hp-know-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "meta meta" "title cta" "desc cta";
  column-gap: 24px;
  align-items: start;
}
.hp-know-caption .hp-know-meta { grid-area: meta; }
.hp-know-video-title {
  grid-area: title;
  margin: 7px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #14162B;
  text-wrap: balance;
  transition: color 0.15s ease;
}
.hp-know-video-desc {
  grid-area: desc;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4C5163;
  text-wrap: pretty;
}

/* A label, not a control: the card's link carries the click. */
.hp-know-watch {
  grid-area: cta;
  margin-top: 3px;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid #DEE0E8;
  border-radius: 10px;
  background: #FFFFFF;
  color: #14162B;
  transition: border-color 0.15s ease, color 0.15s ease;
}

/* --- articles --------------------------------------------------------------- */

.hp-know-articles { min-width: 0; }
.hp-know-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #E3E5EC; }
.hp-know-list > li { border-top: 1px solid #E3E5EC; }

.hp-know-row { display: block; padding: 20px 0 21px; color: #14162B; }
.hp-know-row:hover { color: #14162B; }
.hp-know-cat { color: #5B5CE6; }
.hp-know-row-title {
  display: block;
  margin-top: 7px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: #14162B;
  text-wrap: balance;
  transition: color 0.15s ease;
}
.hp-know-row-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4C5163;
  text-wrap: pretty;
}
.hp-know-row:hover .hp-know-row-title { color: #3F40C4; }

.hp-know-links { margin-top: 18px; display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 10px; }
.hp-know-more { font-size: 13.5px; font-weight: 600; color: #5B5CE6; text-underline-offset: 3px; }
.hp-know-more:hover { color: #3F40C4; text-decoration: underline; }

/* --- focus, motion ---------------------------------------------------------- */

.hp-know a:focus-visible { outline: 2px solid #5B5CE6; outline-offset: 3px; border-radius: 10px; }
.hp-know .hp-know-row:focus-visible { outline-offset: 4px; border-radius: 8px; }
/* The ring wraps the whole card; 18px thumbnail corners + 5px offset stay concentric. */
.hp-know .hp-know-video:focus-visible { outline-offset: 5px; border-radius: 23px; }

@media (prefers-reduced-motion: reduce) {
  .hp-know-thumb img,
  .hp-know-play,
  .hp-know-watch,
  .hp-know-video-title,
  .hp-know-row-title { transition: none; }
  .hp-know-video:hover .hp-know-thumb img { transform: none; }
}

/* --- narrower --------------------------------------------------------------- */

/* marketing.css hides the description and centres the heading on phones. */
@media (max-width: 640px) {
  .hp-know-grid { margin-top: 28px; gap: 30px; }
  .hp-know-thumb { border-radius: 14px; }
  .hp-know .hp-know-video:focus-visible { border-radius: 19px; }
  .hp-know-video { gap: 14px; }
  .hp-know-caption { grid-template-areas: "meta meta" "title cta"; column-gap: 16px; }
  .hp-know-video-title { font-size: 16px; }
  .hp-know-video-desc { display: none; }
  .hp-know-watch { padding: 9px 14px; }
  .hp-know-row { padding: 16px 0 17px; }
  .hp-know-row-title { margin-top: 5px; font-size: 15px; }
  .hp-know-row-excerpt { display: none; }
  /* Two teasers are enough on a phone; the link leads to the rest. */
  .hp-know-list > li:nth-child(n + 3) { display: none; }
}

/* --- final CTA ----------------------------------------------------------------- */

/* --- card ------------------------------------------------------------------ */

.hp-final-card {
  position: relative;
  overflow: hidden;
  display: grid;
  /* One column until the page zoom breakpoint: two columns below it squeeze the chart. */
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4.5vw, 56px);
  border-radius: 24px;
  background: #14162B;
}
@media (min-width: 1000px) {
  .hp-final-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.hp-final-glow {
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(91, 92, 230, 0.45), rgba(91, 92, 230, 0));
  pointer-events: none;
}
.hp-final-copy { position: relative; }
.hp-final-title {
  margin: 0;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  text-wrap: balance;
}
.hp-final-desc {
  margin: 18px 0 0;
  max-width: 460px;
  font-size: 16.5px;
  line-height: 1.65;
  color: #A8ACC8;
  text-wrap: pretty;
}
.hp-final-ctas { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hp-final-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hp-final-btn.is-primary { background: #5B5CE6; }
.hp-final-btn.is-primary:hover { background: #6E6FEA; }
.hp-final-btn.is-ghost { border-color: #3A3E62; }
.hp-final-btn.is-ghost:hover { border-color: #6E6FEA; background: rgba(91, 92, 230, 0.12); }
/* marketing.css turns every a:hover indigo (0,1,1); keep the label white on the dark card. */
.hp-final-btn:hover,
.hp-final-btn:focus-visible { color: #FFFFFF; }
.hp-final-btn:focus-visible { outline: 2px solid #9EA2F2; outline-offset: 3px; }

/* --- rivalry chart --------------------------------------------------------- *
 * Lines and fill are an SVG stretched over the plot; everything round or textual (dots,
 * labels, axis text) is HTML placed with the same fractions, so text keeps its size at every
 * width and dots stay circles. The inline --fx/--fy values are the finished frame; the script
 * rewrites them while it plays.
 *
 * --il/--ir/--it/--ib inset the data area inside the plot: room for the first date and the
 * dots on the left, the delta chip on the right, and the labels above the top value.
 */

.hp-final-panel {
  position: relative;
  margin: 0;
  min-width: 0;
  padding: 26px 24px 20px 18px;
  border: 1px solid #2A2D4A;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}
.hp-final-chart {
  --il: 14px;
  --ir: 24px;
  --it: 36px;
  --ib: 14px;
  container-type: inline-size;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
}

.hp-final-ticks { position: relative; width: 2.2ch; font: 400 11px/1 'IBM Plex Mono', monospace; color: #8A8FB8; }
.hp-final-ticks span {
  position: absolute;
  right: 0;
  top: calc(var(--it) + var(--fy) * (100% - var(--it) - var(--ib)));
  transform: translateY(-50%);
}

/* A grid item with an aspect ratio is not stretched by default: its width would come from the
   min-height through the ratio and push the plot out of a narrow panel. */
.hp-final-plot {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 2.3 / 1;
  min-height: 200px;
}
/* Everything placed on the data area. */
.hp-final-dot,
.hp-final-head,
.hp-final-pulse,
.hp-final-ring,
.hp-final-cursor,
.hp-final-chip,
.hp-final-gap,
.hp-final-label {
  position: absolute;
  left: calc(var(--il) + var(--fx, 1) * (100% - var(--il) - var(--ir)));
  top: calc(var(--it) + var(--fy, 0) * (100% - var(--it) - var(--ib)));
}

.hp-final-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--it) + var(--fy) * (100% - var(--it) - var(--ib)));
  height: 1px;
  margin-top: -0.5px;
  background: rgba(138, 143, 184, 0.16);
}

.hp-final-svg {
  position: absolute;
  left: var(--il);
  top: var(--it);
  width: calc(100% - var(--il) - var(--ir));
  height: calc(100% - var(--it) - var(--ib));
  overflow: visible;
}
.hp-final-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hp-final-line.is-you { stroke: #8B8DF2; stroke-width: 2.6px; }
.hp-final-line.is-them { stroke: #8A8FB8; stroke-width: 1.8px; }

.hp-final-cursor {
  z-index: 1;
  top: var(--it);
  width: 1px;
  height: calc(100% - var(--it) - var(--ib));
  margin-left: -0.5px;
  background: linear-gradient(to bottom, rgba(139, 141, 242, 0), rgba(139, 141, 242, 0.5));
  opacity: 0;
}

.hp-final-dot {
  z-index: 2;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #1A1C31;
  /* Opacity follows the scale: a dot scaled to 0 can still leave a 1px speck at 1x. */
  opacity: var(--s, 1);
  transform: scale(var(--s, 1));
}
.hp-final-dot.is-you { background: #8B8DF2; }
.hp-final-dot.is-them { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: #8A8FB8; }

/* The two gap marks: a dashed line between the end dots, and the lead on it. */
.hp-final-gap {
  z-index: 2;
  width: 0;
  top: calc(var(--it) + var(--fy1) * (100% - var(--it) - var(--ib)) + 10px);
  height: calc((var(--fy2) - var(--fy1)) * (100% - var(--it) - var(--ib)) - 18px);
  border-left: 1px dashed rgba(184, 187, 214, 0.5);
  transform-origin: 50% 100%;
}
.hp-final-chip {
  z-index: 6;
  padding: 3px 7px;
  border: 1px solid rgba(123, 211, 166, 0.4);
  border-radius: 6px;
  background: #17302A;
  font: 500 12px/1.2 'IBM Plex Mono', monospace;
  color: #8FE0B6;
  white-space: nowrap;
  transform: translate(-50%, calc(-50% + var(--rise, 0px)));
}

/* The crossing mark. It sits under the heads and labels, and starts larger than the heads so it
   is visible from its first frame. */
.hp-final-ring {
  z-index: 3;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 1.5px solid rgba(228, 229, 253, 0.9);
  border-radius: 50%;
  opacity: 0;
}

.hp-final-series { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hp-final-series.is-you { z-index: 5; }

.hp-final-head {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  transform: scale(var(--pop, 1));
}
.hp-final-series.is-you .hp-final-head {
  background: #FFFFFF;
  box-shadow: 0 0 0 3px #7072EE, 0 0 18px 3px rgba(139, 141, 242, calc(0.55 * var(--glow, 1)));
}
.hp-final-series.is-them .hp-final-head {
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 2px solid #8A8FB8;
  background: #1A1C31;
}
.hp-final-pulse {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid #9EA2F2;
  border-radius: 50%;
  opacity: 0;
}

/* Labels ride their line's leading dot: above it when that line is on top, below when it is
   underneath (--side 1 / -1), so the two never meet. Horizontally the label sits just ahead of
   the dot and stops at the plot edge; the script sets --lx for that while it plays (and, at the
   crossing, moves the rising label into a lane beside the dots). Without it, the fallback pins
   the label to the right edge — the finished frame. */
.hp-final-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  left: var(--lx, calc(var(--fx) * 100%));
  transform: translate(var(--lt, calc(var(--fx) * -100%)), calc(-50% - var(--side) * (50% + 11px)));
}
.hp-final-label b { font: 500 12px/1 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.hp-final-series.is-you .hp-final-label { background: #5B5CE6; color: #FFFFFF; box-shadow: 0 4px 14px rgba(20, 22, 43, 0.45); }
.hp-final-series.is-you .hp-final-label b { color: #E4E5FD; }
/* The finished frame dims the competitor with colour, not opacity, so it stays readable. The
   script starts it at #D2D4E6 / #B8BBD6 and eases it here. */
.hp-final-series.is-them .hp-final-label { background: #262943; color: #A8ACC8; box-shadow: inset 0 0 0 1px #363A5E; }
.hp-final-series.is-them .hp-final-label b { color: #8F94BC; }

.hp-final-dates {
  grid-column: 2;
  position: relative;
  height: 14px;
  margin-top: 8px;
  font: 400 11px/1 'IBM Plex Mono', monospace;
  color: #8A8FB8;
}
.hp-final-dates span {
  position: absolute;
  top: 0;
  left: calc(var(--il) + var(--fx) * (100% - var(--il) - var(--ir)));
  transform: translateX(-50%);
  white-space: nowrap;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.hp-final-dates span.is-now { color: #FFFFFF; }
.hp-final-dates span.is-ahead { opacity: 0.35; }

/* Eight dates no longer fit side by side in a narrow chart: every other one, ending on the last
   day. Keyed to the chart's own width; the media query is the fallback without container queries. */
@media (max-width: 480px) {
  .hp-final-dates span:nth-child(odd) { display: none; }
}
@container (max-width: 380px) {
  .hp-final-dates span:nth-child(odd) { display: none; }
}

@media (max-width: 640px) {
  .hp-final-panel { padding: 20px 16px 16px 12px; }
  .hp-final-chart { --ir: 22px; --it: 34px; }
  .hp-final-plot { min-height: 188px; }
  .hp-final-label { height: 21px; padding: 0 7px; font-size: 11.5px; }
  .hp-final-label b,
  .hp-final-chip { font-size: 11.5px; }
}


/* === audience ============================================================== */
/*
 * Home page v2 — "Dla kogo" (partials/marketing/home-v2/audience.blade.php).
 *
 * Three zones: the question on the left, BrandinAI in the middle, what you see on the right.
 *
 * The stage is an explicit three-column grid that never wraps; below 1000px the same three zones
 * stack and the connector turns vertical. The active persona is a .hp-aud-panel with
 * `display: contents`, so its two halves drop straight into the grid as columns 1 and 3 while the
 * connector stays put in column 2.
 *
 * Resting state: both halves are filled boxes of equal height with the chips inside the answer card
 * — nothing is reserved and left empty, and the whole section is complete before any script runs.
 * Everything the animation hides is hidden only while [data-phase] is set, which only JS sets.
 */

.hp-aud { background: #FFFFFF; padding: 110px 0; }

/* --- persona tabs ---------------------------------------------------------
 * Real radios (visually hidden, still focusable) with the labels as pills: arrow keys, :checked
 * and the no-JS switching all come for free.
 */

.hp-aud-tabs {
  position: relative;
  margin: 34px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hp-aud-radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.hp-aud-tab {
  border: 1px solid #DEE0E8;
  background: #FFFFFF;
  color: #4C5163;
  font-family: Poppins, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hp-aud-tab:hover { border-color: #C4C8D6; color: #14162B; }
.hp-aud-radio:checked + .hp-aud-tab {
  background: #14162B;
  border-color: #14162B;
  color: #FFFFFF;
}
.hp-aud-radio:focus-visible + .hp-aud-tab { outline: 2px solid #5B5CE6; outline-offset: 2px; }

/* „Więcej": ostatni element rzędu, link do /dla-kogo. Cicha pigułka, która ma czytać się jako
   „więcej przykładów", a nie jako kolejna persona ani nowe CTA:
     · ten sam krój, stopień, line-height i pionowy padding co .hp-aud-tab (także w @media niżej),
       więc stoi w rzędzie z identyczną wysokością — sprawdzane pomiarem, nie na oko;
     · obrys PRZERYWANY w jasnym indygo (#C9CCF5, ten sam co kreska łącznika w scenie) i brak tła —
       pigułki person mają pełny szary obrys, więc to nie wygląda na coś do zaznaczenia;
     · tekst indygo i mała strzałka — kierunek „dalej", a nie wybór;
     · na hover tylko lekki podkład #EEF0FE i ciemniejsze indygo; żadnego wypełnienia kolorem, które
       robiłoby z tego przycisk.
   Poziomy padding jest o 4 px węższy niż w pigułce (strzałka daje swoje powietrze po prawej), bo
   szerokość tej pigułki decyduje o tym, czy mieści się w ostatnim wierszu rytmu (patrz niżej). */
.hp-aud-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px dashed #C9CCF5;
  border-radius: 999px;
  background: transparent;
  color: #5B5CE6;
  font-family: Poppins, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  padding: 10px 13px 10px 15px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hp-aud-all-arrow { display: block; flex: 0 0 auto; width: 12px; height: 12px; transition: transform 0.2s ease; }
.hp-aud-all:hover { background: #EEF0FE; border-color: #B9BDF3; color: #3F40C4; text-decoration: none; }
.hp-aud-all:hover .hp-aud-all-arrow { transform: translateX(2px); }
.hp-aud-all:focus-visible { outline: 2px solid #5B5CE6; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .hp-aud-all, .hp-aud-all-arrow { transition: none; }
  .hp-aud-all:hover .hp-aud-all-arrow { transform: none; }
}

/* Rytm rzędu, czyli GDZIE ten rząd się łamie.
 *
 * Siedem person nie mieści się w jednej linii poniżej ok. 1010 px. Tam rząd musi się złamać, a samo
 * flex-wrap łamie go zachłannie i zostawia na końcu samotną pigułkę (zmierzone przy poprzednim
 * komplecie: 6+1 przy 900 px, 5+2 przy 768 px, 3+3+1 przy 390 px). Ostatni rząd z jedną pigułką
 * czyta się jak pomyłka, nie jak wybór.
 *
 * Dlatego łamanie jest AUTORSKIE, nie emergentne: po każdej personie stoi pusty łamacz
 * (markup: <i class="hp-aud-break" data-after="N">), a tutaj włączamy po numerze tylko te,
 * których dane pasmo potrzebuje. Na końcu rzędu stoi jeszcze pigułka „Więcej" (.hp-aud-all,
 * 82–94 px od 641 px, 65–78 px na telefonie) i ona też nigdy nie zostaje sama w wierszu —
 * zawsze domyka ostatni wiersz rytmu.
 *
 * Komplet na stronie głównej: Lokalna firma, E-commerce, Turystyka, Zdrowie, B2B / SaaS,
 * Enterprise, Agencja / freelancer (EN: Local business, E-commerce, Travel, Health, …). Rytmy
 * i zapas najciaśniejszego wiersza, zmierzone co 1 px od 320 do 1920 px w obu językach
 * (szerokości w pikselach CSS, czyli bez zoom: .9, który marketing.css daje od 1000 px):
 *   · od 1050 px   — jeden rząd: siedem pigułek + „Więcej" = 1060 px po polsku, 1015 px po
 *                    angielsku; przy 1050 px jest 1103 px miejsca, czyli 43 px zapasu (PL)
 *   · 641–1049 px  — 4+4: cztery pigułki nad trzema i „Więcej"; ciaśniejszy jest dolny wiersz,
 *                    50 px zapasu przy 641 px po polsku
 *   · 360–640 px   — 3+3+2: ostatni wiersz to „Agencja / freelancer" i „Więcej", wyśrodkowane;
 *                    najciaśniej przy 360 px po polsku, 18 px zapasu w pierwszym wierszu
 *   · ≤359 px      — 2+2+2+2
 * Każdy włączony łamacz to jedna dodatkowa przerwa `gap`, czyli +8 px wysokości rzędu — tyle
 * kosztuje rytm.
 *
 * Dlaczego jeden rząd od 1050 px, a nie od 1000 px, gdzie scena robi się trzykolumnowa: polski
 * komplet staje w linii dopiero od ok. 1011 px, a tuż nad tym progiem zostają pojedyncze piksele
 * zapasu — inny fallback fontu złamałby rząd na 7+1, czyli dokładnie na to, czemu ten mechanizm
 * ma zapobiegać. 1050 px daje ok. 40 px zapasu, tyle co wcześniej przy progu 1130 px (poprzedni
 * komplet z „Restauracją" i „Działem marketingu" był o ok. 90 px szerszy).
 *
 * Dlaczego 3+3+2, a nie 3+2+3 jak przy poprzednim komplecie: tamten rytm miał ostatni wiersz
 * „Enterprise, Agencja / freelancer, Więcej" z 1 px zapasu przy 360 px po polsku. 3+3+2 daje
 * co najmniej 18 px w całym paśmie i spokojniejszy kształt (wiersze coraz krótsze, bez przewężenia
 * w środku).
 *
 * Poniżej 360 px pierwszy wiersz 3+3+2 przestaje się mieścić (302 px przy 280–319 px wnętrza),
 * a samo zawijanie zostawiłoby samotną pigułkę. Dlatego tam rytm 2+2+2+2.
 *
 * Gdyby person przybyło albo ubyło albo zmieniła się któraś etykieta, zmieniają się TYLKO numery
 * w tych @media — i trzeba je zmierzyć od nowa co 1 px, w obu językach. */
.hp-aud-break { display: none; flex: 0 0 100%; height: 0; }
@media (min-width: 641px) and (max-width: 1049px) {
  .hp-aud-break[data-after="4"] { display: block; }
}
@media (min-width: 360px) and (max-width: 640px) {
  .hp-aud-break[data-after="3"],
  .hp-aud-break[data-after="6"] { display: block; }
}
@media (max-width: 359px) {
  .hp-aud-break[data-after="2"],
  .hp-aud-break[data-after="4"],
  .hp-aud-break[data-after="6"] { display: block; }
}

/* --- stage ----------------------------------------------------------------- */

.hp-aud-stage {
  /* Podłoga pod KARTĄ ODPOWIEDZI (nie pod pudełkiem z pytaniem), żeby rotacja person nigdy nie
     zmieniała wysokości sekcji. js/home-v2 (audience) mierzy najwyższą kartę przy bieżącej
     szerokości i wpisuje ją inline, przeliczając przy każdej zmianie szerokości sceny — więc
     zmiana tekstu albo inny język wyrównują się same. Liczby po breakpointach są wyłącznie
     zapasem dla wersji bez JS. */
  --hp-aud-min: 206px;
  /* Wysokość PASKA CHIPÓW, czyli tego, co w karcie leży pod włosową linią. Jeden rząd chipów ma
     28 px, dwa 64 px (28 + 8 + 28), trzy 100 px — zmierzone.

     Po co to w ogóle jest: chipy zawijają się po szerokości, a każda persona ma inaczej długi
     komplet (przy 1440 px suma szerokości chipów to od 483 px u "Lokalnej firmy" do 556 px
     u B2B/SaaS). Karta ma stałą wysokość (--hp-aud-min), a stopka wisi przy jej dnie na
     `margin: auto 0 0`, więc persona z jednym rzędem chipów zamiast dwóch przesuwała włosową
     linię o 36 px — i ta linia skakała co 8 s razem z rotacją (zmierzone przy 1024/1100/1199,
     jeszcze na poprzednim komplecie person: .hp-aud-foot top 566 px u czterech person i 598 px
     u "Działu marketingu"; dziś przy 1199 px w dwa rzędy schodzi B2B/SaaS). `min-height`
     z tej zmiennej trzyma pasek w jednym miejscu niezależnie od persony.

     Druga robota tej zmiennej: to samo `min-height` dostaje stopka pudełka z pytaniem
     (.hp-aud--v2 .hp-aud-qfoot w hv-audience.css), więc obie włosowe linie leżą na jednej
     wysokości — bez niej pytanie miało linię 54 px niżej niż karta (zmierzone przy 1024).

     Liczby per pasmo są niżej, przy odpowiednich @media. Jeśli któraś persona kiedyś przekroczy
     pasek, `min-height` po prostu ustąpi: wróci przesunięcie linii, nic się nie połamie.

     Cena tego rozwiązania: pasek jest stały, a treść nie, więc w górnej części pasma 1000–1199 px
     (od ok. 1051 px, gdzie komplety chipów poza B2B/SaaS zaczynają się mieścić w jednym rzędzie)
     karta ma 36 px więcej, niż potrzebuje, i tyle samo bieli zostaje pod chipami. Ta sama biel
     zostaje pod podpisem po lewej, więc oba pudełka wyglądają tak samo — i nic nie drga. Przy
     szerokościach z listy przeglądowej (390, 768, 1024, 1440, 1920) pasek jest wypełniony co do
     rzędu.

     Wartość bazowa to dwa rzędy (1000–1199 px w układzie trzykolumnowym i 641–767 px w pionowym);
     @media niżej ustawiają jeden rząd tam, gdzie karta jest szeroka, i trzy przy ≤640 px. */
  --hp-aud-band: 64px;
  margin: 20px 0 0;
  border: 1px solid #DEE0E8;
  border-radius: 18px;
  background: #FFFFFF;
  padding: 28px 32px;
  display: grid;
  /* Środkowa kolumna to kafel BrandinAI (ok. 161 px) plus kreski po obu stronach. Dolna granica
     clampa musi zostawić na kreskę tyle, żeby dało się ją przeczytać jako przerywaną: przy 196 px
     zostawało 17 px, czyli dwie kreski. 218 px daje po ~28 px z każdej strony w paśmie
     1000–1210 px.

     Kolumny boczne NIE są równe, bo ich treść nie jest równa: po lewej dwu- albo trzywierszowe
     pytanie, po prawej akapit i trzy chipy. Przy 1fr : 1fr (po 473 px przy 1440) pudełko
     z pytaniem miało 124 px obok karty 206 px i wisiało pośrodku pustej kolumny — to była ta
     "dysproporcja". Dziś oba pudełka sięgają od góry do dołu wiersza, a proporcja kolumn odpowiada
     już tylko za szerokość:

       · od 1200 px 0,72fr : 1,28fr. Karta ma wtedy 568–580 px w środku, czyli tyle, że najdłuższy
         komplet chipów (B2B/SaaS, 556 px) mieści się w JEDNYM rzędzie u każdej persony — pasek ma
         28 px, a karta 170 px zamiast 206 px. Zapas jest najcieńszy przy 1292 px i wyżej, gdzie
         clamp środkowej kolumny dobija do 236 px: 12 px. Gdyby chipy urosły, trzeba tu zmienić
         --hp-aud-band na 64px razem z proporcją.
       · 1000–1199 px 0,8fr : 1,2fr. Karta ma tu 416–541 px w środku, a komplety chipów 443–556 px:
         do ok. 1050 px żaden się nie mieści w jednym rzędzie, wyżej mieszczą się wszystkie poza
         B2B/SaaS — czyli pasek i tak musi mieć dwa rzędy. Karta nic więc nie zyskuje na dalszym
         poszerzaniu, a lewa kolumna zyskuje: przy 0,72fr miała przy 1000 px 275 px i sam podpis
         "śledzony prompt · sprawdzany cyklicznie" łamał się na dwie linie. Przy 0,8fr ma 305 px
         i podpis stoi w jednej linii w całym paśmie. Kafel BrandinAI jest przy okazji bliżej
         środka sceny (79 px zamiast 111 px przy 1024). */
  grid-template-columns: minmax(0, 0.8fr) clamp(218px, 17vw, 236px) minmax(0, 1.2fr);
  align-items: stretch;
}
/* Tuż nad progiem trzech kolumn karta jest najwęższa (458 px), więc najdłuższa odpowiedź
   (B2B/SaaS) ma tam wiersz więcej i najwyższa karta 230 px zamiast 206 px. Zmierzone: 230 px do
   1008 px, 206 px od 1009 px. Dotyczy wyłącznie wersji bez JS — z JS podłogę mierzy home-v2.js
   na żywo. */
@media (min-width: 1000px) and (max-width: 1008px) { .hp-aud-stage { --hp-aud-min: 230px; } }

/* Od 1200 px karta jest na tyle szeroka, że chipy każdej persony stoją w jednym rzędzie: pasek
   spada z 64 px na 28 px, a najwyższa karta ze 206 px na 170 px. Liczby dotyczą wyłącznie wersji
   bez JS — z JS podłogę mierzy home-v2.js na żywo. */
@media (min-width: 1200px) {
  .hp-aud-stage {
    --hp-aud-min: 170px;
    --hp-aud-band: 28px;
    grid-template-columns: minmax(0, 0.72fr) clamp(218px, 17vw, 236px) minmax(0, 1.28fr);
  }
}

/* Only the active persona is in the grid. The first one is the fallback for browsers without
   `:has()`; once JS runs, .is-on / .is-js are what decide. */
.hp-aud-panel { display: none; }
.hp-aud-panel[data-p="1"] { display: contents; }
.hp-aud-switch:has(.hp-aud-radio:checked) .hp-aud-panel { display: none; }
.hp-aud-switch:has(#hp-aud-p1:checked) .hp-aud-panel[data-p="1"] { display: contents; }
.hp-aud-switch:has(#hp-aud-p2:checked) .hp-aud-panel[data-p="2"] { display: contents; }
.hp-aud-switch:has(#hp-aud-p3:checked) .hp-aud-panel[data-p="3"] { display: contents; }
.hp-aud-switch:has(#hp-aud-p4:checked) .hp-aud-panel[data-p="4"] { display: contents; }
.hp-aud-switch:has(#hp-aud-p5:checked) .hp-aud-panel[data-p="5"] { display: contents; }
.hp-aud-switch:has(#hp-aud-p6:checked) .hp-aud-panel[data-p="6"] { display: contents; }
.hp-aud-switch:has(#hp-aud-p7:checked) .hp-aud-panel[data-p="7"] { display: contents; }
.hp-aud-switch.is-js .hp-aud-panel { display: none; }
.hp-aud-switch.is-js .hp-aud-panel.is-on { display: contents; }

.hp-aud-ask,
.hp-aud-see {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hp-aud-ask { grid-column: 1; grid-row: 1; }
.hp-aud-see { grid-column: 3; grid-row: 1; }

.hp-aud-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #656B7E;
}
.hp-aud-label--see { color: #4B4CD8; }

/* The question and its caption, centred in the column. This box occupies exactly the same band as
   the answer card opposite it (both sit under a label of equal height and stretch to the row's
   bottom), so centring inside it puts the bubble's middle on the card's middle — which is where the
   dashed connector points. Let the bubble sit at the top instead and the line leaves the logo
   aiming at empty space below the question. */
.hp-aud-askbody {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* The question: what was typed into the model, so it stays mono.
   It hugs its two or three lines instead of being stretched to the height of the answer card —
   stretching it turned the left half into a mostly empty grey rectangle, which is the same hole the
   chips used to leave on the right, only moved across the section. */
.hp-aud-bubble {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: center;
  background: #F4F5F8;
  border: 1px solid #EDEEF2;
  border-radius: 14px 14px 14px 4px;
  padding: 18px 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #262A47;
  text-wrap: pretty;
}

/* Under the question: what this prompt is in the product. It gives the left column a second line of
   its own so the space beside a tall answer card reads as page, not as a gap. Deliberately says
   "cyklicznie" and not a cadence — monitoring frequency is a plan setting, from daily to monthly. */
.hp-aud-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #656B7E;
}

/* The answer: BrandinAI talking to you, so it is set in the body face, not mono. */
.hp-aud-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: var(--hp-aud-min);
  /* Kafel jedzie tokenem --mkt-surface (patrz blok "podłoża" w marketing.css).
     Wcześniej #F7F8FE — czwarty prawie-biały na stronie i ten sam odcień, co box
     na /dla-kogo, tyle że o włos inny niż karty cennika. Lila zostaje tam, gdzie
     niesie znaczenie: w obwódce #D6DAFB i w chipach #EEF0FE wewnątrz kafla, a nie
     w wypełnieniu. Dymek pytania obok stoi na szarym #F4F5F8 — różnica między
     pytaniem a odpowiedzią dalej jest, i to o pełny krok, a nie o dwa piksele. */
  background: var(--mkt-surface, #FAFAFC);
  border: 1px solid #D6DAFB;
  border-radius: 14px 14px 4px 14px;
  padding: 18px 20px;
}

/* The answer and the chips each share their cell with a placeholder that stands in for them while
   the question is still being typed, so the card keeps its shape and nothing moves when the real
   content lands. Both placeholders are display:none until JS sets a phase. */
.hp-aud-body,
.hp-aud-foot { display: grid; }
.hp-aud-body > *,
.hp-aud-foot > * { grid-area: 1 / 1; }

/* To samo po lewej stronie: pytanie jest pisane na maszynie, czyli w trakcie sekwencji jest krótsze
   niż docelowo, a pudełko hugu je co do wiersza — rosło więc o cały wiersz w trakcie pisania
   (zmierzone przy 1440: 91 → 111 px) i drgała z nim cała lewa kolumna, bo askbody centruje ją w
   pionie. Niewidoczny "duch" z pełnym tekstem leży w tej samej komórce gridu i trzyma wysokość od
   pierwszej klatki. Mechanika jest tutaj, a nie w hv-audience.css, żeby brak tamtego pliku nigdy nie
   wypuścił na ekran drugiej kopii pytania. */
.hp-aud-qtext { display: grid; }
.hp-aud-qtext > * { grid-area: 1 / 1; min-width: 0; }
.hp-aud-qghost,
.hp-aud-aghost { visibility: hidden; }
/* Powietrze nad włosową linią. `margin: auto` pod spodem dociska chipy do dna karty, więc dopóki
   któraś persona była o wiersz wyższa od reszty, luz brał się z podłogi karty. Kiedy wszystkie
   odpowiedzi mają tyle samo wierszy, tego luzu nie ma i linia przykleja się do ostatniego wiersza —
   te 16 px trzymają ten sam odstęp, co w pudełku z pytaniem (16 px nad linią, 12–14 px pod).

   Podłoga karty (--hp-aud-min) wyrównuje PUDEŁKO, nie treść: persona o wiersz krótsza od najwyższej
   musi ten wiersz czymś wypełnić. Dopóki chipy wisiały na `margin: auto` przy dnie, cały luz zbierał
   się w jednym szwie — nad włosową linią rosła dziura (zmierzone: 16 px u najwyższej persony, 75 px
   u najniższej przy 390 px). Teraz luz bierze na siebie blok odpowiedzi: rośnie razem z kartą i
   centruje w sobie tekst, więc ten sam wiersz zapasu rozkłada się po połowie nad i pod odpowiedzią.
   Dziura zamienia się w oddech, a linia z chipami stoi w tym samym miejscu u każdej persony. */
.hp-aud-body {
  flex: 1 1 auto;
  align-content: center;
  padding-bottom: 16px;
}
/* Stopka karty: włosowa linia i chipy pod nią. `min-height` trzyma pasek chipów na stałej
   wysokości (--hp-aud-band, patrz komentarz przy .hp-aud-stage) — bez tego persona z krótszym
   kompletem chipów miała pasek o rząd niższy i włosowa linia przeskakiwała o 36 px przy każdej
   rotacji. `box-sizing: content-box` jest tu celowe: --hp-aud-band opisuje same chipy, więc
   min-height nie może pochłaniać ani 14 px odstępu, ani włosowej linii. Dokładnie tak samo liczy
   się stopka pudełka z pytaniem (.hp-aud--v2 .hp-aud-qfoot), i dlatego obie linie wypadają na tej
   samej wysokości co do piksela — przy body{zoom:.9} obramowanie ma 1,11 px, więc każde inne
   liczenie zostawiało 1,1 px różnicy. */
.hp-aud-foot {
  box-sizing: content-box;
  margin: auto 0 0;
  min-height: var(--hp-aud-band);
  padding: 14px 0 0;
  border-top: 1px solid #E2E5FA;
}

.hp-aud-answer {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: #262A47;
  text-wrap: pretty;
}

.hp-aud-chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
}
.hp-aud-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  line-height: 1.2;
  /* 10 px, nie 11: przy 1440 px najdłuższy komplet chipów (B2B/SaaS) ma 556 px przy 568 px
     wnętrza karty. Przy 11 px zapasu było 1,3 px, czyli tyle, że wystarczyłby inny fallback
     fontu, żeby chipy przeszły w drugi rząd i karta urosła ze 170 px na 206 px. */
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
/* By position: where you are losing · the competitive context · what BrandinAI gives you. */
.hp-aud-chip:nth-child(1) { color: #B42318; background: #FEF0EF; border: 1px solid #F1B7B1; }
.hp-aud-chip:nth-child(2) { color: #14162B; background: #FFFFFF; border: 1px solid #DEE0E8; }
.hp-aud-chip:nth-child(3) { color: #4B4CD8; background: #EEF0FE; border: 1px solid #D6DAFB; }

/* --- the connector --------------------------------------------------------
 * `padding-top` is the height of the labels above the boxes, so the dashed line meets the two
 * boxes on their centre line rather than the column's.
 */

.hp-aud-flow {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding-top: 28px;
  display: grid;
  grid-template-columns: minmax(12px, 1fr) auto minmax(12px, 1fr);
  align-items: center;
}
.hp-aud-line {
  position: relative;
  height: 0;
  border-top: 2px dashed #C9CCF5;
  display: block;
}
.hp-aud-dot {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #5B5CE6;
  display: none;
}
.hp-aud-logo {
  position: relative;
  flex: 0 0 auto;
  width: 172px;
  height: 118px;
  border: 1px solid #E3E5EC;
  border-radius: 18px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-aud-logo img { width: 128px; display: block; }

/* --- the animation --------------------------------------------------------
 * [data-phase] is only ever set by js/home-v2/audience.js, and only while a persona is being
 * played, so the finished state above is what renders without JS and under reduced motion.
 */

/* The placeholders that stand in for the answer and the chips while BrandinAI is "working". */
.hp-aud-skel { display: none; }
.hp-aud-skel i {
  display: block;
  background: #E3E7FA;
  border-radius: 999px;
  animation: hp-aud-shimmer 1.5s ease-in-out infinite;
}
/* Placeholder leży w tej samej komórce gridu co odpowiedź i jej duch, więc komórka ma wysokość
   GOTOWEJ odpowiedzi, a trzy paski mają swoje 52 px. Bez justify-content stały przy górnej
   krawędzi i przy 390 px zostawiały pod sobą ~90 px bieli w trakcie fazy "ask" (odpowiedź ma tam
   pięć wierszy). Wyśrodkowane czytają się jak stan ładowania, a nie jak dziura. */
.hp-aud-skel--lines { flex-direction: column; justify-content: center; gap: 10px; padding-top: 5px; }
.hp-aud-skel--lines i { height: 9px; }
.hp-aud-skel--lines i:nth-child(2) { animation-delay: 0.15s; }
.hp-aud-skel--lines i:nth-child(3) { width: 58%; animation-delay: 0.3s; }
.hp-aud-skel--chips { flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.hp-aud-skel--chips i { height: 25px; }
.hp-aud-skel--chips i:nth-child(1) { width: 132px; }
.hp-aud-skel--chips i:nth-child(2) { width: 106px; animation-delay: 0.15s; }
.hp-aud-skel--chips i:nth-child(3) { width: 120px; animation-delay: 0.3s; }

.hp-aud-caret {
  display: none;
  width: 1px;
  height: 13px;
  background: #5B5CE6;
  vertical-align: -1px;
  margin-left: 1px;
  animation: hp-aud-blink 1s steps(1) infinite;
}
.hp-aud-switch[data-phase="ask"] .hp-aud-caret--q { display: inline-block; }
.hp-aud-switch[data-phase="answer"] .hp-aud-caret--a { display: inline-block; }

.hp-aud-switch[data-phase="in"] .hp-aud-dot--in,
.hp-aud-switch[data-phase="out"] .hp-aud-dot--out {
  display: block;
  animation: hp-aud-travel 0.85s ease-in-out forwards;
}
.hp-aud-switch[data-phase="pulse"] .hp-aud-logo,
.hp-aud-switch[data-phase="out"] .hp-aud-logo {
  animation: hp-aud-pulse 0.9s ease-out;
}

/* The chips are part of the resting state, so they are only taken away mid-animation — and a
   placeholder takes their place for as long as they are gone. */
.hp-aud-switch[data-phase]:not([data-phase="done"]) .hp-aud-chip {
  opacity: 0;
  transform: translateY(6px);
  transition: none;
}
.hp-aud-switch[data-phase]:not([data-phase="done"]) .hp-aud-skel--chips { display: flex; }

/* The answer is typed in during the "answer" phase; until then its lines are placeholders too. */
.hp-aud-switch[data-phase="ask"] .hp-aud-skel--lines,
.hp-aud-switch[data-phase="in"] .hp-aud-skel--lines,
.hp-aud-switch[data-phase="pulse"] .hp-aud-skel--lines,
.hp-aud-switch[data-phase="out"] .hp-aud-skel--lines { display: flex; }
.hp-aud-switch[data-phase="ask"] .hp-aud-answer,
.hp-aud-switch[data-phase="in"] .hp-aud-answer,
.hp-aud-switch[data-phase="pulse"] .hp-aud-answer,
.hp-aud-switch[data-phase="out"] .hp-aud-answer { visibility: hidden; }

@keyframes hp-aud-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hp-aud-shimmer { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes hp-aud-travel {
  from { left: -5px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  to { left: calc(100% - 5px); opacity: 0; }
}
@keyframes hp-aud-travel-v {
  from { top: -5px; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  to { top: calc(100% - 5px); opacity: 0; }
}
@keyframes hp-aud-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(91,92,230,0.35); }
  45% { transform: scale(1.04); }
  100% { transform: scale(1); box-shadow: 0 0 0 24px rgba(91,92,230,0); }
}

@media (prefers-reduced-motion: reduce) {
  .hp-aud-skel { display: none !important; }
  .hp-aud-skel i { animation: none; }
  .hp-aud-answer { visibility: visible !important; }
  .hp-aud-caret { display: none !important; animation: none; }
  .hp-aud-dot { display: none !important; animation: none; }
  .hp-aud-logo { animation: none !important; }
  .hp-aud-chip { opacity: 1 !important; transform: none !important; transition: none; }
}

/* --- stacked ---------------------------------------------------------------
 * Below 1000px the three zones keep their order downwards and the connector turns vertical, so
 * nothing wraps into a half-empty row the way the live section did around 768px.
 */

@media (max-width: 999px) {
  /* Stacked, but the answer card still needs a floor: without one the card is as tall as whichever
     persona is showing, and the autoplay made everything below the section jump every 8s. */
  .hp-aud-stage {
    --hp-aud-min: 206px;
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }
  .hp-aud-ask { grid-column: 1; grid-row: 1; }
  .hp-aud-flow { grid-column: 1; grid-row: 2; }
  .hp-aud-see { grid-column: 1; grid-row: 3; }

  .hp-aud-flow {
    padding: 14px 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 26px auto 26px;
    justify-items: center;
    align-self: stretch;
  }
  .hp-aud-line {
    height: 100%;
    width: 0;
    border-top: 0;
    border-left: 2px dashed #C9CCF5;
  }
  .hp-aud-dot { top: -5px; left: -6px; }
  .hp-aud-switch[data-phase="in"] .hp-aud-dot--in,
  .hp-aud-switch[data-phase="out"] .hp-aud-dot--out { animation-name: hp-aud-travel-v; }

  /* The tile becomes a pill so the wordmark and the model marks sit side by side. */
  .hp-aud-logo {
    width: auto;
    height: 64px;
    padding: 0 20px;
    gap: 14px;
  }
  .hp-aud-logo img { width: 112px; }
}
/* Ten sam powód co przy 1200 px: od 768 px kolumna jest na tyle szeroka, że najwyższa karta ma
   170 px, a nie 205 px jak tuż nad 640 px. Liczby dotyczą wyłącznie wersji bez JS — z JS podłogę
   mierzy audience.js na żywo. */
/* Ten sam powód co przy 1200 px: od 768 px kolumna jest na tyle szeroka, że chipy każdej persony
   stoją w jednym rzędzie (wnętrze karty ma tu 612–843 px, najdłuższy komplet 579 px), więc pasek
   spada na 28 px, a najwyższa karta ze 205 px na 170 px. Poniżej 768 px wnętrze ma 485–611 px
   i komplety dłuższe od niego zawijają się na dwa rzędy — pasek zostaje przy bazowych 64 px.
   Liczby dotyczą wyłącznie wersji bez JS — z JS podłogę mierzy home-v2.js na żywo. */
@media (min-width: 768px) and (max-width: 999px) { .hp-aud-stage { --hp-aud-min: 170px; --hp-aud-band: 28px; } }

@media (max-width: 640px) {
  .hp-aud { padding: 60px 0; }
  /* Chipy stoją tu jeden pod drugim (niżej), więc pasek ma trzy rzędy: 3 × 28 + 2 × 8. */
  .hp-aud-stage { --hp-aud-min: 276px; --hp-aud-band: 100px; }
  .hp-aud-tabs { margin-top: 26px; justify-content: center; }
  .hp-aud-tab { font-size: 11.5px; padding: 8px 12px; }
  .hp-aud-all { font-size: 11.5px; padding: 8px 9px 8px 11px; gap: 4px; }
  .hp-aud-stage { padding: 18px 16px; }
  .hp-aud-bubble { padding: 15px 16px; font-size: 13px; }
  .hp-aud-card { padding: 15px 16px; }
  .hp-aud-answer { font-size: 14px; }
  /* Na telefonie chipy stoją jeden pod drugim. Wcześniej układały się same: krótszy komplet wchodził
     w dwa wiersze, dłuższy w trzy, a że podłoga karty jest wspólna, persona z dwoma wierszami miała
     w karcie wiersz pustki więcej niż sąsiadka (zmierzone przy 390 px: 75 px zamiast 16 px nad
     włosową linią). Stała kolumna daje każdej personie trzy wiersze, więc zapas wypełnia treść, a
     nie powietrze. `white-space: normal` zostaje jako zawór bezpieczeństwa: przy 390 px i wyżej
     żaden chip nie musi się łamać (najdłuższy ma 69 px zapasu), a poniżej ~330 px łamie się zamiast
     wystawać poza kartę. */
  .hp-aud-chips { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
  .hp-aud-chip { white-space: normal; }
  .hp-aud-skel--chips { flex-direction: column; flex-wrap: nowrap; }
  .hp-aud-skel--chips i:nth-child(1) { width: 132px; }
  .hp-aud-skel--chips i:nth-child(2) { width: 112px; }
  .hp-aud-skel--chips i:nth-child(3) { width: 120px; }
  .hp-aud-logo { height: 56px; padding: 0 16px; gap: 10px; }
  .hp-aud-logo img { width: 96px; }
}

/* Najwęższe telefony (360–389 px: Galaxy A/S, iPhone SE, iPhone 13 mini). Pierwszy wiersz rytmu
   3+3+2 (Lokalna firma, E-commerce, Turystyka) ma w normalnej pigułce 321 px po polsku i 303 px
   po angielsku, a okno daje tu 320–349 px wnętrza — przy 360 px po polsku brakuje jednego
   piksela i "Turystyka" spadałaby do drugiego wiersza. Pół punktu ze stopnia pisma i 3 px z boków
   pigułki schodzą z tego wiersza na 302 px (PL) i 285 px (EN), czyli 18–64 px zapasu w całym
   paśmie. Ten sam stopień obowiązuje w rytmie 2+2+2+2 poniżej 360 px. Zmierzone co 1 px od 320
   do 389 px w obu językach (rytmy — komentarz przy .hp-aud-break). */
@media (max-width: 389px) {
  .hp-aud-tab { font-size: 11px; padding: 8px 9px; }
  .hp-aud-all { font-size: 11px; padding: 8px 7px 8px 9px; }
}

/* === contact =============================================================== */
/*
 * Podstrona /contact — /kontakt-claude-preview.
 * Markup: resources/themes/anchor/pages/kontakt-claude-preview.blade.php.
 *
 * Plik ładuje się na wszystkich stronach preview (home, produkt, kontakt), więc każda reguła
 * jest pod .hp-ct-*, czyli pod klasami, które występują wyłącznie na tej podstronie.
 *
 * Układ: hero z adresem e-mail (jedyna twarda dana kontaktowa, widoczna bez przewijania)
 * → trzy kafle z drogami kontaktu → szary pas z konkretnymi sprawami (mailto z gotowym tematem)
 * → cicha belka z danymi spółki i dokumentami. Social media zostają w stopce — gdyby wróciły
 * tutaj, dół strony czytałby się jak druga stopka.
 *
 * Kolory siedzą w tych klasach, a nie w stylach inline, żeby :hover i :focus-visible działały
 * (marketing.css barwi każdy link na indygo, więc kafle ustawiają swój kolor same).
 */

/* --- hero ------------------------------------------------------------------ */

.hp-ct-hero {
  background: #FFFFFF;
  padding: 92px 0 0;
}

.hp-ct-hero .hp-wrap {
  text-align: center;
}

.hp-ct-title {
  margin: 14px 0 0;
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #14162B;
  text-wrap: balance;
}

/* marketing.css ukrywa poniżej 641px akapit stojący bezpośrednio po h1/h2 — ten <div>
   przerywa sąsiedztwo, więc lead zostaje widoczny także na telefonie. */
.hp-ct-lead {
  max-width: 640px;
  margin: 18px auto 0;
}

.hp-ct-lead p {
  font-size: 16.5px;
  line-height: 1.65;
  color: #4C5163;
  text-wrap: pretty;
}

/* Adres e-mail w hero: na żywej stronie kontakt trzeba było znaleźć w treści, tutaj jest
   pierwszą rzeczą pod leadem. */
.hp-ct-direct {
  margin: 26px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.hp-ct-mail {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid #D6DAFB;
  border-radius: 999px;
  background: #EEF0FE;
  color: #14162B;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: -0.01em;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hp-ct-mail svg {
  color: #5B5CE6;
  flex: 0 0 auto;
}

.hp-ct-mail:hover {
  border-color: #B9BDF0;
  background: #E5E8FD;
  color: #14162B;
}

.hp-ct-mail:focus-visible {
  outline: 2px solid #5B5CE6;
  outline-offset: 3px;
}

.hp-ct-direct-note {
  font-size: 13.5px;
  line-height: 1.5;
  color: #656B7E;
}

/* --- trzy drogi kontaktu ----------------------------------------------------
 * 1 kolumna na telefonie; od 641px dwie, a ciemny kafel bierze całą szerokość, żeby nie
 * został sam w połowie rzędu; od 1001px trzy równe kolumny (kafle rozciągają się do
 * wspólnej wysokości, więc rząd ma jedną linię dolną).
 */

.hp-ct-options {
  background: #FFFFFF;
  padding: 46px 0 96px;
}

.hp-ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* Poniżej 641px marketing.css narzuca każdej sekcji 60px u góry i u dołu (!important), więc
   hero i kafle rozjeżdżały się o 120px — dwa razy więcej niż każda inna przerwa na telefonie.
   Zerując własne dopełnienie zostaje samo wymuszone 60px od dołu hero, czyli dokładnie ten
   sam rytm, co każdy inny szew na telefonie. Kafle należą do hero, nie są osobnym rozdziałem. */
@media (max-width: 640px) {
  .hp-ct-options {
    padding-top: 0 !important;
  }
}

/* Ten sam próg co marketing.css (641px): tam przełącza się boczne dopełnienie, dopełnienie
   sekcji i centrowanie h2. Wcześniejszy 620px robił 21-pikselowe pasmo, w którym siatka była
   już dwukolumnowa, a reszta strony nadal mobilna. */
@media (min-width: 641px) {
  .hp-ct-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .hp-ct-card.is-primary {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1001px) {
  .hp-ct-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hp-ct-card.is-primary {
    grid-column: auto;
  }
}

.hp-ct-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px 24px;
  border: 1px solid #DEE0E8;
  border-radius: 18px;
  background: #FFFFFF;
  color: #14162B;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hp-ct-card:hover {
  border-color: #C4C8D6;
  color: #14162B;
  box-shadow: 0 20px 44px -32px rgba(20, 22, 43, 0.45);
}

.hp-ct-card:focus-visible {
  outline: 2px solid #5B5CE6;
  outline-offset: 3px;
}

.hp-ct-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #656B7E;
}

.hp-ct-card-title {
  margin: 2px 0 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #14162B;
  text-wrap: balance;
}

.hp-ct-card-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4C5163;
  text-wrap: pretty;
}

.hp-ct-cta {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #5B5CE6;
}

.hp-ct-cta::after {
  content: "→";
  transition: transform 0.2s ease;
}

/* Kalendarz otwiera się poza serwisem — inna strzałka niż przy linkach wewnętrznych. */
.hp-ct-cta.is-external::after {
  content: "↗";
}

.hp-ct-card:hover .hp-ct-cta {
  color: #3F40C4;
}

.hp-ct-card:hover .hp-ct-cta::after {
  transform: translateX(3px);
}

/* Pierwszy kafel to główne działanie strony: ciemny, z pełnym przyciskiem. */
.hp-ct-card.is-primary {
  background: #14162B;
  border-color: #14162B;
  color: #FFFFFF;
}

.hp-ct-card.is-primary:hover {
  border-color: #14162B;
  color: #FFFFFF;
  box-shadow: 0 26px 52px -34px rgba(20, 22, 43, 0.85);
}

.hp-ct-card.is-primary:focus-visible {
  outline-color: #9EA2F2;
}

.hp-ct-card.is-primary .hp-ct-tag {
  color: #A8ACC8;
}

.hp-ct-card.is-primary .hp-ct-card-title {
  color: #FFFFFF;
}

.hp-ct-card.is-primary .hp-ct-card-desc {
  color: #B8BBD6;
  /* Na szerokość dwóch kolumn wiersz tekstu nie może biec przez cały kafel. */
  max-width: 54ch;
}

.hp-ct-card.is-primary .hp-ct-cta {
  align-self: flex-start;
  margin-top: auto;
  padding: 13px 22px;
  border-radius: 11px;
  background: #5B5CE6;
  color: #FFFFFF;
  transition: background-color 0.2s ease;
}

.hp-ct-card.is-primary:hover .hp-ct-cta {
  background: #6E6FEA;
  color: #FFFFFF;
}

/* --- konkretne sprawy (mailto z gotowym tematem) ---------------------------- */

.hp-ct-strip {
  background: #F4F5F8;
  padding: 84px 0;
}

.hp-ct-strip-head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.hp-ct-strip-title {
  margin: 14px 0 0;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #14162B;
  text-wrap: balance;
}

.hp-ct-rows {
  margin: 32px 0 0;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 18px;
  overflow: hidden;
}

.hp-ct-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 26px;
  border-top: 1px solid #EDEEF2;
  color: #14162B;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.hp-ct-row:first-child {
  border-top: 0;
}

.hp-ct-row:hover {
  background: #FAFAFC;
  color: #14162B;
}

.hp-ct-row:focus-visible {
  outline: 2px solid #5B5CE6;
  outline-offset: -2px;
}

.hp-ct-row-main {
  display: block;
  min-width: 0;
}

.hp-ct-row-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  color: #14162B;
}

.hp-ct-row-desc {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: #656B7E;
}

/* Temat, który mailto ustawi za użytkownika — widać, co dokładnie się stanie po kliknięciu. */
.hp-ct-row-subject {
  margin: 9px 0 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #656B7E;
}

.hp-ct-row-subject > span {
  padding: 2px 7px;
  border-radius: 6px;
  background: #F4F5F8;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #656B7E;
}

.hp-ct-row-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: #5B5CE6;
  white-space: nowrap;
}

.hp-ct-row-cta::after {
  content: "→";
  transition: transform 0.2s ease;
}

.hp-ct-row:hover .hp-ct-row-cta {
  color: #3F40C4;
}

.hp-ct-row:hover .hp-ct-row-cta::after {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .hp-ct-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px;
  }
}

/* --- dane spółki ------------------------------------------------------------
 * Cicha belka, nie karta. Niesie wyłącznie to, czego stopka nie ma: spółkę i NIP.
 * Regulamin i polityka prywatności żyją w stopce ~100px niżej, pod tymi samymi
 * etykietami — powtórzone tutaj robiły z tej belki drugą stopkę.
 */

.hp-ct-legal {
  background: #FFFFFF;
  padding: 44px 0 64px;
}

.hp-ct-legal-bar {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 32px;
  padding: 22px 0 0;
  border-top: 1px solid #EDEEF2;
  text-align: center;
}

.hp-ct-legal-operator {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #656B7E;
}

.hp-ct-nip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: #14162B;
  white-space: nowrap;
}

.hp-ct-nip > span {
  color: #656B7E;
}

/* --- wejście ----------------------------------------------------------------
 * Stan końcowy jest stanem domyślnym elementu, a animacja tylko do niego dochodzi:
 * bez JS i przy prefers-reduced-motion (marketing.css wyłącza wtedy animacje globalnie)
 * strona wygląda tak samo, po prostu bez ruchu.
 */

@media (prefers-reduced-motion: no-preference) {
  .hp-ct-hero .hp-wrap > *,
  .hp-ct-card {
    animation: hp-ct-rise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}

@keyframes hp-ct-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* === contentinai =========================================================== */
/*
 * ContentInAI — home (partials/marketing/home-v2/contentinai.blade.php)
 * and product (partials/marketing/product-v2/contentinai.blade.php).
 *
 * Colour comes from ContentInAI itself: #F8A32A is the --primary of contentinai.com, #FEF0D6 its
 * --primary-soft, #D98914 the darker shade BrandinAI's own panel already uses for the ContentInAI
 * accent (src/lib/contentinai.ts). The brand orange is only 2.05:1 on white, so type set in it
 * uses one of two darkened shades, and the true orange stays on fills and borders:
 *   --cia-ink-strong  #C67908  3.42:1  headline only, where the h2 is 28px+ and counts as large text
 *   --cia-ink         #A05C06  4.99:1  every small label — and the headline on phones, where
 *                                      marketing.css shrinks the h2 to 22px/600 and 3:1 stops applying
 * On the soft #FEF0D6 fill the same text needs one step darker again (#8A5A06, 5.0:1 there).
 *
 * Everything here is scoped to .hp-cia / .hp-ciap. Hover and focus colours live in these classes
 * rather than inline, so they can actually win (marketing.css's .hv-* cannot beat an inline style).
 *
 * Motion: every rule that hides something sits behind .is-armed, which only the script adds, and
 * behind prefers-reduced-motion: no-preference. Without JS, or with reduced motion, the server's
 * finished frame is what renders.
 */

.hp-cia {
  --cia-orange: #F8A32A;
  --cia-orange-dark: #D98914;
  --cia-ink-strong: #C67908;
  --cia-ink: #A05C06;
  --cia-soft: #FEF0D6;
  --cia-tint: #FFFBF3;
  --cia-line: rgba(248, 163, 42, 0.38);
  --cia-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- shared intro ----------------------------------------------------------- */

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

.hp-cia-h2 {
  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;
}

.hp-cia-accent { color: var(--cia-ink-strong); }

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

/* Wyjście z sekcji. Właściciel: "tylko pod obrazkiem, to CTA jakoś traci swoją czytelność".
   Zmierzone, zanim się je ruszyło:
     · napis #1A1F2E na #F8A32A  → 8,02:1, czyli TEKST był w porządku i nie on był problemem,
     · samo pudełko #F8A32A na białym tle sekcji → 2,05:1, poniżej progu 3:1, który WCAG 1.4.11
       stawia krawędziom elementów sterujących. Guzik nie miał więc czytelnego kształtu: leżał
       na bieli jako jasna plama, a pod nim rozmyty pomarańczowy cień (26px blur na kolorze
       samego guzika) dodatkowo zjadał jego krawędź.
     · nad nim stały trzy białe karty z ostrym obrysem #DEE0E8 (1,32:1) — po trzech gęstych
       kadrach najbardziej miękką rzeczą w sekcji było to, co ma być z niej wyjściem.
   Stąd trzy zmiany, wszystkie o wagę i krawędź, żadna o kolor marki:
     · 1px obrysu w --cia-ink (#A05C06) → krawędź guzika ma 5,21:1 na białym, czyli wchodzi
       nad próg 1.4.11 z zapasem i rysuje się tak samo wyraźnie jak obrys kart nad nim.
       (Pierwsza wersja tej rundy dawała tu --cia-ink-strong, #C67908, 3,42:1 — ledwo nad
       progiem, a przy body { zoom: .9 } 1px CSS schodzi do 0,9px urządzenia i gaśnie w płycie.
       Ciemniejszy atrament przyszedł rundę później i przez chwilę mieszkał w hv-contentinai.css
       jako .hp-cia .hp-cia-cta — czyli w regule o tej samej specyficzności co :hover niżej,
       w pliku wczytywanym PÓŹNIEJ, więc zabijał najechanie. Pełne wyprowadzenie kontrastowe
       stoi przy 7d w hv-contentinai.css; tutaj jest sama wartość, w jednym miejscu z resztą
       stanów guzika),
     · 14px/13-22 → 15px/14-26: wyjście z sekcji jest teraz wyraźnie cięższe od makietowego
       guzika "Pisz w ContentInAI →" w karcie 01 (12px/8-13), który świeci tym samym kolorem,
     · cień z pomarańczowego i rozmytego (0 12px 26px -16px) na ciemny i ciasny
       (0 10px 20px -14px rgba(122,72,6,.6)) — unosi, ale nie rozmazuje krawędzi.
   Napis zostaje #1A1F2E: 8,02:1 na #F8A32A i 5,90:1 na #D98914 po najechaniu. */
.hp-cia-cta {
  margin: 26px 0 0;
  display: inline-flex;
  align-items: center;
  background: var(--cia-orange);
  border: 1px solid var(--cia-ink);
  color: #1A1F2E;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 12px;
  box-shadow: 0 10px 20px -14px rgba(122, 72, 6, 0.6);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.hp-cia-cta:hover { background: var(--cia-orange-dark); border-color: #8A5A06; color: #1A1F2E; box-shadow: 0 14px 24px -14px rgba(122, 72, 6, 0.7); }
/* Obrys spoczynku i obrys najechania różnią się teraz w JEDNYM pliku i w jednej kolejności,
   więc :hover znowu wygrywa: #A05C06 → #8A5A06, czyli krawędź ciemnieje razem z płytą
   (#F8A32A → #D98914). */
.hp-cia-cta:focus-visible { outline: 2px solid var(--cia-ink); outline-offset: 3px; }

.hp-cia-note {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.6;
  color: #656B7E;
  text-wrap: pretty;
}

/* --- shared card furniture --------------------------------------------------- */

.hp-cia-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #656B7E;
}

.hp-cia-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hp-cia-check {
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #E3F3EA;
  color: #276A4D;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.hp-cia-wordmark {
  height: 15px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

/* --- home: layout ------------------------------------------------------------ */

.hp-cia-grid { display: grid; gap: 40px; }

/* The section used to be a sticky copy column next to a very tall stack of cards, and it was
   the only section on this landing built that way. It left 551 x 463 px of empty white at 1440
   and 1920 (485 x 392 px at 1024) — the whole hole on screen at once on an iPad Pro portrait.
   The head is full width now and the three beats sit side by side (hv-contentinai.css, block 2),
   so there is no second column left to go short. */
.hp-cia-flow { list-style: none; margin: 0; padding: 0; }

/* The gap between beats belongs to the grid in hv-contentinai.css — one property, one gap. */
.hp-cia-stage { display: flex; flex-direction: column; align-items: stretch; }

.hp-cia-stage-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }

.hp-cia-stage-n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: #5B5CE6;
}

.is-cia .hp-cia-stage-n { color: var(--cia-ink); }

.hp-cia-stage-brand { font-size: 13.5px; font-weight: 600; color: #14162B; }
.hp-cia-stage-title { font-size: 13.5px; color: #4C5163; }

.hp-cia-stage-text {
  margin: 5px 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #656B7E;
  max-width: 58ch;
  text-wrap: pretty;
}

.hp-cia-card {
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 14px;
  padding: 13px 14px;
  box-shadow: 0 16px 34px -30px rgba(20, 22, 43, 0.55);
}

/* --- home 01: the gap --------------------------------------------------------- */

.hp-cia-prompt {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  color: #14162B;
}

.hp-cia-cites { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.hp-cia-cite {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
}

.hp-cia-cite-name { font-size: 12.5px; font-weight: 500; color: #14162B; }

.hp-cia-cite-bar {
  display: block;
  height: 6px;
  background: #EDEEF2;
  border-radius: 999px;
  overflow: hidden;
}

.hp-cia-cite-bar i {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: #9EA2F2;
  border-radius: 999px;
}

.hp-cia-cite-meta { grid-column: 2; font-size: 11.5px; color: #656B7E; }

.hp-cia-cite.is-gap .hp-cia-cite-name,
.hp-cia-cite.is-gap .hp-cia-cite-meta { color: #B42318; }
.hp-cia-cite.is-gap .hp-cia-cite-bar { background: #FBE5E2; }

/* The same row, two weeks later — card 03 repeats card 01's three rows, so the ONE row that
   changed has to carry the whole story: "Twoja marka" stops being the red zero and turns the
   section's own lilac, the gradient the citation meter used to fill with. #4B4CD8 is 6.3:1 on
   white and is already this landing's "this one is yours" violet (.hp-ciap-outline-tag).
   Built exactly like .is-gap — colour on the name and the meta, tint on the track — and for the
   same reason: the two cards are read side by side, so the two states have to differ in nothing
   but colour. That also rules out a bolder name: at 600 "Twoja marka" no longer fits the 86px
   name column and breaks over two lines, while the identical name in card 01 stays on one. */
.hp-cia-cite.is-win .hp-cia-cite-name,
.hp-cia-cite.is-win .hp-cia-cite-meta { color: #4B4CD8; }
.hp-cia-cite.is-win .hp-cia-cite-meta { font-weight: 600; }
.hp-cia-cite.is-win .hp-cia-cite-bar { background: #E7E8FD; }
.hp-cia-cite.is-win .hp-cia-cite-bar i { background: linear-gradient(90deg, #6E6FEA, #5B5CE6); }

/* Wide enough for the whole row on one line: the meta moves out from under the bar.
   Scoped with .hp-cia so it beats the base grid-column above, which comes first in the file. */
@media (min-width: 641px) {
  .hp-cia .hp-cia-cite { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .hp-cia .hp-cia-cite-meta { grid-column: auto; white-space: nowrap; }
}

.hp-cia-gap {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #B42318;
  background: #FDF1F0;
  border-radius: 9px;
  padding: 8px 10px;
}

/* Lives inside .hp-cia-card, which is a plain block — hence inline-flex rather than align-self.
   It is the button the real Content tab shows, so it belongs to the mockup.

   RUNDA SKRACANIA KART — właściciel: „pozbyć się buttona »Pisz w ContentInAI« (…) wygląda,
   jakby można kliknąć". Ma rację co do objawu i nie ma racji co do lekarstwa, a rozstrzyga to
   pomiar. NAJPIERW wysokość: usunięcie przycisku nie skraca w siatce niczego, bo karta 01 nie
   jest najwyższą kartą. Wysokości własne przy 1440 i 1920 to 315,9 (01) / 356,4 (02) / 319,8
   (03), a wiersz siatki ma wysokość najwyższej z nich — czyli karty 02. Karta 01 ma już dziś
   40 px zapasu rozpuszczonego w swoich przerwach; po zdjęciu przycisku miałaby 82 px i wniosek
   „Luka:" zawisłby w środku pustego dna — dokładnie ta awaria, którą ta sekcja naprawiała
   w rundzie „karta nie może stać pusta" (153 px pustego pola przy 390).
   TERAZ objaw: to jest problem HIERARCHII, nie obecności. Sekcja ma jedno prawdziwe wyjście
   (.hp-cia-cta: 15px, 14-26 px wyściółki, obrys, cień), a makietowy przycisk miał 12px i 8-13,
   czyli ~80% jego masy — dwie rzeczy tego samego koloru i prawie tej samej wagi, więc oko nie
   miało po czym poznać, która klika. TEN SAM przycisk w prawdziwym widżecie produktowym
   (.mkt-cd-write w product-v2.css, „Pisz w ContentInAI →" na wybranej rekomendacji) ma 10px
   i 4-9 px wyściółki. Makieta była więc większa od rzeczy, którą pokazuje — i stąd brała się
   obietnica kliknięcia. Wracamy do wagi oryginału (10,5px, 5-10, promień 7px, bez unoszącego
   cienia), dokładamy cursor: default i brak zaznaczania, żeby nic w zachowaniu też nie
   obiecywało kliknięcia, a pomarańcz zostaje: to jest przycisk ContentInAI i on tak wygląda.
   Zmierzone: 33,8 → 23,8 px CSS wysokości chipa; w siatce 0 px (karta 01 nie jest najwyższa),
   na telefonie -10 px. Kontrast napisu #1A1F2E na #F8A32A bez zmian — 8,02:1. */
/* Kontrolka WEWNATRZ zrzutu, nie przycisk strony.
   Stala tu pelna pomarancz (var(--cia-orange)) - dokladnie ta sama, co prawdziwe CTA sekcji
   "Zobacz ContentInAI" nizej. Dwa identyczne przyciski, z ktorych jeden nie dziala: wlasciciel
   napisal wprost, ze "wyglada jakby mozna kliknac". Dostaje wiec jezyk pozostalych kontrolek
   w kadrze (.hp-cia-tool: biale tlo, wlosowa ramka, bursztynowy tekst), bo one tez sa czescia
   pokazywanego ekranu. Wymiary zostaja bez zmian - usuniecie elementu nie skracaloby siatki
   (karta 01 nie jest najwyzsza), a zostawiloby notke "Luka:" plywajaca w pustym dnie karty. */
.hp-cia-handoff {
  display: inline-flex;
  align-items: center;
  margin: 12px 0 0;
  background: #FFFFFF;
  border: 1px solid var(--cia-line);
  color: #8A5A06;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 7px;
  padding: 5px 10px;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.hp-cia-arrow {
  align-self: flex-start;
  margin: 10px 0 0 26px;
  color: #C7CAD6;
  display: block;
}

.is-cia .hp-cia-arrow { color: #E0C8A0; }

/* --- home 02: the editor ------------------------------------------------------ */

.hp-cia-card.is-editor {
  padding: 0;
  overflow: hidden;
  border-color: var(--cia-line);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cia-tint) 100%);
  box-shadow: 0 20px 44px -32px rgba(248, 163, 42, 0.8);
}

.hp-cia-editor-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--cia-line);
  background: #FFF7EA;
}

.hp-cia-editor-title {
  font-size: 12.5px;
  color: #4C5163;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-cia-editor-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 14px;
}

.hp-cia-doc { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

/* Tekst artykułu nad i pod zaznaczeniem. Stały tu cztery szare paski .hp-cia-line (8px wysokości,
   96/88/92/70% szerokości) — makieta "tu będzie tekst". Właściciel poprosił, żeby pokazać tekst.
   12px/1.55 w #656B7E: 5,31:1 na bieli i 5,14:1 na kremowym dole karty, czyli czytelne, ale
   o pół stopnia lżejsze niż 12,5px/500 zaznaczonego fragmentu — akapit ma być tłem dla tego,
   co jest zaznaczone, a nie z nim konkurować. Dwa akapity zajmują dokładnie tyle wierszy, ile
   zajmowały cztery paski (po dwa), więc karta nie rośnie ponad to, co układ kolumn już zniósł. */
.hp-cia-para {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #656B7E;
  text-wrap: pretty;
}

/* Podświetlenie jest tłem-obrazkiem, a nie kolorem tła, bo tylko background-size da się animować:
   zaznaczenie wjeżdża od lewej do prawej jak przeciągnięcie kursorem po tekście (blok ruchu niżej).
   Klatka końcowa jest identyczna z poprzednią — pełna szerokość, ten sam --cia-soft. */
.hp-cia-sel {
  display: block;
  border-left: 2px solid var(--cia-orange);
  background-color: transparent;
  background-image: linear-gradient(var(--cia-soft), var(--cia-soft));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 0 9px 9px 0;
  padding: 9px 11px;
  margin: 2px 0;
}

.hp-cia-sel-text { display: block; font-size: 12.5px; line-height: 1.4; font-weight: 500; color: #6B4A09; }

.hp-cia-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }

.hp-cia-tool {
  font-size: 11px;
  font-weight: 600;
  color: #8A5A06;
  background: #FFFFFF;
  border: 1px solid var(--cia-line);
  border-radius: 7px;
  padding: 4px 9px;
}

.hp-cia-scores {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
  border-left: 1px solid #F1E6D3;
  padding-left: 16px;
  width: 132px;
  /* Dotyczy WYŁĄCZNIE słupka 641–899 px (w kolumnie od 900 px i na telefonie pasek jest
     poziomy, a tam justify-content ustawiają własne reguły). Po odjęciu podpisu zostały
     w słupku dwa pierścienie, a słupek rozciąga go siatka ciała edytora do wysokości tekstu
     artykułu obok — wyrównane do góry zostawiały ~30 px pustego dna pod „GEO". Wyśrodkowane
     czytają się jak odczyt miernika obok akapitu, a dno karty zamyka się równo. */
  justify-content: center;
}

.hp-cia-score { display: flex; align-items: center; gap: 10px; }

.hp-cia-ring { position: relative; display: inline-flex; width: 46px; height: 46px; }
.hp-cia-ring svg { transform: rotate(-90deg); }

/* Liczba, która dolicza. Od tej rundy JEDNO miejsce: pierścienie SEO/GEO w karcie 02. Liczba
   końcowa stoi w atrybucie style jako --cia-n, więc BEZ JS, przy prefers-reduced-motion i zanim
   animacja ruszy widać dokładnie tę samą liczbę, co dotąd; animacja tylko przeciąga --cia-n od 0
   (blok ruchu niżej). Wartość dla czytnika ekranu niesie obok .mkt-visually-hidden — generowana
   treść ::after bywa w drzewie dostępności, ale nie w każdej przeglądarce, a liczba jest tu całym
   sensem miernika.
   Z wiersza "Twoja marka" (karta 03) licznik wyszedł: liczba jest tam CZĘŚCIĄ ZDANIA, więc każda
   klatka w połowie odliczania podawała nieprawdę jako wynik ("0 → 1 z 6 modeli"). Powód i pomiary
   stoją przy regule w bloku ruchu. W pierścieniu liczba jest podpisem miernika, którego łuk
   zatacza się razem z nią, więc tam czyta się jako pomiar w toku, nie jako zdanie.
   Wcześniej te liczby przeliczał skrypt (data-hp-cia-count w js/home-v2.js). Zniknęły stamtąd,
   bo skrypt miał je na sztywno na 1080 ms i przybijał do tej sekundy CAŁY takt karty 02 —
   a runda z kolejnością kart to przestawiła. Skrypt nie znajduje już żadnego [data-hp-cia-count]
   i nic tu nie robi; home wyzwala sekcję własnym skryptem przy partialu. */
@property --cia-n {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

.hp-cia-n { counter-reset: cia-n var(--cia-n, 0); }
.hp-cia-n::after { content: counter(cia-n); }

.hp-cia-ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: #14162B;
}

.hp-cia-score-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #656B7E;
}

/* .hp-cia-score-note (podpis „gotowość pod wyszukiwarkę i pod odpowiedzi AI") wyszedł razem
   z kluczem 'editor_note' — powód treściowy stoi w lang/pl/home_v2_contentinai.php, powód
   układowy w bloku skracania kart przy .hp-cia-scores niżej. */

/* --- home 03: the same prompt, two weeks later ---------------------------------
 * Card 03 is built out of card 01's parts on purpose — same prompt, same three brands, same
 * bars — because the section's whole point is the difference between the two. What card 03
 * adds on top is the band of models that now cite the article card 02 wrote. */

.hp-cia-models { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

.hp-cia-model { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: #14162B; }

/* The real model mark, the same file seven neighbouring v2 widgets use. 15px sits with the
   12.5px name the way .mkt-llm's 18px default does not. */
.hp-cia-model .mkt-llm { width: 15px; height: 15px; }

/* The tick reads as the verdict on the name before it, so it shrinks to a mark rather than
   staying the 17px chip it is where it opens a line (product panel, step 01). */
.hp-cia-model .hp-cia-check { width: 14px; height: 14px; }

/* The closing band of card 03: one label and the three models under it. It replaced the
   "CYTOWANIA W TYM PROMPCIE 0 z 6 → 3 z 6" meter, which said the number the "Twoja marka" row
   now says two rows above it.

   RUNDA SKRACANIA KART — właściciel: „(…) czy przerwę na »cytują twój artykuł«". Przerwa to
   była kreska #EDEEF2 plus 14 px marginesu i 13 px wyściółki nad etykietą; wyszła cała.
   ZOSTAJE DOWÓD, bo to on jest trzecim taktem sekcji (luka → artykuł → dowód): etykieta
   „Cytują Twój artykuł" i trzy nazwane modele z ptaszkami. Zdjęcie samej etykiety kosztowałoby
   więcej, niż daje: bez niej trzy znaki z ptaszkami znaczą tylko „trzy modele, odhaczone",
   a nie „trzy modele cytują TWÓJ artykuł" — i byłoby to odjęcie zdania, nie mebla.
   Że to osobna część karty, mówi bez kreski sam kształt: etykieta mono, inny układ niż wiersze
   nad nią i pozycja przy dnie karty. Tak właśnie zamyka się karta 01 (wniosek „Luka:" + chip
   przekazania) i nikt tam kreski nigdy nie potrzebował — z trzech kart kreskę miały dwie,
   więc bez niej sekcja jest BARDZIEJ spójna, nie mniej. Ta sama zmiana idzie na pasek SEO/GEO
   w karcie 02 (niżej), żeby obie karty nadal zamykały się tym samym gestem.
   Zmierzone: -27 px CSS wysokości karty 03 poniżej 900 px, -14 px w kolumnie (tam 12 px odstępu
   trzyma .hp-cia--row .hp-cia-cited i musi zostać równe karcie 01 — to ono trzyma wiersze obu
   kart na tych samych liniach). */
.hp-cia-cited {
  margin: 12px 0 0;
  display: grid;
  gap: 9px;
}

/* --- product: head, bridge ----------------------------------------------------- */

.hp-ciap-head { max-width: 760px; }

.hp-ciap-bridge { margin: 40px 0 0; display: grid; gap: 18px; align-items: stretch; }

@media (min-width: 900px) {
  .hp-ciap-bridge { grid-template-columns: minmax(0, 1fr) 168px minmax(0, 1fr); gap: 0; }
}

.hp-ciap-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid #DEE0E8;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 18px 40px -34px rgba(20, 22, 43, 0.6);
}

.hp-ciap-panel.is-cia {
  border-color: var(--cia-line);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cia-tint) 100%);
  box-shadow: 0 22px 46px -34px rgba(248, 163, 42, 0.85);
}

.hp-ciap-widget {
  flex: 1;
  min-height: 236px;
  display: flex;
  border: 1px solid #EDEEF2;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
}

/* height: auto, not marketing.css's 100%: this box's height is never definite (it is flexed inside
   a panel inside a slide the script only gives a min-height), so 100% fell back to the content
   height and, not being `auto`, also blocked the stretch — the widget stopped under its last row
   and the rest of the panel stood empty below it. With auto it stretches to the panel and the
   rows share the room (.mkt-cd-row in product-v2.css). */
.hp-ciap-widget .mkt-widget { flex: 1; min-width: 0; height: auto; }

.hp-ciap-join {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 18px;
  text-align: center;
}

.hp-ciap-join-line { display: none; }

/* The hairline that runs the height of the bridge, fading away from the arrow chip.
   It used to be a 1px-wide box with a gradient on it — and under body{zoom:.9} that box is
   0.89 device px, where Chromium paints a GRADIENT as nothing at all: sampled across the
   line's exact x in a 3x screenshot, every pixel came back 255,255,255. A solid colour on the
   same box paints fine (sampled 214), so the fix is to keep the box paint-safe and put the
   gradient on a 1px background layer inside it. Measured after: 220 at the dark end. */
@media (min-width: 900px) {
  .hp-ciap-join-line {
    display: block;
    flex: 1;
    width: 9px;
    background: linear-gradient(180deg, rgba(214, 218, 232, 0), #D6DAE8) no-repeat center top / 1px 100%;
  }
  .hp-ciap-join-line:last-child { background-image: linear-gradient(180deg, #D6DAE8, rgba(214, 218, 232, 0)); }
}

.hp-ciap-join-mark {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--cia-soft);
  border: 1px solid var(--cia-line);
  color: var(--cia-ink);
  display: grid;
  place-items: center;
}

.hp-ciap-join-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cia-ink);
}

.hp-ciap-join-note { font-size: 12px; line-height: 1.45; color: #656B7E; max-width: 20ch; }

@media (max-width: 899px) {
  .hp-ciap-join-mark svg { transform: rotate(90deg); }
  .hp-ciap-join-note { max-width: 34ch; }
}

/* --- product: the brief and the wizard behind it -------------------------------- */

.hp-ciap-panel-bar { display: flex; align-items: center; gap: 10px; }

.hp-ciap-wizard { margin: 2px 0 0; display: grid; gap: 9px; }

.hp-ciap-wizard ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.hp-ciap-wizard li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #656B7E;
  border: 1px solid #EFE7D8;
  border-radius: 999px;
  padding: 5px 11px;
  background: #FFFFFF;
}

.hp-ciap-wizard-n { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.06em; }

.hp-ciap-wizard li.is-done { color: #4C5163; border-color: #E3E5EC; }
.hp-ciap-wizard li.is-done .hp-ciap-wizard-n { color: #276A4D; }

.hp-ciap-wizard li.is-here {
  color: #6B4A09;
  font-weight: 600;
  background: var(--cia-soft);
  border-color: var(--cia-line);
}

.hp-ciap-brief-foot { margin-top: auto; padding-top: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; justify-content: space-between; }

.hp-ciap-btn {
  background: var(--cia-orange);
  color: #1A1F2E;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9px;
  padding: 8px 13px;
  box-shadow: 0 10px 20px -14px rgba(248, 163, 42, 0.95);
}

/* --- product: what ContentInAI adds --------------------------------------------- */

.hp-ciap-caps { margin: 34px 0 0; }

.hp-ciap-caps ul {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(192px, 100%), 1fr));
  gap: 14px;
}

.hp-ciap-caps li {
  display: grid;
  gap: 5px;
  align-content: start;
  border-top: 2px solid var(--cia-soft);
  padding: 12px 0 0;
}

.hp-ciap-cap-title { font-size: 13.5px; font-weight: 600; color: #14162B; }
.hp-ciap-cap-text { font-size: 12.5px; line-height: 1.55; color: #656B7E; text-wrap: pretty; }

/* --- product: foot --------------------------------------------------------------- */

.hp-ciap-foot {
  margin: 34px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #EDEEF2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.hp-ciap-back { margin: 0; max-width: 62ch; font-size: 13.5px; line-height: 1.6; color: #4C5163; text-wrap: pretty; }

.hp-ciap-back-label {
  display: inline-block;
  margin-right: 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cia-ink);
}

.hp-ciap-foot .hp-cia-cta { margin: 0; flex: 0 0 auto; }

/* --- narrower -------------------------------------------------------------------- */

/* marketing.css centres every section h2 and hides the paragraph right after it on phones;
   the flow below carries the story there, so the intro only needs to line up with it. */
@media (max-width: 640px) {
  .hp-cia-kicker { text-align: center; }
  .hp-cia-cta { width: 100%; justify-content: center; text-align: center; padding: 14px 20px; border-radius: 12px; margin-top: 22px; }
  .hp-cia-note { text-align: center; max-width: none; margin-top: 12px; }
  .hp-cia-stage-text { font-size: 12.5px; }
  .hp-cia-editor-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* Bez kreski i bez wyściółki nad paskiem — tak samo jak pasek modeli w karcie 03 (powód przy
     .hp-cia-cited). Odstęp trzyma teraz gap ciała edytora, czyli jedna liczba na jedną przerwę.
     space-between: po odjęciu podpisu zostały dwa mierniki, a karta ma tu całą szerokość
     kolumny — przy wyrównaniu do lewej zostawało 134 px pustego dna po prawej stronie. Teraz
     pasek spina obie krawędzie karty, tak jak wiersze nad nim (nazwa przy lewej, meta przy
     prawej) i pasek modeli w karcie 03. */
  .hp-cia-scores { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; width: auto; border-left: 0; padding: 0; gap: 14px; }
  .hp-cia-cite { grid-template-columns: 86px minmax(0, 1fr); }
  .hp-ciap-bridge { margin-top: 28px; }
  .hp-ciap-caps { margin-top: 28px; }
  .hp-ciap-caps ul { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hp-ciap-foot { margin-top: 28px; justify-content: center; text-align: center; }
  .hp-ciap-back { text-align: left; }
  .hp-ciap-widget { min-height: 0; }

  /* marketing.css shrinks the h2 to 22px/600 here. That is no longer "large text", so the
     orange half of the headline needs the 4.5:1 shade rather than the 3:1 one. */
  .hp-cia-accent { color: var(--cia-ink); }

  /* marketing.css hides `section h2 + p` on phones. On home that is fine — the note under the
     CTA still explains the relationship. On the product page the lead is the only sentence that
     says what the hand-off actually is, and without it the headline runs straight into a mockup,
     so this section takes it back. Scoped to .hp-ciap: the one place we leave the house rule. */
  .hp-ciap .hp-cia-lead { display: block !important; text-align: center; margin-top: 14px; }

  /* marketing.css trims [data-screen-label="ContentInAI"] to 24px bottom — written for the OLD
     section, inherited by this one through the same attribute. The rebuilt section ends on a
     full-width CTA and needs the 60px every neighbouring section has. */
  .hp-ciap { padding-bottom: 60px !important; }
}

@media (max-width: 400px) {
  .hp-ciap-caps ul { grid-template-columns: 1fr; }
}

/* --- motion ----------------------------------------------------------------------
 * .is-armed i .is-in dokłada skrypt: na stronie PRODUKTU blok contentinai w js/home-v2.js
 * ([data-hp-cia]), na HOME własny skrypt przy partialu ([data-hp-cia-row]) — powód niżej.
 * Serwer renderuje KLATKĘ KOŃCOWĄ; stan startowy istnieje wyłącznie pod .is-armed i tylko przy
 * prefers-reduced-motion: no-preference. Bez JS i przy zredukowanym ruchu nie rusza się nic,
 * a widać dokładnie to, co widać po skończonej animacji.
 *
 * HOME (~3,4 s w miejscu) — TRZY TAKTY, JEDEN PO DRUGIM.
 * Właściciel: "one by się musiały chyba stopniowo pojawiać, tzn. najpierw 01, później 02, później
 * 03, bo jak na raz zacznie migać wszystko to będzie kieeeepsko". Poprzedni rozkład dokładnie tak
 * migał: trzy karty wjeżdżały w 320 ms, a potem takty szły na zakładkę — paski karty 03 startowały
 * w 1200 ms, kiedy karta 02 dopiero doliczała pierścienie do 1980 ms.
 *
 * CO SIĘ RUSZA, A CO STOI — to jest umowa tej sekcji i trzeba ją czytać przed tabelą niżej.
 * STOI: cała konstrukcja, czyli ramka karty, etykieta, prompt, nazwy marek, puste tory pasków,
 * pasek edytora z wordmarkiem, tekst artykułu, zaznaczane zdanie, tarcze pierścieni z podpisami
 * SEO/GEO, etykieta "Cytują Twój artykuł" ze znakami i nazwami modeli, wniosek "Luka:"
 * i przycisk "Pisz w ContentInAI →". Wszystko to jest w klatce, w której czytelnik kartę zobaczy.
 * RUSZA SIĘ TYLKO TREŚĆ W ŚRODKU: paski rosną, meta wierszy dochodzą, wiersz marki przyjmuje
 * swój kolor (czerwony w 01, fiolet w 03), wniosek "Luka:" przechodzi z szarości w czerwień,
 * zaznaczenie przeciąga się po zdaniu, wjeżdżają chipsy akcji, pierścienie zataczają łuk
 * z liczbą, zapalają się ptaszki przy modelach, strzałka podaje pałkę.
 * Poprzednia runda inscenizowała CAŁĄ KARTĘ i to był błąd, za który płacił telefon: czytelnik
 * dojeżdżał do nagłówka "02 ContentInAI pisze artykuł" i pod nim miał 441 px z 844 (52% ekranu)
 * białego pasa, nawet do 0,9 s. Pusty pół ekranu jest gorszy od migania, przed którym ta runda
 * miała bronić. Liczby przed i po — przy bramce odsłony niżej.
 * Jeden wyjątek od "karta stoi zawsze" zostaje i jest nim WEJŚCIE CAŁEJ SEKCJI: .hp-cia-stage
 * (kolumna razem z kartą) wjeżdża z opacity 0 w --d 0 / 120 / 240 ms, żeby sekcja nie wskakiwała
 * na twardo. Ten zanik łapie tylko górną krawędź karty przechodzącą przez dolną krawędź ekranu:
 * zmierzone, ile karty da się mieć na ekranie, kiedy jej kolumna jest jeszcze poniżej 50% krycia —
 * 31 px przy 390 × 844 i 400 px/s, 41 px przy 900 px/s, najwięcej 61 px przy 1440 × 900 i 900 px/s.
 * Kilkadziesiąt px wjeżdżającej krawędzi to wejście, a nie dziura, i dlatego zostaje.
 *
 * Trzyma to JEDNA zmienna na odsłonę: --cd, czyli moment, w którym karta ZACZYNA MÓWIĆ (nie
 * "kiedy się pojawia" — ona już stoi). Wszystkie opóźnienia w środku liczą się od niej
 * (calc(var(--cd) + …)), więc kolejność trzech taktów przestawia się trzema liczbami,
 * a nie dwudziestoma.
 *
 * Belki kroków ("01 BrandinAI znajduje lukę") wjeżdżają wcześnie i blisko siebie — 0 / 120 / 240 ms
 * — bo struktura sekcji nie może się dobudowywać na oczach widza: trzy kolumny mają stać od razu,
 * a po kolei ma się wypełniać ich TREŚĆ. Takty kart ruszają w 200 / 980 / 2060 ms:
 *
 *   01  --cd 200      260 / 360 / 460  paski rosną (0,6 s)
 *                     420 / 520 / 620  meta wierszy dochodzą, wiersz po wierszu
 *                     620              wiersz "Twoja marka" robi się czerwony: brak wzmianki
 *                     640              wniosek "Luka:" przechodzi z szarości w czerwień
 *                     900              strzałka podaje pałkę do 02
 *
 *   02  --cd 980     1460              zaznaczenie przeciąga się od lewej do prawej (0,5 s),
 *                                      a kreska przy lewej krawędzi zapala się razem z nim
 *                    1600 / 1690 / 1780  Rozwiń · Skróć · Zmień ton wskakują pod zaznaczeniem
 *                    1680              pierścienie SEO/GEO zataczają łuk, liczby doliczają (0,7 s)
 *                    1820              podpis pod pierścieniami
 *                    1980              strzałka podaje pałkę do 03
 *
 *   03  --cd 2060    2120 / 2220 / 2320  te same paski, dwa tygodnie później (0,6 s)
 *                    2280 / 2380 / 2480  meta wierszy — z gotowym "0 → 5 z 9 modeli"
 *                    2480              wiersz "Twoja marka" robi się fioletowy: marka się pojawiła
 *                    2760 / 2870 / 2980  trzy ptaszki przy modelach, jeden po drugim
 *
 * Takty stykają się, ale się nie nakładają: 01 domyka wniosek w 640 ms i strzałkę w 900, a 02
 * bierze zaznaczenie w 1460; 02 kończy pierścienie w 2380 ms, a karta 03 ma wtedy dopiero
 * pierwsze dwa paski z trzech. Martwych klatek nie ma z definicji — karta jest kompletna zanim
 * jej takt się zacznie, więc najgorsze, co może zrobić przerwa w ruchu, to wyglądać jak
 * skończony raport.
 *
 * CO NAPĘDZA TEN ZEGAR (i dlaczego nie sam czas).
 * Do tej rundy cała sekwencja startowała na JEDEN wyzwalacz (18% sekcji w kadrze) i dalej szła
 * samym zegarem. Zmierzone przy 1440 × 900 i płynnym przewijaniu 900 px/s: .is-in wpadało w
 * 1300 ms, karta 01 wjeżdżała w 1500–1800 ms, karta 02 w 2280–2600, a karta 03 — z --cd 2060 —
 * miała wjechać w 3360 ms, czyli 780 px NAD górną krawędzią ekranu. Karta 03 była przezroczysta
 * przez cały czas, kiedy była widoczna (t = 1560–2717 ms, ~1,16 s), a wiersz "Twoja marka" stał
 * pusty przez całą swoją minutę sławy. Puenta sekcji nie pokazywała się nikomu, kto nie zatrzymał
 * się dokładnie nad nią.
 *
 * Dlatego zegar sekcji to teraz DWA zegary naraz, a liczy się ten, który jest dalej:
 *   · czas — zwykłe ms, dokładnie te z tabeli wyżej (dla kogoś, kto stanął albo czyta powoli),
 *   · droga — ile sekcja przejechała przez ekran; cała opowieść mieści się na odcinku od
 *     "górna krawędź pierwszej karty dotyka dołu ekranu" do "dolna krawędź ostatniej karty jest
 *     na 1/3 wysokości ekranu" (czyli (2/3)·vh + wysokość słupa kart).
 * Zegar nigdy nie cofa się (max z poprzednią wartością), więc drganie kółka myszy niczego nie
 * restartuje ani nie odkręca. Poniżej ~280 px/s szybszy jest zegar czasu, więc dla czytającego
 * i dla stojącego sekcja gra DOKŁADNIE tak, jak mówi tabela wyżej. Wyżej prowadzi droga i
 * opowieść dotrzymuje kroku oku zamiast grać pustej sali.
 *
 * Do tego KAŻDA odsłona ma własną bramkę: takt karty nie zaczyna się, zanim ta karta nie będzie
 * w kadrze NA TYLE, żeby jej domknięcie miało gdzie się odegrać — nawet jeśli zegar jest już za
 * jej --cd. Domknięcie to wniosek "Luka:" z przyciskiem (01), pierścienie SEO/GEO (02) i pasek
 * "Cytują Twój artykuł" (03); każde siedzi przy DOLNEJ krawędzi swojej karty i każde jest tym,
 * po co ta odsłona jest.
 *   · przy trzech kolumnach (od 900px) wszystkie karty stoją w JEDNYM wierszu, więc bramka pyta
 *     tylko, czy wiersz wjechał, a kolejność robi samo --cd. Ostrzejszy próg zlałby tu takty 01
 *     i 02 w jeden: zmierzone przy 1440 × 900 — wiersz kart jest cały w kadrze dopiero przy
 *     travel 356 px, a zegar drogi ma tam już 1289 ms, czyli minął i --cd 200, i --cd 980.
 *   · w jednej kolumnie (poniżej 900px) bramka czeka, aż domknięcie karty zmieści się nad dolną
 *     krawędzią ekranu. Sam skrawek karty nie wystarczał: zmierzone przy 390 × 844, przewijanie
 *     z przystankami — bramka otwierała się przy 35 px karty 03 w kadrze (11% karty), wiersz
 *     "Twoja marka" robił się fioletowy przy 40 px (12%) i tam też, poza kadrem, kończył się
 *     cały pasek modeli. Czytelnik, który się zatrzymał, nie zobaczył puenty nigdy: karta stoi,
 *     a zegar czasu idzie dalej. Po zmianie oba te takty wypadają przy pasku w całości w kadrze
 *     (zmierzone przy czterech rytmach start-stop od 143 do 700 px/s).
 *     Cena bramki: karta stoi kompletna i czeka tylko jej RUCH — paski nie zaczynają rosnąć,
 *     zaznaczenie się nie przeciąga, pierścienie nie zataczają łuku, dopóki domknięcie nie
 *     wjedzie w kadr. Zostaje po tym tylko slot na to, co dopiero ma stanąć. Zmierzona
 *     najwyższa pusta plama w karcie (największa pionowa przerwa w jej części widocznej na
 *     ekranie, przez cały przejazd; PRZED — 400 px/s, tak jak w zgłoszeniu, PO — gorsza
 *     z 400 i 900 px/s, po kilku przebiegach):
 *         390 × 844   01  329 → 32 px (39% → 4% ekranu)
 *                     02  441 → 87 px (52% → 10%)   ← slot na chipsy akcji
 *                     03  308 → 48 px (36% → 6%)    ← slot na ptaszki
 *        1440 × 900   01   98 → 58 px (11% → 6%)
 *                     02  350 → 60 px (39% → 7%)
 *                     03  356 → 61 px (40% → 7%)
 *     Podłoga tego pomiaru, czyli te same przerwy w klatce końcowej przy prefers-reduced-motion
 *     (nic nie inscenizowane, zostaje sam oddech układu): 17 / 29 / 28 px przy 390 × 844
 *     i 41 / 30 / 42 px przy 1440 × 900. Po zmianie jesteśmy 15–57 px nad tą podłogą, czyli
 *     w odstępach, które karta ma tak czy owak.
 *   · po 0,8 s bezruchu próg opada do połowy karty — inaczej czytelnik, który stanął z kartą
 *     w 9/10 widoczną, patrzyłby na puste miejsce po niej tak długo, jak długo stoi.
 * Kartę, którą czytelnik przeskoczył (jest już nad kadrem), bramka wypuszcza od razu w klatce
 * końcowej — lepiej pokazać wynik niż odegrać film do pustego fotela.
 *
 * KIEDY WOLNO ODKRĘCIĆ SEKCJĘ. .is-armed cofa WNĘTRZA kart do klatki startowej (same karty
 * od tej rundy stoją zawsze), więc wolno je dołożyć tylko wtedy, kiedy słup kart stoi jeszcze
 * pod ekranem — inaczej czytelnikowi, który już patrzy, paski znikają i rosną od nowa.
 * Decyduje o tym geometria w klatce, nie moment wczytania strony: warunek stał kiedyś w czasie
 * parsowania, a wtedy przeglądarka nie przywróciła jeszcze pozycji przewijania, więc po
 * odświeżeniu zaparkowanym na sekcji widziała ją 7,7 tys. px niżej, przepuszczała i sekcja
 * odgrywała się czytelnikowi za plecami (zmierzone przy 1440 × 900 i 1920 × 1080: karty spadały
 * do krycia 0 w 103 ms i wracały przez ~350 ms). Kto ma sekcję już pod okiem — odświeżył,
 * wrócił "wstecz", skoczył kotwicą, przyjechał od dołu — dostaje klatkę końcową, tak samo jak
 * gość bez JS. "Pod ekranem" mierzy się z tolerancją jednego piksela (travel < 1, nie < 0):
 * ułamka piksela karty nikt nie widzi, a ostre zero zostawiało martwy punkt dokładnie na
 * styku — pomiary i pełne uzasadnienie przy tym warunku w frame() na dole partiala.
 *
 * Zegar prowadzi skrypt przy partialu (partials/marketing/home-v2/contentinai.blade.php): dokłada
 * .is-armed i .is-in, a potem przewija przejścia przez Web Animations API (getAnimations →
 * pause → currentTime). Czasy w CSS są jedynym źródłem prawdy — skrypt czyta z nich --cd i
 * --cia-story i niczego nie skraca. Bez JS, bez getAnimations i przy zredukowanym ruchu nic się
 * nie dzieje, a widać klatkę końcową.
 *
 * Liczby 82 / 84 w pierścieniach dolicza licznik CSS na --cia-n, a nie skrypt: js/home-v2.js
 * liczył je na sztywno w 1080 ms i przybijał do tej sekundy CAŁY takt karty 02. Wiersz "Twoja
 * marka" w karcie 03 już NIE dolicza — powód przy samej regule niżej.
 *
 * PRODUCT (~4.4s) — the story runs left to right, because that is what the section claims.
 * The left panel is the real widgets/v2.content-demo, and it narrates for ~4.6s of its own:
 * reads (0–0.5), matches (0.5–2.0), picks (2.0–2.75), the metrics of the picked proposal land
 * (2.15–2.51), the "Pisz w ContentInAI →" button pops at 2.72 and lands ~3.12, the narration
 * clears by 4.6. marketing.js turns that widget live 28–235 ms after this section gets .is-in
 * (measured at 390/768/1024/1440/1920), so the click lands at roughly 3.2s on this clock.
 * Everything to the right of it therefore waits for the click instead of arriving first: the
 * right panel used to be completely settled at ~1.4s, i.e. the destination was finished 1.8s
 * before the source had even picked a topic, with "jedno kliknięcie" sitting between them.
 *     0         the left panel (the stage the widget plays in) fades in
 *  2950         the join column — the click, as the hand-off button lands
 *  3200         the ContentInAI panel opens
 *  3400 – 3720  the capability strip under the bridge
 *  3480 / 3600  the closed configuration line, then the wizard bar
 *  3720 – 3990  the outline rows, the thing the button under them approves
 * The panel's own fill is deliberately tight behind its arrival: staged further apart it read
 * as an empty cream box with a button in the corner for half a second.
 */
@media (prefers-reduced-motion: no-preference) {

  /* Wejście: belki kroków na home, panele i kolumna przekazania na produkcie. */
  .hp-cia.is-armed .hp-cia-stage,
  .hp-cia.is-armed .hp-ciap-panel,
  .hp-cia.is-armed .hp-ciap-join { opacity: 0; transform: translateY(12px); }

  .hp-cia.is-armed.is-in .hp-cia-stage,
  .hp-cia.is-armed.is-in .hp-ciap-panel,
  .hp-cia.is-armed.is-in .hp-ciap-join {
    opacity: 1;
    transform: none;
    transition-property: opacity, transform;
    transition-duration: 0.5s;
    transition-timing-function: var(--cia-ease);
    transition-delay: var(--d, calc(var(--i, 0) * 160ms));
  }

  /* The bridge waits for its own source: --d overrides the --i ladder above, which is the
     home section's and has nothing to do with this clock. */
  .hp-ciap .hp-ciap-panel.is-bia { --d: 0ms; }
  .hp-ciap .hp-ciap-join { --d: 2950ms; }
  .hp-ciap .hp-ciap-panel.is-cia { --d: 3200ms; }

  /* --- home: zegar sekcji ---------------------------------------------------
   * Trzy liczby na odsłonę i nic więcej:
   *   --d   kiedy wjeżdża BELKA kroku (blisko siebie — to jest szkielet sekcji),
   *   --cd  kiedy KARTA ZACZYNA MÓWIĆ — sama karta stoi od pierwszej klatki, a od --cd
   *         liczy się wszystko, co się w niej rusza,
   *   --ad  kiedy strzałka podaje pałkę następnej odsłonie (tuż przed jej taktem).
   * Obie zmienne dziedziczą się z odsłony w dół, więc każdy element w środku karty zna
   * moment startu swojego taktu bez powtarzania go w każdej regule.
   *
   * --cia-story to długość taktu JEDNEJ karty liczona od jej --cd: najdłuższy ogon to
   * strzałka odsłony 02 (--ad 1980 + 0,4 s = 1000 + 400 ms po jej --cd). Skrypt czyta stąd
   * --cd i --cia-story, żeby wiedzieć, gdzie kończy się opowieść — nie ma drugiej tabeli
   * czasów w JS. */
  .hp-cia--row { --cia-story: 1400ms; }
  .hp-cia--row .hp-cia-stage { --d: calc(var(--i, 0) * 120ms); }
  .hp-cia--row .hp-cia-stage:nth-child(1) { --cd: 200ms; --ad: 900ms; }
  .hp-cia--row .hp-cia-stage:nth-child(2) { --cd: 980ms; --ad: 1980ms; }
  .hp-cia--row .hp-cia-stage:nth-child(3) { --cd: 2060ms; }

  /* KARTA NIE WCHODZI — i to jest cała ta runda.
     Stała tu para reguł: .hp-cia--row.is-armed .hp-cia-card { opacity: 0; translateY(10px) }
     plus przejście wpuszczające kartę w --cd. Inscenizowała CAŁĄ KARTĘ, więc do swojego taktu
     karta była pustym miejscem — a bramka odsłony (opis wyżej) potrafi ten takt odsunąć
     o kolejne pół sekundy. Przy 390 × 844 czytelnik dojeżdżał do nagłówka "02 ContentInAI
     pisze artykuł" i pod nim miał ~440 px białego pasa, czyli połowę ekranu. Pusty pół ekranu
     jest gorszy od migania, przed którym ta runda miała bronić.
     Karta — ramka, etykieta, prompt, nazwy marek, tory pasków, tekst artykułu, pasek modeli —
     jest więc teraz stanem podstawowym i stoi w chwili, w której czytelnik ją zobaczy.
     Inscenizuje się WYŁĄCZNIE to, co w środku karty jest zdarzeniem: paski rosną, zaznaczenie
     przeciąga się po zdaniu, pierścienie zataczają łuk, wiersz marki przyjmuje swój kolor,
     ptaszki przy modelach się zapalają. --cd zostaje jedną liczbą na odsłonę, tylko znaczy
     teraz "kiedy ta karta ZACZYNA MÓWIĆ", a nie "kiedy się pojawia". */

  /* Strzałka jest podaniem pałki, więc wchodzi tuż PRZED taktem, do którego prowadzi —
     nie razem ze swoją własną odsłoną, gdzie przez sekundę wisiałaby nad kartą, która
     jeszcze nic nie mówi. To jedyny element sekwencji, który się dobudowuje, i wolno mu:
     jest przerywnikiem MIĘDZY kartami, nie treścią żadnej z nich (22 px wysokości). */
  .hp-cia--row.is-armed .hp-cia-arrow { opacity: 0; transform: translateY(-6px); }
  .hp-cia--row.is-armed.is-in .hp-cia-arrow {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s var(--cia-ease) var(--ad, 0ms),
                transform 0.4s var(--cia-ease) var(--ad, 0ms);
  }

  /* --- 01 i 03: paski, meta, wiersz z wnioskiem ---------------------------- */

  .hp-cia.is-armed .hp-cia-cite-bar i { transform: scaleX(0); transform-origin: left center; }
  .hp-cia.is-armed.is-in .hp-cia-cite-bar i {
    transform: none;
    transition: transform 0.6s var(--cia-ease) calc(var(--cd, 0ms) + var(--i, 0) * 100ms + 60ms);
  }

  /* Liczba pod paskiem dochodzi chwilę po nim — pasek rośnie, wynik się odczytuje. */
  .hp-cia.is-armed .hp-cia-cite-meta { opacity: 0; }
  .hp-cia.is-armed.is-in .hp-cia-cite-meta {
    opacity: 1;
    transition: opacity 0.35s var(--cia-ease) calc(var(--cd, 0ms) + var(--i, 0) * 100ms + 220ms);
  }

  /* Trzeci wiersz obu kart jest puentą, więc do swojej kolejki wygląda jak dwa nad nim:
     ciemna nazwa, szara meta, szary tor. Dopiero kiedy pasek NIE urósł (karta 01) albo
     urósł pierwszy raz (karta 03), wiersz przyjmuje swój kolor — czerwony "brak wzmianki"
     albo fiolet "marka się pojawiła". Dokładnie ten sam moment co meta wiersza (+420 ms),
     żeby to było jedno zdarzenie, a nie dwa obok siebie. */
  .hp-cia.is-armed .hp-cia-cite.is-gap .hp-cia-cite-name,
  .hp-cia.is-armed .hp-cia-cite.is-win .hp-cia-cite-name { color: #14162B; }
  .hp-cia.is-armed .hp-cia-cite.is-gap .hp-cia-cite-meta,
  .hp-cia.is-armed .hp-cia-cite.is-win .hp-cia-cite-meta { color: #656B7E; }
  .hp-cia.is-armed .hp-cia-cite.is-gap .hp-cia-cite-bar,
  .hp-cia.is-armed .hp-cia-cite.is-win .hp-cia-cite-bar { background: #EDEEF2; }

  .hp-cia.is-armed.is-in .hp-cia-cite.is-gap .hp-cia-cite-name,
  .hp-cia.is-armed.is-in .hp-cia-cite.is-gap .hp-cia-cite-meta { color: #B42318; }
  .hp-cia.is-armed.is-in .hp-cia-cite.is-win .hp-cia-cite-name,
  .hp-cia.is-armed.is-in .hp-cia-cite.is-win .hp-cia-cite-meta { color: #4B4CD8; }
  .hp-cia.is-armed.is-in .hp-cia-cite.is-gap .hp-cia-cite-bar { background: #FBE5E2; }
  .hp-cia.is-armed.is-in .hp-cia-cite.is-win .hp-cia-cite-bar { background: #E7E8FD; }

  /* UWAGA: opacity MUSI stać w tej liście. Skrót transition: kasuje transition-property
     ustawione wcześniej, a ta reguła jest dla .is-gap / .is-win mocniejsza (0,5,0) i późniejsza
     niż reguła meta wyżej — bez tego wiersza meta trzeciego wiersza pojawiała się natychmiast,
     czyli "brak wzmianki" stało na karcie, zanim urósł pierwszy pasek (widać to na klatce 300 ms).
     Formuła opóźnienia jest ta sama, co w regule meta, więc wiersz dalej dochodzi razem z resztą. */
  .hp-cia.is-armed.is-in .hp-cia-cite.is-gap .hp-cia-cite-name,
  .hp-cia.is-armed.is-in .hp-cia-cite.is-gap .hp-cia-cite-meta,
  .hp-cia.is-armed.is-in .hp-cia-cite.is-gap .hp-cia-cite-bar,
  .hp-cia.is-armed.is-in .hp-cia-cite.is-win .hp-cia-cite-name,
  .hp-cia.is-armed.is-in .hp-cia-cite.is-win .hp-cia-cite-meta,
  .hp-cia.is-armed.is-in .hp-cia-cite.is-win .hp-cia-cite-bar {
    transition: color 0.4s var(--cia-ease) calc(var(--cd, 0ms) + 420ms),
                background-color 0.4s var(--cia-ease) calc(var(--cd, 0ms) + 420ms),
                opacity 0.35s var(--cia-ease) calc(var(--cd, 0ms) + var(--i, 0) * 100ms + 220ms);
  }

  /* 01 — WNIOSEK I PRZYCISK STOJĄ, ZMIENIA SIĘ KOLOR WNIOSKU.
     Stała tu para reguł cofająca wniosek „Luka:” i przycisk „Pisz w ContentInAI →” do
     opacity: 0 / translateY(6px). To był cały blok domykający karty 01 — a bramka odsłony
     czeka właśnie na niego, więc dokładnie wtedy, kiedy wjeżdżał w kadr, zostawało po nim
     puste miejsce: zmierzone przy 390 × 844 i 400 px/s — 153 px z 844 (18%) na dole karty,
     pod trzema pustymi torami pasków. Karta czytała się jak „to się jeszcze wczytuje”.
     Teraz oba elementy należą do stanu podstawowego, a wniosek dostaje DOKŁADNIE ten sam
     zabieg, co trzeci wiersz nad nim (reguła .is-gap wyżej): do swojej kolejki stoi w szarości,
     czyli wygląda jak zwykła notatka raportu, i w --cd + 440 ms — w tej samej klatce, w której
     wiersz „Twoja marka” robi się czerwony — przyjmuje swój czerwony. Jedno zdarzenie, nie dwa.
     Zdanie da się przeczytać w każdej klatce (7,2:1 w szarości, 6,0:1 w czerwieni), więc żadna
     nie kłamie, a płacimy za to zerem pustego pola zamiast 153 px.
     Przycisk nie dostaje już własnego wejścia: jest kontrolką makiety, tak samo jak pasek
     edytora w karcie 02, a pałkę do odsłony 02 i tak podaje strzałka pod kartą (--ad). */
  /* RUNDA „DELIKATNE KRESKI": wniosek stracił różowe pudełko (powód w bloku 5 w
     hv-contentinai.css), więc zostaje sam przeskok KOLORU — dokładnie ten sam zabieg i to samo
     opóźnienie, co w trzecim wierszu nad nim. Tło z tej pary reguł wyszło: pod zdaniem bez
     wyściółki szare #F4F5F8 malowałoby się jako zakreślacz na tekście, a nie jako spokojna
     notatka raportu. Zdanie czyta się w każdej klatce (7,2:1 w szarości, 6,0:1 w czerwieni). */
  .hp-cia--row.is-armed .hp-cia-gap { color: #4C5163; }
  .hp-cia--row.is-armed.is-in .hp-cia-gap {
    color: #B42318;
    transition: color 0.4s var(--cia-ease) calc(var(--cd, 0ms) + 440ms);
  }

  /* --- 02: tekst, zaznaczenie, akcje, wyniki ------------------------------- */

  /* TEKST ARTYKUŁU NALEŻY DO STANU PODSTAWOWEGO. Stały tu trzy reguły, które cofały oba
     akapity i zaznaczane zdanie do opacity: 0 / translateY(5px) i wpuszczały je w --cd + 120 /
     230 / 340 ms. Razem z nimi znikała cała treść dokumentu, czyli ~2/3 wysokości karty 02 —
     a to właśnie ta karta zostawiała największą dziurę (pomiary przy bloku ruchu wyżej).
     Argument "najpierw stoi tekst, dopiero potem ktoś go zaznacza" jest słuszny i zostaje
     spełniony MOCNIEJ: tekst stoi od pierwszej klatki, więc zaznaczenie nigdy nie wyprzedza
     zdania, które zaznacza. Rusza się to, co w edytorze naprawdę jest zdarzeniem —
     przeciągnięcie zaznaczenia, akcje AI pod nim i pierścienie. */

  /* Zaznaczenie wjeżdża od lewej do prawej, jak przeciągnięcie kursorem po tekście:
     animowany jest background-size tła-obrazka (kolor tła nie animuje się na szerokość).
     Kreska przy lewej krawędzi zapala się razem z początkiem przeciągnięcia. */
  .hp-cia.is-armed .hp-cia-sel { background-size: 0% 100%; border-left-color: transparent; }
  .hp-cia.is-armed.is-in .hp-cia-sel {
    background-size: 100% 100%;
    border-left-color: var(--cia-orange);
    transition: background-size 0.5s var(--cia-ease) calc(var(--cd, 0ms) + 480ms),
                border-color 0.25s var(--cia-ease) calc(var(--cd, 0ms) + 480ms);
  }

  .hp-cia.is-armed .hp-cia-tool { opacity: 0; transform: translateY(4px); }
  .hp-cia.is-armed.is-in .hp-cia-tool {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s var(--cia-ease) calc(var(--cd, 0ms) + var(--i, 0) * 90ms + 620ms),
                transform 0.4s var(--cia-ease) calc(var(--cd, 0ms) + var(--i, 0) * 90ms + 620ms);
  }

  .hp-cia.is-armed .hp-cia-ring-arc { stroke-dashoffset: 100.53; }
  .hp-cia.is-armed.is-in .hp-cia-ring-arc {
    stroke-dashoffset: var(--off);
    transition: stroke-dashoffset 0.7s var(--cia-ease) calc(var(--cd, 0ms) + 700ms);
  }

  /* Liczba zapala się dopiero z łukiem. Inaczej przez ~0,7 s stało w pierścieniu okrągłe "0",
     czyli wynik analizy, której jeszcze nie było — a zero w mierniku czyta się jak ocena, nie
     jak stan "puste". Teraz pierścień jest po prostu pusty, dopóki nie zacznie się zataczać. */
  .hp-cia.is-armed .hp-cia-ring-value { opacity: 0; }
  .hp-cia.is-armed.is-in .hp-cia-ring-value {
    opacity: 1;
    transition: opacity 0.3s var(--cia-ease) calc(var(--cd, 0ms) + 700ms);
  }

  /* Ta sama krzywa i to samo opóźnienie co łuk wyżej: liczba dochodzi do 82/84 dokładnie
     wtedy, kiedy łuk dochodzi do swojego końca. */
  .hp-cia.is-armed.is-in .hp-cia-ring-value .hp-cia-n {
    animation: hp-cia-count 0.7s var(--cia-ease) calc(var(--cd, 0ms) + 700ms) backwards;
  }

  /* Podpis pod pierścieniami (--cd + 840 ms) wyszedł razem z samym podpisem. Ogon taktu karty
     02 trzymają i tak pierścienie (700 + 700 = 1400 ms) oraz strzałka (--ad 1980 = --cd 980
     + 1000, + 400 ms), więc --cia-story zostaje 1400 ms. */

  /* --- 03: pasek modeli ----------------------------------------------------- */

  /* Wiersz "Twoja marka" NIE dolicza już trójki licznikiem (było: hp-cia-count 0,6 s w
     --cd + 440 ms). Licznik zostawiał klatki, na których zdanie stoi skończone, w swoim
     docelowym fiolecie i przy pełnym pasku, a mówi nieprawdę: przy 390 px, w 1/6 odliczania,
     karta 03 czytała się jako "Twoja marka — 0 → 1 z 6 modeli" (zmierzone: --cia-n = 1 przy
     krycie wiersza 0,73; 120 ms później "0 → 2" i do tego zapalał się pasek "Cytują Twój
     artykuł"). Żadna klatka nie ma prawa podawać liczby, która nie jest prawdziwa, jak
     wyniku — a tu nie było jak tego uratować krojem czy tempem: zdanie jest zdaniem.
     Teraz meta wiersza pojawia się od razu z wartością końcową, więc pierwsza klatka, na
     której da się je przeczytać, jest już prawdziwa. Sama droga "z zera do trójki" nie
     ginie: niesie ją strzałka w treści ("0 → 3", lang/pl/home_v2_contentinai.php) i pasek,
     który rośnie od zera do 3/6 — czyli dokładnie to, co licznik dublował.
     Pierścienie 82 / 84 w karcie 02 doliczają dalej: tam liczba stoi w mierniku, którego łuk
     zatacza się razem z nią (ta sama krzywa, to samo opóźnienie), więc klatka w połowie czyta
     się jak miernik w ruchu, a nie jak skończone zdanie. */

  /* 03 — PASEK MODELI STOI OD RAZU, ZAPALAJĄ SIĘ SAME PTASZKI.
     Stała tu para reguł, która cofała do opacity: 0 najpierw CAŁY pasek (.hp-cia-cited razem
     z etykietą "Cytują Twój artykuł"), a potem jeszcze każdy wiersz modelu z osobna
     (translateX(-8px)). Pasek to domknięcie karty 03 i to o niego pyta bramka odsłony, więc
     dokładnie w chwili, kiedy czytelnik na niego patrzył, nie było go widać. Teraz etykieta,
     znaki modeli i ich nazwy należą do stanu podstawowego — czyta się je od pierwszej klatki —
     a rusza się to, co jest w tym pasku ORZECZENIEM: trzy zielone ptaszki, jeden po drugim.
     Ptaszek jest werdyktem o nazwie obok, więc wchodzi jak przybicie pieczątki (skala 0,55 → 1),
     a nie jak wjazd z boku. Kolejność i ogon taktu bez zmian: +700 / +810 / +920, koniec
     +1320 ms, czyli dalej pod --cia-story (1400 ms). */
  .hp-cia--row.is-armed .hp-cia-model .hp-cia-check { opacity: 0; transform: scale(0.55); }
  .hp-cia--row.is-armed.is-in .hp-cia-model .hp-cia-check {
    opacity: 1;
    transform: none;
    transition: opacity 0.4s var(--cia-ease) calc(var(--cd, 0ms) + var(--i, 0) * 110ms + 700ms),
                transform 0.4s var(--cia-ease) calc(var(--cd, 0ms) + var(--i, 0) * 110ms + 700ms);
  }

  /* product — the wizard step bar, then the capability strip */
  .hp-cia.is-armed .hp-ciap-wizard li { opacity: 0; }
  .hp-cia.is-armed.is-in .hp-ciap-wizard li { opacity: 1; transition: opacity 0.4s var(--cia-ease) 3600ms; }

  .hp-cia.is-armed .hp-ciap-caps li { opacity: 0; transform: translateY(8px); }
  .hp-cia.is-armed.is-in .hp-ciap-caps li {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s var(--cia-ease) calc(var(--i, 0) * 80ms + 3400ms), transform 0.45s var(--cia-ease) calc(var(--i, 0) * 80ms + 3400ms);
  }
}

/* Klatka "przed" licznika. Klatki "do" nie ma celowo: bez niej animacja kończy na wartości,
   którą element i tak ma z kaskady (--cia-n z atrybutu style), więc jedna reguła obsługuje
   i 82, i 84 — a klatka końcowa jest tą samą liczbą, którą widzi gość bez JS. */
@keyframes hp-cia-count {
  from { --cia-n: 0; }
}

/* Strzałka przy 900px+ jest pozioma i pozycjonuje się translateX(-50%), więc jej stan
   startowy musi to przesunięcie nieść ze sobą — inaczej wjeżdżałaby z połowy swojej
   szerokości w bok zamiast o 7 px wzdłuż kierunku, w którym pokazuje. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .hp-cia--row.is-armed .hp-cia-arrow { transform: translateX(calc(-50% - 7px)); }
  .hp-cia--row.is-armed.is-in .hp-cia-arrow { transform: translateX(-50%); }
}

/* Poniżej 900px odsłony stoją JEDNA POD DRUGĄ, więc nikt nie ogląda ich obok siebie — czytanie
 * od lewej do prawej przestaje istnieć, a zaczyna się zwykłe przewijanie. O to, żeby karta 03
 * nie odegrała się 1200 px przed tym, jak ktokolwiek do niej dojedzie, dba teraz bramka na
 * odsłonę (opis przy bloku ruchu wyżej), a nie skracanie zegara — przy 390 px karta 03 zaczyna
 * mówić wtedy, kiedy jej pasek modeli mieści się nad dolną krawędzią ekranu, niezależnie od
 * tego, co pokazuje --cd.
 * Krótsze --cd zostaje tu z innego powodu: przy wysokim ekranie w jednej kolumnie (np. 768 × 1366)
 * dwie karty bywają widoczne naraz i obie bramki są otwarte — wtedy to --cd decyduje o odstępie,
 * a sekunda przerwy między kartami, których i tak nie porównuje się wzrokiem obok siebie,
 * byłaby martwą klatką. Takty zachodzą tu na siebie mocniej, ale sąsiednie karty są zwykle
 * poza kadrem, więc nie ma czego z czym mylić. */
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .hp-cia--row .hp-cia-stage:nth-child(1) { --ad: 600ms; }
  .hp-cia--row .hp-cia-stage:nth-child(2) { --cd: 700ms; --ad: 1200ms; }
  .hp-cia--row .hp-cia-stage:nth-child(3) { --cd: 1300ms; }
}

/* === scope ================================================================= */
/*
 * Home v2 — "Zakres" (?zakres=nowy). Markup: partials/marketing/home-v2/scope.blade.php.
 *
 * Sekcja rozdziela dwa poziomy układem, nie znakiem: lewa kolumna "co dostajesz" (numer, nazwa,
 * jak działa), prawa "po co Ci to" (kafel na lilaku). Kolumny włączają się od 860px — czyli od
 * szerokości, na której obie faktycznie się mieszczą (pomiary przy bloku @media niżej); niżej
 * wszystko idzie w jednej kolumnie, bez slidera, a etykieta "po co Ci to" wraca do wnętrza kafla.
 *
 * Oba poziomy są nazwane na każdej szerokości: od 860px nagłówkami kolumn, w paśmie 641–859px
 * jednym "co dostajesz" nad listą i etykietą w każdym kaflu, a na telefonie (≤640px) samym
 * nagłówkiem h2 i etykietą w kaflu — tam marketing.css centruje h2, więc lewa legenda pod
 * wyśrodkowanym tytułem wyglądałaby na niedokończone wyrównanie.
 *
 * Wszystko jest pod .hp-scope / .hp-scope-*, bo ten plik ładuje się na obu stronach preview.
 */

.hp-scope {
  background: #FFFFFF;
  padding: 110px 0;
}

.hp-scope-head {
  max-width: 760px;
}

.hp-scope-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;
}

/* --- nagłówki poziomów ----------------------------------------------------
 * Jeden kicker w skali strony (11px / .14em, jak .hp-kicker w home-v2.css).
 * W jednej kolumnie zostaje z niego tylko "co dostajesz" — "po co Ci to" niesie
 * wtedy etykieta w kaflu, więc powtarzanie go tutaj byłoby szumem. Na telefonie
 * znika także "co dostajesz" (patrz blok ≤640px).
 */

.hp-scope-legend {
  display: block;
  margin: 34px 0 0;
  padding: 0 0 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hp-scope-legend-what { color: #656B7E; }
.hp-scope-legend-why { display: none; color: #4B4CD8; }

/* --- lista ---------------------------------------------------------------- */

.hp-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #DEE0E8;
}

.hp-scope-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 22px 0 24px;
  border-bottom: 1px solid #EDEEF2;
}

.hp-scope-what {
  display: flex;
  gap: 16px;
}

.hp-scope-num {
  flex: 0 0 auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #5B5CE6;
  padding-top: 2px;
}

.hp-scope-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hp-scope-h3 {
  margin: 0;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: #14162B;
}

/* Opis jest poziomem pomocniczym, więc schodzi do koloru wyciszonego — korzyść obok jest
   atramentowa. W starej wersji opis (#4C5163, 14px) był ciemniejszy i większy od korzyści. */
.hp-scope-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #656B7E;
  text-wrap: pretty;
}

/* --- kolumna "po co Ci to" ------------------------------------------------- */

/* W jednej kolumnie kafel obejmuje swoje zdanie, zamiast ciągnąć się przez cały kontener:
   bez tego przy 700px jest 636px lilaku (604px w środku) na 282–562px tekstu, czyli 7–53%
   pustego tła siedem razy pod rząd — najwięcej w wierszu 07, który ma najkrótszą korzyść.
   Świadomie fit-content, a nie sztywna miara — cap na 400px wypadł jeszcze
   gorzej niż pas: łamał korzyść na dwie linie, mając obok 270px wolnego miejsca, co wygląda
   na błąd, a nie na decyzję. Na telefonie zdanie i tak jest szersze niż kontener, więc
   max-width sprowadza kafel do pełnej szerokości i nic się tam nie zmienia. */
.hp-scope-why {
  background: #EEF0FE;
  border-radius: 12px;
  padding: 14px 16px;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.hp-scope-why-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4B4CD8;
}

.hp-scope-payoff {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  color: #14162B;
  text-wrap: pretty;
}

/* --- dwie kolumny ---------------------------------------------------------
 * Próg 860px jest zmierzony, nie zgadnięty. Przy 720px kolumny miałyby 324/292px i układ się
 * sypie: tytuł łamie się na dwie linie w 4 z 7 wierszy, opis schodzi na trzy w 5 z 7, korzyść
 * też na trzy w 4 z 7 — a kafel i tak stoi pusty od dołu, do 54px wolnego. Przy 860px kolumny
 * mają 398/358px: każdy tytuł mieści się w jednej linii, wolnego w kaflu zostaje 8–9px w 6 z 7
 * wierszy (31px w 07, który ma najkrótszą korzyść). Korzyść schodzi tam na trzecią linię tylko
 * w wierszu 06 — najdłuższym zdaniu sekcji. Między tymi progami jedna kolumna czyta się lepiej
 * niż dwie ściśnięte.
 */

@media (min-width: 860px) {
  .hp-scope {
    --hp-scope-cols: minmax(0, 1fr) minmax(0, 0.9fr);
    --hp-scope-gap: 40px;
  }

  .hp-scope-legend {
    display: grid;
    grid-template-columns: var(--hp-scope-cols);
    column-gap: var(--hp-scope-gap);
    margin: 40px 0 0;
    padding: 0 0 12px;
    border-bottom: 1px solid #DEE0E8;
  }

  .hp-scope-legend-why { display: block; }

  .hp-scope-list { border-top: 0; }

  .hp-scope-row {
    grid-template-columns: var(--hp-scope-cols);
    column-gap: var(--hp-scope-gap);
    align-items: stretch;
    padding: 18px 0;
  }

  .hp-scope-what { padding: 6px 0; }

  /* Tu miarę kafla wyznacza kolumna siatki, więc hug z jednej kolumny znika. */
  .hp-scope-why { padding: 16px 20px; width: auto; max-width: none; }

  /* Etykieta zostaje w DOM dla czytników ekranu — na tej szerokości niesie ją nagłówek kolumny. */
  .hp-scope-why-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Szeroka kolumna treści: proporcje idą za wagą tekstu, nie za jego długością. Opis mieści się
   w jednej-dwóch liniach niezależnie od podziału, a to korzyść wyznacza wysokość wiersza —
   przy 0.78fr łamała się na dwie linie z ogonem na jedno słowo. */
@media (min-width: 1000px) {
  .hp-scope {
    --hp-scope-gap: 48px;
  }

  .hp-scope-legend { margin: 46px 0 0; }
}

/* --- telefon --------------------------------------------------------------
 * marketing.css wymusza poniżej 641px h3 { font-size: 15px !important } i
 * p { font-size: 14px !important }, więc bez !important opis i korzyść miałyby tu
 * identyczny stopień — a różnica stopni jest połową tego, co rozdziela oba poziomy.
 */

@media (max-width: 640px) {
  /* marketing.css centruje tu h2 i kicker (section h2 { text-align: center !important }).
     Legenda "co dostajesz" zostawała wyrównana do lewej tuż pod wyśrodkowanym tytułem —
     samotny lewy kicker pod centrowanym nagłówkiem czyta się jak błąd składu. Poziomy
     nazywa tutaj sam h2 ("Co dostajesz i po co Ci to") plus etykieta w każdym kaflu. */
  .hp-scope-legend { display: none; }
  .hp-scope-list { margin-top: 30px; }
  .hp-scope-row { padding: 16px 0 18px; gap: 10px; }
  .hp-scope-what { gap: 12px; }
  .hp-scope-h3 { font-size: 16px !important; }
  .hp-scope-desc { font-size: 13.5px !important; line-height: 1.55; }
  .hp-scope-why { padding: 11px 13px; border-radius: 10px; gap: 4px; }
  .hp-scope-payoff { font-size: 15px !important; line-height: 1.45; }
}

/* --- wejście sekcji -------------------------------------------------------
 * Stan startowy dokłada dopiero JS (atrybut na sekcji), więc bez JS i przy
 * prefers-reduced-motion lista jest po prostu widoczna. Animujemy tylko
 * transform/opacity; transition-delay stoi po skrócie, bo skrót kasuje opóźnienie.
 */

[data-hp-scope-anim] .hp-scope-row {
  opacity: 0;
  transform: translateY(12px);
}

[data-hp-scope-anim] .hp-scope-row.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--hp-scope-d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  [data-hp-scope-anim] .hp-scope-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
}