/* ==========================================================================
   Maja AI — landing page
   Ported from the Claude Design artboard "Maja AI Landing v2.dc.html".
   Values are taken from the artboard; deliberate deviations are marked DEVIATION.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted variable woff2. One file per unicode-range serves
   the whole weight axis. The latin-ext files are REQUIRED: Polish
   ą ć ę ł ń ś ź ż live in U+0100–02BA; only ó falls inside latin.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ink: #111111;
  --accent: #FFD52E;
  --accent-soft: #FFE98A;
  --cream: #FAF5E4;

  /* Text */
  --text: #444444;
  --text-2: #555555;
  /* DEVIATION: the artboard uses #999999 (2.85:1) and #777777 (4.48:1) for
     small text on white — both fail WCAG AA. #6E6E6E is 5.1:1. #999999 is kept
     only where it is decorative or sits on --ink (5.9:1 there, which passes). */
  --muted: #6E6E6E;
  --muted-on-dark: #999999;
  --text-on-dark: #bbbbbb;

  /* Lines & fills */
  --hair: #e5e5e5;
  --hair-2: #eeeeee;
  --hair-3: #f0f0f0;
  --fill: #f0f0f0;
  --fill-2: #f5f5f5;
  --fill-3: #f2f2f2;
  --fill-4: #f6f6f6;
  --line-soft: #dddddd;
  --line-dark: #333333;
  --decor: #a6a6a6;

  /* Status */
  --ok-bg: #EFFAF0;
  --ok-fg: #1E7A34;

  /* Type */
  --font-display: 'Space Grotesk', 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-lg: 28px;
  --r-md: 24px;
  --r-card: 20px;
  --r-sm: 18px;
  --r-ms: 16px;
  --r-xs: 12px;
  --r-pill: 100px;

  --border: 1.5px solid var(--ink);
  --shadow-hard: 6px 6px 0 rgba(17, 17, 17, 0.08);
  --shadow-hard-lg: 8px 8px 0 rgba(17, 17, 17, 0.1);

  /* Layout */
  --container: 1160px;
  --gutter: clamp(20px, 2.61vw + 1.7px, 32px);
  --rhythm: clamp(64px, 5.22vw + 27.5px, 88px);

  /* Fluid display sizes. Each interpolates between the mobile artboard's value
     at 390px and the v2 artboard's value at 1160px, then locks. */
  --fs-h1: clamp(38px, 3.12vw + 25.8px, 62px);
  --fs-lede: clamp(16px, 0.52vw + 14px, 20px);
  --fs-h2: clamp(29px, 2.21vw + 20.4px, 46px);
  --fs-h2-case: clamp(28px, 1.82vw + 20.9px, 42px);
  --fs-h2-dark: clamp(28px, 1.3vw + 22.9px, 38px);
  --fs-h2-cta: clamp(30px, 2.86vw + 18.9px, 52px);
  --fs-billboard: clamp(44px, 5.71vw + 21.7px, 88px);
  --fs-price: clamp(38px, 2.08vw + 29.9px, 54px);
  --fs-stat: clamp(30px, 1.3vw + 24.9px, 40px);
  --fs-h3: clamp(26px, 1.04vw + 22px, 34px);
  --fs-stat-lg: clamp(32px, 1.56vw + 25.9px, 44px);
  --fs-stat-row: clamp(26px, 0.52vw + 23.9px, 30px);
  --fs-faq-q: clamp(16px, 0.39vw + 14.5px, 19px);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

a {
  color: var(--ink);
  text-decoration: none;
}

