/* ─────────────────────────────────────────────────────────────────────────
   Podstrony: „Dla partnerów” (Unity) oraz strony Spotty.
   Słownictwo strony głównej Unity: płaskie, nasycone bloki koloru,
   zdjęcia na pełną szerokość, wielka typografia z kursywą Playfair,
   linki podkreślone zamiast przycisków i liniowane siatki.
   Spotty podmienia tylko tokeny w spotty/spotty.css.
   ───────────────────────────────────────────────────────────────────────── */

.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav .nav-cross { opacity: .62; transition: opacity .2s ease; }
.main-nav .nav-cross:hover, .main-nav .nav-cross:focus-visible { opacity: 1; }

.inline-link { border-bottom: 1px solid currentColor; font-weight: 600; transition: opacity .2s ease; }
.inline-link:hover { opacity: .7; }

a:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; }

.link-row { display: flex; flex-wrap: wrap; gap: 6px 40px; }
.link-row .text-link { margin-top: 28px; }
.on-color .text-link span { color: inherit; }

/* — hero: telefon zamiast róży ———————————————————————————————————— */
.hero-phone .phone { position: relative; transform: rotate(5deg); width: 47%; z-index: 2; }
.hero-phone p { right: 2%; }

/* — telefon ze zrzutem ekranu ————————————————————————————————————— */
.phone { background: #160b24; border-radius: 40px; box-shadow: 0 28px 50px -24px rgba(20, 8, 40, .55); margin: 0; padding: 9px; }
.phone img { aspect-ratio: 640 / 1138; border-radius: 32px; display: block; height: auto; width: 100%; }

/* — bloki koloru w układzie „symbol” ——————————————————————————————— */
.symbol.on-color { color: #fff9ee; }
.symbol--spotty { background: #ece4fb; color: #1c0d33; }
.symbol--spotty .text-link span { color: #7c3aed; }
.symbol--unity { background: #d41f2a; }
.symbol-rose.is-spotty { background-image: url("spotty/img/spotty-mark.png"); filter: drop-shadow(23px 28px 0 rgba(37, 10, 69, .12)); }
.symbol-rose.is-spotty::after { border-color: #7c3aed; }
.symbol--unity .symbol-rose { filter: drop-shadow(23px 28px 0 rgba(90, 0, 8, .28)); }
.symbol--unity .symbol-rose::after { border-color: #fff9ee; }

/* — chipy w układzie „szkoły” —————————————————————————————————————— */
.schools-note { font-size: 1.05rem; line-height: 1.5; margin: 34px 0 0; max-width: 34ch; }

/* — kroki w układzie „model” —————————————————————————————————————— */
.model--cream { background: var(--cream); }

/* — galeria zrzutów ekranu ———————————————————————————————————————— */
.screens { background: var(--rose); color: #fff9ee; overflow: hidden; padding: clamp(84px, 11vw, 160px) 0 clamp(70px, 9vw, 130px); }
.screens-head { display: grid; gap: 30px clamp(50px, 10vw, 170px); grid-template-columns: minmax(280px, .8fr) minmax(260px, .7fr); padding: 0 clamp(24px, 7vw, 124px); }
.screens-head p { align-self: end; font-size: 1.05rem; line-height: 1.5; margin: 0; max-width: 36ch; }
.screens-track { display: flex; gap: clamp(18px, 2.4vw, 36px); margin-top: clamp(56px, 8vw, 110px); overflow-x: auto; padding: 0 clamp(24px, 7vw, 124px) 34px; scroll-padding-inline: clamp(24px, 7vw, 124px); scroll-snap-type: x mandatory; scrollbar-color: rgba(255, 249, 238, .6) transparent; scrollbar-width: thin; }
.screens-track:focus-visible { outline: 2px solid #fff9ee; outline-offset: -2px; }
.screens-track figure { flex: 0 0 clamp(210px, 21vw, 270px); margin: 0; scroll-snap-align: start; }
.screens-track figcaption { border-top: 1px solid rgba(255, 249, 238, .45); font-family: var(--serif); font-size: 1.25rem; font-style: italic; margin-top: 22px; padding-top: 12px; }

/* — Partner PRO —————————————————————————————————————————————————— */
.pro { background: var(--green); color: #f7f0ff; padding: clamp(90px, 12vw, 180px) clamp(24px, 7vw, 124px); }
.pro-head { display: grid; gap: 34px clamp(50px, 10vw, 170px); grid-template-columns: minmax(280px, .8fr) minmax(260px, .7fr); margin-bottom: clamp(65px, 9vw, 120px); }
.pro-head p { align-self: end; font-size: 1.05rem; line-height: 1.52; margin: 0; max-width: 40ch; }
.pro-status { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .09em; margin-top: 30px; text-transform: uppercase; }
.pro .model-grid { border-top-color: rgba(247, 240, 255, .3); }
.pro .model-detail { border-color: rgba(247, 240, 255, .3); min-height: 280px; }
.pro .model-grid + .model-grid { border-top: 0; }
.pro .model-grid + .model-grid .model-detail { border-top: 1px solid rgba(247, 240, 255, .3); }
.pro .model-number { color: var(--cyan, #19d3e6); margin-bottom: 56px; }
.pro .model-detail p { opacity: .82; }
.pro .model-outro { opacity: .78; }

/* — porównanie pakietów —————————————————————————————————————————— */
.compare { background: var(--paper); padding: clamp(84px, 11vw, 160px) clamp(24px, 7vw, 124px); }
.compare > h2 { margin-bottom: clamp(55px, 8vw, 110px); }
.compare table { border-collapse: collapse; border-top: 1px solid var(--line); font-size: .98rem; width: 100%; }
.compare th, .compare td { border-bottom: 1px solid var(--line); padding: 20px 16px 20px 0; text-align: left; vertical-align: top; }
.compare thead th { font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.compare thead th:last-child { color: var(--rose); }
.compare tbody th { font-weight: 600; width: 50%; }
.compare td { width: 25%; }
.compare .yes::before { background: var(--rose); border-radius: 50%; content: ""; display: inline-block; height: 7px; margin-right: 10px; vertical-align: 2px; width: 7px; }
.compare .no { opacity: .4; }

/* — kontakt w układzie „statement” ———————————————————————————————— */
.statement--contact { background: var(--cream); }
.statement--contact .link-row .text-link { margin-top: 18px; }

@media (max-width: 760px) {
  .hero-rose p { right: 7vw; }
  .hero:has(.link-row) .hero-rose { align-self: center; bottom: auto; margin: 40px 0 34px; position: relative; right: auto; }
  .hero-phone { align-self: center; bottom: auto; height: min(92vw, 400px); margin: 44px 0 34px; position: relative; right: auto; width: min(86vw, 360px); }
  .hero-phone .phone { width: 52%; }
  .hero-phone p { right: 0; }
  .screens, .pro, .compare { padding-left: 24px; padding-right: 24px; }
  .screens { padding-left: 0; padding-right: 0; }
  .screens-head { grid-template-columns: 1fr; padding: 0 24px; }
  .screens-track { padding: 0 24px 24px; scroll-padding-inline: 24px; }
  .screens-track figure { flex-basis: 62vw; }
  .pro-head { grid-template-columns: 1fr; }
  .pro .model-grid { grid-template-columns: 1fr; }
  .pro .model-detail, .pro .model-grid + .model-grid .model-detail { border-bottom: 1px solid rgba(247, 240, 255, .3); border-top: 0; min-height: 0; }
  .pro .model-number { margin-bottom: 26px; }
  .compare table { font-size: .86rem; }
  .compare th, .compare td { padding: 14px 10px 14px 0; }
  .compare thead th { font-size: .7rem; letter-spacing: .06em; }
  .compare tbody th { width: 52%; }
  .compare td { width: 24%; }
  .compare .yes::before { margin-right: 6px; }
  .main-nav .nav-cross { opacity: 1; }
}

/* — pasek logotypów partnerów ————————————————————————————————————————
   Loga to jednokolorowe maski, więc kolor bierze się z currentColor
   i zmienia razem z motywem strony. Same maski (--logo) siedzą w logos.css
   jako data URI, generowane z spotty/img/partnerzy/*.png. */
.logos { align-items: center; background: var(--paper); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: 30px clamp(40px, 6vw, 90px); grid-template-columns: minmax(180px, .3fr) minmax(0, 1fr); padding: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 64px) clamp(24px, 7vw, 124px); }
.logos h2 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); letter-spacing: -.05em; line-height: .95; }
.logos-viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); overflow: hidden; }
.logos-track { align-items: center; animation: logos-scroll 42s linear infinite; display: flex; gap: clamp(48px, 6vw, 92px); list-style: none; margin: 0; padding: 0 clamp(24px, 3vw, 46px); width: max-content; }
.logos-track li { flex: none; }
.logos-viewport:hover .logos-track, .logos-viewport:focus-within .logos-track { animation-play-state: paused; }
.logo { -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; aspect-ratio: var(--ar); background: currentColor; color: var(--ink); display: block; height: var(--h, 58px); opacity: .78; transition: color .3s ease, opacity .3s ease; }
.logo:hover { color: var(--rose); opacity: 1; }
@keyframes logos-scroll { to { transform: translateX(-50%); } }

@media (max-width: 760px) {
  .logos { grid-template-columns: 1fr; padding-left: 0; }
  .logos h2 { padding: 0 24px; }
  .logos-track { animation-duration: 30s; }
  .logo { height: calc(var(--h, 58px) * .82); }
}

@media (prefers-reduced-motion: reduce) {
  .logos-viewport { -webkit-mask-image: none; mask-image: none; }
  .logos-track { animation: none; flex-wrap: wrap; row-gap: 32px; width: auto; }
  .logos-track [aria-hidden="true"] { display: none; }
}

/* — dokumenty prawne (tryb czytania) ————————————————————————————————— */
.legal-hero { background: var(--cream); padding: 164px clamp(24px, 7vw, 124px) clamp(56px, 7vw, 96px); }
.legal-hero h1 { margin-bottom: 30px; }
.legal-meta { display: flex; flex-wrap: wrap; font-size: .72rem; font-weight: 700; gap: 8px 30px; letter-spacing: .09em; text-transform: uppercase; }
.legal-meta a { border-bottom: 1px solid currentColor; }
.legal { background: var(--paper); display: grid; gap: 40px clamp(50px, 8vw, 140px); grid-template-columns: minmax(200px, .32fr) minmax(0, 1fr); padding: clamp(60px, 8vw, 110px) clamp(24px, 7vw, 124px) clamp(90px, 11vw, 160px); }
.legal-toc { align-self: start; border-top: 1px solid var(--line); font-size: .86rem; line-height: 1.35; padding-top: 18px; position: sticky; top: 96px; }
.legal-toc p { font-size: .7rem; font-weight: 700; letter-spacing: .09em; margin: 0 0 14px; text-transform: uppercase; }
.legal-toc ol { list-style: none; margin: 0; max-height: calc(100vh - 170px); overflow-y: auto; padding: 0; scrollbar-width: thin; }
.legal-toc li + li { margin-top: 9px; }
.legal-toc a { opacity: .72; transition: opacity .2s ease; }
.legal-toc a:hover { opacity: 1; }
.legal-body { font-size: 1.02rem; line-height: 1.62; max-width: 70ch; }
.legal-body h1 { font-size: .78rem; font-weight: 700; letter-spacing: .09em; line-height: 1.4; margin: 0 0 14px; text-transform: uppercase; }
.legal-body h1 + p { margin-top: 0; }
.legal-body h2 { border-top: 1px solid var(--line); font-size: clamp(1.45rem, 2.2vw, 2rem); letter-spacing: -.04em; line-height: 1.1; margin: 64px 0 22px; padding-top: 26px; scroll-margin-top: 90px; }
.legal-body h3 { font-size: 1.12rem; letter-spacing: -.02em; margin: 34px 0 10px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ol, .legal-body ul { margin: 0 0 16px; padding-left: 1.5em; }
.legal-body li { margin-bottom: 8px; padding-left: .2em; }
.legal-body li > ul, .legal-body li > ol { margin-top: 8px; }
.legal-body ol > li::marker { font-weight: 600; }
.legal-body ul > li::marker { color: var(--rose); }
.legal-body a { border-bottom: 1px solid currentColor; color: var(--rose); }
.legal-body strong { font-weight: 700; }

.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer .footer-legal a { border-bottom: 1px solid rgba(255, 249, 238, .5); font-size: .7rem; font-weight: 700; letter-spacing: .09em; position: relative; text-transform: uppercase; z-index: 1; }

@media (max-width: 760px) {
  .legal-hero { padding: 124px 24px 48px; }
  .legal { grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px; }
  .legal-toc { position: static; }
  .legal-toc ol { max-height: none; }
  .legal-body { font-size: .98rem; }
}