/* Urodziny Mirka 2026, arkusz akcentu FRAME stron akcji (trzy prywatne i publiczna).
   Adresów stron prywatnych celowo tu nie wymieniamy: ten plik jest publiczny.
   Sekcja 1: kanon klocków skopiowany z nxtlvl-frame.css (kanon /marketing).
   Sekcja 2: klocki akcji: pasek faktów, zegar, karty programów, cena, pakiety, pytania. */

/* Sekcja 1: kanon */
body.mkt-page { --mkt-muted: oklch(42% 0.018 295); --mkt-line: oklch(88% 0.01 295); overflow-x: visible; }
.mkt-main :where(h1, h2, h3, p, figure, ul) { margin: 0; }
.mkt-main :is(h1, h2, h3) { font-weight: 600; letter-spacing: -.035em; color: var(--frame-ink); }
.mkt-main h1 { font-size: clamp(2.125rem, 3.4vw, 3rem); line-height: 1.08; text-wrap: balance; }
.mkt-main h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; text-wrap: balance; }
.mkt-main :where(p) { line-height: 1.65; color: var(--mkt-muted); text-wrap: pretty; } /* WHY: Mirek 10.11.2026, ostatnia linia akapitu bez jednego słowa */
.mkt-main ul { padding: 0; list-style: none; }
.mkt-main section { padding-block: 3.5rem 3.5rem; scroll-margin-top: 6rem; }
.mkt-main .container { width: 100%; }
.mkt-main .eyebrow { margin-bottom: 1.25rem; font-size: .9375rem; font-weight: 600; color: var(--frame-ink); }
.mkt-main .eyebrow { position: relative; padding-left: 1.25rem; }
.mkt-main .eyebrow::before { content: ""; position: absolute; left: 0; top: .45em; width: .625rem; height: .625rem; background: var(--frame-violet); }
.mkt-main .lead { font-size: 1.125rem; margin-block: 1.25rem 1rem; }
.mkt-main .btn2 { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: .875rem 1.5rem; border: 1px solid var(--frame-ink); text-decoration: none; font-size: 1rem; font-weight: 600; line-height: 1.4; text-align: center; color: var(--frame-ink); }
.mkt-main .btn2-primary { background: var(--frame-violet); }
.mkt-main .btn2:hover { background: var(--frame-ink); color: var(--frame-canvas); }
.hero2 { padding-block: 4rem 0; }
.hero2-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3.5rem; align-items: center; padding-bottom: 2.5rem; }
.hero2-img img { display: block; width: 100%; height: auto; max-height: 34rem; object-fit: contain; mix-blend-mode: multiply; } /* WHY: ryciny mają różne proporcje, hero trzyma jedną wysokość */
.hero2-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Sekcja 2: klocki akcji */
/* Po końcu oferty skrypt zegara ustawia hidden na przyciskach zakupu; display z klas przycisku nie może tego nadpisać. */
[data-ur-buy][hidden], body.ur-ended .aibl-lead-cta { display: none !important; }
.ur-br-m { display: none; } /* WHY: łamanie na granicy zdania tylko na telefonie, na komputerze zdania mieszczą się w jednej linii */
.ur-nw { white-space: nowrap; } /* WHY: nazwa produktu nie łamie się w środku, także po myślniku */
.ur-price-line { margin-top: .25rem; font-size: 1.25rem; font-weight: 600; color: var(--frame-ink); }
.ur-was { font-weight: 600; color: var(--frame-ink); white-space: nowrap; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--frame-ink); } /* WHY: Mirek 10.11.2026, przekreślenie ma być wyraźne */
.ur-prog-link { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--frame-violet); text-underline-offset: .2em; }
.ur-prog-link:hover { text-decoration-color: var(--frame-ink); }

.ur-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--frame-ink); }
.ur-facts > p { padding: 1.125rem 1rem; text-align: center; font-weight: 600; color: var(--frame-ink); text-wrap: balance; }
.ur-facts > p + p { border-left: 1px solid var(--frame-ink); }

.ur-clock { margin-block: 1.5rem; }
.ur-clock-lead { font-size: 1.0625rem; font-weight: 600; color: var(--frame-ink); }
.ur-clock-grid { display: inline-grid; grid-template-columns: repeat(4, minmax(6rem, auto)); margin-top: .75rem; border: 1px solid var(--frame-ink); } /* WHY: Mirek 10.11.2026, zegar był za mały wobec ceny */
.ur-clock-grid[hidden] { display: none; }
.ur-clock-cell { display: grid; justify-items: center; padding: .75rem 1rem .625rem; }
.ur-clock-cell + .ur-clock-cell { border-left: 1px solid var(--frame-ink); }
.ur-clock-num { font-size: 2.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--frame-ink); }
.ur-clock-unit { margin-top: .25rem; font-size: .9375rem; color: var(--mkt-muted); }
.ur-clock-ended { margin-top: .5rem; font-weight: 600; color: var(--frame-ink); }
.ur-clock-static { margin-top: .5rem; }
.ur-price .ur-clock { display: grid; justify-items: center; margin-block: 1.25rem; }