a:hover {
  color: var(--text);
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Breathing room when jumping to an anchor. The larger phone value clears the
   sticky nav, which is only sticky at that breakpoint. */
[id] {
  scroll-margin-top: 24px;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-top: var(--rhythm);
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow--center {
  text-align: center;
}

.eyebrow--accent {
  color: var(--accent);
}

.grid-2 {
  display: grid;
  gap: 56px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  /* <button> elements otherwise inherit the UA's `buttonface` grey, which the
     transparent variants below are not designed against. */
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn--solid {
  background: var(--ink);
  color: #ffffff;
}

.btn--solid:hover {
  background: var(--accent);
  color: var(--ink);
}

.btn--outline {
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline:hover {
  background: var(--fill-2);
  color: var(--ink);
}

/* Sizes */
.btn--nav {
  padding: 11px 22px;
  font-size: 15px;
}

.btn--hero {
  padding: 16px 32px;
  font-size: 17px;
}

.btn--card {
  padding: 15px 32px;
  font-size: 16px;
  margin-top: auto;
}

.btn--cta {
  padding: 18px 40px;
  font-size: 18px;
}

/* On the yellow pricing card the solid button inverts to white on hover. */
.price-card--own .btn--solid:hover {
  background: #ffffff;
  color: var(--ink);
}

/* Underlined text link with the accent rule. */
.link-accent {
  font-size: 15px;
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}

/* WCAG 2.5.8 Target Size (Minimum): standalone text links are only as tall as
   their line box (16–21px). Extend the pointer target to 24px with a
   transparent ::after so the visual design is untouched. Links that sit inline
   inside a sentence are exempt from the criterion and are left alone. */
.link-accent,
.footer__contact a,
.footer__legal a {
  position: relative;
}

.link-accent::after,
.footer__contact a::after,
.footer__legal a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 24px;
  transform: translateY(-50%);
}

/* Yellow highlight sweep behind text. */
.mark {
  background: linear-gradient(transparent 62%, var(--accent) 62%);
}

.mark--low {
  background: linear-gradient(transparent 58%, var(--accent) 58%);
}

/* --------------------------------------------------------------------------
   6. Image slots
   No photography has been delivered yet, so each slot renders a labelled
   placeholder. Drop a file in assets/img/ and add <img> inside the figure —
   the caption hides itself.
   -------------------------------------------------------------------------- */
.slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  margin: 0;
  overflow: hidden;
  background: var(--fill-2);
  border: 1.5px dashed #d6d6d6;
  border-radius: var(--slot-r, var(--r-sm));
}

.slot picture,
.slot img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.slot img {
  object-fit: cover;
}

.slot:has(img) {
  background: none;
  border-color: transparent;
  border-style: solid;
}

.slot:has(img) .slot__label {
  display: none;
}

.slot__label {
  margin: 0;
  padding: 16px;
  max-width: 28ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   7. Nav
   -------------------------------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container);
  margin-inline: auto;
  padding: 22px var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.brand img {
  display: block;
  /* The mark carries more internal detail than a simple glyph (antennae, tail,
     three dots inside a stroked bubble), so it needs a little more room than a
     solid logo would to stay legible next to the 22px wordmark. */
  width: 38px;
  height: 38px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}

/* 15px/1.5 gives a 22.5px line box; pad to clear the 24px minimum target. */
.nav__links a:not(.btn) {
  padding-block: 4px;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  max-width: var(--container);
  margin-inline: auto;
  padding: 56px var(--gutter) 0;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero h1 {
  margin: 0 0 24px;
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.hero__lede {
  margin: 0 0 32px;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero__media {
  position: relative;
  height: 440px;
}

/* --------------------------------------------------------------------------
   9. Press
   -------------------------------------------------------------------------- */
.press__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.press-card {
  /* Column layout so "Czytaj dalej" can be pinned to the bottom: the real
     headlines differ in length, and without this the link lands at a different
     height in each card. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--hair);
  border-radius: var(--r-card);
  transition: border-color 0.15s ease;
}

.press-card:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.press-card__media {
  flex: 0 0 auto;
  height: 180px;
}

.press-card__media .slot {
  --slot-r: 0px;
  border-inline: 0;
  border-top: 0;
}

.press-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 20px 22px;
}

/* The outlet band holds either the publisher's logo or, where we have no logo
   file, the name as text. Fixed height so all three cards line up either way,
   and so a logo swapped in later cannot shift the layout. */
.press-card__outlet {
  display: flex;
  align-items: center;
  height: 26px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.press-card__outlet img {
  display: block;
  width: auto;
  height: 26px;
  max-width: 140px;
  object-fit: contain;
}

.press-card__title {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  text-wrap: pretty;
}

.press-card__more {
  align-self: flex-start;
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid var(--accent);
}

/* --------------------------------------------------------------------------
   10. Case study
   -------------------------------------------------------------------------- */
.case {
  overflow: hidden;
  border: var(--border);
  border-radius: var(--r-lg);
}

.case__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center;
  padding: 56px;
}

.case__eyebrow {
  margin-bottom: 12px;
}

.case h2 {
  margin: 0 0 18px;
  font-size: var(--fs-h2-case);
  letter-spacing: -0.038em;
}

.case__body {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}

.case__collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 150px 150px;
  gap: 14px;
}

.case__collage> :first-child {
  grid-column: 1 / 3;
}

.case__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--border);
}

.case__stat {
  padding: 32px 40px;
}

.case__stat+.case__stat {
  border-left: var(--border);
}

.case__stat--accent {
  background: var(--accent);
}

.case__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat);
  letter-spacing: -0.038em;
}

.case__stat-label {
  margin-top: 4px;
  font-size: 15px;
  color: var(--text-2);
}

.case__stat--accent .case__stat-label {
  color: var(--line-dark);
}

.disclaimer {
  margin: 14px 4px 0;
  font-size: 13px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   11. Efekty (dark panel)
   -------------------------------------------------------------------------- */
.effects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
  padding: 56px 64px;
  background: var(--ink);
  color: #ffffff;
  border-radius: var(--r-lg);
}

.effects h2 {
  margin: 0;
  font-size: var(--fs-h2-dark);
  letter-spacing: -0.037em;
}

.effects__rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.effects__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-ms);
}

