/* Public pages of pause.fm: a clean rewrite of the PrestaShop port, and now the
   only stylesheet the pages load besides public.css. The sections follow the
   DOM: base, topbar and totop, hero, catalog and listening, techniques, faq,
   packs and unlock, allmeds, player, footer. Verified against computed-style
   snapshots of the port (yarn css:snap compare, see script/css_snapshot.mjs).

   Rules: no id prefixes, no !important, breakpoints only at 1800 (min),
   769 (min), 968, 768, 560 (max) and prefers-reduced-motion.

   One documented exception, explained in a comment where it appears: the
   footer container keeps Bootstrap's steps at 992 and 1200, which the
   snapshots at 1024 and 1900 need. */

/* ==== base ==== */

/* The blue behind everything: the page wrapper paints white, so only the
   scroll overshoot area shows this. The .ksn-med-page prefix is here because
   public.css restates "body { background-color: #fff }" after this file. */
.ksn-med-page {
  margin-top: 0;
  padding-top: 0;
  background: #0162df;
  scroll-behavior: smooth;
}

.ksn-medytacje {
  /* Pastel palette from the original theme. Later sections still read these. */
  --brand: #f29391;
  --brand-dark: #e07f7d;
  --brand-deep: #b04f4d;
  --brand-soft: #fde5e4;

  --butter: #ffce4d;
  --butter-deep: #e8b62e;
  --butter-soft: #fff4cc;

  --peach: #ffd4b8;
  --peach-soft: #fff0e3;
  --peach-deep: #e89d6e;

  --mint: #c8e8d0;
  --mint-soft: #ebf6ec;
  --mint-deep: #5fa57a;

  --sky: #b8d8f0;
  --sky-soft: #eaf3fa;
  --sky-deep: #5b8bb8;

  --lavender: #d8c8e8;
  --lavender-soft: #f1ebf6;
  --lavender-deep: #7b5fa0;

  --coral-soft: #ffd9d4;

  --cream: #faf6ed;
  --warm-bg: #f6efdf;
  --surface: #ffffff;
  --text: #12111c;
  --text-soft: #4f4e5b;
  --text-muted: #8a8993;
  --border: #ece6d8;

  --shadow-soft: 0 2px 12px rgba(18, 17, 28, 0.04);
  --shadow-card: 0 8px 28px rgba(18, 17, 28, 0.07);
  --shadow-lift: 0 16px 48px rgba(18, 17, 28, 0.12);
  --shadow-cta: 0 8px 24px rgba(255, 206, 77, 0.45);

  /* Second palette, the "bajka" button set. */
  --coral: #f29391;
  --coral-deep: #d65f5d;
  --sun: #ffc24b;
  --sun-deep: #f4a82e;
  --teal: #5fa57a;
  --paper: #ffffff;
  --ink: #2e2117;
  --ink-soft: #5a4f44;

  /* Third palette, the blue "wu" redesign that the live page actually uses. */
  --wu-blue-top: #0162df;
  --wu-blue: #1f7ae6;
  --wu-blue-soft: #5cc1f7;
  --wu-sky-pale: #bdecfc;
  --wu-slate: #5e84ad;
  --wu-paper: #ededeb;
  --wu-paper2: #f5f4f2;
  --wu-ink: #10151d;
  --wu-ink-soft: #525760;
  --wu-card: #ffffff;
  --wu-onblue: #ffffff;
  --wu-onblue-soft: rgba(255, 255, 255, 0.84);
  --wu-glass: rgba(255, 255, 255, 0.16);
  --wu-glass-line: rgba(255, 255, 255, 0.34);
}

.ksn-medytacje {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-align: left;
  color: var(--text);
  background: #ffffff;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The element rules below carry the .ksn-medytacje prefix because public.css
   restates the bare element selectors (*, a, img, button) after this file as
   part of its reboot, and the wrapper has to win inside the page. */
.ksn-medytacje * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.ksn-medytacje a {
  color: inherit;
  text-decoration: none;
}

.ksn-medytacje img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ksn-medytacje button {
  font-family: inherit;
}

/* Focus resets from the port: no ring on a mouse click, and no dotted inner
   border in Firefox. Both stay unprefixed; nothing restates them later. */
.ksn-medytacje :focus:not(:focus-visible) { outline: none; }
.ksn-medytacje button::-moz-focus-inner { border: 0; }

/* Prefixed so it outranks the reboot in public.css. The footer's own
   .container is restated under #footer in the footer section. */
.ksn-medytacje .container,
.ksn-medytacje .container-wide {
  margin: 0 auto;
  padding: 0 24px;
}

.ksn-medytacje .container { max-width: 1280px; }
.ksn-medytacje .container-wide { max-width: 1480px; }

.section {
  padding: 88px 0;
  background: transparent;
}

h1,
h2,
h3,
h4 {
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
}

.display-1 {
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.display-2 {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.028em;
}

.wu-section-title {
  margin-bottom: 36px;
  text-align: center;
  color: var(--wu-ink);
}

/* The "bajka" buttons. Pill shape in the original, squared off by a later
   pass, so the radius here is the one that actually shipped. */
.btn-bajk {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 32px;
  border: 0;
  border-radius: 8px;
  font-family: "Baloo 2", "DM Sans", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease;
}

.btn-bajk:hover { transform: translateY(-3px); }
.btn-bajk:active { transform: translateY(1px) scale(0.99); transition-duration: 0.08s; }

/* Prefixed so the button colours outrank the scoped anchor rule above. */
.ksn-medytacje .btn-bajk-primary {
  background: var(--coral);
  color: #fff;
  box-shadow:
    0 8px 0 -2px var(--coral-deep),
    0 14px 28px rgba(214, 95, 93, 0.32);
}

.ksn-medytacje .btn-bajk-primary:hover {
  box-shadow:
    0 12px 0 -2px var(--coral-deep),
    0 20px 36px rgba(214, 95, 93, 0.42);
}

.ksn-medytacje .btn-bajk-ghost {
  background: #fff;
  color: var(--ink);
  border: 2px solid rgba(46, 33, 23, 0.08);
  box-shadow:
    0 4px 0 -1px rgba(46, 33, 23, 0.08),
    0 8px 18px rgba(46, 33, 23, 0.08);
}

.ksn-medytacje .btn-bajk-ghost:hover {
  box-shadow:
    0 7px 0 -1px rgba(46, 33, 23, 0.10),
    0 14px 26px rgba(46, 33, 23, 0.12);
}

.btn-bajk-lg {
  padding: 22px 38px;
  border-radius: 8px;
  font-size: 19px;
}

/* Hero review badge: laurel wreath, stars, score. */
.ksn-reviews {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.ksn-reviews-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ksn-reviews-stars {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 4px;
  line-height: 0;
  color: #ffce4d;
}

.ksn-reviews-stars svg {
  display: block;
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 1px 2px rgba(0, 20, 60, 0.3));
}

.ksn-reviews-num {
  font-size: 33px;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #fff;
}

.ksn-reviews-cap {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.84);
}

/* Prefixed so it outranks the scoped img rule above, which itself has to beat
   the img reboot in public.css. */
.ksn-medytacje .ksn-laurel {
  flex: none;
  width: auto;
  height: 86px;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.95;
  filter: drop-shadow(0 2px 6px rgba(0, 20, 60, 0.28));
}

.ksn-laurel-r { transform: scaleX(-1); }

.ksn-br { display: none; }

.fade-up { animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
.fade-up-1 { animation-delay: 0.05s; }
.fade-up-2 { animation-delay: 0.15s; }

.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeInUp 0.7s ease-out forwards;
}

.fade-in-up.d1 { animation-delay: 0.08s; }
.fade-in-up.d2 { animation-delay: 0.16s; }
.fade-in-up.d3 { animation-delay: 0.24s; }
.fade-in-up.d4 { animation-delay: 0.32s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

@media (min-width: 769px) {
  .ksn-nowrap { white-space: nowrap; }
  .ksn-br { display: inline; }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }
}

@media (max-width: 560px) {
  .display-1 { font-size: 44px; }
  .display-2 { font-size: 34px; }
}

/* ==== topbar and totop ==== */

.ksn-med-topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 30px;
}

.ksn-med-topbar-note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.88);
  pointer-events: none;
}

/* Prefixed so it outranks the scoped anchor rule above, which itself has to
   beat the a { color } reboot in public.css. */
.ksn-medytacje .ksn-med-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1.5px solid #fff;
  border-radius: 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #0c3c84;
  background: #fff;
  transition: background 0.15s ease;
}