.ur-head { text-align: center; }
:is(.ur-head, .ur-price) .eyebrow { padding-left: 0; }
:is(.ur-head, .ur-price) .eyebrow::before { position: static; display: inline-block; margin-right: .625rem; vertical-align: .05em; } /* WHY: wyśrodkowana etykieta ma znacznik przy tekście, nie przy krawędzi */
.ur-head .eyebrow { margin-bottom: .75rem; }
.ur-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.ur-card { display: flex; flex-direction: column; padding: 1.5rem 1.75rem 2rem; border: 1px solid var(--frame-ink); }
.ur-card-art { height: 22rem; margin-bottom: 1.5rem; overflow: hidden; }
.ur-card-art img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } /* WHY: ryciny o różnych proporcjach mieszczą się w tej samej wysokości kadru */
.ur-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height: 1.2; text-wrap: balance; }
.ur-card-sub { margin-top: .375rem; }
.ur-checks { display: grid; gap: .5rem; margin-top: 1rem; }
.ur-checks li { position: relative; padding-left: 2rem; font-size: 1.0625rem; color: var(--frame-ink); line-height: 1.5; text-wrap: pretty; } /* WHY: punkt to jeden blok tekstu, nazwy produktów w środku nie mogą stać się osobnymi kolumnami */
.ur-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--frame-ink); }

.ur-price { padding: 2.5rem 2rem; border: 1px solid var(--frame-ink); text-align: center; }
.ur-price .eyebrow { margin-bottom: .5rem; }
.ur-price-amount { font-size: clamp(3.25rem, 7vw, 4.75rem); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; color: var(--frame-ink); }
.ur-price-unit { margin-top: .5rem; font-size: 1.25rem; font-weight: 600; color: var(--frame-ink); }
.ur-price-note { margin-top: .75rem; font-size: 1.1875rem; color: var(--frame-ink); } /* WHY: Mirek 10.11.2026, cena po promocji ma być wyraźnie widoczna */
.ur-price-deadline { margin-top: .5rem; font-weight: 600; color: var(--frame-ink); }
.ur-price .btn2 { min-width: min(100%, 22rem); }

.ur-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; align-items: stretch; }
.ur-pack { display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.5rem; border: 1px solid var(--frame-ink); }
.ur-pack-top { border-width: 3px; }
.ur-pack-flag { min-height: 1.5rem; margin-bottom: .5rem; font-size: .9375rem; font-weight: 600; color: var(--frame-ink); }
.ur-pack-flag::before { content: ""; display: inline-block; width: .625rem; height: .625rem; margin-right: .5rem; background: var(--frame-violet); vertical-align: .05em; }
.ur-pack-flag:empty::before { content: none; }
.ur-pack .ur-card-art { height: 16rem; margin-bottom: 1.25rem; }
.ur-pack h3 { min-height: 5.25rem; font-size: 1.375rem; line-height: 1.25; } /* WHY: trzy tytuły różnej długości, ceny w jednej linii */
.ur-pack-amount { margin-top: .75rem; font-size: 2.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--frame-ink); }
.ur-pack-note { margin-top: .5rem; font-size: 1.125rem; color: var(--frame-ink); } /* WHY: jak .ur-price-note, cena po promocji widoczna */
.ur-pack .ur-checks { flex: 1; align-content: start; }
.ur-pack .btn2 { margin-top: 1.5rem; }
.ur-packs-clock { display: grid; justify-items: center; text-align: center; margin-top: 2rem; }
.ur-packs-clock .ur-clock, .ur-price .ur-clock { width: min(100%, 30rem); margin-inline: auto; }

.ur-faq { max-width: none; }
.ur-faq h2 { text-align: center; margin-bottom: 1.5rem; }
.ur-faq-item { padding-block: 1.125rem; }
.ur-faq-item + .ur-faq-item { border-top: 1px solid var(--frame-ink); }
.ur-faq-item h3 { font-size: 1.1875rem; line-height: 1.35; letter-spacing: -.02em; text-wrap: balance; }
.ur-faq-item p { margin-top: .5rem; }

.ur-ended-note { display: none; }
body.ur-ended .ur-ended-note { display: block; }

@media (max-width: 900px) {
  .ur-br-m { display: inline; }
  .ur-br-d { display: none; } /* WHY: na telefonie zdanie łamie się samo, łamanie z komputera dałoby krótkie wiersze */
  .hero2 { padding-top: 2.5rem; }
  .hero2-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero2-img img { max-height: 24rem; margin-inline: auto; }
  .ur-facts { grid-template-columns: minmax(0, 1fr); }
  .ur-facts > p + p { border-left: 0; border-top: 1px solid var(--frame-ink); }
  .ur-cards, .ur-packs { grid-template-columns: minmax(0, 1fr); }
  .ur-pack h3 { min-height: 0; }
  .ur-card-art, .ur-pack .ur-card-art { height: 14rem; }
  .ur-price { padding: 2rem 1.25rem; }
  .hero2-actions .btn2, .ur-price .btn2, .ur-pack .btn2 { width: 100%; }
}
@media (max-width: 420px) {
  .ur-clock-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .ur-clock-cell { padding-inline: .25rem; }
  .ur-clock-num { font-size: 2.25rem; } /* WHY: cztery pola na 358 px szerokości, liczby nadal większe niż przed 10.11.2026 */
  .ur-clock-unit { font-size: .875rem; }
}