.effects__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat-row);
  color: var(--accent);
  white-space: nowrap;
}

.effects__label {
  font-size: 15px;
  color: var(--muted-on-dark);
  text-align: right;
}

/* --------------------------------------------------------------------------
   12. Cennik
   -------------------------------------------------------------------------- */
.pricing__head {
  margin-bottom: 40px;
  text-align: center;
}

.pricing__billboard {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-billboard);
  letter-spacing: -0.045em;
  line-height: 1;
}

.pricing__sub {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: 48px;
  border-radius: var(--r-lg);
}

.price-card--own {
  background: var(--accent);
}

.price-card--rent {
  border: var(--border);
}

.price-card .eyebrow {
  margin-bottom: 16px;
}

.price-card--own .eyebrow {
  color: var(--ink);
}

.price-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-price);
  letter-spacing: -0.037em;
}

.price-card__price small {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

.price-card__note {
  margin: 8px 0 28px;
  font-size: 16px;
  font-weight: 600;
}

.price-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  padding: 0;
  font-size: 15px;
  list-style: none;
}

.price-card--rent .price-card__features {
  color: var(--line-dark);
}

.price-card__features li {
  display: flex;
  gap: 10px;
}

.price-card__features li::before {
  content: '✓';
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   13. Jak działa — tabs
   -------------------------------------------------------------------------- */
.how h2 {
  margin: 0 0 36px;
  font-size: var(--fs-h2);
  letter-spacing: -0.039em;
  text-align: center;
}

.how__tabs {
  display: flex;
  align-items: stretch;
  border-top: 1.5px solid var(--hair);
}

.how__tablist {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Pause/resume control for the automatic step rotation. Required by
   WCAG 2.2.2 — auto-updating content needs a way to stop it. */
.how__autoplay {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-left: 14px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--hair);
  border-radius: 50%;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.how__autoplay:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* Pause = two bars, play = a triangle. Drawn in CSS so it does not depend on
   a font shipping the ❚❚ / ▶ glyphs at 9px. */
.how__autoplay-glyph {
  display: block;
  box-sizing: border-box;
  width: 10px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.how__autoplay[data-state='paused'] .how__autoplay-glyph {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
  border-left: 9px solid currentColor;
  border-right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .how__autoplay {
    transition: none;
  }
}

.how__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: -1.5px;
  padding: 18px 12px 16px;
  background: none;
  border: none;
  border-top: 3px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* The active tab's top rule doubles as a progress bar for the automatic
   rotation: the tab's own border is the track, .how__tab-bar is the fill,
   growing left to right over one step. It is a real element rather than a
   ::after so its width can be measured in tests.

   The fill is animated from JS with the Web Animations API, not a CSS keyframe
   animation: relying on the browser to restart a CSS animation when
   aria-selected moves to another tab was the one thing that did not survive
   the first step change. Creating it explicitly per step removes that
   guesswork. With JS off, or without Element.animate, the bar stays solid —
   which is the line from the original design. */
.how__tab[aria-selected='true'] {
  border-top-color: var(--hair);
  color: var(--ink);
}

.how__tab-bar {
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  display: none;
  background: var(--ink);
  transform: scaleX(1);
  transform-origin: left center;
}

.how__tab[aria-selected='true'] .how__tab-bar {
  display: block;
}

.how__panel[hidden] {
  display: none;
}

.how__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
  padding-top: 48px;
  min-height: 400px;
}

.how__panel h3 {
  margin: 0 0 16px;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.how__desc {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.how__stat {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1.5px solid var(--hair);
}

.how__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat-lg);
  letter-spacing: -0.041em;
}

.how__stat-label {
  margin-top: 4px;
  font-size: 15px;
  color: var(--muted);
}

.how__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 40px;
  overflow: hidden;
  background: var(--cream);
  border-radius: var(--r-md);
}

/* Process row */
.how__process {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 48px;
}

.how__step {
  display: flex;
  align-items: center;
  gap: 12px;
}

.how__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: var(--border);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

.how__step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
}