.ksn-medytacje .ksn-med-back:hover { background: #eaf3fa; }

.ksn-totop {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: #f29391;
  box-shadow: 0 12px 32px rgba(242, 147, 145, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background 0.2s ease;
}

.ksn-totop svg {
  display: block;
  width: 26px;
  height: 26px;
}

.ksn-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ksn-totop:hover {
  background: #e07f7d;
  transform: translateY(-3px);
}

@media (min-width: 769px) {
  .ksn-med-topbar-logo { display: inline-block; margin: 6px 0 0 16px; }
}

@media (max-width: 968px) {
  .ksn-totop { right: 18px; bottom: 18px; width: 54px; height: 54px; }
  .ksn-med-topbar-note { display: none; }
}

@media (max-width: 768px) {
  .ksn-med-topbar { padding: 14px 16px; }
  .ksn-medytacje .ksn-med-back { gap: 7px; padding: 9px 14px; font-size: 13.5px; }
}

/* ==== hero ==== */

/* The sky. The port repainted this section about a hundred times; what
   survived is a three layer stack (white fade into the next section, the cloud
   photo, the blue gradient) over a solid blue, and a padding box that is set
   once above 768 and once below. Every earlier pass (cream, #0a3f9e, #2b5ea0,
   the two and four layer stacks, the negative margin that pulled the hero
   under the topbar) is overwritten by a later one and is dropped. */
.med-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88svh;
  margin-top: 0;
  padding: 100px 0 130px;
  overflow: hidden;
  background-color: #014595;
  background-image:
    linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 12%),
    url("/assets/ksn/ksn-sky-clouds-d8e882c0.png"),
    linear-gradient(180deg,
      #013981 0%, #024493 14%, #014596 34%, #00479a 52%,
      #0f55a6 66%, #3f78c0 80%, #86abdd 92%, #b9d6f0 100%);
  background-size: cover, cover, cover;
  background-position: center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* Grain over the whole hero above 768. Below 768 the same pseudo element
   becomes the cloud in the top right corner, so both live in media blocks. */
.med-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* The white fade at the bottom edge. The port ended with display:none, so this
   never paints; the box is kept because the snapshots still read it. Below 768
   it turns into the cloud separator and does paint. */
.med-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  top: auto;
  z-index: 1;
  display: none;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
}

.med-hero .container-wide {
  padding-left: 56px;
  padding-right: 56px;
}

.med-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

/* The blue sky made every piece of hero copy white. */
.med-hero h1 {
  margin: 22px 0;
  color: #fff;
  text-shadow: 0 2px 18px rgba(2, 60, 150, 0.18);
}

.med-hero .display-1 {
  font-size: clamp(44px, 5.6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(2, 60, 150, 0.18);
}

.med-hero .lead {
  max-width: 500px;
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.med-hero .lead strong { color: #fff; }

/* Prefixed so the white hero buttons outrank the base .btn-bajk-* rules, which
   are themselves prefixed to beat the reboot in public.css. */
.ksn-medytacje .med-hero .btn-bajk-primary {
  border: 0;
  color: var(--wu-blue-top);
  background: #fff;
  box-shadow: 0 10px 30px rgba(2, 40, 110, 0.22);
}

.ksn-medytacje .med-hero .btn-bajk-primary:hover {
  background: #f3f7ff;
  transform: translateY(-2px);
}

.ksn-medytacje .med-hero .btn-bajk-ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.ksn-medytacje .med-hero .btn-bajk-ghost:hover { background: rgba(255, 255, 255, 0.20); }

/* The rotating word in the headline: two spans stacked in one grid cell, each
   fading in and out on an 8s loop, the second one half a loop behind. The
   resting state is the 0% keyframe, written out so a frozen page matches. */
.ksn-hero-rotator {
  display: inline-grid;
  grid-template-areas: "stack";
  vertical-align: baseline;
}

.ksn-hero-word {
  grid-area: stack;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  color: inherit;
  opacity: 0;
  transform: translateY(-30%) scale(0.94);
  filter: blur(14px);
  will-change: opacity, filter, transform;
  animation: ksnHeroWordRotate 8s ease-in-out infinite;
}

.ksn-hero-word:nth-child(1) { animation-delay: 0s; }
.ksn-hero-word:nth-child(2) { animation-delay: 4s; }

.med-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 14px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.90);
}

.med-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border: 1.5px solid #bfd3e8;
  border-radius: 8px;
  font-weight: 300;
  color: #fff;
  text-shadow: none;
  background: #3b77b896;
  box-shadow: 0 2px 10px rgba(6, 40, 100, 0.18);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* The tick started as a mint circle with a text checkmark and ended as a white
   disc with an inline SVG, the glyph hidden by font-size:0. Scoped under the
   row so it outranks the .med-trust-row span rule above, which also matches
   it: in the port the same fight was won with a doubled id prefix. */
.med-trust-row .med-trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  min-width: 18px;
  max-width: none;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  font-size: 0;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  background: #fff url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%233b77b8'%20stroke-width='3.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%207%209%2018%204%2013'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  box-shadow: none;
}

.med-hero-character {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
}

/* The breathing ring behind the phone. The port switched it off, but the ring
   is still measured, so the box stays exactly as the cascade left it: the
   radial glow of the first pass, the border and breathe timing of the second.
   The matching ::after ended on content:none and is gone. */
.med-hero-character::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 0;
  display: none;
  width: 88%;
  height: 88%;
  border: 2px solid rgba(242, 147, 145, 0.3);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 147, 145, 0.18) 0%, rgba(255, 206, 77, 0.10) 50%, transparent 75%);
  animation: breathe 6s ease-in-out infinite 0s;
}

/* Prefixed so max-width beats the scoped img rule in the base section, which
   itself has to beat the img reboot in public.css. */