.how__step-arrow {
  margin-left: 28px;
  font-size: 20px;
  color: var(--decor);
}

.how__note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   14. Mock UI cards inside the tab visuals
   -------------------------------------------------------------------------- */
.mock {
  width: 100%;
  max-width: 400px;
  background: #ffffff;
  border: var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-hard);
}

.mock__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--hair-2);
}

.mock__dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  background: var(--accent);
  border: var(--border);
  border-radius: 50%;
}

.mock__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}

.mock__pill {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.mock__pill--ok {
  background: var(--ok-bg);
  color: var(--ok-fg);
}

.mock__pill--accent {
  background: var(--accent);
  color: var(--ink);
}

.mock__pill--score {
  padding: 3px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  background: var(--accent);
}

.mock__body {
  padding: 18px;
}

.mock__body--rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Step 1 — live traffic */
.mock__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  font-size: 13px;
}

.mock__path {
  font-weight: 600;
}

.mock__time {
  color: var(--muted);
}

.mock__track {
  height: 8px;
  background: var(--fill);
  border-radius: var(--r-pill);
}

.mock__fill {
  height: 8px;
  background: var(--accent);
  border-radius: var(--r-pill);
}

.mock__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.mock__chip {
  padding: 4px 12px;
  border: 1.5px solid var(--hair);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
}

/* Step 2 — intent score */
.mock__score-track {
  height: 10px;
  margin-bottom: 18px;
  background: var(--fill);
  border-radius: var(--r-pill);
}

.mock__score-fill {
  height: 10px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  border-right: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
}

.mock__checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  list-style: none;
}

.mock__checks li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mock__checks li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--accent);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

.mock__checks li.is-pending {
  color: var(--muted);
}

.mock__checks li.is-pending::before {
  content: '';
  background: none;
  border: 1.5px solid var(--line-soft);
}

/* Step 3 — page skeleton + chat bubble */
.mock-overlay {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.mock-skeleton {
  padding: 18px;
  background: #ffffff;
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-sm);
  opacity: 0.55;
}

.mock-skeleton__line {
  height: 9px;
  margin-bottom: 6px;
  background: var(--fill-3);
  border-radius: var(--r-pill);
}

.mock-skeleton__line--title {
  height: 12px;
  width: 60%;
  margin-bottom: 10px;
  background: var(--hair-2);
}

.mock-skeleton__line--w85 {
  width: 85%;
}

.mock-skeleton__line--w70 {
  width: 70%;
  margin-bottom: 18px;
}

.mock-skeleton__block {
  height: 70px;
  background: var(--fill-4);
  border-radius: var(--r-xs);
}

.mock-bubble {
  position: absolute;
  right: -14px;
  bottom: -26px;
  width: 300px;
  padding: 18px;
  background: #ffffff;
  border: var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-hard-lg);
}

.mock-bubble__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mock-bubble__head img {
  width: 30px;
  height: 30px;
}

.mock-bubble__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

.mock-bubble__time {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

.mock-bubble p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}

.mock-bubble__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mock-bubble__btn {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
}

.mock-bubble__btn--primary {
  background: var(--ink);
  color: #ffffff;
}

.mock-bubble__btn--ghost {
  border: 1.5px solid var(--line-soft);
  color: var(--muted);
}

/* Step 4 — CRM lead */
.mock__person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.mock__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: var(--ink);
  color: var(--accent);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}

.mock__person-name {
  font-weight: 600;
  font-size: 15px;
}

.mock__person-meta {
  font-size: 13px;
  color: var(--muted);
}

.mock__context {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--hair-2);
  border-radius: var(--r-xs);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.mock__context strong {
  color: var(--ink);
}

.mock__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}

.mock__foot strong {
  color: var(--ink);
}