.ksn-medytacje .med-hero-visual {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* The floating pastel dots of the first pass. Hidden everywhere by a later
   one; kept because the elements are still in the markup and measured. */
.med-dot {
  position: absolute;
  z-index: 0;
  display: none;
  border-radius: 50%;
}

.med-dot-1 {
  top: 5%;
  left: -10px;
  width: 60px;
  height: 60px;
  background: var(--mint);
  animation: float 8s ease-in-out infinite;
}

.med-dot-2 {
  right: 4%;
  bottom: 12%;
  width: 40px;
  height: 40px;
  background: var(--butter);
  animation: float 6s ease-in-out infinite 1s;
}

.med-dot-3 {
  top: 30%;
  right: -15px;
  width: 30px;
  height: 30px;
  background: var(--lavender);
  animation: float 7s ease-in-out infinite 0.5s;
}

@keyframes ksnHeroWordRotate {
  0%   { opacity: 0; filter: blur(14px); transform: translateY(-30%) scale(0.94); }
  6%   { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  44%  { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  50%  { opacity: 0; filter: blur(14px); transform: translateY(30%) scale(0.94); }
  100% { opacity: 0; filter: blur(14px); transform: translateY(-30%) scale(0.94); }
}

@media (min-width: 1800px) {
  .med-hero { background-position: center top, center 68%, center top; }
}

@media (min-width: 769px) {
  .med-hero::before {
    inset: 0;
    background: url("/assets/ksn/ksn-grain-soft-405331fd.png") 0 0 / 200px 200px repeat;
    mix-blend-mode: overlay;
    opacity: 0.12;
  }

  .med-hero-grid { align-items: start; }
  .med-hero .display-1 { font-size: min(78px, calc(6.12vw - 15px)); }
}

@media (max-width: 968px) {
  .med-hero .container-wide { padding-left: 28px; padding-right: 28px; }

  .med-hero-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .med-hero-character {
    order: -1;
    max-width: 380px;
    min-height: 0;
    margin: 16px auto 0;
    aspect-ratio: auto;
  }

  .ksn-medytacje .med-hero-visual { max-width: 360px; }
  .med-hero .lead { max-width: 100%; line-height: 1.5; }
  .med-trust-row { gap: 16px 22px; font-size: 17px; }
}

@media (max-width: 768px) {
  /* Below 768 the hero paints its own five layer sky, the grain is replaced by
     a corner cloud and the bottom edge becomes a cloud separator. */
  .med-hero {
    padding: 72px 0 190px;
    background:
      linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0) 13%),
      url("/assets/ksn/ksn-sky-clouds-d8e882c0.png"),
      radial-gradient(95% 50% at 82% 15%, rgba(120, 172, 230, 0.55) 0%, rgba(120, 172, 230, 0) 60%),
      radial-gradient(120% 60% at 6% 52%, rgba(1, 22, 62, 0.60) 0%, rgba(1, 22, 62, 0) 62%),
      linear-gradient(180deg, #06398a 0%, #0a4796 32%, #115aa8 58%, #3f79c1 82%, #b9d6f0 100%);
    background-size: cover, cover, 150% 150%, 150% 150%, cover;
    background-position: center top, center bottom, 82% 15%, 6% 52%, center top;
    background-repeat: no-repeat;
  }

  .med-hero::before {
    top: calc(var(--ksnHeadH, 64px) + 28px);
    right: -16%;
    bottom: auto;
    left: auto;
    display: block;
    width: 84%;
    height: auto;
    aspect-ratio: 860 / 528;
    background: url("/assets/ksn/ksn-cloud-tr-6247362a.png") right center / contain no-repeat;
    opacity: 1;
  }

  .med-hero::after {
    right: 0;
    bottom: -1px;
    left: 0;
    top: auto;
    z-index: 4;
    display: block;
    width: 100%;
    height: 45vw;
    max-height: 230px;
    background: url("/assets/ksn/ksn-cloud-sep2-19f52c8f.png") center bottom / 100% auto no-repeat;
  }

  .med-hero .container-wide { padding-left: 20px; padding-right: 20px; }
  .med-hero .lead { font-size: 22px; }
  .med-trust-row { margin-top: 32px; }
}

@media (max-width: 560px) {
  .med-hero .lead { font-size: 19.5px; }
  .med-trust-row { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ksn-hero-word { animation: none; }
  .ksn-hero-word:nth-child(1) { opacity: 1; filter: none; transform: none; }
}

/* ==== catalog and listening ==== */

/* The catalog section element, which also carries .section. */
.wu-difference {
  padding-bottom: 40px;
}

.wu-diff-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin: 0 0 36px;
}

.wu-diff-intro {
  max-width: 520px;
}

.wu-diff-intro p {
  margin: 0;
  color: var(--wu-ink-soft);
}

/* Category tabs. The port shaped them as pills and squared them off in a later
   pass, so the radii here are the ones that shipped. */
.wu-tabs {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(16, 21, 29, 0.06);
}

.wu-tab {
  padding: 10px 24px;
  border: 0;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--wu-ink-soft);
  background: transparent;
  cursor: pointer;
  transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.28s ease;
}

.wu-tab:hover { color: var(--wu-ink); }

.wu-tab.is-active {
  color: var(--wu-ink);
  background: #fff;
  box-shadow: 0 2px 10px rgba(16, 21, 29, 0.12);
}

/* The rows wrapper is a column so the arrow bar can sit under the cards via
   order. The port reserved 58px of side padding for arrows pinned over the
   covers and took it back when the arrows moved below the row, so nothing is
   left here beyond the reset's zero. */
.wu-card-rows {
  position: relative;
  display: flex;
  flex-direction: column;
}

.wu-card-rows > .wu-card-row { order: 0; }

/* The listening section's row is a plain grid; the catalog's rows, which carry
   data-tab-group, are the horizontal carousels below. */
.wu-card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.wu-card-row-3 { grid-template-columns: repeat(3, 1fr); }

.wu-card-row.is-hidden { display: none; }

/* A catalog row: one screenful of cards scrolling sideways. --vis is how many
   cards fit across, and the partially visible one invites the drag. The port
   masked the right edge with a gradient and then switched the mask off again,
   so only the off state is written here. */
.wu-card-row[data-tab-group]:not(.is-hidden) {
  display: flex;
  gap: 24px;
  padding: 12px 2px 46px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scrollbar-color: rgba(20, 60, 120, 0.5) transparent;
  --vis: 4.3;
}

.wu-card-row[data-tab-group] > .med-card {
  flex: 0 0 calc((100% - (var(--vis) - 1) * 24px) / var(--vis));
  scroll-snap-align: start;
}

.wu-card-row[data-tab-group]::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.wu-card-row[data-tab-group] img { -webkit-user-drag: none; }

/* The arrow bar, below the row. It hides itself when the row does not overflow
   (the tabs controller sets .is-nocarousel) and on phones, where the row is
   dragged instead. */
.wu-arrows {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: -18px;
}

.wu-arrows.is-nocarousel { display: none; }

/* The port first pinned the arrows over the covers with --arrowTop, then moved
   them into the bar below; the static resting position is what is left, and
   the tabs controller's --arrowTop is now inert. */
.wu-arrow {
  position: static;
  top: auto;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(16, 21, 29, 0.1);
  border-radius: 50%;
  color: #12305e;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 21, 29, 0.1);
  transform: none;
  cursor: pointer;
  transition: opacity 0.22s ease, transform 0.14s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Left over from the pinned layout. The arrows are statically positioned now,
   so these offsets do nothing but still compute, which the snapshots record. */
.wu-arrow-prev { left: 2px; }
.wu-arrow-next { right: 2px; }

.wu-arrow svg { width: 22px; height: 22px; }

.wu-arrow:hover {
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 21, 29, 0.16);
  transform: scale(1.08);
}

.wu-arrow:active { transform: scale(0.95); }

.wu-arrow[disabled] {
  opacity: 0.3;
  box-shadow: none;
  pointer-events: none;
}

/* A meditation card. The port went from a 24px cream card to a white one with
   a hairline, and squared the radius off in three further passes. */
.med-card {
  --card-bg: #fffdf7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(16, 21, 29, 0.07);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(16, 21, 29, 0.05);
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.28s ease;
}

/* Only the sleep category still names a cover tint; the other two categories
   in the model fall back to --peach. The matching --cat-color is dead because
   the tag repaints itself blue below. */
.med-card[data-cat="sen"] { --cat-bg: #ede9fe; }

.med-card:hover {
  box-shadow: 0 16px 40px rgba(16, 21, 29, 0.12);
  transform: translateY(-5px);
}

.med-card.is-hidden { display: none; }

/* The cover. The port cropped it 16:10, then square, and rounded only the top
   corners once the card itself went square. */
.med-card-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(135deg, var(--cat-bg, var(--peach)) 0%, var(--coral-soft) 100%);
}

.med-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.med-card:hover .med-card-cover img { transform: scale(1.04); }

/* The fade that used to blend the cover into the card body. Switched off when
   the cover became square-cropped, but the element still computes, so its
   resting values are written out rather than dropped. */
.med-card-cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  display: none;
  height: 32%;
  background: linear-gradient(180deg,
    rgba(255, 253, 247, 0) 0%,
    rgba(255, 253, 247, 0.55) 60%,
    #fffdf7 100%);
  pointer-events: none;
}

/* A card the visitor owns gets a green check in the cover's top corner, and
   its player label turns green with it. */
.med-card.is-unlocked .med-card-cover::after {
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
  display: block;
  width: 23px;
  height: 23px;
  border: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%207%209%2018%204%2013'/%3E%3C/svg%3E") center / 11px 11px no-repeat,
    linear-gradient(180deg, #25c06a, #0f9a4f);
  box-shadow: 0 2px 8px rgba(15, 122, 63, 0.35);
}

.med-card.is-unlocked .med-card-player-label {
  font-weight: 700;
  color: #12a150;
}

/* The body used to slide 12px up over the cover fade; the square crop ended
   that and the negative margin went with it, leaving the reset's zero. */
.med-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px 22px;
  background: var(--card-bg);
}

.med-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

/* The tag took its colour from the category until the blue redesign painted
   every one of them the same. The redesign also asked for 0.02em of tracking
   but the earlier -0.005em carries !important in the port, so it never had
   any effect and the tighter value is what is written here. */
.med-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  border: 0;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: none;
  white-space: nowrap;
  color: var(--wu-blue);
  background: rgba(31, 122, 230, 0.1);
}

.med-card-tag::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* The length was a badge floating over the cover before the blue redesign
   moved it into the meta row, so the port undoes the badge's position, padding
   and backdrop here; the reset and the defaults already supply those. */
.med-card-length {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--wu-ink-soft);
}

.med-card-title {
  margin-top: 2px;
  font-family: "DM Sans", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--wu-ink);
}

.med-card-desc {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wu-ink-soft);
}

.med-card-desc strong {
  font-weight: 600;
  color: var(--text);
}

.med-card-player {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(18, 17, 28, 0.06);
  border-radius: 18px;
  background: #fff;
}

/* The play button was a coral disc in the cream design and is a white one with
   a blue glyph in the blue one. */
.med-play-btn {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(16, 21, 29, 0.1);
  border-radius: 50%;
  color: var(--wu-blue);
  background: #fff;
  box-shadow: 0 3px 10px rgba(16, 21, 29, 0.08);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.med-play-btn:hover {
  color: var(--wu-blue-top);
  box-shadow: 0 6px 16px rgba(2, 40, 110, 0.16);
  transform: scale(1.07);
}

.med-play-btn svg {
  width: 17px;
  height: 17px;
  margin-left: 1.5px;
}

.med-play-btn .icon-pause { display: none; margin-left: 0; }
.med-play-btn.is-playing .icon-play { display: none; }
.med-play-btn.is-playing .icon-pause { display: block; }

/* The wide blue button under a card, which starts the same sample. */
.med-start-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2px;
  color: #fff;
  background: #0162df;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.med-start-btn:hover { background: #0a52c0; transform: translateY(-1px); }
.med-start-btn:active { transform: translateY(0); }

.med-card-player-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.med-card-player-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.med-card-player-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--wu-ink-soft);
}

.med-card-player-duration {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-muted);
}

.med-card-waveform {
  display: flex;
  align-items: center;
  gap: 1.5px;
  width: 100%;
  height: 22px;
  overflow: hidden;
}

/* The waveform controller draws sixty spans and sets each one's height inline,
   so the port's sixteen nth-child heights never applied and are dropped. */
.med-card-waveform .med-wave-bar {
  flex: 1 0 0;
  width: 2px;
  min-width: 2px;
  border-radius: 999px;
  background: var(--text);
  opacity: 0.22;
  transform-origin: center;
  transition: opacity 0.2s ease;
}

/* While a card plays, the bars turn brand-coloured and dance out of step. */
.med-card.is-playing .med-card-waveform .med-wave-bar {
  background: var(--brand);
  opacity: 1;
  animation: waveDance 1.2s ease-in-out infinite;
}