.mock__badge {
  padding: 6px 14px;
  border: var(--border);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.faq h2 {
  margin: 0 0 40px;
  font-size: var(--fs-h2);
  letter-spacing: -0.039em;
  text-align: center;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-top: 1.5px solid var(--hair);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 22px 0;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-faq-q);
  letter-spacing: -0.016em;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.faq__icon {
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.faq__a {
  margin: 0;
  padding: 0 40px 24px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.faq__a[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   16. Final CTA
   -------------------------------------------------------------------------- */
.final {
  position: relative;
  overflow: hidden;
  padding: 80px 64px;
  background: var(--ink);
  border-radius: var(--r-lg);
  text-align: center;
}

/* DEVIATION: the artboard uses a 420px circle with filter: blur(160px).
   A radial-gradient is visually equivalent and avoids a full-screen GPU
   blur pass, which is expensive on phones. */
.final::before {
  content: '';
  position: absolute;
  top: -240px;
  right: -180px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle,
      rgba(255, 213, 46, 0.3) 0%,
      rgba(255, 213, 46, 0.16) 40%,
      rgba(255, 213, 46, 0) 70%);
  pointer-events: none;
}

.final>* {
  position: relative;
}

.final h2 {
  margin: 0 0 20px;
  font-size: var(--fs-h2-cta);
  letter-spacing: -0.038em;
  color: #ffffff;
  text-wrap: balance;
}

.final__lede {
  max-width: 560px;
  margin: 0 auto 36px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-on-dark);
  text-wrap: pretty;
}

.final__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.btn--accent {
  background: var(--accent);
  color: var(--ink);
}

.btn--accent:hover {
  background: #ffffff;
  color: var(--ink);
}

.btn--ghost {
  border-color: #555555;
  color: #ffffff;
}

.btn--ghost:hover {
  border-color: #ffffff;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer {
  margin-top: var(--rhythm);
  padding: 32px var(--gutter);
  border-top: 1px solid var(--hair-2);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--container);
  margin-inline: auto;
  font-size: 14px;
  color: var(--muted);
}

.footer .brand {
  font-size: 17px;
  gap: 8px;
}

.footer .brand img {
  width: 30px;
  height: 30px;
}

.footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer__contact a {
  color: var(--muted);
}

.footer__contact a:hover {
  color: var(--ink);
}

.footer__legal a {
  color: var(--muted);
  text-decoration: underline;
}

/* Registry details a Polish capital company must show on its website. */
.footer__company {
  max-width: var(--container);
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   19. Legal / content pages
   -------------------------------------------------------------------------- */
.prose {
  max-width: 760px;
  margin-inline: auto;
  padding: 56px var(--gutter) var(--rhythm);
}

.prose h1 {
  margin: 0 0 8px;
  font-size: var(--fs-h2);
  letter-spacing: -0.035em;
}

.prose h2 {
  margin: 40px 0 12px;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.prose p,
.prose li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
}

.prose ul {
  padding-left: 22px;
}

.prose li {
  margin-bottom: 6px;
}

.prose__updated {
  font-size: 14px;
  color: var(--muted);
}

.prose__todo {
  padding: 16px 20px;
  margin: 24px 0;
  background: var(--cream);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-xs);
  font-size: 15px;
  line-height: 1.6;
}

.prose__todo strong {
  color: var(--ink);
}

/* ==========================================================================
   20. Breakpoints
   The v2 artboard is desktop-only (min-width: 980px). Everything below is
   authored here; the scale follows the project's own mobile artboard.
   ========================================================================== */

/* Tablet — collapse the two-column grids. */
@media (max-width: 899px) {

  .grid-2,
  .hero__grid,
  .case__top,
  .effects,
  .pricing__grid,
  .how__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .hero__media {
    height: 320px;
    order: -1;
  }

  .case__top {
    padding: 40px 32px;
  }

  .effects {
    padding: 40px 32px;
  }

  .price-card {
    padding: 36px 32px;
  }

  .how__panel {
    padding-top: 32px;
    min-height: 0;
  }

  .how__visual {
    min-height: 0;
    padding: 32px 20px;
  }

  .final {
    padding: 56px 32px;
  }

  /* The 3-cell stat strip becomes stacked bordered rows. */
  .case__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .case__stat+.case__stat {
    border-left: 0;
    border-top: var(--border);
  }

  .case__stat {
    padding: 24px 32px;
  }

  /* Press cards go two-up before going single. */
  .press__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Process row wraps and drops the arrows. */
  .how__process {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 340px;
    margin-inline: auto;
  }

  .how__step-arrow {
    display: none;
  }
}

/* Phone. */
@media (max-width: 699px) {
  :root {
    --r-lg: 22px;
    --r-md: 22px;
    --r-card: 18px;
    --r-sm: 18px;
  }

  /* Sticky translucent nav, links dropped — as in the mobile artboard. */
  .nav {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 16px var(--gutter);
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--hair-3);
  }

  @supports (backdrop-filter: blur(8px)) {
    .nav {
      backdrop-filter: blur(8px);
    }
  }

  .nav__links {
    gap: 0;
  }

  [id] {
    scroll-margin-top: 84px;
  }

  .nav__links a:not(.btn) {
    display: none;
  }

  .brand {
    font-size: 19px;
  }

  .brand img {
    width: 32px;
    height: 32px;
  }

  .btn--nav {
    padding: 11px 18px;
    font-size: 14px;
  }

  .hero {
    padding-top: 40px;
  }

  .hero__media {
    height: 260px;
  }

  /* Full-width stacked CTAs. */
  .hero__actions,
  .final__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .btn--hero,
  .btn--cta {
    display: block;
    padding: 16px 24px;
    font-size: 16px;
  }

  .press__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .case__top,
  .effects {
    padding: 28px 22px;
  }

  .case__stat {
    padding: 22px;
  }

  .price-card {
    padding: 28px 24px;
  }

  .pricing__sub {
    font-size: 17px;
  }

  .final {
    padding: 44px 24px;
  }

  .final__lede {
    font-size: 15px;
  }

  .case__body,
  .how__desc {
    font-size: 15px;
  }

  .faq__a {
    padding: 0 28px 18px 0;
    font-size: 15px;
  }

  .faq__q {
    padding: 18px 0;
  }

  /* Tab strip becomes a horizontally scroll-snapped pill row. The pause control
     sits outside the scroller so it stays reachable. */
  .how__tabs {
    border-top: 0;
    align-items: center;
  }

  .how__tablist {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .how__autoplay {
    width: 44px;
    height: 44px;
    margin-left: 10px;
  }

  .how__tablist::-webkit-scrollbar {
    display: none;
  }

  .how__tab {
    flex: 0 0 auto;
    min-height: 44px;
    margin-top: 0;
    padding: 10px 16px;
    border: 1.5px solid var(--hair);
    border-radius: var(--r-pill);
    font-size: 15px;
    scroll-snap-align: start;
  }

  .how__tab[aria-selected='true'] {
    border-color: var(--ink);
    background: var(--ink);
    color: #ffffff;
  }

  /* No countdown line on the pill row: the strip scrolls horizontally, so the
     active pill is not always fully in view. The filled pill marks it. */
  .how__tab-bar {
    display: none !important;
  }

  .how__tab[aria-selected='true'] .how__tab-num {
    background: var(--accent);
    border-color: var(--accent);
  }

  .how__visual {
    padding: 20px 14px;
  }

  .how__stat {
    margin-top: 24px;
  }

  .footer {
    padding: 28px var(--gutter);
  }

  .footer__inner {
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    text-align: center;
  }

  .footer__contact {
    gap: 18px;
  }

  .footer__company {
    text-align: center;
  }

}

/* The "Efekt, który mierzymy" rows keep a nowrap figure beside its label. Below
   this width the pair no longer fits, so stack them — which is exactly how the
   project's mobile artboard renders the same card. */
@media (max-width: 430px) {
  .effects__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .effects__label {
    text-align: left;
  }
}

/* The overlapping chat bubble would overflow the viewport — return it to
   normal flow before that happens. */
@media (max-width: 520px) {
  .mock-bubble {
    position: static;
    width: 100%;
    margin-top: 14px;
    box-shadow: var(--shadow-hard);
  }
}

@media (max-width: 380px) {
  .how__step-title {
    font-size: 16px;
  }

  .mock__chip {
    font-size: 11px;
    padding: 4px 10px;
  }

  .price-card__price small {
    display: block;
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   21. Print — the page is occasionally saved to PDF and sent on.
   -------------------------------------------------------------------------- */
@media print {

  .nav,
  .how__autoplay {
    display: none;
  }

  .how__panel[hidden],
  .faq__a[hidden] {
    display: block !important;
  }

  .final,
  .effects {
    color: var(--ink);
    background: none;
    border: var(--border);
  }

  .final h2,
  .effects h2 {
    color: var(--ink);
  }
}