.med-card.is-playing .med-card-waveform .med-wave-bar:nth-child(2n) { animation-delay: 0.15s; }
.med-card.is-playing .med-card-waveform .med-wave-bar:nth-child(3n) { animation-delay: 0.3s; }
.med-card.is-playing .med-card-waveform .med-wave-bar:nth-child(5n) { animation-delay: 0.45s; }

@keyframes waveDance {
  0%, 100% { opacity: 0.4; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1.2); }
}

/* The "Zacznij sluchac" section, which reuses the card row as a plain grid. */
.wu-listening {
  padding-top: 48px;
}

.wu-listening-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 30px;
}

.wu-listening-head h2 {
  margin: 0;
  color: var(--wu-ink);
}

/* Prefixed so the colour outranks the scoped anchor rule in the base section,
   which itself has to beat the anchor reboot in public.css. */
.ksn-medytacje .wu-seeall {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border: 1.5px solid rgba(16, 21, 29, 0.22);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--wu-ink);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.ksn-medytacje .wu-seeall:hover {
  border-color: var(--wu-ink);
  color: #fff;
  background: var(--wu-ink);
}

@media (min-width: 769px) {
  /* The port made the row draggable with cursor: grab and then took the cue
     back; only the default it settled on is kept. */
  .wu-card-row[data-tab-group]:not(.is-hidden) {
    cursor: default;
    margin-left: -14px;
    margin-right: -20px;
    padding-left: 16px;
    padding-right: 22px;
  }
}

@media (max-width: 968px) {
  .wu-card-row,
  .wu-card-row-3 { grid-template-columns: repeat(2, 1fr); }
  .wu-card-row[data-tab-group]:not(.is-hidden) { --vis: 2.3; }
  /* The port scaled up six card type sizes here as well, but every one of them
     is restated with !important further down the file, so the padding is all
     that ever reached the page. */
  .med-card-tag { padding: 7px 14px 7px 12px; }
}

@media (max-width: 768px) {
  /* Phones drag the row instead, so the arrow bar and the arrows both go. */
  .wu-arrow { display: none; }
  .wu-arrows { display: none; }
  .wu-card-row[data-tab-group]:not(.is-hidden) {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 6px 18px 20px;
    scroll-padding-left: 18px;
  }
  .wu-card-row[data-tab-group] > .med-card { flex: 0 0 80vw; max-width: 80vw; }
}

@media (max-width: 560px) {
  .wu-card-row,
  .wu-card-row-3 { grid-template-columns: 1fr; }
  .wu-card-row[data-tab-group]:not(.is-hidden) { gap: 16px; --vis: 1.15; }
}

/* ==== techniques ==== */

/* The blue panel behind the techniques and packs sections, which wrap the rest
   of the page in home/index.html.erb. The port painted it four times before
   settling on grain over a single cloud photo over the blue gradient; only the
   last stack survives, and the four-layer version it replaced is dropped. */
.med-sky-block {
  position: relative;
  background-color: #5a82c2;
  background-image:
    url("/assets/ksn/ksn-grain-soft-405331fd.png"),
    url("/assets/ksn/ksn-sky-clouds-d8e882c0.png"),
    linear-gradient(180deg, #6f9bd2 0%, #5d86c4 45%, #5078ba 100%);
  background-size: 240px 240px, cover, cover;
  background-position: 0 0, center center, center;
  background-repeat: repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, soft-light, normal;
}

/* The six technique cards in the techniques section. The port drew them as
   translucent white panels and then made them transparent, keeping only the
   hairline; the heading lost its Cormorant italic in the same pass. */
.med-insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.med-insight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 178px;
  padding: 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: transparent;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}

.med-insight:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
  transform: translateY(-3px);
}

.med-insight-tag {
  display: inline-block;
  margin: 0 0 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.med-insight h3 {
  margin: 0 0 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 19px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #fff;
}

.med-insight p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

/* The panel that holds the technique cards and, below the separator, the FAQ.
   The port repainted it nine times (blue, teal, charcoal, clay, olive, sky)
   before wrapping the whole thing in .med-sky-block, whose own rule blanks the
   background again; none of those gradients ever rendered, so only the
   transparent end state is kept. background-blend-mode is not part of the
   background shorthand, so the last pass's value outlived the blanking and
   still computes. */
.wu-topics {
  position: relative;
  overflow: hidden;
  background: transparent;
  background-blend-mode: soft-light;
}

/* The grain overlay. The sky block hides it, but the element still exists, so
   its resting values are written out rather than dropped. */
.wu-topics::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  background-image: url("/assets/ksn/ksn-grain-8230eb2c.png");
  background-size: 240px 240px;
  background-repeat: repeat;
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Lifts the content above the grain overlay. */
.wu-topics > .container-wide {
  position: relative;
  z-index: 1;
}

/* Shared with the FAQ head, which carries both classes. The faq section comes
   after this one, so its narrower values win the shared element on source
   order, which is what the port's cascade did with its id-prefixed rules. */
.wu-topics-head {
  max-width: 640px;
  margin: 0 auto 50px;
  text-align: center;
}

/* The heading also carries .display-2, so both selectors are restated to beat
   the base type scale at every width. */
.wu-topics-head h2,
.wu-topics-head .display-2 {
  margin: 0 0 14px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(8, 35, 82, 0.28);
}

.wu-topics-head p {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.84);
}

.wu-topics-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: center;
}

.wu-topics-visual {
  position: relative;
  min-height: 440px;
}

/* Three covers scattered over the visual column, each rotated a little. The
   port squared the radius off twice on the way to 18px and shrank the shadow
   once; the last pass of each is what is left. */
.wu-float-img {
  position: absolute;
  display: block;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 44px rgba(6, 28, 66, 0.34);
}

.wu-float-1 {
  z-index: 2;
  top: 10px;
  left: 40px;
  width: 210px;
  height: 252px;
  transform: rotate(-6deg);
}

.wu-float-2 {
  z-index: 1;
  top: 128px;
  left: 236px;
  width: 184px;
  height: 224px;
  transform: rotate(5deg);
}

.wu-float-3 {
  z-index: 3;
  top: 250px;
  left: 96px;
  width: 170px;
  height: 200px;
  transform: rotate(-3deg);
}

/* The hairline between the technique cards and the FAQ block. */
.wu-sep {
  height: 1px;
  max-width: 1120px;
  margin: 70px auto 58px;
  border: 0;
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 968px) {
  .wu-topics-grid { grid-template-columns: 1fr; gap: 30px; }
  .wu-topics-visual { display: none; }
}

@media (max-width: 560px) {
  .med-insight-grid { grid-template-columns: 1fr; }
}

/* ==== faq ==== */

/* The FAQ block sits at the bottom of the techniques section, so the panel
   itself is painted by .med-sky-block behind it and stays transparent here.
   The port set nine different gradients on this selector before settling on
   the sky block; only the transparent one ever rendered. */
.med-sky-block .bg-soft:has(.faq-list) {
  background: transparent;
}

.wu-faq-block {
  position: relative;
  z-index: 1;
}

.wu-faq-head {
  max-width: 640px;
  margin: 0 auto 30px;
  text-align: center;
}

/* The heading carries .display-2 as well, so both selectors are restated to
   beat the base type scale at every width. */
.wu-faq-head h2,
.wu-faq-head .display-2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(8, 35, 82, 0.28);
}

.wu-faq-head p {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
}

.wu-faq-block .faq-list {
  max-width: 780px;
  margin: 0 auto;
}

/* Each item is a details element. The port started from a white card and
   later stripped it down to a hairline-separated row, which is what is left. */
.faq-item {
  margin-bottom: 12px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

/* The plus sign is drawn from two pseudo-element bars, so the "+" character
   in the markup is hidden by the zero font size and transparent colour. */
.faq-plus {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-left: 24px;
  border-radius: 0;
  background: transparent;
  font-size: 0;
  font-weight: 400;
  color: transparent;
  transition: none;
}

.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
}

.faq-plus::before {
  width: 24px;
  height: 2px;
  transform: translate(-50%, -50%);
}

/* The vertical bar rotates out of the way when the item opens, turning the
   plus into a minus. */
.faq-plus::after {
  width: 2px;
  height: 24px;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item[open] .faq-plus::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
  padding: 2px 0 10px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.85);
}

/* ==== packs and unlock ==== */

/* The pricing block. The port painted it yellow, then blue, then a stack of
   grain and cloud images, and finally wrapped it in .med-sky-block, whose own
   rule blanks the background again; only the transparent end state is left.
   The bottom padding grew to 172px in the last pass, past the 968 step. */
.packs-hero-section {
  position: relative;
  overflow: hidden;
  padding: 100px 0 172px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  /* background-blend-mode is not part of the background shorthand, so it
     outlived the pass that blanked the background and still computes. */
  background-blend-mode: overlay;
}

/* The curved lip at the top of the section. Hidden since the sky block took
   over the background, but the element still exists, so the resting values it
   computes to are kept here rather than dropped. */
.packs-hero-section::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  z-index: 1;
  display: none;
  height: 80px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background-color: #0a3f9e;
  background-image: url("/assets/ksn/ksn-grain-soft-405331fd.png");
  background-size: 240px 240px;
  background-repeat: repeat;
  background-blend-mode: overlay;
}

/* The white curve that hands over to the footer band below. */
.packs-hero-section::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 1;
  height: 80px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: #ffffff;
}

.packs-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.packs-hero-content h2 {
  margin: 28px 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(8, 35, 82, 0.28);
}

.packs-benefits {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.packs-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.45;
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(8, 35, 82, 0.28);
}

.packs-benefits .pb-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  color: #fff;
  background: #22c55e;
}

.packs-benefits .pb-check svg {
  width: 12px;
  height: 12px;
}

/* Three pack cards, one selected. The radius was 16px in the first pass and
   8px in the squaring-off pass, which is the one that ships. */
.packs-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.packs-option {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 130px;
  padding: 18px 16px;
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: left;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.packs-option:hover { background: rgba(255, 255, 255, 0.85); }

.packs-option.is-selected {
  border-color: var(--text);
  background: rgba(255, 255, 255, 0.95);
}

.packs-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.packs-option .pack-check {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(18, 17, 28, 0.25);
  border-radius: 6px;
  background: transparent;
  transition: all 0.2s ease;
}

.packs-option .pack-check svg {
  width: 14px;
  height: 14px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.packs-option.is-selected .pack-check {
  border-color: var(--text);
  background: var(--text);
}

.packs-option.is-selected .pack-check svg { opacity: 1; }

.packs-option-best {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
  background: #2876d6;
}

.packs-option-label {
  margin-bottom: 4px;
  padding-right: 28px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  opacity: 0.65;
}

.packs-option-title {
  margin-bottom: 4px;
  padding-right: 28px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.packs-option-free {
  margin-bottom: 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #1f6a3a;
}

.packs-option-price {
  margin-top: auto;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.packs-option-price small {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  text-decoration: line-through;
  opacity: 0.65;
}

.packs-fine {
  margin-bottom: 22px;
  font-size: 12.5px;
  text-align: left;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0.7;
}

/* The illustration column: a floating face, two tilted phones and three
   clouds, all placed against a fixed-height box. */
.packs-visual {
  position: relative;
  height: 480px;
}

.packs-character {
  position: absolute;
  top: 0;
  left: 12%;
  z-index: 3;
  width: 160px;
  height: 160px;
  animation: float 6s ease-in-out infinite;
}

.packs-character svg {
  width: 100%;
  height: 100%;
}

.packs-phone {
  position: absolute;
  width: 220px;
  height: 440px;
  padding: 10px;
  border-radius: 14px;
  background: #1a1d28;
  box-shadow: 0 36px 70px rgba(10, 25, 60, 0.35);
}

/* The notch at the top of each phone. */
.packs-phone::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 5;
  width: 58px;
  height: 15px;
  border-radius: 0 0 11px 11px;
  background: #1a1d28;
  transform: translateX(-50%);
}

.packs-phone-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 28px 16px;
  border-radius: 14px;
}

.packs-phone-1 {
  top: 50px;
  left: 28%;
  z-index: 2;
  transform: rotate(-3deg);
}

.packs-phone-1 .packs-phone-screen { background: #fff; }

.packs-phone-2 {
  top: 60px;
  right: 0;
  z-index: 1;
  transform: rotate(4deg);
}

.packs-phone-2 .packs-phone-screen {
  color: #fff;
  background: linear-gradient(180deg, #2a1a5e 0%, #4a2b8b 100%);
}

.packs-cloud {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}

.packs-cloud-1 { top: 32%; left: 0; width: 90px; height: 50px; }
.packs-cloud-2 { right: 10%; bottom: 18%; width: 60px; height: 36px; }
.packs-cloud-3 { top: 56%; left: 38%; width: 50px; height: 30px; }

/* "I already have a code": a collapsed details block under the CTA. */
.packs-guest {
  max-width: 560px;
  margin-top: 26px;
}

.packs-guest-box summary {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgba(255, 255, 255, 0.85);
  list-style: none;
  cursor: pointer;
}

.packs-guest-box summary::-webkit-details-marker { display: none; }

.packs-guest-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Both the code field and the submit button are inputs, so one rule dresses
   the pair. The port also styled a "button" child, which this form never
   renders. */
.packs-guest-form input {
  flex: 1 1 180px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  font-size: 14px;
  color: #1c2a3a;
  background: rgba(255, 255, 255, 0.92);
}

.packs-guest-hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

/* The "I already have access" pair that the catalog and the listening strip
   render above this section, pointing at the block above. */
.ksn-unlock-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 36px auto 8px;
  text-align: center;
}

.ksn-unlock-sub {
  font-size: 13.5px;
  color: #5b6b75;
}

/* Prefixed so the colour and the underline outrank the scoped anchor rule in
   the base section, which itself has to beat the reboot in public.css. */
.ksn-medytacje .ksn-have-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 2px solid #0162df;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: #0162df;
  background: #fff;
  transition: background 0.18s ease;
}

.ksn-medytacje .ksn-have-btn:hover { background: #eef5ff; }

@media (max-width: 968px) {
  .packs-hero-section { padding-top: 80px; }
  .packs-hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .packs-options { grid-template-columns: 1fr; gap: 10px; }
  .packs-option { min-height: auto; padding: 20px; }
  .packs-visual { height: 380px; max-width: 420px; margin: 0 auto; }
  .packs-phone { width: 180px; height: 360px; }
}

/* On a phone the section lets the curve hang out of its box and the character
   stops floating. */
@media (max-width: 768px) {
  .packs-hero-section { overflow: visible; }

  .packs-hero-section::after {
    top: auto;
    z-index: 3;
    width: 100%;
    height: 70px;
  }

  .packs-character { animation: none; }
}

/* ==== allmeds ==== */

/* While the overlay is open the page behind it must not scroll. The controller
   puts the class on the root element, not on body. */
html.allmeds-lock { overflow: hidden; }

/* The "see all" overlay. The panel and the backdrop fade in on .is-open; while
   closed the hidden attribute keeps the whole thing out of the layout. */
.allmeds-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
}

.allmeds-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 28, 0.55);
  opacity: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.28s ease;
}

.allmeds-modal.is-open .allmeds-backdrop { opacity: 1; }

/* Centred card on desktop; the open state only moves it the last 2% and
   removes the 0.97 scale, so the resting transform is the centring one. */
.allmeds-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100% - 32px));
  max-height: min(78vh, 720px);
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  opacity: 0;
  transform: translate(-50%, -48%) scale(0.97);
  box-shadow: 0 30px 80px rgba(10, 18, 40, 0.35);
  transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.allmeds-modal.is-open .allmeds-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* The header padding is the second pass of the port; the first said 20px 22px
   14px and was overridden at every width. */
.allmeds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(16, 21, 29, 0.08);
}

.allmeds-head h3 {
  font-size: 19px;
  font-weight: 700;
}

.allmeds-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(16, 21, 29, 0.06);
  color: #10151d;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.25s ease;
}

.allmeds-close:hover {
  background: rgba(16, 21, 29, 0.12);
  transform: rotate(90deg);
}

/* The "I already have access" strip between the header and the list. */
.allmeds-access {
  padding: 12px 22px;
  border-bottom: 1px solid rgba(16, 21, 29, 0.08);
  font-size: 14.5px;
  color: #3d4654;
}

.allmeds-access a {
  color: #0162df;
  font-weight: 700;
  text-decoration: underline;
}

.allmeds-list {
  padding: 12px 16px 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 21, 29, 0.22) transparent;
}

.allmeds-list::-webkit-scrollbar { width: 8px; }
.allmeds-list::-webkit-scrollbar-track { margin: 10px 0; background: transparent; }
.allmeds-list::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(16, 21, 29, 0.16); }
.allmeds-list::-webkit-scrollbar-thumb:hover { background: rgba(16, 21, 29, 0.3); }

.allmeds-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}

.allmeds-row:hover { background: rgba(16, 21, 29, 0.05); }
.allmeds-row:hover .am-play { background: #0a52c0; }

/* One row: cover, title and meta, play chip. The thumb was 56px/12px radius in
   the first pass and 60px/14px in the second, which is the one that ships. The
   port also gave .am-play a 6px left margin, but the base reset restated
   margin on every element after it, so it never rendered and is gone. */
.am-thumb {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background-color: #101a33;
  background-position: center;
  background-size: cover;
  box-shadow: 0 3px 10px rgba(10, 18, 40, 0.18);
}

.am-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.am-title {
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  color: #10151d;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.am-meta {
  font-size: 13px;
  color: #6a7180;
}

/* The green "full access" pill next to the meta line. */
.am-full {
  display: inline-block;
  padding: 2px 9px;
  margin-left: 4px;
  border-radius: 999px;
  background: #e9f9ef;
  font-size: 11.5px;
  font-weight: 700;
  color: #0e7c3f;
  vertical-align: 1px;
}

.am-play {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0f5fd6;
  color: #fff;
  box-shadow: 0 5px 14px rgba(15, 95, 214, 0.3);
}

/* On a phone the panel is a sheet docked to the bottom edge. */
@media (max-width: 560px) {
  .allmeds-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 82vh;
    border-radius: 22px 22px 0 0;
    transform: translateY(40px) scale(1);
  }

  .allmeds-modal.is-open .allmeds-panel { transform: translateY(0) scale(1); }

  .allmeds-head { padding: 18px 18px 14px; }
  .allmeds-list { padding: 10px 10px 18px; }
  .allmeds-row { gap: 13px; padding: 10px 10px; }
}

/* ==== player ==== */

/* The full-screen modal. The port faded it in with display none/block first and
   then switched to opacity plus visibility, so only the second scheme is left.
   The background went through three passes; the radial blue is the last one. */
.player-modal {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: block;
  overflow: hidden;
  background: radial-gradient(120% 72% at 50% 4%, #14529e 0%, #0c4088 40%, #082f6c 72%, #051f4d 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.42s ease, visibility 0s linear 0.42s;
}

.player-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.42s ease;
}

/* Closed, the modal skips rendering entirely, and every animation inside it
   stops. The selector repeats the modal on each part so it outranks the
   descendant rules further down that start those animations. */
.player-modal:not(.is-open) { content-visibility: hidden; }

.player-modal:not(.is-open) .player-aurora .aur,
.player-modal:not(.is-open) .player-bg-ambient,
.player-modal:not(.is-open) .player-orb,
.player-modal:not(.is-open) .player-timer .player-orb svg,
.player-modal:not(.is-open) .player-orb .orb-wave1,
.player-modal:not(.is-open) .player-orb .orb-wave2,
.player-modal:not(.is-open) .player-orb .orb-light,
.player-modal:not(.is-open) .player-orb .orb-sheen { animation: none; }

/* With no animation left to settle them, these two fall back to no transform. */
.player-modal:not(.is-open) .player-controls,
.player-modal:not(.is-open) .player-mix { transform: none; }

/* The pink pulse the port fired on open, switched off by a later pass. The
   pseudo element still resolves, so its box is kept exactly as it was. */
.player-modal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: none;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 147, 145, 0.20) 0%, transparent 55%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

.player-modal > .player-content { position: relative; z-index: 1; }

/* The topbar sits above the content; a later pass raised it from 20 to 60. */
.player-modal > .player-topbar { position: relative; z-index: 60; }

/* The aurora layer and the ambient scene layer were both switched off by later
   passes in favour of the cover art blur below. The markup still ships both,
   and their children still resolve styles, so the boxes are kept as they were. */
.player-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
  background: #04070f;
  pointer-events: none;
}

.player-aurora .aur {
  position: absolute;
  inset: -30%;
  filter: blur(8px);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, opacity;
}

.player-aurora .aur-1 {
  background: radial-gradient(circle at 50% 50%, rgba(30, 72, 160, 0.9), transparent 58%);
  animation: ksnAur1 30s ease-in-out infinite alternate;
}

.player-aurora .aur-2 {
  background: radial-gradient(circle at 50% 50%, rgba(12, 116, 98, 0.86), transparent 58%);
  animation: ksnAur2 43s ease-in-out infinite alternate;
}

.player-aurora .aur-3 {
  background: radial-gradient(circle at 50% 50%, rgba(104, 46, 156, 0.82), transparent 58%);
  animation: ksnAur3 37s ease-in-out infinite alternate;
}

.player-aurora .aur-4 {
  background: radial-gradient(circle at 50% 50%, rgba(124, 40, 98, 0.72), transparent 58%);
  animation: ksnAur4 51s ease-in-out infinite alternate;
}

.player-aurora .aur-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.player-aurora .aur-vign {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 115% at 50% 40%, transparent 42%, rgba(3, 7, 18, 0.5) 80%, rgba(2, 5, 14, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 7, 18, 0.42) 0%, transparent 22%, transparent 74%, rgba(2, 5, 14, 0.5) 100%);
  pointer-events: none;
}

.player-bg-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  overflow: hidden;
}

.player-bg-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
}

.player-bg-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.player-modal.is-open .player-bg-ambient {
  animation: playerBgIn 1.4s ease 0.1s forwards;
}

.player-bg-ambient.ambient-brak {
  background: linear-gradient(180deg, #1a1d28 0%, #0a0a14 100%);
}

.player-bg-ambient.ambient-ogien {
  background: radial-gradient(ellipse at center bottom, #ff6f00 0%, #b04f00 30%, #2a0d00 70%, #000 100%);
  animation: fireFlicker 0.18s ease-in-out infinite alternate;
}

.player-bg-ambient.ambient-deszcz {
  background: linear-gradient(180deg, #1a2538 0%, #0a1320 100%);
}

.player-bg-ambient.ambient-deszcz::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(100deg, transparent 0, transparent 14px, rgba(180, 200, 220, 0.18) 14px, rgba(180, 200, 220, 0.18) 16px);
  animation: rainFall 0.6s linear infinite;
}

.player-bg-ambient.ambient-las {
  background: radial-gradient(ellipse at center, #2a4a2a 0%, #0e1f0e 60%, #050a05 100%);
}

.player-bg-ambient.ambient-fale {
  background: linear-gradient(180deg, #1a3a5a 0%, #0a1a2e 60%, #050a14 100%);
  animation: wavesShift 8s ease-in-out infinite;
}

/* The blurred cover art behind the content, and the scrim that darkens it. */
.player-bg-cover {
  position: absolute;
  inset: -12px;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(5px) brightness(0.68) saturate(1.08);
  transform: scale(1.03);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.1s ease;
}

.player-modal.is-open .player-bg-cover { opacity: 1; }

.player-bg-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(125% 95% at 50% 28%, rgba(6, 16, 40, 0.06), rgba(4, 10, 28, 0.5) 94%),
    linear-gradient(180deg, rgba(5, 14, 36, 0.4) 0%, rgba(5, 14, 36, 0.08) 30%, rgba(4, 10, 28, 0.5) 100%);
  pointer-events: none;
}

.player-bg-scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.player-topbar {
  position: absolute;
  top: 24px;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}

.player-topbar > * { pointer-events: auto; }

.player-modal.is-open .player-topbar {
  animation: playerFadeDown 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

.player-topbar-logo {
  position: absolute;
  left: 50%;
  display: none;
  margin: 0 auto;
  transform: translateX(-50%);
}

.player-close-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  color: #eaf2ff;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.2s ease;
}

.player-close-x:hover { transform: rotate(90deg); }

.player-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  height: 100%;
  padding: 60px 24px 52px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(30px) scale(0.965);
  transition: opacity 0.5s ease 0.06s, transform 0.62s cubic-bezier(0.16, 0.84, 0.3, 1) 0.06s;
  will-change: transform, opacity;
}

.player-modal.is-open .player-content { opacity: 1; transform: none; }

/* The title font was reset three times over; Jost light is what shipped. */
.player-title {
  margin-bottom: 28px;
  font-family: 'Jost', sans-serif;
  font-size: clamp(27px, 4.4vw, 41px);
  font-weight: 300;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: 0.2px;
  color: #fff;
  text-shadow: 0 2px 22px rgba(2, 28, 86, 0.4);
  opacity: 0;
  transform: translateY(20px) scale(0.96);
}

.player-modal.is-open .player-title {
  animation: playerFadeUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

/* The free-preview strip above the timer. */
.player-sample {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 14px auto 20px;
  padding: 6px 6px 6px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(8, 18, 46, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Prefixed so the pill colours outrank the scoped anchor rule in the base. */
.ksn-medytacje .player-sample a {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  color: #1c2a4a;
  background: linear-gradient(135deg, #ffd76a 0%, #f7b733 100%);
  box-shadow: 0 3px 12px rgba(247, 183, 51, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ksn-medytacje .player-sample a:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(247, 183, 51, 0.5);
}

/* The order-number form behind the "I have access" link. */
.player-unlock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 420px;
  margin: 12px auto 0;
}

.player-unlock input {
  flex: 1 1 220px;
  min-width: 180px;
  padding: 11px 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font-family: inherit;
  font-size: 14.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.player-unlock input::placeholder { color: rgba(255, 255, 255, 0.6); }

.player-unlock input:focus {
  border-color: #ffd76a;
  background: rgba(255, 255, 255, 0.18);
}

.player-unlock button {
  flex: 0 0 auto;
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: #1c2a4a;
  background: #ffd76a;
  cursor: pointer;
}

.player-unlock-hint {
  flex: 1 0 100%;
  font-size: 12.5px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
}

/* The orb with the progress ring around it. */
.player-timer {
  position: relative;
  flex: 0 0 auto;
  width: min(54vw, 232px);
  height: min(54vw, 232px);
  margin: 0 auto;
  opacity: 1;
  transform: none;
}

.player-modal.is-open .player-timer {
  animation: ksnPlOrbIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

.player-orb {
  position: absolute;
  inset: 8%;
  z-index: 1;
  animation: plBreath 7s ease-in-out infinite;
}

.player-timer .player-orb svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: none;
  filter: drop-shadow(0 18px 44px rgba(3, 28, 86, 0.55));
  animation: orbGlow 7s ease-in-out infinite;
}

.player-orb .orb-wave1 { animation: orbWave1 9s ease-in-out infinite; }
.player-orb .orb-wave2 { animation: orbWave2 13s ease-in-out infinite; }
.player-orb .orb-light { animation: orbLight 11s ease-in-out infinite; }

.player-orb .orb-sheen {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateX(-190px) rotate(16deg);
  animation: orbSheen 9s ease-in-out infinite;
}

.player-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.player-timer-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 2;
}

.player-timer-progress {
  fill: none;
  stroke: #dcebff;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s linear;
}

/* The port moved the clock out of the ring and laid it out as one line. */
.player-timer-text {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: baseline;
  justify-content: center;
  margin: 16px 0 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #a9c8ef;
  transform: none;
}

.player-modal.is-open .player-timer-text {
  animation: ksnPlUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
}

.player-timer-current {
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}

.player-timer-total {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
}

.player-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  transform: translateY(0);
}

.player-modal.is-open .player-controls {
  animation: ksnPlUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.56s both;
}

.player-skip-btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #eaf2ff;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.player-skip-btn svg { display: block; width: 32px; height: 32px; }

.player-skip-btn:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.14);
}

.player-skip-btn:active { transform: scale(0.93); }

.player-main-btn {
  position: relative;
  flex: 0 0 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  min-height: 84px;
  margin: 22px auto 0;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #0c3c84;
  background: #fff;
  box-shadow: 0 16px 34px rgba(2, 18, 60, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 1;
  transform: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.player-main-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 20px 50px rgba(242, 147, 145, 0.6);
}

.player-main-btn svg {
  width: 30px;
  height: 30px;
  fill: #0c3c84;
  color: #0c3c84;
}

.player-main-btn .icon-pause { display: none; }
.player-main-btn.is-playing .icon-play { display: none; }
.player-main-btn.is-playing .icon-pause { display: block; }

/* Music switch, volume slider and effect grid below the controls. */
.player-mix {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 460px;
  margin: 28px auto 0;
  transform: translateY(0);
}

.player-modal.is-open .player-mix {
  animation: ksnPlUp 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.66s both;
}

.player-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 430px;
  padding: 20px 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.6;
  text-align: center;
  color: rgba(234, 242, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

.player-note::before {
  content: '';
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0 0 4px;
  background: currentColor;
  opacity: 0.85;
  -webkit-mask: no-repeat center/contain;
  mask: no-repeat center/contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
}

/* Prefixed so the button styling outranks the scoped anchor rule in the base. */
.ksn-medytacje .player-note a {
  display: inline-block;
  margin-top: 14px;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  color: #1c2a4a;
  background: #ffd76a;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.player-music-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  font: inherit;
  text-align: left;
  color: #eaf2ff;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, opacity 0.2s;
}

.player-music-toggle .pmt-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: #cfe0fa;
  background: rgba(255, 255, 255, 0.10);
}

.player-music-toggle .pmt-icon svg { width: 26px; height: 26px; }

.player-music-toggle .pmt-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.player-music-toggle .pmt-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.player-music-toggle .pmt-sub { font-size: 12px; opacity: 0.6; }

.player-music-toggle .pmt-switch {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 27px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.25s;
}

.player-music-toggle .pmt-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: left 0.25s;
}

.player-music-toggle.is-on {
  border-color: rgba(150, 195, 255, 0.55);
  background: linear-gradient(135deg, rgba(92, 150, 236, 0.34), rgba(58, 108, 208, 0.24));
  box-shadow: 0 8px 26px rgba(30, 80, 180, 0.26);
}

.player-music-toggle.is-on .pmt-icon {
  color: #eef6ff;
  background: rgba(160, 200, 255, 0.26);
}

.player-music-toggle.is-on .pmt-switch { background: #5b93ec; }
.player-music-toggle.is-on .pmt-knob { left: 22px; }

.player-music-toggle.is-disabled { opacity: 0.38; pointer-events: none; }
.player-music-toggle.is-disabled + .player-music-vol { display: none; }

.player-music-vol {
  display: flex;
  align-items: center;
  gap: 12px;
}

.player-music-vol .pmv-ic {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: rgba(234, 242, 255, 0.7);
  transition: opacity 0.25s ease;
}

.player-music-vol.is-muted .pmv-ic { opacity: 0.45; }

.player-music-vol .pmv-mute { opacity: 0; transition: opacity 0.2s ease; }
.player-music-vol.is-muted .pmv-mute { opacity: 1; }
.player-music-vol.is-muted .pmv-wave { opacity: 0; }

/* The slider track paints its own fill up to --val, which the controller sets. */
.pmv-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  --val: 55%;
}

.pmv-wrap input[type=range] {
  flex: 1;
  width: 100%;
  height: 5px;
  border-radius: 99px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, #9fc5ff 0, #ffffff var(--val), rgba(255, 255, 255, 0.16) var(--val));
  outline: none;
  cursor: pointer;
  touch-action: none;
}

.pmv-wrap input[type=range]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  -webkit-appearance: none;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(255, 255, 255, 0.0);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.pmv-wrap input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.15); }

.pmv-wrap input[type=range]:active::-webkit-slider-thumb {
  transform: scale(1.35);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 0 9px rgba(255, 255, 255, 0.14);
}

.pmv-wrap input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}

.pmv-wrap input[type=range]:active::-moz-range-thumb { transform: scale(1.3); }

.pmv-wrap input[type=range]::-moz-range-track {
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
}

.pmv-wrap input[type=range]::-moz-range-progress {
  height: 5px;
  border-radius: 99px;
  background: #fff;
}

.pmv-bubble {
  position: absolute;
  top: -36px;
  left: var(--val);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  color: #fff;
  background: rgba(10, 16, 34, 0.92);
  opacity: 0;
  transform: translateX(-50%) translateY(7px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.player-fx { width: 100%; }

.player-fx-label {
  margin: 0 2px 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(234, 242, 255, 0.58);
}

.player-fx-label .player-fx-hint {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.72;
}

.player-fx-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}

.player-fx-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  font: inherit;
  color: #dce8fb;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.1s, box-shadow 0.2s;
}

.player-fx-btn .pfx-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #c6d8f4;
}

.player-fx-btn .pfx-ic svg { width: 31px; height: 31px; stroke-width: 1.6; }

.player-fx-btn .pfx-lb {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

.player-fx-btn:hover { background: rgba(255, 255, 255, 0.10); }
.player-fx-btn:active { transform: scale(0.95); }

.player-fx-btn.is-on {
  border-color: rgba(150, 195, 255, 0.6);
  color: #fff;
  background: linear-gradient(160deg, rgba(95, 155, 240, 0.36), rgba(55, 105, 205, 0.26));
  box-shadow: 0 6px 20px rgba(30, 80, 180, 0.28);
}

.player-fx-btn.is-on .pfx-ic { color: #eef6ff; }

/* The open animation. The port kept three earlier entrance keyframes on the
   topbar and title and replaced the rest with the ksnPl pair. */
@keyframes playerFadeDown { to { opacity: 1; transform: translateY(0); } }
@keyframes playerFadeUp { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ksnPlOrbIn {
  from { opacity: 0; transform: translateY(26px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
@keyframes ksnPlUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

@keyframes playerBgIn { to { opacity: 1; } }
@keyframes fireFlicker { from { filter: brightness(0.95); } to { filter: brightness(1.1); } }
@keyframes rainFall { 0% { background-position: 0 0; } 100% { background-position: -20px 60px; } }
@keyframes wavesShift { 0%, 100% { background-position: 0 0; } 50% { background-position: 0 40px; } }

@keyframes ksnAur1 {
  0% { transform: translate(-24%, -17%) scale(1.05); opacity: 0.70; }
  50% { transform: translate(-6%, -3%) scale(1.30); opacity: 1; }
  100% { transform: translate(-15%, 9%) scale(1.12); opacity: 0.78; }
}

@keyframes ksnAur2 {
  0% { transform: translate(22%, 19%) scale(1.10); opacity: 0.72; }
  50% { transform: translate(6%, 4%) scale(1.34); opacity: 0.97; }
  100% { transform: translate(16%, 10%) scale(1.16); opacity: 0.80; }
}

@keyframes ksnAur3 {
  0% { transform: translate(21%, -19%) scale(1.00); opacity: 0.58; }
  50% { transform: translate(8%, -4%) scale(1.24); opacity: 0.90; }
  100% { transform: translate(16%, -11%) scale(1.09); opacity: 0.70; }
}

@keyframes ksnAur4 {
  0% { transform: translate(-21%, 19%) scale(1.08); opacity: 0.66; }
  50% { transform: translate(-6%, 6%) scale(1.32); opacity: 0.95; }
  100% { transform: translate(-15%, 11%) scale(1.14); opacity: 0.78; }
}

@keyframes plBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes orbGlow {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(110, 165, 255, 0.22)); }
  50% { filter: drop-shadow(0 0 34px rgba(140, 190, 255, 0.5)); }
}

@keyframes orbWave1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-26px); } }
@keyframes orbWave2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } }

@keyframes orbLight {
  0%, 100% { transform: translate(0, 0); opacity: 0.28; }
  40% { transform: translate(13px, 7px); opacity: 0.4; }
  72% { transform: translate(-9px, 3px); opacity: 0.2; }
}

@keyframes orbSheen {
  0%, 52% { transform: translateX(-190px) rotate(16deg); opacity: 0; }
  60% { opacity: 0.75; }
  74% { transform: translateX(200px) rotate(16deg); opacity: 0; }
  100% { transform: translateX(200px) rotate(16deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .player-orb svg,
  .player-orb .orb-wave1,
  .player-orb .orb-wave2,
  .player-orb .orb-light,
  .player-orb .orb-sheen { animation: none; }
  .player-aurora .aur { animation: none; }
}

@media (max-width: 768px) {
  .pmv-wrap input[type=range] { height: 6px; }
  .pmv-wrap input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; }
  .pmv-wrap input[type=range]::-moz-range-thumb { width: 24px; height: 24px; }
}

@media (max-width: 560px) {
  .player-topbar { top: max(16px, env(safe-area-inset-top, 16px)); padding: 0 14px; }
  .player-title { padding: 0 8px; }
  .player-close-x {
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.14);
  }
  .player-close-x svg { width: 22px; height: 22px; }
  .player-mix { max-width: 100%; }
  .player-controls { gap: 22px; }
  .player-skip-btn { width: 54px; height: 54px; }
  .player-skip-btn svg { width: 29px; height: 29px; }
  .player-fx-btn .pfx-ic { width: 32px; height: 32px; }
  .player-fx-btn .pfx-ic svg { width: 29px; height: 29px; }
}

/* ==== footer ==== */

/* The shop footer, ported from the PrestaShop theme. Its markup is Bootstrap 4
   alpha grid markup, so the grid it needs comes along; .container, .row and
   every .col-* appear nowhere else on these pages, so all of it is scoped to
   #footer and nothing leaks into the rest of the page. The wrapper reset in
   the base section already zeroes margins and padding inside .ksn-medytacje,
   and it outranks an unprefixed .col-*, so the grid here carries only the
   values that actually survive: the widths, the floats and the container. */

#footer,
footer.js-footer {
  padding-top: 2.5rem;
  margin-top: 0;
  border-top: 0;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.25em;
  color: #232323;
  background: #ffffff;
}

/* Upstream the footer sits outside the page wrapper and so escapes the
   theme's 1280px .container; ours is inside it, so the grid container is
   restated at the shop's own stepped widths. A step needs a breakpoint of its
   own, and the snapshots prove these three: 800 renders at 720, 1024 at 960,
   1900 at 1540, and 1512 at that same 1540 clamped to the viewport. 992 and
   1200 are the file's only breakpoints outside the allowed set. Bootstrap's
   fourth step, 540px from 576px up, is gone: no snapshot width reaches it and
   the allowed set has no threshold near it. */
#footer .container {
  width: auto;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 769px) { #footer .container { width: 720px; } }
@media (min-width: 992px) { #footer .container { width: 960px; } }
@media (min-width: 1200px) { #footer .container { width: 1540px; } }

/* Float containment: the grid rows and the newsletter clearfix. */
#footer .container::after,
#footer .row::after,
#footer .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Column widths. Below 769px every column falls back to .col-xs-12 or to the
   plain block a div already is, which is why the mobile layout needs no rules
   of its own. */
#footer .col-lg-8,
#footer .col-md-12,
#footer .col-md-3,
#footer .col-md-5,
#footer .col-md-6,
#footer .col-md-7,
#footer .col-sm-12,
#footer .col-xs-12 {
  position: relative;
  min-height: 1px;
}

#footer .col-xs-12 {
  float: left;
  width: 100%;
}

@media (min-width: 769px) {
  #footer .col-md-3 { float: left; width: 25%; }
  #footer .col-md-5 { float: left; width: 41.66667%; }
  #footer .col-md-6 { float: left; width: 50%; }
  #footer .col-md-7 { float: left; width: 58.33333%; }
  #footer .col-md-12 { float: left; width: 100%; }
}

/* .col-lg-8 (66.66667% from 992px) and .col-sm-12 (100% from 576px) are both
   on the newsletter block, and #footer .block_newsletter sets float and width
   on that same element with an id to spare, so neither ever showed. */

/* ---- headings ---- */

#footer .h3,
#footer .h4 {
  margin-bottom: 1rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
}

#footer .h3,
#footer .text-uppercase { text-transform: uppercase; }
#footer .text-sm-center { text-align: center; }

/* ---- newsletter ---- */

#footer .block_newsletter {
  float: inherit;
  width: 100%;
  max-width: 50rem;
  margin: auto auto 0.625rem;
  clear: both;
  font-size: 0.875rem;
  background: #fff;
}

#footer .block_newsletter form { position: relative; }
#footer .block_newsletter form .input-wrapper { overflow: hidden; }

/* The fine print under the field. The label beside it is a <p> as well, and
   takes these back with the id rule that follows. */
#footer .block_newsletter p {
  padding-top: 0.625rem;
  font-size: 0.75rem;
}

#footer .block_newsletter #block-newsletter-label {
  padding-top: 0;
  font-size: 1.3125rem;
  line-height: 1.75rem;
}

/* Size and padding come from the shared input rule in public.css so every
   public field matches; only the focus ring is the theme's own. */
#footer .block_newsletter form input[type="email"] { box-shadow: none; }

#footer .block_newsletter form input[type="email"]:focus {
  border: 2px #f29391 solid;
  outline: 0;
}

/* ---- submit button ----
   The newsletter submit is the only .btn on these pages. The port gave it two
   layers: the shop's own box and pink fill, and the theme's rounded page
   button on top of it. Both are written out here, keeping only what survived
   the cascade. The theme's display: inline-flex lost to the shop's
   inline-block, and its padding lost to the shop's, so the alignment and gap
   below sit on an inline-block box and never lay anything out; they are kept
   because the computed style of the port carries them. */

#footer .btn {
  display: inline-block;
  height: 56px;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s ease,
    background 0.2s ease;
}

#footer .btn-primary {
  color: #fff;
  background-color: #f29391;
  border-color: transparent;
  box-shadow: var(--shadow-cta);
}

#footer .btn-primary:hover,
#footer .btn-primary:focus {
  color: #fff;
  background-color: #f8ca7d;
  border-color: transparent;
}

/* The theme's own hover and press, which the shop rules above leave alone. */
#footer .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 206, 77, 0.55);
}

#footer .btn:active { transform: scale(0.97); }

/* The shop floats the submit right of the field. Below 769px it goes full
   width under the field, but the float stays: the theme's .float-xs-right
   carried !important, so the narrow rule only ever won the box, never the
   float. Written out here without the !important, that is simply what the
   narrow rule sets. */
#footer .float-xs-right {
  float: right;
  margin-left: 0.5rem;
}

/* ---- link columns ---- */

#footer .footer-container {
  padding-top: 2.5rem;
  margin-top: 0;
  overflow: hidden;
  box-shadow: none;
}

#footer .footer-container ul {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}

#footer .footer-container li {
  margin-bottom: 0.3125rem;
  list-style: none;
}

#footer .footer-container li a {
  font-size: 0.875rem;
  cursor: pointer;
}

#footer .links .collapse { display: inherit; }

#footer .block-contact { font-size: 0.875rem; color: #7a7a7a; }
#footer .block-contact .block-contact-title { font-size: 1rem; font-weight: 700; }
#footer #block_myaccount_infos .myaccount-title { font-size: 1rem; font-weight: 700; }

/* The last .row of a link column is the nested one holding the two packs and
   company lists, so this catches those headings as well as the copyright
   line. Only the size shows: the colour loses to the #footer p rule below. */
#footer .footer-container .row:last-child p { font-size: 0.875rem; }

/* The page paints the whole footer in its own ink, over every colour the shop
   theme set above. */
#footer a,
#footer p,
#footer .h3 { color: #2e2117; }

#footer a:hover { color: #f29391; }

/* ---- bottom line ---- */

#footer .ksn-cookie-settings {
  padding: 0;
  border: 0;
  font-family: inherit;
  font-size: 0.875rem;
  color: #7a7a7a;
  text-decoration: underline;
  background: none;
  cursor: pointer;
}

#footer .ksn-cookie-settings:hover { color: #f29391; opacity: 0.75; }

#footer .ksn-cookie-sep {
  margin: 0 6px;
  color: #7a7a7a;
  opacity: 0.5;
}

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

/* Between the two breakpoints the store information column is narrow but
   still beside the account column, and the shop indents it. Below 769px the
   columns stack full width and the theme took the indent back off again. */
@media (max-width: 968px) {
  #footer .block-contact { padding-left: 1.5rem; }
}

@media (max-width: 768px) {
  #footer .block-contact { padding-left: 0; }

  #footer .block_newsletter {
    padding-top: 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid #f6f6f6;
  }

  #footer .block_newsletter .float-xs-right {
    width: 100%;
    margin-top: 0.5rem;
    margin-left: 0;
  }

  #footer .footer-container .links .h3 { font-size: 1rem; line-height: 1.5; }
}