/* ---------------------------------------------------------------------------
   byMishel — dizajn 1:1 podľa schváleného prototypu.

   Zdroj: bymishel-redesign/app/globals.css (nazdieľaná zložka).
   Súbor je písaný KASKÁDOVO — neskoršie sekcie zámerne prepisujú skoršie
   (napr. „Final Nechtovinky overrides"). Poradie riadkov sa preto NESMIE meniť
   ani rozdeľovať do viacerých súborov.

   Oproti prototypu zmenené len:
   - odstránené @import (Google Fonts → public/css/fonty.css, tailwind sa nepoužíva),
   - dva externé obrázky v pozadí stiahnuté k nám do /images/bymishel/,
   - na konci súboru doplnené bloky (vložený formulár FAPI, vstup do členskej
     zóny v menu, pätička v stĺpcoch) — všetky sú tam okomentované.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Základný reset (Tailwind preflight).

   Prototyp mal v CSS `@import "tailwindcss"`. Utility triedy nepoužíva ani
   jedna stránka, ALE preflight nuluje predvolené okraje prehliadača — bez neho
   sedeli rozostupy o pár pixelov inak (overené meraním proti bežiacej predlohe).
   Preto je tu preflight doslovne, zvyšok Tailwindu netreba.
--------------------------------------------------------------------------- */

/*
  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
  2. Remove default margins and padding
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Use the user's configured `sans` font-family by default.
  5. Use the user's configured `sans` font-feature-settings by default.
  6. Use the user's configured `sans` font-variation-settings by default.
  7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  tab-size: 4; /* 3 */
  font-family: --theme(
    --default-font-family,
    ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ); /* 4 */
  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */
  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Use the user's configured `mono` font-family by default.
  2. Use the user's configured `mono` font-feature-settings by default.
  3. Use the user's configured `mono` font-variation-settings by default.
  4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: --theme(
    --default-mono-font-family,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    'Liberation Mono',
    'Courier New',
    monospace
  ); /* 1 */
  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */
  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */
  font-size: 1em; /* 4 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
  3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  border-radius: 0; /* 2 */
  background-color: transparent; /* 3 */
  opacity: 1; /* 4 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 20px;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 4px;
}

/*
  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
*/

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
  (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::placeholder {
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)
*/

::-webkit-calendar-picker-indicator {
  line-height: 1;
}

/*
  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

:root {
  --ink: #30232d;
  --ink-soft: #675964;
  --pink: #a72f63;
  --pink-dark: #862149;
  --coral: #e4847e;
  --lavender: #cbbce4;
  --lavender-soft: #f2ecf8;
  --blush: #f8dce7;
  --rose-mist: #fff7fa;
  --cream: #fbf6ef;
  --white: #fffcfd;
  --lime: #e5eec6;
  --line: rgba(48, 35, 45, 0.16);
  --shadow: 0 24px 70px rgba(110, 55, 82, 0.14);
  --gradient-pastel: linear-gradient(
    110deg,
    #f7dce7 0%,
    #eee4f7 52%,
    #e7efcf 100%
  );
  --gradient-rich: linear-gradient(115deg, #a72f63 0%, #925092 100%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a,
summary,
select {
  touch-action: manipulation;
}

button,
input,
select {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 4px;
}

.site-header {
  align-items: center;
  background: rgba(255, 253, 252, 0.94);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 78px;
  justify-content: space-between;
  left: 0;
  padding: 0 clamp(20px, 5vw, 76px);
  position: sticky;
  right: 0;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  flex-wrap: wrap;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
  min-height: 44px;
  width: 108px;
  align-content: center;
}

.brand span {
  color: var(--pink);
}

.brand small {
  color: var(--ink-soft);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-top: 7px;
  text-transform: uppercase;
  width: 100%;
}

.nav {
  align-items: center;
  display: flex;
  gap: 28px;
}

.nav a {
  font-size: 14px;
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 180ms ease;
}

.nav a:hover {
  color: var(--pink);
}

.nav .nav-cta {
  border: 1px solid var(--ink);
  padding: 0 20px;
}

.nav .nav-cta:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: white;
}

.menu-button {
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  height: 48px;
  padding: 12px;
  width: 48px;
}

.menu-button span {
  background: var(--ink);
  display: block;
  height: 2px;
  margin: 6px 0;
  width: 24px;
}

.hero {
  background:
    radial-gradient(circle at 8% 20%, rgba(229, 238, 198, 0.7), transparent 26%),
    radial-gradient(circle at 92% 12%, rgba(203, 188, 228, 0.62), transparent 30%),
    linear-gradient(135deg, var(--rose-mist) 0%, #fff9f5 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  min-height: calc(100svh - 78px);
  overflow: hidden;
  padding: clamp(56px, 8vw, 110px) clamp(20px, 7vw, 112px) 60px;
}

.hero-copy {
  align-self: center;
  max-width: 720px;
  position: relative;
  z-index: 2;
}

.eyebrow,
.card-label {
  color: var(--pink-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 18px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.045em;
}

h1 {
  font-size: clamp(48px, 6.1vw, 92px);
  line-height: 0.98;
  margin: 0 0 28px;
  max-width: 840px;
}

h1 em {
  color: var(--pink);
  font-weight: 600;
}

.hero-lead {
  color: var(--ink-soft);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  max-width: 650px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0 18px;
}

.button {
  align-items: center;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 14px;
  justify-content: center;
  letter-spacing: 0.02em;
  min-height: 54px;
  padding: 0 24px;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.button span {
  font-size: 20px;
  line-height: 1;
}

.button-primary {
  background: var(--pink);
  color: white;
}

.button-primary:hover {
  background: var(--pink-dark);
  box-shadow: 0 10px 30px rgba(159, 40, 86, 0.2);
}

.button-secondary {
  border-color: var(--ink);
}

.button-secondary:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: white;
}

.button-dark {
  background: var(--gradient-rich);
  color: white;
}

.button-dark:hover {
  background: linear-gradient(115deg, var(--pink-dark) 0%, #724078 100%);
  box-shadow: 0 10px 30px rgba(134, 33, 73, 0.2);
}

.hero-note {
  color: var(--ink-soft);
  font-size: 14px;
}

.hero-note a,
.decision-helper a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  font-weight: 700;
}

.hero-visual {
  align-self: end;
  min-height: 580px;
  position: relative;
}

.hero-visual::before {
  background: var(--blush);
  border-radius: 50%;
  content: "";
  height: min(38vw, 560px);
  position: absolute;
  right: -6%;
  top: 7%;
  width: min(38vw, 560px);
}

.image-frame {
  bottom: -62px;
  left: 50%;
  max-height: 720px;
  max-width: 610px;
  position: absolute;
  transform: translateX(-45%);
  width: 90%;
  z-index: 1;
}

.image-frame img {
  height: 100%;
  max-height: 720px;
  object-fit: contain;
  object-position: bottom;
  width: 100%;
}

.trust-card {
  background: white;
  box-shadow: var(--shadow);
  left: 0;
  padding: 18px 22px;
  position: absolute;
  top: 22%;
  width: 180px;
  z-index: 3;
}

.trust-card strong {
  color: var(--pink);
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  line-height: 1.1;
}

.trust-card span {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.scribble {
  background: rgba(255, 252, 253, 0.92);
  border: 1px solid rgba(134, 33, 73, 0.18);
  border-radius: 999px;
  bottom: 10%;
  box-shadow: 0 12px 34px rgba(94, 40, 69, 0.18);
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.2;
  padding: 10px 20px 12px;
  position: absolute;
  right: 0;
  transform: rotate(-3deg);
  white-space: nowrap;
  z-index: 3;
  backdrop-filter: blur(10px);
}

.proof-strip {
  background: var(--gradient-pastel);
  color: var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 28px clamp(20px, 7vw, 112px);
}

.proof-strip div {
  align-items: baseline;
  border-right: 1px solid rgba(48, 35, 45, 0.18);
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 0 24px;
}

.proof-strip div:last-child {
  border-right: 0;
}

.proof-strip strong {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(23px, 2vw, 32px);
}

.proof-strip span {
  color: var(--ink-soft);
  font-size: 13px;
}

.path-section,
.gallery-section,
.testimonials-section {
  padding: clamp(82px, 10vw, 150px) clamp(20px, 7vw, 112px);
}

.section-intro {
  margin: 0 auto clamp(46px, 7vw, 80px);
  max-width: 820px;
  text-align: center;
}

.section-intro h2,
.about-copy h2,
.faq-heading h2,
.lead-copy h2 {
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1.05;
  margin-bottom: 24px;
}

.section-intro > p:last-child {
  color: var(--ink-soft);
  font-size: 18px;
  margin: 0 auto;
  max-width: 650px;
}

.path-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1240px;
}

.path-card {
  border: 1px solid var(--line);
  min-height: 650px;
  overflow: hidden;
  padding: clamp(32px, 5vw, 64px);
  position: relative;
}

.path-online {
  background: var(--cream);
}

.path-personal {
  background: var(--blush);
}

.path-number {
  color: rgba(36, 29, 33, 0.09);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 140px;
  font-style: italic;
  line-height: 1;
  position: absolute;
  right: 24px;
  top: 6px;
}

.path-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 600;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
  position: relative;
}

.card-lead {
  color: var(--ink-soft);
  font-size: 18px;
  max-width: 520px;
}

.path-card ul {
  list-style: none;
  margin: 30px 0 38px;
  padding: 0;
}

.path-card li {
  border-top: 1px solid var(--line);
  padding: 12px 0 12px 30px;
  position: relative;
}

.path-card li::before {
  color: var(--pink-dark);
  content: "✓";
  font-weight: 700;
  left: 2px;
  position: absolute;
}

.path-card small {
  color: var(--ink-soft);
  display: block;
  margin-top: 16px;
}

.decision-helper {
  align-items: center;
  background: var(--gradient-pastel);
  border: 1px solid rgba(134, 33, 73, 0.12);
  color: var(--ink);
  display: grid;
  gap: 30px;
  grid-template-columns: auto 1fr;
  margin: 22px auto 0;
  max-width: 1240px;
  padding: 28px 36px;
}

.decision-helper p {
  margin: 0;
}

.mini-label {
  background: var(--pink);
  color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 7px 11px;
}

.about-section {
  align-items: center;
  background:
    radial-gradient(circle at 6% 88%, rgba(228, 132, 126, 0.2), transparent 28%),
    linear-gradient(120deg, var(--rose-mist), var(--lavender-soft));
  display: grid;
  gap: clamp(42px, 8vw, 120px);
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
  padding: clamp(82px, 10vw, 145px) clamp(20px, 9vw, 150px);
}

.about-photo {
  position: relative;
}

.about-photo::before {
  border: 1px solid var(--pink);
  content: "";
  inset: -18px 18px 18px -18px;
  position: absolute;
}

.about-photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.about-photo > span {
  background: var(--lime);
  bottom: -18px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  font-style: italic;
  padding: 10px 28px;
  position: absolute;
  right: -10px;
  transform: rotate(-4deg);
}

.large-copy {
  font-size: 20px;
}

.about-copy > p {
  color: var(--ink-soft);
  max-width: 670px;
}

.about-copy blockquote {
  border-left: 3px solid var(--pink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-style: italic;
  margin: 34px 0 0;
  max-width: 650px;
  padding-left: 24px;
}

.gallery-section {
  background: var(--cream);
}

.section-intro.compact {
  margin-bottom: 54px;
  max-width: 760px;
}

.gallery-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 260px 260px;
  margin: 0 auto;
  max-width: 1150px;
}

.gallery-grid figure {
  margin: 0;
  overflow: hidden;
}

.gallery-grid img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.gallery-tall {
  grid-row: 1 / 3;
}

.gallery-quote {
  background: var(--pink);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px;
}

.gallery-quote p {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 18px;
}

.gallery-quote strong {
  color: var(--lime);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.testimonials-section {
  background: white;
}

.testimonial-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: 1240px;
}

.testimonial {
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 330px;
  padding: 34px;
}

.outcome-number {
  color: var(--pink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 44px;
  font-style: italic;
  line-height: 1;
}

.testimonial > h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  margin: 34px 0 12px;
}

.testimonial > p {
  color: var(--ink-soft);
  flex: 1;
  font-size: 17px;
  line-height: 1.4;
}

.faq-section {
  background: var(--rose-mist);
  display: grid;
  gap: clamp(50px, 8vw, 120px);
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  padding: clamp(82px, 10vw, 145px) clamp(20px, 9vw, 150px);
}

.faq-heading {
  position: sticky;
  top: 130px;
  align-self: start;
}

.faq-list {
  border-top: 1px solid var(--line);
}

details {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

summary {
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
  min-height: 64px;
  padding: 18px 50px 18px 0;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  color: var(--pink);
  content: "+";
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
  position: absolute;
  right: 8px;
  top: 9px;
}

details[open] summary::after {
  content: "−";
}

details p {
  color: var(--ink-soft);
  max-width: 720px;
  padding: 0 48px 20px 0;
}

.lead-section {
  background:
    radial-gradient(circle at 4% 0%, rgba(228, 132, 126, 0.32), transparent 34%),
    radial-gradient(circle at 96% 100%, rgba(203, 188, 228, 0.66), transparent 38%),
    linear-gradient(135deg, #fff7fa 0%, #f5edf8 56%, #fbf6ef 100%);
  color: var(--ink);
  display: grid;
  gap: clamp(50px, 8vw, 120px);
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
  padding: clamp(82px, 10vw, 145px) clamp(20px, 9vw, 150px);
}

.lead-copy .eyebrow {
  color: var(--pink-dark);
}

.lead-copy h2 {
  max-width: 640px;
}

.lead-copy > p {
  color: var(--ink-soft);
  font-size: 18px;
  max-width: 600px;
}

.lead-promise {
  align-items: flex-start;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 16px;
  margin-top: 36px;
  max-width: 600px;
  padding-top: 24px;
}

.lead-promise > span {
  align-items: center;
  background: var(--pink);
  border-radius: 50%;
  color: white;
  display: flex;
  flex: 0 0 38px;
  font-weight: 800;
  height: 38px;
  justify-content: center;
}

.lead-promise p {
  color: var(--ink-soft);
  margin: 0;
}

.lead-promise strong {
  color: var(--ink);
  display: block;
}

.lead-form,
.form-success {
  background: white;
  border: 1px solid rgba(134, 33, 73, 0.12);
  box-shadow: 0 28px 80px rgba(106, 54, 83, 0.13);
  color: var(--ink);
  padding: clamp(28px, 4vw, 48px);
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.field input,
.field select {
  background: white;
  border: 1px solid rgba(36, 29, 33, 0.28);
  border-radius: 0;
  color: var(--ink);
  min-height: 54px;
  padding: 0 14px;
  width: 100%;
}

.field input:focus,
.field select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(200, 63, 114, 0.14);
  outline: none;
}

.submit-button {
  border: 0;
  margin-top: 6px;
  width: 100%;
}

.privacy-note {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
  margin: 14px 0 0;
  text-align: center;
}

.form-success {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.form-success > span {
  align-items: center;
  background: var(--lime);
  border-radius: 50%;
  display: flex;
  font-size: 26px;
  height: 64px;
  justify-content: center;
  margin: 0 auto 22px;
  width: 64px;
}

.form-success h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
  margin-bottom: 12px;
}

.form-success p {
  color: var(--ink-soft);
}

.form-success button {
  background: none;
  border: 0;
  color: var(--pink-dark);
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  text-decoration: underline;
}

.site-footer {
  align-items: center;
  background: var(--gradient-rich);
  color: white;
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr auto 1fr;
  padding: 42px clamp(20px, 7vw, 112px);
}

.footer-brand {
  color: white;
}

.site-footer > p {
  color: rgba(255, 255, 255, 0.82);
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  margin: 0;
}

.site-footer > div {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
}

.site-footer > div a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.site-footer > div a:hover {
  color: white;
}

@media (max-width: 1050px) {
  .hero {
    grid-template-columns: 1fr 0.8fr;
    padding-left: 48px;
    padding-right: 48px;
  }

  .hero-visual {
    min-height: 520px;
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-actions .button {
    min-width: 265px;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .testimonial {
    min-height: 240px;
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer > p {
    display: none;
  }
}

@media (max-width: 800px) {
  .site-header {
    height: 70px;
    padding: 0 20px;
  }

  .menu-button {
    display: block;
  }

  .nav {
    align-items: stretch;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    display: none;
    flex-direction: column;
    gap: 0;
    left: 0;
    padding: 16px 20px 24px;
    position: absolute;
    right: 0;
    top: 69px;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    border-bottom: 1px solid var(--line);
    min-height: 52px;
  }

  .nav .nav-cta {
    border: 0;
    background: var(--pink);
    color: white;
    justify-content: center;
    margin-top: 16px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 54px 20px 0;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    align-items: stretch;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-visual {
    min-height: 500px;
  }

  .hero-visual::before {
    height: 420px;
    right: 50%;
    transform: translateX(50%);
    width: 420px;
  }

  .image-frame {
    max-width: 500px;
    transform: translateX(-50%);
  }

  .trust-card {
    left: 3%;
    top: 22%;
  }

  .scribble {
    right: 2%;
  }

  .proof-strip {
    grid-template-columns: 1fr;
    padding-bottom: 18px;
    padding-top: 18px;
  }

  .proof-strip div {
    border-bottom: 1px solid rgba(48, 35, 45, 0.16);
    border-right: 0;
    justify-content: flex-start;
    padding: 12px 0;
  }

  .proof-strip div:last-child {
    border-bottom: 0;
  }

  .path-grid,
  .about-section,
  .faq-section,
  .lead-section {
    grid-template-columns: 1fr;
  }

  .path-card {
    min-height: auto;
  }

  .decision-helper {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .about-section,
  .faq-section,
  .lead-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .faq-heading {
    position: static;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 430px 330px auto;
  }

  .gallery-tall {
    grid-row: auto;
  }

  .gallery-quote {
    min-height: 250px;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .site-footer > div {
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 430px) {
  h1 {
    font-size: 45px;
  }

  .hero-visual {
    min-height: 420px;
  }

  .trust-card {
    padding: 13px 16px;
    width: 148px;
  }

  .scribble {
    bottom: 8%;
    font-size: 21px;
    padding: 8px 15px 10px;
    right: 1%;
  }

  .path-card {
    padding: 32px 22px;
  }

  .path-number {
    font-size: 104px;
  }

  .path-card .button {
    width: 100%;
  }

  .decision-helper {
    padding: 24px 22px;
  }

  .about-photo::before {
    inset: -10px 10px 10px -10px;
  }

  .testimonial {
    padding: 28px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Static sales pages */

.marketing-header {
  align-items: center;
  background: rgba(255, 252, 253, 0.95);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 70px;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
}

.pricing-nav {
  display: none;
}

.mobile-marketing-nav {
  position: relative;
}

.mobile-marketing-nav > summary {
  align-items: center;
  display: flex;
  font-size: 13px;
  min-height: 48px;
  padding: 0 38px 0 12px;
  text-transform: uppercase;
}

.mobile-marketing-nav > summary::after {
  right: 8px;
  top: 5px;
}

.mobile-marketing-nav > nav {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 250px;
  padding: 12px 18px;
  position: absolute;
  right: 0;
  top: 52px;
}

.mobile-marketing-nav > nav a {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  font-weight: 600;
  min-height: 52px;
}

.mobile-marketing-nav > nav a:last-child {
  border-bottom: 0;
  color: var(--pink-dark);
}

.pricing-page {
  background: var(--white);
  padding-bottom: 82px;
}

.pricing-hero {
  background:
    radial-gradient(circle at 96% 0%, rgba(203, 188, 228, 0.72), transparent 34%),
    radial-gradient(circle at 0% 88%, rgba(229, 238, 198, 0.7), transparent 30%),
    linear-gradient(145deg, #fff7fa, #fffaf6);
  display: grid;
  gap: 40px;
  overflow: hidden;
  padding: 58px 20px 48px;
}

.pricing-hero-copy {
  max-width: 720px;
}

.pricing-hero h1 {
  font-size: clamp(44px, 12vw, 66px);
  line-height: 1;
  margin-bottom: 24px;
}

.pricing-hero h1 em {
  color: var(--pink);
  font-weight: 600;
}

.pricing-hero-copy > p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 18px;
  margin-bottom: 30px;
  max-width: 650px;
}

.pricing-hero-copy > .button {
  width: 100%;
}

.pricing-hero-panel {
  align-self: center;
  background: rgba(255, 252, 253, 0.88);
  border: 1px solid rgba(134, 33, 73, 0.14);
  box-shadow: 0 24px 65px rgba(102, 48, 77, 0.14);
  padding: 28px;
  backdrop-filter: blur(12px);
}

.hero-stat {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 18px;
}

.hero-stat strong {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 52px;
  letter-spacing: -0.04em;
  line-height: 1;
}

.hero-stat span {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.35;
  max-width: 150px;
}

.pricing-hero-panel ul,
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing-hero-panel li,
.feature-list li {
  border-bottom: 1px solid var(--line);
  padding: 11px 0 11px 28px;
  position: relative;
}

.pricing-hero-panel li:last-child,
.feature-list li:last-child {
  border-bottom: 0;
}

.pricing-hero-panel li::before,
.feature-list li::before {
  color: var(--pink);
  content: "✓";
  font-weight: 800;
  left: 2px;
  position: absolute;
}

.choice-section,
.plans-section,
.personal-choice,
.calendar-section,
.reference-section,
.course-topic-section,
.booking-steps,
.pricing-faq {
  padding: 76px 20px;
}

.choice-section,
.personal-choice,
.pricing-faq {
  background: var(--rose-mist);
}

.pricing-section-heading {
  margin: 0 auto 38px;
  max-width: 780px;
  text-align: left;
}

.pricing-section-heading h2,
.commitment-section h2,
.risk-reversal h2,
.honest-scarcity h2,
.free-trial-section h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(36px, 9vw, 58px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.06;
  margin-bottom: 18px;
}

.pricing-section-heading > p:last-child {
  color: var(--ink-soft);
  font-size: 17px;
}

.calendar-section {
  background:
    radial-gradient(circle at 100% 0%, rgba(203, 188, 228, 0.3), transparent 34%),
    var(--white);
}

.calendar-heading {
  display: grid;
  gap: 16px;
  margin: 0 auto 36px;
  max-width: 1120px;
}

.calendar-heading h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(38px, 10vw, 60px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 0;
}

.calendar-heading > p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

.calendar-grid {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1120px;
}

.calendar-card {
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 18px 48px rgba(99, 51, 76, 0.08);
  overflow: hidden;
}

.calendar-card-image {
  height: 230px;
  overflow: hidden;
  position: relative;
}

.calendar-card-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.date-badge {
  align-items: center;
  background: var(--pink-dark);
  color: white;
  display: flex;
  flex-direction: column;
  height: 64px;
  justify-content: center;
  left: 14px;
  position: absolute;
  top: 14px;
  width: 58px;
}

.date-badge strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  line-height: 0.9;
}

.date-badge span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-top: 5px;
}

.calendar-card-copy {
  padding: 22px;
}

.calendar-card-copy h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  line-height: 1.1;
  margin: 7px 0 12px;
}

.calendar-card-copy > p:not(.course-place) {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
}

.course-place {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 0;
}

.calendar-card .button {
  width: 100%;
}

.calendar-note {
  align-items: flex-start;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 8px;
  margin: 22px auto 0;
  max-width: 1120px;
}

.calendar-note a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  font-weight: 700;
}

.reference-section {
  background:
    radial-gradient(circle at 0% 0%, rgba(232, 199, 213, 0.5), transparent 34%),
    linear-gradient(145deg, #fffafc, #f5f0fb);
}

.reference-grid {
  align-items: start;
  column-count: 1;
  column-gap: 14px;
  margin: 0 auto;
  max-width: 1050px;
}

.reference-card {
  background: white;
  border: 1px solid rgba(124, 76, 101, 0.13);
  break-inside: avoid;
  box-shadow: 0 14px 36px rgba(99, 51, 76, 0.08);
  margin: 0 0 14px;
  padding: 12px;
}

.reference-card img {
  display: block;
  height: auto;
  width: 100%;
}

.choice-paths {
  display: grid;
  gap: 12px;
  margin: 0 auto;
  max-width: 1120px;
}

.choice-paths > a {
  background: white;
  border: 1px solid var(--line);
  display: grid;
  gap: 5px;
  grid-template-columns: 42px 1fr;
  min-height: 118px;
  padding: 22px 20px;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.choice-paths > a:hover {
  border-color: var(--pink);
  box-shadow: 0 16px 40px rgba(119, 49, 82, 0.1);
}

.choice-paths > a > span {
  color: var(--pink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-style: italic;
  grid-row: 1 / 3;
}

.choice-paths strong {
  font-size: 18px;
}

.choice-paths small {
  color: var(--ink-soft);
  font-size: 14px;
}

.plans-section {
  background: var(--white);
}

.plan-grid,
.personal-plan-grid {
  display: grid;
  gap: 22px;
  margin: 0 auto;
  max-width: 1200px;
}

.plan-card,
.personal-plan-card {
  background: white;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 28px 22px;
  position: relative;
}

.plan-card.is-featured {
  background:
    radial-gradient(circle at 100% 0%, rgba(203, 188, 228, 0.54), transparent 34%),
    linear-gradient(145deg, #fff7fa, white 60%);
  border: 2px solid var(--pink);
  box-shadow: 0 24px 65px rgba(119, 49, 82, 0.14);
}

.recommendation-badge {
  background: var(--pink);
  color: white;
  font-size: 10px;
  font-weight: 800;
  left: -2px;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  position: absolute;
  right: -2px;
  text-align: center;
  top: -32px;
}

.plan-topline {
  color: var(--pink-dark);
  display: flex;
  flex-wrap: wrap;
  font-size: 10px;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.plan-topline span:last-child {
  color: var(--ink-soft);
  letter-spacing: 0;
  text-transform: none;
}

.plan-card h3,
.personal-plan-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: 13px;
}

.plan-summary,
.personal-plan-card > p {
  color: var(--ink-soft);
}

.price {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 0;
  padding: 18px 0;
}

.price small {
  color: var(--ink-soft);
}

.price strong {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 42px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.price span {
  color: var(--ink-soft);
  font-size: 13px;
}

.feature-list {
  flex: 1;
  margin-bottom: 24px;
}

.feature-list li {
  font-size: 14px;
}

.plan-card .button,
.personal-plan-card .button {
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.microcopy {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.45;
  margin: 12px 0 0;
  text-align: center;
}

.commitment-section {
  background: var(--gradient-pastel);
  display: grid;
  gap: 38px;
  padding: 76px 20px;
}

.commitment-section > div:first-child {
  max-width: 620px;
}

.commitment-grid {
  display: grid;
  gap: 12px;
}

.commitment-grid article {
  background: rgba(255, 252, 253, 0.9);
  border: 1px solid rgba(134, 33, 73, 0.14);
  padding: 24px;
}

.commitment-grid article > span,
.topic-grid article span {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.commitment-grid h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  margin: 8px 0 5px;
}

.commitment-grid strong {
  display: block;
  font-size: 18px;
}

.commitment-grid p {
  color: var(--ink-soft);
  font-size: 14px;
}

.commitment-grid a,
.text-link {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  font-weight: 700;
}

.risk-reversal {
  align-items: center;
  background:
    radial-gradient(circle at 10% 100%, rgba(228, 132, 126, 0.22), transparent 30%),
    var(--cream);
  display: grid;
  gap: 28px;
  padding: 76px 20px;
}

.risk-mark {
  align-items: center;
  aspect-ratio: 1;
  background: var(--gradient-rich);
  border-radius: 50%;
  color: white;
  display: flex;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 52px;
  font-style: italic;
  justify-content: center;
  max-width: 180px;
}

.risk-reversal > div {
  max-width: 720px;
}

.risk-reversal > div > p:last-child,
.honest-scarcity > div:last-child > p,
.free-trial-section > div > p:last-child {
  color: var(--ink-soft);
  font-size: 17px;
}

.pricing-faq .faq-list {
  margin: 0 auto;
  max-width: 900px;
}

.free-trial-section {
  align-items: center;
  background:
    radial-gradient(circle at 100% 100%, rgba(203, 188, 228, 0.75), transparent 42%),
    linear-gradient(135deg, #fff6f9, #fffaf2);
  display: grid;
  gap: 28px;
  padding: 76px 20px;
}

.free-trial-section > div {
  max-width: 760px;
}

.free-trial-section .button {
  width: 100%;
}

.mobile-buybar {
  align-items: center;
  background: rgba(255, 252, 253, 0.96);
  border-top: 1px solid var(--line);
  bottom: 0;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  left: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  position: fixed;
  right: 0;
  z-index: 90;
  backdrop-filter: blur(16px);
}

.mobile-buybar > div {
  display: flex;
  flex-direction: column;
}

.mobile-buybar small {
  color: var(--ink-soft);
  font-size: 10px;
}

.mobile-buybar strong {
  font-size: 14px;
}

.mobile-buybar > a {
  align-items: center;
  background: var(--pink);
  color: white;
  display: flex;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
}

.marketing-footer {
  background: var(--gradient-rich);
  color: white;
  display: grid;
  gap: 22px;
  padding: 50px 20px 100px;
}

.marketing-footer .brand {
  color: white;
}

.marketing-footer > p {
  color: rgba(255, 255, 255, 0.82);
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  margin: 0;
}

.marketing-footer nav {
  display: flex;
  flex-direction: column;
}

.marketing-footer nav a {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  min-height: 48px;
}

/* Personal training page */

.personal-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(229, 238, 198, 0.64), transparent 28%),
    linear-gradient(145deg, #fff7fa, var(--lavender-soft));
}

.personal-hero-image {
  margin: 0 auto;
  max-width: 440px;
  position: relative;
}

.personal-hero-image::before {
  border: 1px solid var(--pink);
  content: "";
  inset: -10px 10px 10px -10px;
  position: absolute;
}

.personal-hero-image img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.personal-hero-image > div {
  background: rgba(255, 252, 253, 0.94);
  bottom: 18px;
  box-shadow: var(--shadow);
  left: -8px;
  padding: 14px 18px;
  position: absolute;
  right: 18px;
}

.personal-hero-image strong {
  color: var(--pink-dark);
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
}

.personal-hero-image span {
  color: var(--ink-soft);
  font-size: 12px;
}

.personal-proof {
  background: var(--gradient-pastel);
  display: grid;
  padding: 16px 20px;
}

.personal-proof > div {
  align-items: baseline;
  border-bottom: 1px solid rgba(48, 35, 45, 0.15);
  display: flex;
  gap: 9px;
  padding: 11px 0;
}

.personal-proof > div:last-child {
  border-bottom: 0;
}

.personal-proof strong {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
}

.personal-proof span {
  color: var(--ink-soft);
  font-size: 12px;
}

.personal-plan-card.is-group {
  background:
    radial-gradient(circle at 100% 0%, rgba(229, 238, 198, 0.6), transparent 35%),
    white;
  border: 2px solid var(--pink);
  box-shadow: 0 24px 65px rgba(119, 49, 82, 0.12);
}

.honest-scarcity {
  align-items: center;
  background: var(--cream);
  display: grid;
  gap: 32px;
  padding: 76px 20px;
}

.scarcity-number {
  align-items: center;
  aspect-ratio: 1;
  background: var(--gradient-rich);
  border-radius: 50%;
  color: white;
  display: flex;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 96px;
  font-style: italic;
  justify-content: center;
  line-height: 1;
  max-width: 190px;
}

.honest-scarcity > div:last-child {
  max-width: 760px;
}

.scarcity-actions {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 26px;
}

.scarcity-actions .button {
  width: 100%;
}

.course-topic-section {
  background: white;
}

.topic-grid {
  display: grid;
  gap: 16px;
  margin: 0 auto;
  max-width: 1160px;
}

.topic-grid article {
  background: var(--rose-mist);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 116px 1fr;
  min-height: 150px;
}

.topic-grid img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.topic-grid article > div {
  align-self: center;
  padding: 18px;
}

.topic-grid h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  line-height: 1.15;
  margin: 6px 0;
}

.topic-grid p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.booking-steps {
  background: var(--lavender-soft);
}

.booking-steps ol {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0 auto;
  max-width: 1000px;
  padding: 0;
}

.booking-steps li {
  align-items: flex-start;
  background: white;
  border: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: 42px 1fr;
  padding: 20px;
}

.booking-steps li > span {
  color: var(--pink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-style: italic;
}

.booking-steps strong {
  font-size: 17px;
}

.booking-steps p {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 5px 0 0;
}

.personal-final-cta {
  background:
    radial-gradient(circle at 0% 100%, rgba(229, 238, 198, 0.75), transparent 40%),
    linear-gradient(135deg, #fff7fa, var(--lavender-soft));
}

@media (min-width: 760px) {
  .marketing-header {
    height: 78px;
    padding: 0 clamp(28px, 6vw, 92px);
  }

  .mobile-marketing-nav {
    display: none;
  }

  .pricing-nav {
    align-items: center;
    display: flex;
    gap: 28px;
  }

  .pricing-nav a {
    align-items: center;
    color: var(--ink-soft);
    display: flex;
    font-size: 14px;
    font-weight: 600;
    min-height: 48px;
    position: relative;
  }

  .pricing-nav a.is-active,
  .pricing-nav a:hover {
    color: var(--pink-dark);
  }

  .pricing-nav a.is-active::after {
    background: var(--pink);
    bottom: 4px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
  }

  .pricing-page {
    padding-bottom: 0;
  }

  .pricing-hero {
    align-items: center;
    gap: clamp(54px, 8vw, 120px);
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
    min-height: 650px;
    padding: 90px clamp(40px, 8vw, 130px);
  }

  .pricing-hero-copy > .button {
    width: auto;
  }

  .choice-section,
  .plans-section,
  .personal-choice,
  .calendar-section,
  .reference-section,
  .course-topic-section,
  .booking-steps,
  .pricing-faq {
    padding: 110px clamp(40px, 8vw, 130px);
  }

  .calendar-heading {
    align-items: end;
    gap: 60px;
    grid-template-columns: 1.1fr 0.9fr;
  }

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

  .calendar-card {
    display: flex;
    flex-direction: column;
  }

  .calendar-card-image {
    height: 260px;
  }

  .calendar-card-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .calendar-card-copy .button {
    margin-top: auto;
  }

  .calendar-note {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .reference-grid {
    column-count: 3;
    column-gap: 18px;
  }

  .pricing-section-heading {
    margin-bottom: 58px;
    text-align: center;
  }

  .choice-paths {
    grid-template-columns: repeat(3, 1fr);
  }

  .plan-grid {
    align-items: stretch;
    grid-template-columns: repeat(3, 1fr);
  }

  .plan-card,
  .personal-plan-card {
    padding: 34px 28px;
  }

  .commitment-section {
    align-items: center;
    gap: clamp(60px, 8vw, 120px);
    grid-template-columns: minmax(0, 0.75fr) minmax(460px, 1.25fr);
    padding: 100px clamp(40px, 8vw, 130px);
  }

  .commitment-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .risk-reversal,
  .honest-scarcity {
    gap: clamp(60px, 9vw, 130px);
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: center;
    padding: 100px clamp(40px, 10vw, 160px);
  }

  .free-trial-section {
    gap: 70px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 100px clamp(40px, 10vw, 160px);
  }

  .free-trial-section .button {
    width: auto;
  }

  .personal-proof {
    grid-template-columns: repeat(3, 1fr);
    padding: 20px clamp(40px, 8vw, 130px);
  }

  .personal-proof > div {
    border-bottom: 0;
    border-right: 1px solid rgba(48, 35, 45, 0.15);
    justify-content: center;
    padding: 8px 24px;
  }

  .personal-proof > div:last-child {
    border-right: 0;
  }

  .personal-plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .scarcity-actions {
    align-items: center;
    flex-direction: row;
  }

  .scarcity-actions .button {
    width: auto;
  }

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

  .topic-grid article {
    grid-template-columns: 1fr;
    grid-template-rows: 330px auto;
  }

  .topic-grid article > div {
    padding: 24px;
  }

  .topic-grid h3 {
    font-size: 25px;
  }

  .booking-steps ol {
    grid-template-columns: repeat(3, 1fr);
  }

  .booking-steps li {
    grid-template-columns: 1fr;
    min-height: 220px;
  }

  .mobile-buybar {
    display: none;
  }

  .marketing-footer {
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
    padding: 48px clamp(40px, 8vw, 130px);
  }

  .marketing-footer nav {
    flex-direction: row;
    gap: 24px;
    justify-content: flex-end;
  }

  .marketing-footer nav a {
    border-bottom: 0;
    font-size: 13px;
  }
}

/* Two-line menu icon on phones and tablets */

.mobile-marketing-nav > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 48px;
  justify-content: center;
  list-style: none;
  min-height: 48px;
  padding: 0;
  width: 48px;
}

.mobile-marketing-nav > summary::-webkit-details-marker {
  display: none;
}

.mobile-marketing-nav > summary::after {
  content: none;
}

.mobile-marketing-nav .menu-line {
  background: var(--ink);
  display: block;
  height: 2px;
  transition:
    transform 180ms ease,
    width 180ms ease;
  width: 24px;
}

.mobile-marketing-nav[open] .menu-line:first-child {
  transform: translateY(4.5px) rotate(45deg);
}

.mobile-marketing-nav[open] .menu-line:last-child {
  transform: translateY(-4.5px) rotate(-45deg);
}

@media (min-width: 760px) and (max-width: 1099px) {
  .mobile-marketing-nav {
    display: block;
  }

  .pricing-nav {
    display: none;
  }
}

@media (min-width: 1100px) {
  .mobile-marketing-nav {
    display: none;
  }

  .pricing-nav {
    display: flex;
  }
}

/* Airier Nechtovinky editorial rhythm */

.blog-page .blog-hero {
  padding-bottom: 58px;
  padding-top: 58px;
}

.blog-page .blog-hero h1 {
  font-size: clamp(42px, 7vw, 70px);
  max-width: 820px;
}

.blog-page .blog-hero > p:last-child {
  max-width: 590px;
}

.featured-post {
  margin: 0 auto;
  max-width: 1120px;
  padding-bottom: 76px;
  padding-top: 46px;
}

.featured-post img {
  aspect-ratio: 16 / 10;
  border-radius: 2px;
  max-height: 360px;
}

.featured-post h2 {
  font-size: clamp(30px, 5vw, 46px);
  margin-bottom: 16px;
}

.featured-post .eyebrow {
  margin-bottom: 5px;
}

.post-meta,
.article-meta {
  color: var(--ink-soft);
  font-size: 12px;
  margin-bottom: 16px;
}

.post-meta span,
.article-meta span {
  margin: 0 5px;
}

.blog-index {
  margin: 0 auto;
  max-width: 1240px;
  padding-top: 68px;
}

.blog-toolbar {
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}

.blog-toolbar h2 {
  font-size: clamp(30px, 5vw, 42px);
  margin-bottom: 0;
}

.blog-grid {
  gap: 18px;
  margin-top: 28px;
}

.blog-grid article {
  border-color: rgba(48, 35, 45, .11);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.blog-grid article:hover {
  border-color: rgba(167, 47, 99, .32);
  box-shadow: 0 16px 40px rgba(110, 55, 82, .09);
  transform: translateY(-2px);
}

.blog-grid article > a {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  height: 100%;
}

.blog-grid img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 158px;
}

.blog-grid article div {
  padding: 17px 16px 18px;
}

.blog-grid article div > span {
  display: inline-block;
  margin-right: 8px;
}

.blog-grid article small {
  color: var(--ink-soft);
  font-size: 10px;
}

.blog-grid h3 {
  font-size: 21px;
  margin: 7px 0 9px;
}

.blog-grid p {
  display: none;
}

.blog-grid strong {
  display: inline-block;
  margin-top: 8px;
}

.article-page {
  background: #fffefe;
}

.article-page .article-hero {
  padding: 54px 20px 50px;
}

.article-hero > div {
  margin: 0 auto;
  max-width: 920px;
}

.article-page .article-hero h1 {
  font-size: clamp(38px, 8.4vw, 62px);
  line-height: 1.06;
  margin-bottom: 24px;
  max-width: 900px;
}

.article-page .article-hero > div > p:last-child {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.75;
  max-width: 680px;
}

.article-page .article-hero .eyebrow {
  margin-bottom: 3px;
}

.article-cover {
  margin: 22px 16px 0;
}

.article-cover img {
  aspect-ratio: 16 / 9;
  max-height: 560px;
}

.article-cover figcaption {
  margin: 0 auto;
  max-width: 1000px;
  padding: 10px 0 0;
}

.article-layout {
  padding-bottom: 96px;
  padding-top: 64px;
}

.article-content {
  max-width: 68ch;
}

.article-content > p,
.article-content li {
  color: #554953;
  font-size: 16px;
  line-height: 1.85;
}

.article-content > p {
  margin-bottom: 24px;
}

.article-content h2 {
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.18;
  margin-bottom: 18px;
  margin-top: 58px;
  scroll-margin-top: 110px;
}

.article-content ul {
  display: grid;
  gap: 13px;
  margin: 26px 0 38px;
  padding-left: 22px;
}

/* Článok vie obsahovať tabuľku, číslovaný zoznam aj oddeľovač — reset im
   zobral všetko a naštýlovali sme len odrážky, takže tabuľka splynula do
   jedného chuchvalca textu a číslovaný zoznam stratil čísla (issue #68). */

/* Tabuľka je širšia než stĺpec textu, preto sa posúva vo vlastnom ráme
   namiesto toho, aby roztiahla celú stránku. */
.article-content figure:has(table),
.article-content .table-wrap {
  margin: 34px 0 40px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.article-content table {
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.55;
  /* Tabuľka vyplní stĺpec textu a text v bunkách sa zalomí. Posúvať sa
     začne až vtedy, keď by stĺpce boli užšie než sa dá prečítať. */
  min-width: 520px;
  width: 100%;
}

.article-content th,
.article-content td {
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.article-content th {
  background: var(--rose-mist);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-content td { color: #554953; }

/* Prvý stĺpec býva odborný názov — jedno dlhé slovo bez miesta na zalomenie,
   ktoré držalo tabuľku na 1216 px v 744 px stĺpci. Lámať sa smie len tu;
   bežné slová v ostatných stĺpcoch zostávajú vcelku. */
.article-content td:first-child { overflow-wrap: anywhere; }
.article-content tbody tr:last-child td { border-bottom: 0; }

.article-content ol {
  display: grid;
  gap: 13px;
  list-style: decimal;
  margin: 26px 0 38px;
  padding-left: 22px;
}

.article-content hr {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  margin: 46px 0;
}

.article-intro {
  font-size: 21px !important;
  line-height: 1.65 !important;
  margin-bottom: 42px !important;
}

.article-content blockquote {
  background: var(--rose-mist);
  border-left-width: 3px;
  font-size: clamp(21px, 5vw, 27px);
  line-height: 1.45;
  margin: 46px 0;
  padding: 24px 22px;
}

.article-lesson {
  margin-top: 68px;
  padding: 30px 24px;
}

.article-lesson h3 {
  font-size: 25px;
  line-height: 1.3;
}

@media (min-width: 760px) {
  .blog-page .blog-hero {
    padding-bottom: 76px;
    padding-top: 76px;
  }

  .featured-post {
    grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
    padding-left: 40px;
    padding-right: 40px;
  }

  .blog-index {
    padding-left: 40px;
    padding-right: 40px;
  }

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

  .blog-grid article > a {
    display: block;
  }

  .blog-grid img {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }

  .blog-grid article div {
    padding: 18px 18px 20px;
  }

  .article-page .article-hero {
    padding: 78px clamp(40px, 8vw, 130px) 70px;
  }

  .article-cover {
    margin: 46px auto 0;
    max-width: 1040px;
    padding: 0 28px;
  }

  .article-cover img {
    border-radius: 2px;
  }

  .article-layout {
    gap: 72px;
    grid-template-columns: 180px minmax(0, 68ch);
    justify-content: center;
    padding-bottom: 130px;
    padding-top: 88px;
  }

  .article-layout > aside {
    border-top: 1px solid var(--line);
    gap: 15px;
    padding-top: 18px;
  }

  .article-layout > aside strong {
    font-size: 13px;
  }

  .article-layout > aside a {
    line-height: 1.45;
  }

  .article-content > p,
  .article-content li {
    font-size: 17px;
  }

  .article-content h2 {
    margin-top: 72px;
  }

  .article-intro {
    font-size: 23px !important;
  }

  .article-lesson {
    margin-top: 80px;
    padding: 38px;
  }
}

/* NailBE Academy campaign, checkout and editorial pages */

.academy-lp,
.content-page,
.article-page,
.checkout-page {
  background: #fffcfd;
}

.academy-hero,
.academy-support,
.academy-offer,
.about-hero,
.contact-layout {
  display: grid;
  gap: 34px;
  padding: 56px 20px;
}

.academy-hero {
  background:
    radial-gradient(circle at 10% 8%, rgba(229, 238, 198, .9), transparent 28%),
    radial-gradient(circle at 90% 65%, rgba(203, 188, 228, .72), transparent 34%),
    linear-gradient(145deg, #fff8fb, #fffaf5);
  min-height: calc(100dvh - 70px);
  overflow: hidden;
}

.academy-hero-copy {
  align-self: center;
  position: relative;
  z-index: 2;
}

.academy-hero h1,
.simple-hero h1,
.about-hero h1,
.contact-copy h1,
.article-hero h1,
.checkout-form-wrap h1,
.checkout-success h1 {
  font-size: clamp(42px, 9.6vw, 84px);
  line-height: 1.01;
}

.academy-lead,
.content-lead,
.simple-hero > p:last-child,
.contact-copy > p,
.article-hero > p:last-child,
.checkout-form-wrap > p {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.7;
  max-width: 680px;
}

.academy-hero-actions {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
}

.academy-hero-actions .button {
  width: 100%;
}

.text-link,
.checkout-back {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  font-size: 13px;
  font-weight: 700;
}

.academy-trustline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}

.academy-trustline span {
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  text-transform: uppercase;
}

.academy-hero-visual {
  min-height: 470px;
  position: relative;
}

.academy-photo {
  border-radius: 180px 180px 28px 28px;
  box-shadow: var(--shadow);
  height: 100%;
  overflow: hidden;
}

.academy-photo img,
.academy-support-image img,
.about-hero img,
.featured-post img,
.blog-grid img,
.article-cover img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.academy-note {
  background: rgba(255,252,253,.96);
  bottom: 18px;
  box-shadow: var(--shadow);
  max-width: 270px;
  padding: 18px;
  position: absolute;
  right: -4px;
}

.academy-note small,
.contact-details small {
  color: var(--pink-dark);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  margin-bottom: 6px;
}

.academy-note strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  line-height: 1.35;
}

.academy-recognition,
.academy-program,
.academy-bonuses,
.academy-fit,
.academy-faq,
.story-section,
.faq-groups,
.blog-index {
  padding: 74px 20px;
}

.academy-recognition {
  text-align: center;
}

.academy-recognition h2,
.academy-section-heading h2,
.academy-support h2,
.offer-copy h2,
.story-section h2,
.content-cta h2,
.featured-post h2,
.blog-toolbar h2 {
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1.08;
}

.recognition-grid,
.academy-module-grid,
.bonus-grid,
.story-columns,
.blog-grid {
  display: grid;
  gap: 14px;
  margin-top: 36px;
}

.recognition-grid article,
.academy-module-grid article,
.bonus-grid article {
  background: white;
  border: 1px solid var(--line);
  padding: 25px;
  text-align: left;
}

.recognition-grid span,
.academy-module-grid span {
  color: var(--pink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
}

.recognition-grid p,
.academy-module-grid p,
.bonus-grid p {
  color: var(--ink-soft);
  margin-bottom: 0;
}

.academy-pivot {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  margin: 34px auto 0;
  max-width: 720px;
}

.academy-program,
.academy-fit,
.faq-groups {
  background: var(--rose-mist);
}

.academy-section-heading {
  margin: 0 auto 36px;
  max-width: 850px;
  text-align: center;
}

.academy-section-heading > p:last-child,
.offer-copy > p {
  color: var(--ink-soft);
}

.academy-module-grid article:nth-child(2),
.bonus-grid article:nth-child(2) {
  background: var(--lavender-soft);
}

.academy-module-grid article:nth-child(3),
.bonus-grid article:nth-child(3) {
  background: #f5f9e8;
}

.program-facts,
.values-strip {
  background: var(--gradient-rich);
  color: white;
  display: grid;
  margin-top: 26px;
}

.program-facts > div,
.values-strip article {
  border-bottom: 1px solid rgba(255,255,255,.24);
  display: flex;
  flex-direction: column;
  padding: 25px;
  text-align: center;
}

.program-facts strong,
.values-strip strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 36px;
}

.academy-support {
  align-items: center;
}

.academy-support-image {
  border-radius: 160px 160px 0 0;
  height: 520px;
  overflow: hidden;
}

.academy-checks {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.academy-checks li {
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 16px 0 16px 34px;
  position: relative;
}

.academy-checks li::before {
  color: var(--pink);
  content: "✓";
  font-weight: 700;
  left: 2px;
  position: absolute;
}

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

.bonus-grid article > span,
.offer-label,
.blog-grid article span {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}

.fit-split {
  display: grid;
  gap: 14px;
}

.fit-split > div {
  background: white;
  border: 1px solid var(--line);
  padding: 28px;
}

.fit-yes {
  box-shadow: inset 4px 0 var(--pink);
}

.fit-split li {
  color: var(--ink-soft);
  margin: 12px 0;
}

.fit-no a {
  color: var(--pink-dark);
  font-weight: 700;
}

.academy-offer {
  background:
    radial-gradient(circle at 5% 100%, rgba(229,238,198,.8), transparent 35%),
    linear-gradient(135deg, #fff7fa, var(--lavender-soft));
  align-items: center;
}

.honest-urgency {
  border-left: 3px solid var(--pink);
  margin-top: 28px;
  padding-left: 16px;
}

.academy-price-card,
.order-summary,
.contact-form,
.contact-success {
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 28px;
}

.academy-price-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 42px;
  margin: 8px 0;
}

.offer-price {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  padding-bottom: 18px;
}

.offer-price strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 42px;
}

.academy-price-card li,
.order-summary li {
  margin: 10px 0;
}

.academy-price-card .button {
  margin-top: 12px;
  width: 100%;
}

.academy-price-card small {
  color: var(--ink-soft);
  display: block;
  margin-top: 10px;
  text-align: center;
}

.academy-faq {
  padding-bottom: 130px;
}

/* ---------------------------------------------------------------------------
   Lišta s výberom úrovne (NailBE Academy).

   Cez telefón chodí vyše deväť z desiatich návštevníčok, takže toto nie je
   doplnok — je to hlavná cesta k nákupu. Predtým viedla do ponuky s cenou
   „od", teda o jedno kliknutie navyše k tomu istému výberu. Teraz ponúka
   rovno obe úrovne aj s cenou: rozdiel medzi nimi je jediná otázka, ktorú si
   tu kurzantka kladie.
--------------------------------------------------------------------------- */

.academy-mobile-cta {
  align-items: center;
  background: white;
  border-top: 1px solid var(--line);
  bottom: 0;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  left: 0;
  padding: 10px 14px;
  /* Na iPhone s gestovou lištou by spodný riadok tlačidiel skončil pod ňou. */
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  position: fixed;
  right: 0;
  z-index: 90;
}

/* Značka programu namiesto názvu: v lište je miesta málo a NailBE Academy
   stojí na tej istej obrazovke ešte trikrát. */
.academy-mobile-cta > img {
  border-radius: 10px;
  flex: none;
  height: 38px;
  width: 38px;
}

.academy-mobile-cta .cta-popis {
  color: var(--ink-soft);
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  max-width: 5.5em;
  text-transform: uppercase;
}

.academy-mobile-cta .cta-volby {
  display: grid;
  flex: 1;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
}

/* Dve rovnaké plochy vedľa seba: výber je medzi nimi, nie medzi tlačidlom
   a odkazom. Obe majú aspoň 44 px na prst. */
.academy-mobile-cta .cta-volby a {
  align-items: center;
  background: var(--pink);
  border: 1px solid var(--pink);
  border-radius: 12px;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  line-height: 1.15;
  min-height: 46px;
  padding: 7px 8px;
  text-decoration: none;
}

.academy-mobile-cta .cta-volby strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.academy-mobile-cta .cta-volby span {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.academy-mobile-cta .cta-volby.je-jedna { grid-template-columns: 1fr; }

/* VIP je tá drahšia — nech je vidieť, že je to iná liga, nie to isté dvakrát. */
.academy-mobile-cta .cta-volby a.je-vip {
  background: var(--ink);
  border-color: var(--ink);
}

.academy-mobile-cta .cta-volby a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Bez min-width: 0 roztlačí najdlhší text celú lištu za okraj obrazovky. */
.academy-mobile-cta .cta-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.academy-mobile-cta .cta-text small {
  color: var(--ink-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.academy-mobile-cta .cta-text strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.academy-mobile-cta .cta-jedno {
  background: var(--pink);
  border-radius: 12px;
  color: white;
  flex: none;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 16px;
  text-decoration: none;
  white-space: nowrap;
}

/* Na úzkych telefónoch (320–360 px) sa popis nezmestí a tlačidlá by sa
   stlačili na nečitateľnú šírku. Popis vypadne, výber zostane. */
@media (max-width: 389px) {
  .academy-mobile-cta { gap: 9px; padding-inline: 10px; }
  .academy-mobile-cta .cta-popis { display: none; }
}

/* Značka programu nad nadpisom: Academy sa predáva ako vlastná vec. */
.academy-logo {
  border-radius: 18px;
  box-shadow: 0 14px 34px -18px rgba(102, 48, 77, 0.5);
  display: block;
  height: auto;
  margin-bottom: 20px;
  width: 76px;
}

/* Podpis na konci — o niečo väčší, je to bodka za stránkou. */
.academy-logo.je-podpis {
  margin: 28px 0 6px;
  width: 92px;
}

.checkout-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
}

.checkout-header > span {
  color: var(--ink-soft);
  font-size: 11px;
}

.checkout-layout {
  display: grid;
}

.checkout-form-wrap,
.order-summary {
  padding: 44px 20px;
}

.checkout-form-wrap .eyebrow {
  margin-top: 32px;
}

.checkout-form {
  display: grid;
  gap: 15px;
  margin-top: 30px;
}

.checkout-form label,
.contact-form label {
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
}

.checkout-form input,
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: white;
  border: 1px solid var(--line);
  min-height: 52px;
  padding: 12px;
}

.checkout-consent {
  align-items: flex-start;
  color: var(--ink-soft);
  grid-template-columns: 20px 1fr !important;
  line-height: 1.45;
}

.checkout-consent input {
  min-height: 18px;
  width: 18px;
}

.checkout-form .button {
  width: 100%;
}

.checkout-form > small,
.contact-form > small {
  color: var(--ink-soft);
  text-align: center;
}

.order-summary {
  background: var(--rose-mist);
  border: 0;
  box-shadow: none;
}

.order-summary h2 {
  font-size: 36px;
}

.summary-total {
  align-items: center;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  margin-top: 26px;
  padding: 18px 0;
}

.summary-total strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
}

.summary-help {
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 22px;
}

.summary-help a { color: var(--pink-dark); font-weight: 700; }

.checkout-success {
  align-items: center;
  background: var(--gradient-pastel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  padding: 30px 20px;
  text-align: center;
}

.checkout-success > span,
.contact-success > span {
  align-items: center;
  background: var(--pink);
  border-radius: 50%;
  color: white;
  display: flex;
  font-size: 28px;
  height: 60px;
  justify-content: center;
  margin-bottom: 22px;
  width: 60px;
}

.checkout-success > p {
  color: var(--ink-soft);
  max-width: 650px;
}

.onboarding-steps {
  display: grid;
  gap: 10px;
  margin: 24px 0 30px;
  width: min(100%, 660px);
}

.onboarding-steps div {
  align-items: center;
  background: rgba(255,255,255,.74);
  display: flex;
  gap: 14px;
  padding: 14px;
  text-align: left;
}

.onboarding-steps strong {
  color: var(--pink);
}

.about-hero {
  align-items: center;
  background: var(--gradient-pastel);
}

.about-hero img {
  border-radius: 180px 180px 0 0;
  min-height: 420px;
}

.story-columns p {
  border-top: 2px solid var(--pink);
  color: var(--ink-soft);
  padding-top: 18px;
}

.values-strip {
  margin: 0;
}

.simple-hero,
.article-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(203,188,228,.75), transparent 30%),
    linear-gradient(145deg, #fff7fa, #fffaf5);
  padding: 72px 20px;
  text-align: center;
}

.simple-hero > p,
.article-hero > p {
  margin-left: auto;
  margin-right: auto;
}

.faq-groups {
  display: grid;
  gap: 48px;
}

.faq-group > h2 {
  font-size: 30px;
}

.content-cta {
  align-items: center;
  background: var(--gradient-pastel);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 60px 20px;
}

.content-cta .button { margin: 5px; }

.contact-layout {
  min-height: calc(100dvh - 70px);
}

.contact-details {
  display: grid;
  gap: 10px;
  margin-top: 30px;
}

.contact-details > * {
  background: var(--rose-mist);
  border: 1px solid var(--line);
  padding: 18px;
}

.contact-details strong {
  font-size: 15px;
}

.contact-form {
  align-self: center;
  display: grid;
  gap: 15px;
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-success {
  align-self: center;
}

.blog-hero {
  text-align: left;
}

.blog-hero > p {
  margin-left: 0;
}

.featured-post {
  display: grid;
  gap: 28px;
  padding: 24px 20px 74px;
}

.featured-post img {
  max-height: 560px;
}

.featured-post > div {
  align-self: center;
}

.featured-post > div > p:not(.eyebrow) {
  color: var(--ink-soft);
}

.blog-toolbar {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.blog-toolbar > div {
  display: flex;
  gap: 7px;
  max-width: 100%;
  overflow-x: auto;
}

.blog-toolbar button {
  background: white;
  border: 1px solid var(--line);
  min-height: 44px;
  padding: 8px 14px;
  white-space: nowrap;
}

.blog-toolbar button.is-active {
  background: var(--ink);
  color: white;
}

.blog-grid article {
  background: white;
  border: 1px solid var(--line);
}

.blog-grid img {
  aspect-ratio: 4/3;
}

.blog-grid article div {
  padding: 22px;
}

.blog-grid h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  line-height: 1.15;
  margin: 9px 0;
}

.blog-grid p {
  color: var(--ink-soft);
  font-size: 14px;
}

.blog-grid strong {
  color: var(--pink-dark);
  font-size: 13px;
}

.article-hero {
  text-align: left;
}

.article-hero > p {
  margin-left: 0;
}

.article-hero > a {
  color: var(--pink-dark);
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 32px;
}

.article-cover {
  margin: 0;
}

.article-cover img {
  max-height: 620px;
}

.article-cover figcaption {
  color: var(--ink-soft);
  font-size: 12px;
  padding: 8px 20px;
}

.article-layout {
  display: grid;
  margin: 0 auto;
  max-width: 1160px;
  padding: 48px 20px 90px;
}

.article-layout > aside {
  display: none;
}

.article-content {
  max-width: 740px;
}

.article-content p,
.article-content li {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.8;
}

.article-content h2 {
  font-size: 34px;
  line-height: 1.12;
  margin-top: 48px;
}

.article-intro {
  color: var(--ink) !important;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 23px !important;
}

.article-content blockquote {
  border-left: 4px solid var(--pink);
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  margin: 36px 0;
  padding: 10px 0 10px 22px;
}

.article-lesson {
  background: var(--gradient-pastel);
  margin-top: 50px;
  padding: 28px;
}

.article-lesson h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
}

@media (min-width: 760px) {
  .academy-hero,
  .academy-support,
  .academy-offer,
  .about-hero,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 96px clamp(40px, 7vw, 110px);
  }

  .academy-hero {
    padding-bottom: 70px;
    padding-top: 70px;
  }

  .academy-hero h1 {
    font-size: clamp(58px, 5.2vw, 68px);
  }

  .academy-hero-actions {
    align-items: center;
    flex-direction: row;
  }

  .academy-hero-actions .button {
    width: auto;
  }

  .academy-recognition,
  .academy-program,
  .academy-bonuses,
  .academy-fit,
  .academy-faq,
  .story-section,
  .faq-groups,
  .blog-index {
    padding: 100px clamp(40px, 8vw, 130px);
  }

  .recognition-grid,
  .bonus-grid,
  .story-columns,
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .academy-module-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .program-facts,
  .values-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .program-facts > div,
  .values-strip article {
    border-bottom: 0;
    border-right: 1px solid rgba(255,255,255,.24);
  }

  .fit-split {
    grid-template-columns: 1fr 1fr;
  }

  .academy-mobile-cta {
    display: none;
  }

  .checkout-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    min-height: calc(100dvh - 78px);
  }

  .checkout-form-wrap {
    padding: 70px clamp(50px, 8vw, 130px);
  }

  .order-summary {
    padding: 80px clamp(36px, 5vw, 70px);
  }

  .onboarding-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .content-cta {
    flex-direction: row;
    justify-content: space-between;
    padding: 75px clamp(40px, 8vw, 130px);
  }

  .faq-groups {
    grid-template-columns: repeat(3, 1fr);
  }

  .featured-post {
    grid-template-columns: 1fr 1fr;
    padding: 50px clamp(40px, 8vw, 130px) 100px;
  }

  .blog-toolbar {
    flex-direction: row;
    justify-content: space-between;
  }

  .simple-hero,
  .article-hero {
    padding: 110px clamp(40px, 12vw, 190px);
  }

  .article-layout {
    gap: 70px;
    grid-template-columns: 210px minmax(0, 740px);
  }

  .article-layout > aside {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 13px;
    position: sticky;
    top: 110px;
  }

  .article-layout > aside a {
    color: var(--ink-soft);
    font-size: 13px;
  }
}

/* byMishel Academy */
.academy-app {
  --academy-bg: #fbf8fa;
  --academy-card: #ffffff;
  --academy-line: #e8dfe4;
  --academy-ink: #30232d;
  --academy-muted: #74656e;
  background: var(--academy-bg);
  color: var(--academy-ink);
  min-height: 100vh;
  padding-bottom: 68px;
}

.academy-sidebar {
  display: none;
}

.academy-main {
  min-width: 0;
}

.academy-topbar {
  align-items: center;
  background: rgba(255, 252, 253, 0.96);
  border-bottom: 1px solid var(--academy-line);
  display: grid;
  gap: 12px;
  grid-template-columns: auto 1fr auto;
  min-height: 68px;
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
}

.academy-mobile-brand,
.academy-brand {
  color: var(--academy-ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.academy-mobile-brand span,
.academy-brand span {
  color: var(--pink-dark);
}

.academy-global-search label {
  font-size: 0;
}

.academy-global-search input {
  background: #f5f0f3;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--academy-ink);
  font: inherit;
  font-size: 13px;
  min-height: 44px;
  padding: 10px 16px;
  width: 100%;
}

.academy-global-search input:focus {
  background: white;
  border-color: var(--pink);
  outline: 3px solid rgba(164, 50, 97, 0.12);
}

.academy-profile-link {
  align-items: center;
  background: var(--pink-dark);
  border-radius: 50%;
  color: white;
  display: flex;
  font-size: 11px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.academy-bottom-nav {
  align-items: stretch;
  background: rgba(255, 252, 253, 0.97);
  border-top: 1px solid var(--academy-line);
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  left: 0;
  min-height: 64px;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  right: 0;
  z-index: 60;
  backdrop-filter: blur(14px);
}

.academy-bottom-nav a {
  align-items: center;
  color: var(--academy-muted);
  display: flex;
  font-size: 11px;
  font-weight: 700;
  justify-content: center;
  min-height: 56px;
  position: relative;
}

.academy-bottom-nav a.is-active {
  color: var(--pink-dark);
}

.academy-bottom-nav a.is-active::before {
  background: var(--pink);
  content: "";
  height: 3px;
  left: 22%;
  position: absolute;
  right: 22%;
  top: 0;
}

.academy-dashboard,
.academy-library-page,
.academy-lesson-page,
.program,
.vip-page {
  margin: 0 auto;
  max-width: 1480px;
  padding: 34px 18px 90px;
}

.academy-welcome {
  background:
    radial-gradient(circle at 100% 0%, rgba(203, 188, 228, 0.58), transparent 35%),
    linear-gradient(135deg, #fff7fa, #fffdf7);
  display: grid;
  gap: 26px;
  padding: 28px 22px;
}

.academy-welcome h1,
.library-hero h1,
.vip-hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(40px, 10vw, 68px);
  letter-spacing: -0.05em;
  line-height: 1.02;
  margin: 8px 0 15px;
}

.academy-welcome > div:first-child > p:last-child,
.library-hero > p:last-of-type,
.vip-hero > div:first-child > p:last-child {
  color: var(--academy-muted);
  font-size: 16px;
  line-height: 1.6;
}

.academy-progress-card {
  align-self: center;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(142, 91, 117, 0.13);
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.academy-progress-card > span {
  color: var(--academy-muted);
  font-size: 12px;
}

.academy-progress-card > strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 38px;
  margin: 8px 0 12px;
}

.academy-progress-card small {
  color: var(--academy-muted);
  margin-top: 9px;
}

.progress-track {
  background: #eadfe5;
  height: 6px;
  overflow: hidden;
  width: 100%;
}

.progress-track i {
  background: linear-gradient(90deg, var(--pink-dark), var(--pink));
  display: block;
  height: 100%;
}

.continue-section,
.academy-paths,
.academy-recommendations {
  padding-top: 58px;
}

.academy-section-heading {
  align-items: end;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.academy-section-heading h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(30px, 7vw, 44px);
  letter-spacing: -0.04em;
  margin: 6px 0 0;
}

.academy-section-heading > a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.course-path-label {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
}

/* Pokračuj, kde si skončila — skratka, nie sekcia. Jeden riadok: náhľad,
   čo to je a kam som sa dostala, tlačidlo. Celý pás je odkaz, aby sa naň
   dalo na mobile ťuknúť kdekoľvek. Jemne ružový podklad ho oddelí od
   knižnice pod ním. */
.continue-strip {
  align-items: center;
  background:
    radial-gradient(circle at 100% 0%, rgba(203, 188, 228, 0.35), transparent 45%),
    var(--rose-mist, #fbf1f5);
  border: 1px solid rgba(157, 42, 89, 0.14);
  border-radius: 18px;
  color: inherit;
  display: grid;
  gap: 14px;
  grid-template-columns: 64px minmax(0, 1fr);
  padding: 12px;
  text-decoration: none;
  transition-property: border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.continue-strip:hover {
  border-color: rgba(157, 42, 89, 0.32);
  box-shadow: 0 10px 28px rgba(102, 48, 77, 0.1);
}
.continue-strip:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.continue-thumb {
  aspect-ratio: 1;
  border-radius: 12px;
  display: block;
  overflow: hidden;
}
.continue-thumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: -1px;
  width: 100%;
}

.continue-body { display: grid; gap: 3px; min-width: 0; }
.continue-kicker {
  color: var(--pink-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.continue-title {
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  /* Dva riadky: na mobile by jeden odrezal koniec názvu, ktorý lekcie
     často rozlišuje („…pre NailBE Academy"). */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-wrap: pretty;
}
.continue-meta {
  color: var(--academy-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.continue-body .progress-track { margin-top: 6px; }

.continue-cta {
  align-items: center;
  background: var(--pink);
  border-radius: 99px;
  color: white;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 8px;
  grid-column: 1 / -1;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  white-space: nowrap;
}
.continue-strip:hover .continue-cta { background: var(--pink-dark); }

@media (min-width: 640px) {
  .continue-strip {
    gap: 18px;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    padding: 14px 16px 14px 14px;
  }
  .continue-cta { grid-column: auto; }
  .continue-title { font-size: 18px; }
}

.academy-path-grid,
.recommendation-grid {
  display: grid;
  gap: 12px;
}

.academy-path-card {
  border: 1px solid var(--academy-line);
  color: var(--academy-ink);
  display: block;
  min-height: 220px;
  padding: 24px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.academy-path-card.is-rose {
  background: #fff2f6;
}

.academy-path-card.is-lavender {
  background: #f4f0fb;
}

.academy-path-card.is-lime {
  background: #f5f8e8;
}

.academy-path-card:hover {
  border-color: var(--pink);
  box-shadow: 0 16px 45px rgba(96, 50, 75, 0.1);
}

.academy-path-card > span {
  color: var(--academy-muted);
  font-size: 11px;
  font-weight: 700;
}

.academy-path-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 29px;
  margin: 18px 0 8px;
}

.academy-path-card p {
  color: var(--academy-muted);
  font-size: 14px;
  line-height: 1.5;
}

.academy-path-card strong {
  color: var(--pink-dark);
  display: inline-block;
  font-size: 12px;
  margin-top: 14px;
}

.recommendation-grid > a {
  background: white;
  border: 1px solid var(--academy-line);
  color: var(--academy-ink);
  padding: 22px;
}

.recommendation-grid span {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.recommendation-grid h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  margin: 10px 0 8px;
}

.recommendation-grid p {
  color: var(--academy-muted);
  font-size: 13px;
  line-height: 1.5;
}

.academy-vip-banner {
  align-items: center;
  background:
    radial-gradient(circle at 100% 0%, rgba(229, 238, 198, 0.8), transparent 38%),
    linear-gradient(135deg, #fff8fa, #f5f0fb);
  display: grid;
  gap: 24px;
  margin-top: 58px;
  padding: 30px 22px;
}

.academy-vip-banner h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 36px;
  margin: 8px 0 12px;
}

.academy-vip-banner > div > p:last-child {
  color: var(--academy-muted);
  font-size: 14px;
  line-height: 1.6;
}

.academy-vip-banner .button {
  width: 100%;
}

/* Academy login */
.academy-login-page {
  background: var(--cream);
  display: grid;
  min-height: 100vh;
}

.academy-login-visual {
  background:
    linear-gradient(180deg, rgba(54, 31, 45, 0.12), rgba(54, 31, 45, 0.7)),
    url("/images/bymishel/miska-tablet.jpg") center 22% / cover;
  color: white;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 24px 20px;
}

.login-brand {
  color: white;
  width: fit-content;
}

.login-brand span {
  color: #ffc2d8;
}

.academy-brand small {
  display: block;
  font-family: Inter, Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.login-visual-copy {
  margin-top: auto;
  max-width: 620px;
}

.login-visual-copy .eyebrow {
  color: #ffd3e2;
}

.login-visual-copy h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(40px, 11vw, 70px);
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 8px 0 15px;
}

.login-visual-copy > p:last-child {
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.6;
}

.academy-login-panel {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 56px 20px;
}

.login-form-wrap {
  max-width: 480px;
  width: 100%;
}

.login-form-wrap h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(36px, 9vw, 52px);
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 8px 0 14px;
}

.login-form-wrap > p:not(.eyebrow, .login-support) {
  color: var(--academy-muted);
  line-height: 1.55;
}

.academy-login-form {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.academy-login-form > div:not(.login-options) {
  display: grid;
  gap: 7px;
}

.academy-login-form label,
.library-search > span,
.filter-fields label,
.lesson-notes label,
.vip-booking-card label {
  font-size: 12px;
  font-weight: 700;
}

.academy-login-form input,
.library-search input,
.filter-fields select,
.results-heading select,
.lesson-notes textarea,
.vip-booking-card select {
  background: white;
  border: 1px solid #ccbfc6;
  border-radius: 0;
  color: var(--academy-ink);
  font: inherit;
  min-height: 48px;
  padding: 11px 13px;
  width: 100%;
}

.academy-login-form input:focus,
.library-search input:focus,
.filter-fields select:focus,
.results-heading select:focus,
.lesson-notes textarea:focus,
.vip-booking-card select:focus {
  border-color: var(--pink-dark);
  box-shadow: 0 0 0 3px rgba(164, 50, 97, 0.13);
  outline: none;
}

.login-options {
  align-items: center;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
}

.login-options label {
  align-items: center;
  display: flex;
  gap: 8px;
}

.login-options input {
  accent-color: var(--pink-dark);
  min-height: auto;
  width: auto;
}

.login-options a,
.login-support a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  font-weight: 700;
}

.academy-login-form .button {
  width: 100%;
}

.login-support {
  color: var(--academy-muted);
  font-size: 12px;
  margin-top: 22px;
  text-align: center;
}

/* Academy library */
.library-hero {
  background:
    radial-gradient(circle at 100% 0%, rgba(203, 188, 228, 0.55), transparent 34%),
    white;
  border: 1px solid var(--academy-line);
  padding: 30px 22px;
}

.library-search {
  display: grid;
  gap: 8px;
  margin-top: 26px;
  max-width: 720px;
}

.library-search input {
  font-size: 16px;
  min-height: 56px;
}

.library-layout {
  display: grid;
  gap: 22px;
  padding-top: 28px;
}

.mobile-filter-panel {
  background: white;
  border: 1px solid var(--academy-line);
}

.mobile-filter-panel summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  min-height: 50px;
  padding: 15px 18px;
}

.mobile-filter-fields {
  border-top: 1px solid var(--academy-line);
  padding: 18px;
}

.library-filters {
  display: none;
}

.filter-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.filter-heading h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
}

.filter-heading button {
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}

.filter-fields {
  display: grid;
  gap: 15px;
}

.filter-fields label {
  display: grid;
  gap: 6px;
}

.results-heading {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.results-heading p {
  color: var(--academy-muted);
  font-size: 13px;
}

.results-heading label {
  align-items: center;
  display: flex;
  font-size: 0;
}

.results-heading select {
  font-size: 12px;
  min-height: 44px;
  width: auto;
}

.academy-course-grid {
  display: grid;
  gap: 14px;
}

.academy-course-card {
  background: white;
  border: 1px solid var(--academy-line);
  overflow: hidden;
}

.academy-course-image {
  display: block;
  height: 190px;
  overflow: hidden;
  position: relative;
}

.academy-course-image img {
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease;
  width: 100%;
}

.academy-course-card:hover .academy-course-image img {
  transform: scale(1.025);
}

.academy-course-image > span {
  background: rgba(255, 252, 253, 0.94);
  bottom: 10px;
  color: var(--pink-dark);
  font-size: 9px;
  font-weight: 800;
  left: 10px;
  letter-spacing: 0.08em;
  padding: 7px 9px;
  position: absolute;
  text-transform: uppercase;
}

.academy-course-copy {
  padding: 19px;
}

/* Názov kurzu je funkčný text rozhrania, nie dekoratívny nadpis (issue #70).
   V ťažkom serife z neho pri troch–štyroch riadkoch vznikol tmavý blok, ktorý
   súťažil s nadpisom okruhu nad kartami. Serif zostáva nadpisom sekcií — práve
   ten kontrast serifu a bezpätkového písma je dôvod zmeny. */
.academy-course-copy h2 {
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.45;
  margin: 8px 0 9px;
  /* Zalomí radšej skôr než nechá na poslednom riadku jedno slovo. */
  text-wrap: pretty;
}

/* Karta na mobile zaberá celú šírku, takže názov znesie o kúsok viac. */
@media (max-width: 640px) {
  .academy-course-copy h2 { font-size: 20px; line-height: 1.4; }
}

.academy-course-copy h2 a {
  color: var(--academy-ink);
}

.academy-course-copy > p:not(.course-path-label) {
  color: var(--academy-muted);
  font-size: 13px;
  line-height: 1.52;
}

.course-card-meta {
  align-items: center;
  border-top: 1px solid var(--academy-line);
  display: flex;
  font-size: 11px;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 13px;
}

.course-status {
  color: var(--pink-dark);
  font-weight: 800;
}

.library-empty {
  background: white;
  border: 1px solid var(--academy-line);
  padding: 50px 24px;
  text-align: center;
}

.library-empty h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
}

.library-empty p {
  color: var(--academy-muted);
  line-height: 1.6;
  margin: 10px auto 22px;
  max-width: 520px;
}

/* Academy lesson */
.lesson-breadcrumbs {
  align-items: center;
  color: var(--academy-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 7px;
  margin-bottom: 22px;
}

.lesson-breadcrumbs a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
}

.lesson-layout {
  display: grid;
  gap: 28px;
}

.lesson-video {
  background: #3a2934;
}

.video-poster {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

.video-poster::after {
  background: rgba(47, 31, 41, 0.38);
  content: "";
  inset: 0;
  position: absolute;
}

.video-poster img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.video-poster button {
  align-items: center;
  background: white;
  border: 0;
  color: var(--pink-dark);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  gap: 10px;
  left: 50%;
  min-height: 52px;
  padding: 12px 18px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.video-poster button span {
  font-size: 18px;
}

.video-controls-copy {
  color: rgba(255, 255, 255, 0.78);
  display: flex;
  font-size: 10px;
  gap: 14px;
  padding: 10px 13px;
}

.lesson-header {
  padding: 28px 0 36px;
}

/* Názov lekcie (#70). Názvy videí sú dlhé a opisné („… teória kombinovanej
   manikúry (aktualizovaný videokurz)") — v 60 px serife zabrali tri riadky
   a pol obrazovky nad samotným obsahom. Je to funkčný text, nie titulok,
   takže rovnako ako názvy kurzov na kartách ide do Archiva a výrazne menší. */
.lesson-header h1 {
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(22px, 4.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 8px 0 18px;
  max-width: 40ch;
  text-wrap: pretty;
}

.lesson-header > p:not(.course-path-label) {
  color: var(--academy-muted);
  font-size: 16px;
  line-height: 1.65;
}

.lesson-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.lesson-actions .button {
  width: 100%;
}

.save-lesson-button {
  background: transparent;
  border: 1px solid var(--academy-line);
  color: var(--academy-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 48px;
  padding: 11px 16px;
}

.lesson-keypoints,
.lesson-resources,
.lesson-notes {
  border-top: 1px solid var(--academy-line);
  padding: 34px 0;
}

.lesson-keypoints h2,
.lesson-resources h2,
.lesson-notes h2,
.lesson-vip-offer h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(29px, 7vw, 42px);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 8px 0 18px;
}

.lesson-keypoints ul,
.lesson-vip-offer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lesson-keypoints li,
.lesson-vip-offer li {
  border-bottom: 1px solid var(--academy-line);
  padding: 11px 0 11px 28px;
  position: relative;
}

.lesson-keypoints li::before,
.lesson-vip-offer li::before {
  color: var(--pink);
  content: "✓";
  font-weight: 800;
  left: 2px;
  position: absolute;
}

.lesson-resources {
  display: grid;
  gap: 18px;
}

.lesson-resources > a {
  background: #fff3f7;
  border: 1px solid var(--academy-line);
  color: var(--academy-ink);
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.lesson-resources > a span {
  color: var(--academy-muted);
  font-size: 11px;
  margin-top: 5px;
}

.lesson-notes label {
  display: block;
  margin-bottom: 7px;
}

.lesson-notes textarea {
  resize: vertical;
}

.lesson-notes .button {
  margin-top: 12px;
  width: 100%;
}

.lesson-vip-offer {
  background:
    radial-gradient(circle at 100% 0%, rgba(229, 238, 198, 0.78), transparent 40%),
    linear-gradient(135deg, #fff2f7, #f4f0fb);
  margin-top: 28px;
  padding: 28px 22px;
}

.vip-kicker {
  align-items: center;
  background: var(--pink-dark);
  color: white;
  display: flex;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  height: 74px;
  justify-content: center;
  margin-bottom: 24px;
  width: 120px;
}

.lesson-vip-offer > div:last-child > p:not(.eyebrow) {
  color: var(--academy-muted);
  line-height: 1.6;
}

.lesson-vip-offer .button {
  margin-top: 22px;
  width: 100%;
}

.lesson-curriculum {
  background: white;
  border: 1px solid var(--academy-line);
  height: fit-content;
}

.curriculum-heading {
  border-bottom: 1px solid var(--academy-line);
  padding: 22px;
}

.curriculum-heading h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  margin: 7px 0 14px;
}

.curriculum-heading > span {
  color: var(--academy-muted);
  display: block;
  font-size: 10px;
  margin-top: 8px;
}

.lesson-curriculum ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lesson-curriculum li {
  border-bottom: 1px solid var(--academy-line);
}

.lesson-curriculum li > a,
.lesson-curriculum li > div {
  align-items: flex-start;
  color: var(--academy-ink);
  display: grid;
  gap: 11px;
  grid-template-columns: 28px 1fr;
  min-height: 68px;
  padding: 14px 18px;
}

.lesson-curriculum li > a > span,
.lesson-curriculum li > div > span {
  align-items: center;
  border: 1px solid #cabcc4;
  border-radius: 50%;
  color: var(--academy-muted);
  display: flex;
  font-size: 10px;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.lesson-curriculum li.is-done > a > span {
  background: #e8f1df;
  border-color: #b7cea5;
  color: #416137;
}

.lesson-curriculum li.is-current {
  background: #fff0f5;
  border-left: 3px solid var(--pink);
}

.lesson-curriculum strong {
  display: block;
  font-size: 12px;
  line-height: 1.35;
}

.lesson-curriculum small {
  color: var(--academy-muted);
  display: block;
  font-size: 10px;
  margin-top: 4px;
}

.curriculum-all-link {
  color: var(--pink-dark);
  display: block;
  font-size: 12px;
  font-weight: 800;
  padding: 18px;
  text-align: center;
}

/* VIP offer page */
.vip-hero {
  background:
    radial-gradient(circle at 0% 100%, rgba(229, 238, 198, 0.74), transparent 38%),
    linear-gradient(145deg, #fff8fa, #f2edf8);
  display: grid;
  gap: 34px;
  padding: 34px 22px;
}

.vip-booking-card {
  background: white;
  border: 1px solid var(--academy-line);
  box-shadow: 0 22px 60px rgba(90, 43, 69, 0.12);
  display: grid;
  gap: 13px;
  padding: 26px 22px;
}

.vip-booking-card > span {
  color: var(--academy-muted);
  font-size: 12px;
}

.vip-booking-card > strong {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 52px;
}

.vip-booking-card ul {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
}

.vip-booking-card li {
  border-bottom: 1px solid var(--academy-line);
  padding: 10px 0 10px 26px;
  position: relative;
}

.vip-booking-card li::before {
  color: var(--pink);
  content: "✓";
  font-weight: 800;
  left: 2px;
  position: absolute;
}

.vip-booking-card small {
  color: var(--academy-muted);
  font-size: 10px;
  text-align: center;
}

@media (min-width: 760px) {
  .academy-login-page {
    grid-template-columns: minmax(0, 1.05fr) minmax(480px, 0.95fr);
  }

  .academy-login-visual {
    min-height: 100vh;
    padding: 42px clamp(38px, 6vw, 86px);
  }

  .academy-login-panel {
    padding: 80px clamp(42px, 7vw, 100px);
  }

  .academy-welcome,
  .academy-vip-banner {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
    padding: 42px;
  }

  .academy-vip-banner .button {
    width: auto;
  }

  .academy-path-grid,
  .recommendation-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .academy-course-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .lesson-actions {
    align-items: center;
    flex-direction: row;
  }

  .lesson-actions .button {
    width: auto;
  }

  .lesson-resources {
    align-items: center;
    grid-template-columns: 1fr 1fr;
  }

  .lesson-notes .button,
  .lesson-vip-offer .button {
    width: auto;
  }

  .lesson-vip-offer {
    display: grid;
    gap: 28px;
    grid-template-columns: 120px 1fr;
    padding: 38px;
  }

  .vip-kicker {
    margin: 0;
  }

  .vip-hero {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.65fr);
    padding: 70px clamp(40px, 7vw, 100px);
  }
}

@media (min-width: 1080px) {
  .academy-app {
    display: grid;
    grid-template-columns: 250px 1fr;
    padding-bottom: 0;
  }

  .academy-sidebar {
    background: white;
    border-right: 1px solid var(--academy-line);
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 28px 20px;
    position: sticky;
    top: 0;
  }

  .academy-brand {
    margin: 0 12px 38px;
  }

  .academy-sidebar nav {
    display: grid;
    gap: 5px;
  }

  .academy-sidebar nav a {
    color: var(--academy-muted);
    font-size: 14px;
    font-weight: 700;
    min-height: 46px;
    padding: 14px 16px;
  }

  .academy-sidebar nav a.is-active {
    background: #fff0f5;
    color: var(--pink-dark);
  }

  .academy-help {
    background: var(--lavender-soft);
    margin-top: auto;
    padding: 18px;
  }

  .academy-help strong {
    font-size: 13px;
  }

  .academy-help p {
    color: var(--academy-muted);
    font-size: 11px;
    line-height: 1.45;
  }

  .academy-help a {
    border-bottom: 1px solid currentColor;
    color: var(--pink-dark);
    font-size: 11px;
    font-weight: 800;
  }

  .academy-mobile-brand {
    display: none;
  }

  .academy-topbar {
    grid-template-columns: minmax(320px, 620px) auto;
    justify-content: space-between;
    padding: 12px 32px;
  }

  .academy-bottom-nav {
    display: none;
  }

  .academy-dashboard,
  .academy-library-page,
  .academy-lesson-page,
  .program,
  .vip-page {
    padding: 48px clamp(30px, 4vw, 68px) 100px;
  }

  .library-layout {
    align-items: start;
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .mobile-filter-panel {
    display: none;
  }

  .library-filters {
    background: white;
    border: 1px solid var(--academy-line);
    display: block;
    padding: 22px;
    position: sticky;
    top: 94px;
  }

  .academy-course-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .lesson-layout {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 310px;
  }

  .lesson-curriculum {
    position: sticky;
    top: 94px;
  }
}

/* Locked academy content */
.reader-skip-link {
  background: var(--pink-dark);
  color: white;
  font-size: 13px;
  font-weight: 800;
  left: 16px;
  padding: 11px 15px;
  position: fixed;
  top: 10px;
  transform: translateY(-160%);
  transition: transform 180ms ease;
  z-index: 100;
}

.reader-skip-link:focus {
  transform: translateY(0);
}

.study-reader-page {
  margin: 0 auto;
  max-width: 1560px;
  padding: 28px 16px 110px;
}

.reader-hero {
  background: white;
  border: 1px solid var(--academy-line);
  display: grid;
  margin-bottom: 20px;
  overflow: hidden;
}

.reader-hero-copy {
  padding: 30px 22px;
}

.reader-hero-copy h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(43px, 11vw, 76px);
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin: 10px 0 18px;
  max-width: 760px;
}

.reader-hero-copy > p:not(.course-path-label) {
  color: var(--academy-muted);
  font-size: 16px;
  line-height: 1.68;
  max-width: 660px;
}

.reader-meta {
  color: var(--academy-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 700;
  gap: 8px 18px;
  margin-top: 22px;
}

.reader-meta span {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.reader-meta span:not(:first-child)::before {
  background: var(--pink);
  border-radius: 50%;
  content: "";
  height: 4px;
  width: 4px;
}

.reader-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.reader-actions .button,
.reader-save-button {
  width: 100%;
}

.reader-save-button {
  align-items: center;
  background: transparent;
  border: 1px solid var(--academy-line);
  color: var(--academy-ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  gap: 10px;
  justify-content: center;
  min-height: 54px;
  padding: 0 20px;
  transition:
    border-color 180ms ease,
    background-color 180ms ease;
}

.reader-save-button:hover {
  background: #fff5f8;
  border-color: var(--pink);
}

.reader-save-button svg,
.reader-summary-actions svg {
  fill: none;
  height: 19px;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 19px;
}

.reader-cover {
  aspect-ratio: 4 / 3;
  min-height: 280px;
  overflow: hidden;
  position: relative;
}

.reader-cover::after {
  background: linear-gradient(180deg, transparent 42%, rgba(47, 28, 41, 0.7));
  content: "";
  inset: 0;
  position: absolute;
}

.reader-cover > img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.reader-cover-label {
  bottom: 24px;
  color: white;
  display: grid;
  left: 22px;
  max-width: 330px;
  position: absolute;
  right: 22px;
  z-index: 2;
}

.reader-cover-label span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reader-cover-label strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  line-height: 1.1;
  margin-top: 6px;
}

.reader-overall-progress {
  background: #fff7fa;
  border-top: 1px solid var(--academy-line);
  display: grid;
  gap: 12px;
  padding: 18px 22px;
}

.reader-overall-progress > div:first-child {
  display: flex;
  font-size: 11px;
  justify-content: space-between;
}

.reader-overall-progress span {
  color: var(--academy-muted);
}

.reader-overall-progress strong {
  color: var(--pink-dark);
}

.reader-mobile-chapters {
  background: white;
  border: 1px solid var(--academy-line);
  margin-bottom: 20px;
}

.reader-mobile-chapters summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  min-height: 68px;
  padding: 12px 16px;
}

.reader-mobile-chapters summary > span:first-child {
  color: var(--academy-muted);
  display: grid;
  font-size: 10px;
}

.reader-mobile-chapters summary strong {
  color: var(--academy-ink);
  font-size: 14px;
  margin-top: 2px;
}

.reader-mobile-chapters summary > span:last-child {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
}

.reader-mobile-chapters nav {
  border-top: 1px solid var(--academy-line);
  display: grid;
  max-height: 340px;
  overflow-y: auto;
}

.reader-mobile-chapters nav a {
  align-items: center;
  border-bottom: 1px solid var(--academy-line);
  display: grid;
  font-size: 12px;
  gap: 10px;
  grid-template-columns: 28px 1fr auto;
  min-height: 52px;
  padding: 9px 16px;
}

.reader-mobile-chapters nav a.is-current {
  background: #fff0f5;
  color: var(--pink-dark);
}

.reader-mobile-chapters nav small {
  color: var(--academy-muted);
}

.reader-layout {
  display: grid;
}

.reader-chapter-nav,
.reader-tools {
  display: none;
}

.reader-article {
  background: white;
  border: 1px solid var(--academy-line);
  min-width: 0;
  padding: 30px 20px 0;
}

.reader-article > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

.chapter-intro {
  display: grid;
  gap: 20px;
  grid-template-columns: 54px 1fr;
  padding-bottom: 34px;
  scroll-margin-top: 96px;
}

.chapter-number {
  color: #d8cbd2;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 43px;
  line-height: 0.9;
}

.chapter-intro h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(40px, 10vw, 64px);
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 5px 0 14px;
}

.chapter-intro > div:last-child > p:last-child {
  color: var(--academy-muted);
  line-height: 1.65;
}

.reader-learning-goals {
  background: linear-gradient(135deg, #fff2f7, #f6f1fb);
  padding: 25px 22px;
}

.reader-learning-goals h3,
.reader-callout h3,
.reader-video-copy h3,
.reader-related-lesson h3,
.reader-chapter-summary h3 {
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.reader-learning-goals h3 {
  font-size: clamp(28px, 7vw, 38px);
  margin: 7px 0 18px;
}

.reader-learning-goals ul {
  display: grid;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.reader-learning-goals li {
  align-items: flex-start;
  display: grid;
  font-size: 14px;
  gap: 10px;
  grid-template-columns: 22px 1fr;
}

.reader-learning-goals svg {
  fill: none;
  height: 19px;
  stroke: var(--pink-dark);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 19px;
}

.reader-lead {
  color: var(--academy-ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 5.8vw, 29px);
  line-height: 1.42;
  padding: 44px 0 30px;
}

.reader-figure {
  margin-bottom: 42px;
  margin-top: 0;
}

.reader-figure > div {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
}

.reader-figure img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.reader-figure figcaption,
.reader-image-pair figcaption {
  color: var(--academy-muted);
  font-size: 11px;
  line-height: 1.55;
  padding-top: 10px;
}

.reader-figure figcaption span {
  color: var(--pink-dark);
  font-weight: 800;
  margin-right: 8px;
}

.reader-section {
  border-top: 1px solid var(--academy-line);
  padding: 42px 0 32px;
  scroll-margin-top: 96px;
}

.reader-section-heading {
  align-items: start;
  display: grid;
  gap: 15px;
  grid-template-columns: 36px 1fr;
}

.reader-section-heading > span {
  color: #c8b8c0;
  font-size: 11px;
  font-weight: 800;
  padding-top: 5px;
}

.reader-section-heading h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(31px, 8vw, 43px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 4px 0 18px;
}

.reader-section > p {
  color: #564951;
  font-size: 17px;
  line-height: 1.72;
}

.reader-fact-grid {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.reader-fact-grid > div {
  background: #fbf8fa;
  border: 1px solid var(--academy-line);
  padding: 20px;
}

.reader-fact-grid span {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reader-fact-grid ul {
  color: var(--academy-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 13px 0 0;
  padding-left: 19px;
}

.reader-callout {
  border: 1px solid var(--academy-line);
  display: grid;
  gap: 18px;
  grid-template-columns: 62px 1fr;
  margin-bottom: 42px;
  margin-top: 8px;
  padding: 22px 20px;
}

.reader-callout > div:first-child {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: flex;
  font-size: 9px;
  font-weight: 900;
  height: 54px;
  justify-content: center;
  letter-spacing: 0.05em;
  width: 54px;
}

.reader-callout h3 {
  font-size: 25px;
  margin: 0 0 7px;
}

.reader-callout p {
  color: var(--academy-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.reader-callout-tip {
  background: #f3f6e8;
  color: #52622e;
}

.reader-callout-warning {
  background: #fff1f3;
  color: #9b2f4f;
}

.reader-video-block {
  background: #35252f;
  color: white;
  margin-bottom: 44px;
  overflow: hidden;
}

.reader-video-poster {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

.reader-video-poster::after {
  background: rgba(45, 28, 39, 0.32);
  content: "";
  inset: 0;
  position: absolute;
}

.reader-video-poster img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.reader-video-poster button {
  align-items: center;
  background: white;
  border: 0;
  color: var(--pink-dark);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  gap: 7px;
  left: 50%;
  min-height: 76px;
  min-width: 112px;
  padding: 12px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.reader-video-poster button svg {
  fill: currentColor;
  height: 28px;
  width: 28px;
}

.reader-video-copy {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.reader-video-copy .eyebrow {
  color: #f5bfd3;
}

.reader-video-copy h3 {
  font-size: 28px;
  margin: 6px 0 0;
}

.reader-video-copy > p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.reader-image-pair {
  display: grid;
  gap: 12px;
  margin-bottom: 42px;
}

.reader-image-pair figure {
  margin: 0;
}

.reader-image-pair img {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.reader-related-lesson {
  align-items: center;
  background:
    radial-gradient(circle at 100% 0%, rgba(203, 188, 228, 0.62), transparent 45%),
    #fff7fa;
  display: grid;
  gap: 20px;
  margin-bottom: 44px;
  padding: 28px 22px;
}

.reader-related-lesson h3 {
  font-size: 30px;
  margin: 6px 0 10px;
}

.reader-related-lesson p:not(.eyebrow) {
  color: var(--academy-muted);
  font-size: 14px;
  line-height: 1.6;
}

.reader-related-lesson > a {
  align-items: center;
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  gap: 12px;
  min-height: 44px;
  width: fit-content;
}

.reader-chapter-summary {
  background: var(--academy-ink);
  color: white;
  margin-left: -20px;
  margin-right: -20px;
  max-width: none;
  padding: 34px 20px 38px;
  scroll-margin-top: 96px;
}

.reader-chapter-summary .eyebrow {
  color: #f5bfd3;
}

.reader-chapter-summary h3 {
  font-size: clamp(31px, 8vw, 44px);
  margin: 8px 0 24px;
  max-width: 640px;
}

.reader-chapter-summary ol {
  list-style: none;
  margin: 0;
  max-width: 640px;
  padding: 0;
}

.reader-chapter-summary li {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.82);
  display: grid;
  font-size: 14px;
  gap: 14px;
  grid-template-columns: 32px 1fr;
  min-height: 64px;
  padding: 10px 0;
}

.reader-chapter-summary li span {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  display: flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.reader-summary-actions {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.reader-summary-actions .button {
  width: 100%;
}

.reader-summary-actions .button-secondary {
  border-color: rgba(255, 255, 255, 0.45);
  color: white;
}

.reader-summary-actions .button-secondary:hover {
  background: white;
  color: var(--academy-ink);
}

@media (min-width: 680px) {
  .reader-actions,
  .reader-summary-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
  }

  .reader-actions .button,
  .reader-save-button,
  .reader-summary-actions .button {
    width: auto;
  }

  .reader-fact-grid,
  .reader-image-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reader-video-copy,
  .reader-related-lesson {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr);
  }
}

@media (min-width: 860px) {
  .reader-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.75fr);
  }

  .reader-hero-copy {
    padding: 46px 42px;
  }

  .reader-cover {
    aspect-ratio: auto;
    min-height: 480px;
  }

  .reader-overall-progress {
    grid-column: 1 / -1;
  }

  .reader-article {
    padding: 54px clamp(32px, 6vw, 72px) 0;
  }

  .reader-chapter-summary {
    margin-left: clamp(-72px, -6vw, -32px);
    margin-right: clamp(-72px, -6vw, -32px);
    padding: 48px clamp(32px, 6vw, 72px) 54px;
  }
}

@media (min-width: 1080px) {
  .study-reader-page {
    padding: 42px clamp(24px, 3vw, 52px) 110px;
  }
}

@media (min-width: 1280px) {
  .reader-mobile-chapters {
    display: none;
  }

  .reader-layout {
    align-items: start;
    gap: 20px;
    grid-template-columns: 220px minmax(0, 780px);
    justify-content: center;
  }

  .reader-chapter-nav {
    background: white;
    border: 1px solid var(--academy-line);
    display: block;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    position: sticky;
    top: 94px;
  }

  .reader-aside-heading {
    border-bottom: 1px solid var(--academy-line);
    padding: 18px;
  }

  .reader-aside-heading .eyebrow {
    margin-bottom: 5px;
  }

  .reader-aside-heading > strong {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
  }

  .reader-chapter-nav nav {
    display: grid;
  }

  .reader-chapter-nav nav a {
    align-items: start;
    border-bottom: 1px solid var(--academy-line);
    color: var(--academy-muted);
    display: grid;
    gap: 10px;
    grid-template-columns: 27px 1fr;
    min-height: 63px;
    padding: 12px 14px;
    transition:
      background-color 180ms ease,
      color 180ms ease;
  }

  .reader-chapter-nav nav a:hover,
  .reader-chapter-nav nav a.is-current {
    background: #fff0f5;
    color: var(--pink-dark);
  }

  .reader-chapter-nav nav a.is-current {
    box-shadow: inset 3px 0 var(--pink);
  }

  .reader-chapter-nav nav a > span {
    font-size: 10px;
    font-weight: 800;
    padding-top: 2px;
  }

  .reader-chapter-nav nav strong {
    display: block;
    font-size: 11px;
    line-height: 1.35;
  }

  .reader-chapter-nav nav small {
    display: block;
    font-size: 9px;
    margin-top: 3px;
  }

  .reader-back-link {
    color: var(--pink-dark);
    display: block;
    font-size: 10px;
    font-weight: 800;
    min-height: 48px;
    padding: 15px 17px;
  }
}

@media (min-width: 1500px) {
  .reader-layout {
    grid-template-columns: 220px minmax(0, 780px) 210px;
  }

  .reader-tools {
    display: grid;
    gap: 14px;
    position: sticky;
    top: 94px;
  }

  .reader-tools > section {
    background: white;
    border: 1px solid var(--academy-line);
    padding: 18px;
  }

  .reader-tools nav {
    display: grid;
  }

  .reader-tools nav a {
    border-left: 1px solid var(--academy-line);
    color: var(--academy-muted);
    font-size: 11px;
    min-height: 38px;
    padding: 10px 0 8px 13px;
  }

  .reader-tools nav a.is-active {
    border-left: 2px solid var(--pink);
    color: var(--pink-dark);
    font-weight: 800;
  }

  .reader-note-card label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 9px;
  }

  .reader-note-card textarea {
    background: #fbf8fa;
    border: 1px solid var(--academy-line);
    color: var(--academy-ink);
    font: inherit;
    font-size: 12px;
    line-height: 1.5;
    min-height: 116px;
    padding: 10px;
    resize: vertical;
    width: 100%;
  }

  .reader-note-card textarea:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(164, 50, 97, 0.12);
    outline: none;
  }

  .reader-note-card button {
    background: var(--pink-dark);
    border: 0;
    color: white;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    margin-top: 8px;
    min-height: 44px;
    width: 100%;
  }

  .reader-note-card small {
    color: var(--academy-muted);
    display: block;
    font-size: 9px;
    line-height: 1.4;
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reader-skip-link,
  .reader-save-button,
  .reader-chapter-nav nav a {
    scroll-behavior: auto;
    transition: none;
  }
}

.locked-page {
  margin: 0 auto;
  max-width: 1320px;
  padding: 34px 18px 90px;
}

.locked-hero {
  background: white;
  border: 1px solid var(--academy-line);
  display: grid;
  overflow: hidden;
}

.locked-preview {
  min-height: 360px;
  overflow: hidden;
  position: relative;
}

.locked-preview > img {
  filter: saturate(0.7);
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.locked-preview-overlay {
  align-items: center;
  background: linear-gradient(180deg, rgba(44, 28, 38, 0.18), rgba(44, 28, 38, 0.76));
  color: white;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: center;
  padding: 28px;
  position: absolute;
  text-align: center;
}

.lock-mark {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: var(--pink-dark);
  display: flex;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px;
  height: 66px;
  justify-content: center;
  margin-bottom: 14px;
  transform: rotate(45deg);
  width: 66px;
}

.locked-preview-overlay strong {
  font-size: 16px;
}

.locked-copy {
  padding: 30px 22px;
}

.locked-copy h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(38px, 9vw, 60px);
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 10px 0 18px;
}

.locked-copy > p:not(.eyebrow) {
  color: var(--academy-muted);
  font-size: 16px;
  line-height: 1.6;
}

.access-comparison {
  display: grid;
  gap: 8px;
  margin: 26px 0;
}

.access-comparison > div {
  background: #f8f4f6;
  border: 1px solid var(--academy-line);
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.access-comparison > div.is-unlock {
  background: #fff0f5;
  border-color: rgba(164, 50, 97, 0.34);
}

.access-comparison span {
  color: var(--academy-muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.access-comparison strong {
  font-size: 17px;
  margin-top: 5px;
}

.access-comparison small {
  color: var(--academy-muted);
  font-size: 11px;
  margin-top: 3px;
}

.locked-copy .button {
  width: 100%;
}

.locked-back-link {
  color: var(--pink-dark);
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-top: 16px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.unlock-benefits {
  padding: 68px 0;
}

.unlock-grid {
  display: grid;
  gap: 12px;
}

.unlock-grid article {
  background: white;
  border: 1px solid var(--academy-line);
  min-height: 190px;
  padding: 24px;
}

.unlock-grid article > span {
  color: var(--pink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 23px;
  font-style: italic;
}

.unlock-grid h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  margin: 14px 0 9px;
}

.unlock-grid p {
  color: var(--academy-muted);
  font-size: 13px;
  line-height: 1.55;
}

.locked-help {
  align-items: center;
  background:
    radial-gradient(circle at 100% 0%, rgba(229, 238, 198, 0.78), transparent 40%),
    var(--lavender-soft);
  display: grid;
  gap: 24px;
  padding: 30px 22px;
}

.locked-help h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px;
  margin: 8px 0 12px;
}

.locked-help > div > p:last-child {
  color: var(--academy-muted);
  font-size: 14px;
  line-height: 1.6;
}

.locked-help .button {
  width: 100%;
}

.course-status.is-locked {
  background: #fff0f5;
  border: 1px solid rgba(164, 50, 97, 0.24);
  padding: 5px 7px;
}

/* Monthly campaign */
.campaign-page {
  background: #fffdfb;
}

.campaign-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(232, 199, 213, 0.65), transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(229, 238, 198, 0.74), transparent 36%),
    #fff8f4;
  display: grid;
  gap: 46px;
  padding: 72px 20px 84px;
}

.campaign-date {
  border: 1px solid rgba(164, 50, 97, 0.35);
  color: var(--pink-dark);
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 22px;
  padding: 9px 11px;
}

.campaign-copy h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(54px, 15vw, 92px);
  letter-spacing: -0.06em;
  line-height: 0.94;
  margin: 12px 0 22px;
}

.campaign-copy h1 em {
  color: var(--pink-dark);
  display: block;
  font-weight: 500;
}

.campaign-copy > p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

.campaign-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}

.campaign-hero-actions .button {
  width: 100%;
}

.campaign-hero-actions > span {
  color: var(--ink-soft);
  font-size: 11px;
  text-align: center;
}

.campaign-visual {
  margin: 0 auto;
  max-width: 520px;
  min-height: 510px;
  overflow: visible;
  position: relative;
  width: 100%;
}

.campaign-visual > img {
  height: 100%;
  object-fit: cover;
  width: calc(100% - 28px);
}

.campaign-stamp {
  align-items: center;
  aspect-ratio: 1;
  background: var(--pink-dark);
  border: 8px solid #fff8f4;
  border-radius: 50%;
  bottom: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 155px;
  padding: 20px;
  position: absolute;
  right: -4px;
  text-align: center;
}

.campaign-stamp strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 52px;
  line-height: 0.9;
}

.campaign-stamp span {
  font-size: 10px;
  line-height: 1.25;
  margin-top: 7px;
  text-transform: uppercase;
}

.campaign-problem,
.campaign-included,
.campaign-offer {
  display: grid;
  gap: 34px;
  padding: 76px 20px;
}

.campaign-problem h2,
.campaign-included h2,
.campaign-offer h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(38px, 9vw, 60px);
  letter-spacing: -0.045em;
  line-height: 1.03;
  margin: 8px 0 0;
}

.campaign-problem-list {
  display: grid;
}

.campaign-problem-list p {
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  padding: 18px 0 18px 34px;
  position: relative;
}

.campaign-problem-list p::before {
  color: var(--pink);
  content: "×";
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  left: 2px;
  position: absolute;
  top: 11px;
}

.campaign-roadmap {
  background: var(--rose-mist);
  padding: 82px 20px;
}

.campaign-roadmap ol {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0 auto;
  max-width: 1120px;
  padding: 0;
}

.campaign-roadmap li {
  background: white;
  border: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: 44px 1fr;
  padding: 22px;
}

.campaign-roadmap li > span {
  color: var(--pink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-style: italic;
}

.campaign-roadmap small {
  color: var(--pink-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.campaign-roadmap h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  margin: 5px 0 7px;
}

.campaign-roadmap p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.campaign-included {
  background:
    radial-gradient(circle at 0% 100%, rgba(203, 188, 228, 0.58), transparent 38%),
    #fffafc;
}

.campaign-included-copy > p:last-child,
.campaign-offer-copy > p:last-of-type {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.campaign-included-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}

.campaign-included-grid article {
  background: white;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 145px;
  padding: 20px;
}

.campaign-included-grid strong {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 35px;
}

.campaign-included-grid span {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
  margin-top: auto;
}

.campaign-offer {
  align-items: center;
  background: var(--cream);
}

.campaign-pricing-link {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}

.campaign-price-card {
  background: white;
  border: 2px solid var(--pink);
  box-shadow: 0 24px 70px rgba(100, 48, 75, 0.13);
  padding: 28px 22px;
}

.campaign-price-card > span {
  color: var(--pink-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.campaign-price {
  align-items: baseline;
  display: flex;
  gap: 8px;
  margin: 20px 0;
}

.campaign-price strong {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 58px;
  letter-spacing: -0.05em;
}

.campaign-price small {
  color: var(--ink-soft);
}

.campaign-price-card ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.campaign-price-card li {
  border-bottom: 1px solid var(--line);
  padding: 11px 0 11px 27px;
  position: relative;
}

.campaign-price-card li::before {
  color: var(--pink);
  content: "✓";
  font-weight: 800;
  left: 2px;
  position: absolute;
}

.campaign-price-card .button {
  width: 100%;
}

.campaign-price-card > small {
  color: var(--ink-soft);
  display: block;
  font-size: 10px;
  line-height: 1.45;
  margin-top: 12px;
  text-align: center;
}

.campaign-honesty {
  background: var(--lavender-soft);
  padding: 28px 20px;
  text-align: center;
}

.campaign-honesty p {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  line-height: 1.45;
  margin: 0 auto;
  max-width: 850px;
}

@media (min-width: 760px) {
  .locked-page {
    padding: 48px clamp(30px, 4vw, 68px) 100px;
  }

  .locked-hero {
    align-items: stretch;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .locked-preview {
    min-height: 660px;
  }

  .locked-copy {
    align-self: center;
    padding: clamp(42px, 6vw, 82px);
  }

  .access-comparison {
    grid-template-columns: repeat(2, 1fr);
  }

  .locked-copy .button,
  .locked-help .button {
    width: auto;
  }

  .locked-back-link {
    text-align: left;
  }

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

  .locked-help {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 42px;
  }

  .campaign-hero,
  .campaign-problem,
  .campaign-included,
  .campaign-offer {
    gap: clamp(56px, 8vw, 110px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    padding: 100px clamp(40px, 8vw, 130px);
  }

  .campaign-hero {
    align-items: center;
    min-height: 720px;
  }

  .campaign-hero-actions {
    align-items: center;
    flex-direction: row;
  }

  .campaign-hero-actions .button {
    width: auto;
  }

  .campaign-hero-actions > span {
    text-align: left;
  }

  .campaign-problem {
    align-items: center;
  }

  .campaign-roadmap {
    padding: 110px clamp(40px, 8vw, 130px);
  }

  .campaign-roadmap ol {
    grid-template-columns: repeat(4, 1fr);
  }

  .campaign-roadmap li {
    grid-template-columns: 1fr;
    min-height: 250px;
  }

  .campaign-included {
    align-items: center;
  }

  .campaign-included-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .campaign-price-card {
    padding: 38px;
  }
}

@media (min-width: 1080px) {
  .pricing-hero h1 {
    font-size: clamp(62px, 5.8vw, 88px);
  }

  .pricing-hero-panel {
    padding: 38px;
  }

  .plan-card.is-featured {
    transform: translateY(-12px);
  }
}

/* Personal course product pages */
.course-detail-page {
  background: var(--white);
}

.breadcrumbs {
  align-items: center;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 8px;
  margin: 0 auto;
  max-width: 1260px;
  padding: 22px 20px;
}

.breadcrumbs a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
}

.course-product-hero {
  display: grid;
  gap: 34px;
  padding: 12px 20px 76px;
}

/* Obálka kurzu sa nesmie orezať. Pri fotke nechtov by orez vzal len kus
   ruky, ale pri seminároch DNKa' je to grafika s logom a názvom — orezaná
   stráca práve to, čo má povedať. Obrázok si preto drží vlastný pomer strán
   a rámček sa prispôsobí jemu, nie naopak. */
.course-product-image {
  overflow: hidden;
  position: relative;
}

.course-product-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.course-level {
  background: rgba(255, 252, 253, 0.94);
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
  left: 14px;
  letter-spacing: 0.1em;
  padding: 10px 12px;
  position: absolute;
  top: 14px;
}

/* Hlavička predajnej stránky mala tri serify nad sebou: názov, podnadpis aj
   perex. Na mobile z toho bol jeden tmavý blok cez celú obrazovku, ktorý sa
   nedal preletieť očami. Serif si preto necháva len názov — je to jediný
   dekoratívny prvok hlavičky. Podnadpis prechádza do Archiva (rovnako ako
   názvy kurzov v akadémii, issue #70), takže medzi názvom a čítaným textom
   vznikne kontrast namiesto ďalšej vrstvy toho istého. */
.course-product-copy h1 {
  font-family: "Playfair Display", Georgia, serif;
  /* 14vw dávalo na 375 px riadok, do ktorého sa zmestili dve slabiky.
     Menší základ = menej riadkov a názov sa prečíta naraz. */
  font-size: clamp(38px, 9.4vw, 84px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 8px 0 14px;
  text-wrap: balance;
}

/* Perex sa na zvyšku webu (hero cenníka, hlavičky sekcií) píše ako obyčajný
   odstavec: základné písmo, 16–18 px, tlmená farba, bez zosilneného rezu.
   Detail kurzu z neho robil druhý nadpis — preto ho vraciam do toho istého
   vzoru. Hierarchiu nesie názov nad ním, perex ju už opakovať nemusí. */
.course-subtitle {
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 58ch;
  text-wrap: pretty;
}

.course-intro {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.7;
  max-width: 62ch;
  text-wrap: pretty;
}

.course-quick-facts {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0;
  margin: 28px 0;
}

.course-quick-facts > div {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 14px 0;
}

.course-quick-facts > div:last-child {
  border-bottom: 0;
}

.course-quick-facts strong {
  color: var(--ink);
  font-size: 18px;
}

.course-quick-facts span {
  color: var(--ink-soft);
  font-size: 12px;
}

.course-hero-cta {
  width: 100%;
}

.course-learning-section,
.course-day-section,
.course-fit-section,
.course-practical-section,
.enrollment-section {
  padding: 76px 20px;
}

.course-learning-section {
  background:
    radial-gradient(circle at 100% 100%, rgba(203, 188, 228, 0.46), transparent 36%),
    var(--rose-mist);
  display: grid;
  gap: 40px;
}

.course-learning-copy h2,
.fit-card h2,
.enrollment-copy h2,
.audit-page h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(36px, 9vw, 58px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.06;
  margin: 10px 0 18px;
}

.course-learning-copy > p:last-child {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.course-outcomes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.course-outcomes li {
  align-items: flex-start;
  border-bottom: 1px solid rgba(97, 54, 78, 0.16);
  display: grid;
  gap: 14px;
  grid-template-columns: 42px 1fr;
  padding: 18px 0;
}

.course-outcomes li:first-child {
  padding-top: 0;
}

.course-outcomes span {
  color: var(--pink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-style: italic;
}

.course-outcomes p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}

.course-day-grid {
  display: grid;
  gap: 12px;
  margin: 0 auto;
  max-width: 1120px;
}

.course-day-grid article {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: 24px;
}

.course-day-grid span,
.cart-label {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.course-day-grid h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  margin: 8px 0 10px;
}

.course-day-grid p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.course-fit-section {
  display: grid;
  gap: 14px;
}

.fit-card {
  background: var(--lavender-soft);
  padding: 30px 24px;
}

.fit-card.is-for {
  background:
    radial-gradient(circle at 100% 0%, rgba(229, 238, 198, 0.82), transparent 44%),
    var(--rose-mist);
}

.fit-card p:last-of-type {
  color: var(--ink-soft);
  line-height: 1.65;
}

.fit-card a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  display: inline-block;
  font-weight: 700;
  margin-top: 10px;
}

.course-practical-section {
  background: var(--rose-mist);
}

.practical-grid {
  display: grid;
  gap: 10px;
  margin: 0 auto;
  max-width: 1000px;
}

.practical-grid > div {
  background: white;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.practical-grid span {
  color: var(--pink-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.practical-grid strong {
  font-size: 17px;
  margin-top: 6px;
}

.practical-note {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.6;
  margin: 18px auto 0;
  max-width: 1000px;
}

.enrollment-section {
  background:
    radial-gradient(circle at 0% 100%, rgba(228, 132, 126, 0.2), transparent 34%),
    linear-gradient(145deg, #fff8fa, #f5f0fb);
  display: grid;
  gap: 34px;
}

.enrollment-copy > p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.date-ticket {
  align-items: flex-start;
  background: white;
  border-left: 4px solid var(--pink);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding: 18px;
}

.date-ticket time {
  display: flex;
  flex-direction: column;
}

.date-ticket time strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
}

.date-ticket time span {
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 4px;
}

.availability-dot {
  color: #386b4a;
  font-size: 12px;
  font-weight: 800;
}

.availability-dot::before {
  background: #5eb879;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 8px;
  margin-right: 7px;
  width: 8px;
}

.course-cart {
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 24px 65px rgba(99, 51, 76, 0.12);
  display: grid;
  gap: 12px;
  padding: 28px 22px;
}

.course-cart h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  margin: 0 0 8px;
}

.cart-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}

.cart-row span {
  color: var(--ink-soft);
  font-size: 14px;
}

.cart-row strong {
  font-size: 18px;
}

.course-cart label,
.audit-form label,
.audit-form legend {
  font-size: 13px;
  font-weight: 700;
}

.course-cart input,
.course-cart select,
.audit-form input {
  background: white;
  border: 1px solid #cdbfc6;
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  min-height: 48px;
  padding: 11px 13px;
  width: 100%;
}

.course-cart input:focus,
.course-cart select:focus,
.audit-form input:focus {
  border-color: var(--pink-dark);
  box-shadow: 0 0 0 3px rgba(164, 50, 97, 0.14);
  outline: none;
}

.course-cart .button {
  margin-top: 8px;
  width: 100%;
}

.course-cart small {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.waitlist-enrollment {
  background:
    radial-gradient(circle at 100% 0%, rgba(203, 188, 228, 0.56), transparent 35%),
    var(--cream);
}

/* New lead-magnet page */
.audit-page {
  background: var(--white);
}

.audit-hero {
  background:
    radial-gradient(circle at 0% 0%, rgba(232, 199, 213, 0.62), transparent 35%),
    radial-gradient(circle at 100% 100%, rgba(229, 238, 198, 0.72), transparent 36%),
    var(--cream);
  display: grid;
  gap: 46px;
  padding: 70px 20px 82px;
}

.audit-hero-copy h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(48px, 13vw, 80px);
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin: 12px 0 22px;
}

.audit-hero-copy h1 em {
  color: var(--pink-dark);
  display: block;
  font-weight: 500;
}

.audit-hero-copy > p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.6;
}

.audit-benefits {
  list-style: none;
  margin: 26px 0;
  padding: 0;
}

.audit-benefits li {
  padding: 8px 0 8px 28px;
  position: relative;
}

.audit-benefits li::before {
  color: var(--pink);
  content: "✓";
  font-weight: 800;
  left: 2px;
  position: absolute;
}

.audit-hero-copy .button {
  width: 100%;
}

.audit-hero-copy > small {
  color: var(--ink-soft);
  display: block;
  font-size: 11px;
  margin-top: 10px;
  text-align: center;
}

.audit-preview {
  margin: 0 auto;
  max-width: 480px;
  width: 100%;
}

.audit-cover {
  aspect-ratio: 0.78;
  background:
    linear-gradient(rgba(255, 252, 253, 0.88), rgba(255, 252, 253, 0.88)),
    url("/images/bymishel/start-base-cover.png") center / cover;
  border: 1px solid rgba(128, 74, 101, 0.18);
  box-shadow: 0 28px 75px rgba(97, 49, 74, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 330px;
  padding: 30px;
}

.audit-cover > span {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.audit-cover > strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 48px;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.audit-cover > p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

.cover-lines {
  display: grid;
  gap: 8px;
}

.cover-lines i {
  background: linear-gradient(90deg, var(--pink), rgba(164, 50, 97, 0.12));
  display: block;
  height: 3px;
}

.cover-lines i:nth-child(2) {
  width: 90%;
}

.cover-lines i:nth-child(3) {
  width: 80%;
}

.cover-lines i:nth-child(4) {
  width: 70%;
}

.cover-lines i:nth-child(5) {
  width: 60%;
}

.member-pass {
  align-items: center;
  background: var(--pink-dark);
  box-shadow: 0 18px 48px rgba(92, 34, 64, 0.22);
  color: white;
  display: grid;
  gap: 14px;
  grid-template-columns: 36px 1fr;
  margin: -24px 0 0 auto;
  max-width: 320px;
  padding: 18px;
  position: relative;
}

.member-pass > span {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 36px;
}

.member-pass strong {
  display: block;
  font-size: 14px;
}

.member-pass p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.audit-why,
.audit-form-section {
  padding: 82px 20px;
}

.audit-point-grid {
  display: grid;
  gap: 10px;
  margin: 0 auto;
  max-width: 1120px;
}

.audit-point-grid article {
  border: 1px solid var(--line);
  min-height: 190px;
  padding: 22px;
}

.audit-point-grid article > span {
  color: var(--pink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-style: italic;
}

.audit-point-grid h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  margin: 12px 0 8px;
}

.audit-point-grid p {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.audit-member-preview {
  background: var(--lavender-soft);
  display: grid;
  gap: 34px;
  padding: 76px 20px;
}

.member-preview-image {
  min-height: 410px;
  overflow: hidden;
  position: relative;
}

.member-preview-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.member-preview-image > span {
  background: var(--pink-dark);
  bottom: 14px;
  color: white;
  font-size: 10px;
  font-weight: 800;
  left: 14px;
  letter-spacing: 0.1em;
  padding: 10px 12px;
  position: absolute;
}

.audit-member-preview > div:last-child > p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.member-preview-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.member-preview-facts span {
  background: white;
  border: 1px solid rgba(128, 74, 101, 0.15);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 12px;
}

.audit-form-section {
  background:
    radial-gradient(circle at 100% 100%, rgba(228, 132, 126, 0.2), transparent 35%),
    var(--rose-mist);
  display: grid;
  gap: 36px;
}

.audit-form-copy > p:last-child {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

.audit-form,
.audit-success {
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 24px 65px rgba(99, 51, 76, 0.12);
  padding: 26px 20px;
}

.audit-form fieldset {
  border: 0;
  margin: 0 0 24px;
  padding: 0;
}

.audit-form legend {
  margin-bottom: 12px;
}

.audit-form fieldset label {
  align-items: center;
  border: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 22px 1fr;
  margin-bottom: 8px;
  min-height: 54px;
  padding: 12px;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}

.audit-form fieldset label:has(input:checked) {
  background: var(--rose-mist);
  border-color: var(--pink);
}

.audit-form input[type="radio"],
.audit-form input[type="checkbox"] {
  accent-color: var(--pink-dark);
  min-height: 18px;
  padding: 0;
  width: 18px;
}

.audit-form-row {
  display: grid;
  gap: 14px;
}

.audit-form-row > div {
  display: grid;
  gap: 6px;
}

.consent-label {
  align-items: flex-start;
  color: var(--ink-soft);
  display: grid;
  font-size: 11px !important;
  font-weight: 400 !important;
  gap: 9px;
  grid-template-columns: 20px 1fr;
  line-height: 1.45;
  margin: 18px 0;
}

.audit-form .button {
  width: 100%;
}

.audit-form > small {
  color: var(--ink-soft);
  display: block;
  font-size: 11px;
  margin-top: 10px;
  text-align: center;
}

.audit-success {
  align-self: center;
  text-align: center;
}

.audit-success > span {
  align-items: center;
  background: var(--pink);
  border-radius: 50%;
  color: white;
  display: flex;
  font-size: 28px;
  height: 58px;
  justify-content: center;
  margin: 0 auto 18px;
  width: 58px;
}

.audit-success h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
}

.audit-success p {
  color: var(--ink-soft);
  line-height: 1.6;
}

.audit-success button {
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

/* Kalkulačka — premium editorial lead magnet */
.calculator-page {
  background: var(--white);
  overflow: hidden;
}

.calculator-page h2,
.calculator-page h3 {
  font-family: "Playfair Display", Georgia, serif;
}

.calculator-hero {
  background:
    radial-gradient(circle at 8% 12%, rgba(229, 238, 198, 0.84), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(203, 188, 228, 0.62), transparent 34%),
    linear-gradient(145deg, var(--cream), var(--rose-mist));
  display: grid;
  gap: 44px;
  min-height: calc(100dvh - 70px);
  padding: 58px 20px 76px;
}

.calculator-hero-copy {
  align-self: center;
  position: relative;
  z-index: 2;
}

.calculator-hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(49px, 13vw, 90px);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.95;
  margin: 13px 0 24px;
  max-width: 800px;
}

.calculator-hero h1 em {
  color: var(--pink-dark);
  display: block;
  font-weight: 500;
}

.calculator-hero-question {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.6;
  max-width: 650px;
}

.calculator-hero .button {
  margin-top: 16px;
  width: 100%;
}

.calculator-hero-note {
  border-left: 2px solid var(--pink);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
  margin: 16px 0 0;
  padding-left: 12px;
}

.calculator-hero-visual {
  margin: 0 auto;
  max-width: 600px;
  padding-bottom: 54px;
  position: relative;
  width: 100%;
}

.calculator-portrait {
  aspect-ratio: 16 / 10;
  border-radius: 220px 220px 12px 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.calculator-portrait img {
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
  width: 100%;
}

.calculator-floating-card {
  background: rgba(255, 252, 253, 0.96);
  bottom: 0;
  box-shadow: 0 18px 55px rgba(97, 49, 74, 0.18);
  max-width: 250px;
  padding: 17px 19px;
  position: absolute;
  right: -8px;
}

.calculator-floating-card span,
.calculator-story-callout > span,
.calculator-side-image span {
  color: var(--pink-dark);
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.calculator-floating-card strong {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  line-height: 1.1;
  margin-top: 4px;
}

.calculator-floating-card p {
  color: var(--ink-soft);
  font-size: 12px;
  margin: 5px 0 0;
}

.calculator-story,
.calculator-preparation,
.calculator-tool-section,
.calculator-next-step {
  padding: 78px 20px;
}

.calculator-story {
  display: grid;
  gap: 34px;
}

.calculator-story-heading h2,
.calculator-section-heading h2,
.calculator-tool-intro h2 {
  font-size: clamp(39px, 9vw, 64px);
  letter-spacing: -0.045em;
  line-height: 1.04;
  margin: 9px 0 18px;
}

.calculator-story-copy p,
.calculator-story-callout p,
.calculator-section-heading > p,
.calculator-practice-copy > p:not(.eyebrow),
.calculator-tool-intro > p,
.calculator-next-step .calculator-section-heading > p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.72;
}

.calculator-story-copy p:first-child::first-letter {
  color: var(--pink-dark);
  float: left;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 72px;
  line-height: 0.8;
  padding: 9px 8px 0 0;
}

.calculator-story-callout {
  background:
    radial-gradient(circle at 100% 0%, rgba(229, 238, 198, 0.9), transparent 45%),
    var(--lavender-soft);
  padding: 28px 24px;
}

.calculator-story-callout h3 {
  font-size: 30px;
  line-height: 1.12;
  margin: 10px 0 13px;
}

.calculator-preparation {
  background: var(--rose-mist);
}

.calculator-section-heading {
  margin: 0 auto 38px;
  max-width: 860px;
  text-align: center;
}

.calculator-step-grid {
  display: grid;
  gap: 11px;
  margin: 0 auto;
  max-width: 1160px;
}

.calculator-step-grid article {
  background: var(--white);
  border: 1px solid var(--line);
  min-height: 260px;
  padding: 26px 23px;
}

.calculator-step-grid article:nth-child(2) {
  background: var(--lavender-soft);
}

.calculator-step-grid article:nth-child(3) {
  background: #f5f9e8;
}

.calculator-step-grid article > span {
  color: var(--pink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 30px;
  font-style: italic;
}

.calculator-step-grid h3 {
  font-size: 27px;
  line-height: 1.14;
  margin: 18px 0 10px;
}

.calculator-step-grid p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
}

.calculator-practice {
  background: var(--ink);
  color: white;
  display: grid;
  gap: 28px;
  margin: 42px auto 0;
  max-width: 1160px;
  padding: 32px 24px;
}

.calculator-practice h3 {
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.08;
  margin: 10px 0 16px;
}

.calculator-practice-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.74);
}

.calculator-practice .eyebrow {
  color: var(--blush);
}

.calculator-practice blockquote {
  align-self: center;
  background: var(--lime);
  color: var(--ink);
  margin: 0;
  padding: 25px;
}

.calculator-practice blockquote strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
}

.calculator-practice blockquote p {
  color: var(--ink-soft);
  line-height: 1.65;
  margin-bottom: 0;
}

.calculator-tool-section {
  background:
    radial-gradient(circle at 0% 100%, rgba(228, 132, 126, 0.2), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(203, 188, 228, 0.5), transparent 33%),
    linear-gradient(145deg, #fff8fa, #f7f2fb);
  display: grid;
  gap: 36px;
}

.calculator-tool-intro {
  align-self: start;
}

.calculator-side-image {
  display: none;
  margin-top: 34px;
  min-height: 270px;
  overflow: hidden;
  position: relative;
}

.calculator-side-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.calculator-side-image span {
  background: var(--white);
  bottom: 14px;
  left: 14px;
  padding: 10px 12px;
  position: absolute;
}

.calculator-tool {
  background: rgba(255, 252, 253, 0.98);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(99, 51, 76, 0.15);
  display: grid;
  gap: 21px;
  padding: 26px 20px;
}

.currency-switch {
  border: 0;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 5px;
  padding: 0;
}

.currency-switch legend {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}

.currency-switch label {
  cursor: pointer;
  min-height: 50px;
  position: relative;
}

.currency-switch input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.currency-switch span {
  align-items: center;
  border: 1px solid var(--line);
  display: flex;
  font-size: 17px;
  font-weight: 800;
  height: 100%;
  justify-content: center;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.currency-switch input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}

.currency-switch input:focus-visible + span {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

.calculator-field {
  display: grid;
  gap: 7px;
}

.calculator-field > label,
.calculator-label-row label {
  font-size: 13px;
  font-weight: 800;
}

.calculator-label-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.calculator-label-row button {
  align-items: center;
  background: var(--lavender-soft);
  border: 1px solid rgba(97, 54, 78, 0.18);
  border-radius: 50%;
  color: var(--pink-dark);
  cursor: pointer;
  display: flex;
  flex: 0 0 44px;
  font: inherit;
  font-weight: 800;
  height: 44px;
  justify-content: center;
  transition:
    background 180ms ease,
    color 180ms ease;
}

.calculator-label-row button:hover,
.calculator-label-row button[aria-expanded="true"] {
  background: var(--pink-dark);
  color: white;
}

.calculator-help {
  background: var(--cream);
  border-left: 3px solid var(--pink);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  padding: 10px 12px;
}

.calculator-input-wrap {
  position: relative;
}

.calculator-input-wrap input {
  appearance: textfield;
  background: white;
  border: 1px solid #bcaeb6;
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  min-height: 56px;
  padding: 12px 64px 12px 14px;
  width: 100%;
}

.calculator-input-wrap input::-webkit-inner-spin-button,
.calculator-input-wrap input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.calculator-input-wrap input:focus {
  border-color: var(--pink-dark);
  box-shadow: 0 0 0 3px rgba(164, 50, 97, 0.14);
  outline: none;
}

.calculator-input-wrap > span {
  color: var(--pink-dark);
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.calculator-error {
  background: #fff0f0;
  border-left: 3px solid var(--destructive, #a82828);
  color: #812323;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  padding: 11px 12px;
}

.calculator-tool > .button {
  border: 0;
  width: 100%;
}

.calculator-result {
  background: var(--cream);
  border-top: 3px solid var(--pink);
  min-height: 150px;
  padding: 22px;
  transition:
    background 240ms ease,
    color 240ms ease;
}

.calculator-result > span {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.calculator-result p {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 25px;
  line-height: 1.2;
  margin: 10px 0 9px;
}

.calculator-result strong {
  display: block;
  font-size: clamp(38px, 10vw, 58px);
  margin-top: 4px;
}

.calculator-result small {
  color: var(--ink-soft);
  display: block;
  line-height: 1.45;
}

.calculator-result.is-visible {
  background: var(--gradient-rich);
  color: white;
}

.calculator-result.is-visible > span,
.calculator-result.is-visible small {
  color: rgba(255, 255, 255, 0.78);
}

.calculator-next-step {
  background: var(--cream);
}

.calculator-next-step .calculator-section-heading {
  max-width: 920px;
}

.calculator-next-step .calculator-section-heading > strong {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  margin-top: 25px;
}

.calculator-path-grid {
  display: grid;
  gap: 12px;
  margin: 0 auto;
  max-width: 1060px;
}

.calculator-path-card {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  display: grid;
  gap: 12px;
  min-height: 220px;
  padding: 28px 24px;
  position: relative;
  transition:
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.calculator-path-card:hover {
  border-color: var(--pink);
  box-shadow: var(--shadow);
}

.calculator-path-card.is-personal {
  background: var(--lavender-soft);
}

.calculator-path-card > span {
  color: var(--pink-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calculator-path-card > strong {
  align-self: end;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px;
  line-height: 1.08;
}

.calculator-path-card > i {
  color: var(--pink);
  font-size: 28px;
  font-style: normal;
  justify-self: end;
}

@media (min-width: 760px) {
  .calculator-hero {
    align-items: center;
    gap: clamp(48px, 7vw, 100px);
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    padding: 62px clamp(40px, 7vw, 120px) 80px;
  }

  .calculator-hero .button {
    width: auto;
  }

  .calculator-story,
  .calculator-tool-section {
    gap: clamp(46px, 7vw, 100px);
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    padding: 110px clamp(40px, 8vw, 130px);
  }

  .calculator-story {
    grid-template-areas:
      "heading copy"
      "callout callout";
  }

  .calculator-story-heading {
    grid-area: heading;
  }

  .calculator-story-copy {
    grid-area: copy;
  }

  .calculator-story-callout {
    grid-area: callout;
    margin: 10px auto 0;
    max-width: 940px;
    padding: 38px 42px;
  }

  .calculator-preparation,
  .calculator-next-step {
    padding: 110px clamp(40px, 8vw, 130px);
  }

  .calculator-step-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .calculator-practice {
    gap: 48px;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
    padding: 44px;
  }

  .calculator-tool-intro {
    position: sticky;
    top: 98px;
  }

  .calculator-side-image {
    display: block;
  }

  .calculator-tool {
    padding: 36px;
  }

  .calculator-path-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .calculator-floating-card {
    bottom: 0;
    right: -28px;
  }

  .calculator-tool {
    padding: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .currency-switch span,
  .calculator-label-row button,
  .calculator-result,
  .calculator-path-card {
    transition: none;
  }
}

.topic-grid article a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 14px;
}

@media (min-width: 760px) {
  .course-product-hero,
  .course-learning-section,
  .course-fit-section,
  .enrollment-section,
  .audit-hero,
  .audit-member-preview,
  .audit-form-section {
    gap: clamp(52px, 7vw, 100px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 90px clamp(40px, 8vw, 130px);
  }

  .course-product-hero {
    align-items: center;
    padding-top: 30px;
  }

  /* Na šírke sa obrázok nesmie natiahnuť cez celú výšku okna — zostáva
     celý, len sa zhora zarovná k textu vedľa. */
  .course-product-image {
    align-self: start;
    max-height: 80vh;
  }

  .course-product-image img { max-height: 80vh; object-fit: contain; }

  .course-quick-facts {
    grid-template-columns: repeat(3, 1fr);
  }

  .course-quick-facts > div {
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding: 12px;
  }

  .course-quick-facts > div:first-child {
    padding-left: 0;
  }

  .course-quick-facts > div:last-child {
    border-right: 0;
  }

  .course-hero-cta {
    width: auto;
  }

  .course-learning-section {
    align-items: center;
  }

  .course-day-section,
  .course-practical-section,
  .audit-why {
    padding: 110px clamp(40px, 8vw, 130px);
  }

  .course-day-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .course-fit-section {
    gap: 18px;
  }

  .fit-card {
    padding: 44px;
  }

  .practical-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .enrollment-section {
    align-items: center;
  }

  .date-ticket {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .course-cart,
  .audit-form,
  .audit-success {
    padding: 34px;
  }

  .audit-hero {
    align-items: center;
    min-height: 720px;
  }

  .audit-hero-copy .button {
    width: auto;
  }

  .audit-hero-copy > small {
    text-align: left;
  }

  .audit-point-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .audit-member-preview {
    align-items: center;
  }

  .member-preview-image {
    min-height: 600px;
  }

  .audit-form-section {
    align-items: start;
  }

  .audit-form-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Final Nechtovinky overrides: deliberately last in the cascade */

.blog-page .blog-hero {
  padding: 58px 20px;
}

.blog-page .blog-hero h1 {
  font-size: clamp(42px, 7vw, 70px);
  max-width: 820px;
}

.blog-page .blog-hero > p:last-child {
  max-width: 590px;
}

.blog-page .featured-post {
  gap: 28px;
  margin: 0 auto;
  max-width: 1120px;
  padding: 46px 20px 76px;
}

.blog-page .featured-post img {
  aspect-ratio: 16 / 10;
  border-radius: 2px;
  max-height: 360px;
}

.blog-page .featured-post h2 {
  font-size: clamp(30px, 5vw, 46px);
  margin-bottom: 16px;
}

.blog-page .featured-post .eyebrow {
  margin-bottom: 5px;
}

.blog-page .blog-index {
  margin: 0 auto;
  max-width: 1240px;
  padding: 68px 20px 84px;
}

.blog-page .blog-toolbar {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}

.blog-page .blog-toolbar h2 {
  font-size: clamp(30px, 5vw, 42px);
}

.blog-page .blog-grid {
  gap: 18px;
  margin-top: 28px;
}

.blog-page .blog-grid article {
  border-color: rgba(48, 35, 45, .11);
}

.blog-page .blog-grid article > a {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
}

.blog-page .blog-grid img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 158px;
}

.blog-page .blog-grid article div {
  padding: 17px 16px 18px;
}

.blog-page .blog-grid article div > span {
  display: inline-block;
  margin-right: 8px;
}

.blog-page .blog-grid article small {
  color: var(--ink-soft);
  font-size: 10px;
}

.blog-page .blog-grid h3 {
  font-size: 21px;
  margin: 7px 0 9px;
}

.blog-page .blog-grid p {
  display: none;
}

.blog-page .blog-grid strong {
  display: inline-block;
  margin-top: 8px;
}

.article-page {
  background: #fffefe;
}

.article-page .article-hero {
  padding: 54px 20px 50px;
}

.article-page .article-hero > div {
  margin: 0 auto;
  max-width: 920px;
}

.article-page .article-hero h1 {
  font-size: clamp(38px, 8.4vw, 62px);
  line-height: 1.06;
  margin-bottom: 24px;
  max-width: 900px;
}

.article-page .article-hero > div > p:last-child {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.75;
  max-width: 680px;
}

.article-page .article-hero .eyebrow {
  margin-bottom: 3px;
}

.article-page .article-cover {
  margin: 22px 16px 0;
}

.article-page .article-cover img {
  aspect-ratio: 16 / 9;
  max-height: 560px;
}

.article-page .article-cover figcaption {
  margin: 0 auto;
  max-width: 1000px;
  padding: 10px 0 0;
}

.article-page .article-layout {
  max-width: 1160px;
  padding: 64px 20px 96px;
}

.article-page .article-content {
  max-width: 68ch;
}

.article-page .article-content > p,
.article-page .article-content li {
  color: #554953;
  font-size: 16px;
  line-height: 1.85;
}

.article-page .article-content > p {
  margin-bottom: 24px;
}

.article-page .article-content h2 {
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.18;
  margin-bottom: 18px;
  margin-top: 58px;
  scroll-margin-top: 110px;
}

.article-page .article-content ul {
  display: grid;
  gap: 13px;
  margin: 26px 0 38px;
  padding-left: 22px;
}

.article-page .article-intro {
  font-size: 21px !important;
  line-height: 1.65 !important;
  margin-bottom: 42px !important;
}

.article-page .article-content blockquote {
  background: var(--rose-mist);
  border-left-width: 3px;
  font-size: clamp(21px, 5vw, 27px);
  line-height: 1.45;
  margin: 46px 0;
  padding: 24px 22px;
}

.article-page .article-lesson {
  margin-top: 68px;
  padding: 30px 24px;
}

.article-page .article-lesson h3 {
  font-size: 25px;
  line-height: 1.3;
}

@media (min-width: 760px) {
  .blog-page .blog-hero {
    padding: 76px clamp(40px, 12vw, 190px);
  }

  .blog-page .featured-post {
    grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
    padding-left: 40px;
    padding-right: 40px;
  }

  .blog-page .blog-index {
    padding-left: 40px;
    padding-right: 40px;
  }

  .blog-page .blog-toolbar {
    align-items: flex-end;
  }

  .blog-page .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .blog-page .blog-grid article > a {
    display: block;
  }

  .blog-page .blog-grid img {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
  }

  .blog-page .blog-grid article div {
    padding: 18px 18px 20px;
  }

  .article-page .article-hero {
    padding: 78px clamp(40px, 8vw, 130px) 70px;
  }

  .article-page .article-cover {
    margin: 46px auto 0;
    max-width: 1040px;
    padding: 0 28px;
  }

  .article-page .article-layout {
    gap: 72px;
    grid-template-columns: 180px minmax(0, 68ch);
    justify-content: center;
    padding-bottom: 130px;
    padding-top: 88px;
  }

  .article-page .article-layout > aside {
    border-top: 1px solid var(--line);
    gap: 15px;
    padding-top: 18px;
  }

  .article-page .article-content > p,
  .article-page .article-content li {
    font-size: 17px;
  }

  .article-page .article-content h2 {
    margin-top: 72px;
  }

  .article-page .article-intro {
    font-size: 23px !important;
  }

  .article-page .article-lesson {
    margin-top: 80px;
    padding: 38px;
  }
}

/* Unified public chrome and distraction-free sales chrome */

.marketing-footer .footer-brand {
  align-content: center;
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: .88;
  min-height: 58px;
  width: 150px;
}

.marketing-footer .footer-brand span {
  color: #ffe9f2;
}

.marketing-footer .footer-brand small {
  color: rgba(255, 255, 255, .82);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .24em;
  margin-top: 9px;
}

.sales-focus-header {
  align-items: center;
  background: rgba(255, 252, 253, .96);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 70px;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
  z-index: 70;
  backdrop-filter: blur(14px);
}

.sales-focus-header > span {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
}

.sales-focus-footer {
  align-items: center;
  background: var(--rose-mist);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  gap: 14px;
  padding: 28px 20px;
  /* Lišta s výberom úrovne stojí nad obsahom, tak jej treba uvoľniť miesto —
     inak zakryje posledné riadky pätičky (časté otázky a kontakt). */
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
  text-align: center;
}

.sales-focus-footer p {
  margin: 0;
}

.sales-focus-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
}

.sales-focus-footer a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  font-weight: 700;
  min-height: 28px;
}

/* FAPI checkout concept and payment states */

.purchase-page {
  background:
    radial-gradient(circle at 8% 6%, rgba(229, 238, 198, .7), transparent 22rem),
    radial-gradient(circle at 92% 2%, rgba(203, 188, 228, .54), transparent 25rem),
    linear-gradient(150deg, #fff7fa 0, #fffbf6 42rem, #fffcfd 70rem);
  padding: 42px 0 78px;
}

.purchase-intro,
.purchase-form-shell,
.purchase-help {
  margin-inline: auto;
  width: min(100% - 36px, 820px);
}

.purchase-intro {
  padding: 10px 0 34px;
}

.purchase-intro .eyebrow {
  margin-top: 38px;
}

.purchase-intro h1 {
  font-size: clamp(42px, 10vw, 74px);
  line-height: 1.02;
  max-width: 760px;
}

.purchase-intro h1 em {
  color: var(--pink);
}

.purchase-intro > p:last-of-type {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 680px;
}

.purchase-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.purchase-trust span {
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 8px 12px;
  text-transform: uppercase;
}

.purchase-form-shell {
  background: rgba(255, 252, 253, .94);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(110, 55, 82, .14);
}

.fapi-preview {
  display: grid;
}

.fapi-preview fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.fapi-preview-section {
  border-bottom: 1px solid var(--line) !important;
  padding: 26px 18px 30px !important;
}

.fapi-preview-section legend {
  align-items: center;
  display: flex;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  gap: 12px;
  letter-spacing: -.025em;
  margin-bottom: 20px;
  width: 100%;
}

.fapi-preview-section legend span {
  align-items: center;
  background: var(--blush);
  border-radius: 50%;
  color: var(--pink-dark);
  display: inline-flex;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 10px;
  height: 32px;
  justify-content: center;
  letter-spacing: .08em;
  width: 32px;
}

.fapi-product-choice {
  align-items: flex-start;
  background: white;
  border: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  gap: 11px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  margin-top: 10px;
  min-height: 76px;
  padding: 16px 14px;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.fapi-product-choice.is-selected {
  background: var(--rose-mist);
  border-color: var(--pink);
  box-shadow: inset 3px 0 var(--pink);
}

.fapi-product-choice input,
.fapi-company-toggle input,
.fapi-payment-choice input,
.fapi-preview-consents input {
  accent-color: var(--pink);
  cursor: pointer;
  height: 20px;
  margin: 2px 0 0;
  width: 20px;
}

.fapi-choice-copy,
.fapi-choice-price {
  display: flex;
  flex-direction: column;
}

.fapi-choice-copy strong,
.fapi-payment-choice strong {
  font-size: 14px;
}

.fapi-choice-copy small,
.fapi-choice-price small,
.fapi-payment-choice small {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.45;
  margin-top: 3px;
}

.fapi-choice-price {
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fapi-upsell {
  background: var(--lavender-soft);
  margin-top: 18px;
  padding: 16px 10px 10px;
}

.fapi-upsell > p {
  color: var(--pink-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0 6px 10px;
  text-transform: uppercase;
}

.fapi-field-grid {
  display: grid;
  gap: 14px;
}

.fapi-field {
  color: var(--ink);
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 6px;
}

.fapi-field > span {
  color: var(--pink-dark);
}

.fapi-field input,
.fapi-field select {
  appearance: none;
  background: white;
  border: 1px solid rgba(48, 35, 45, .28);
  border-radius: 0;
  color: var(--ink);
  font-size: 16px;
  min-height: 52px;
  padding: 11px 13px;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.fapi-field input:focus,
.fapi-field select:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(167, 47, 99, .14);
  outline: 0;
}

.fapi-field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 22px,
    calc(100% - 13px) 22px;
  background-repeat: no-repeat;
  background-size: 5px 5px;
}

.fapi-company-toggle {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  margin-top: 18px;
  min-height: 44px;
}

.fapi-payment-choice {
  align-items: flex-start;
  background: var(--rose-mist);
  border: 1px solid var(--pink);
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 22px 1fr;
  min-height: 72px;
  padding: 16px;
}

.fapi-payment-choice > span {
  display: flex;
  flex-direction: column;
}

.fapi-preview-summary {
  background: var(--rose-mist);
  border-bottom: 1px solid var(--line);
  padding: 28px 18px;
}

.fapi-preview-summary > div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.fapi-preview-summary p {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  margin: 0;
}

.fapi-preview-summary button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-height: 44px;
}

.fapi-preview-summary dl {
  margin: 20px 0 0;
}

.fapi-preview-summary dl > div {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
}

.fapi-preview-summary dt {
  color: var(--ink-soft);
  font-size: 13px;
}

.fapi-preview-summary dd {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin: 0;
}

.fapi-preview-summary .fapi-total {
  border-top: 1px solid var(--line);
  margin-top: 9px;
  padding-top: 17px;
}

.fapi-preview-summary .fapi-total dt {
  color: var(--ink);
  font-weight: 700;
}

.fapi-preview-summary .fapi-total dd {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
}

.fapi-preview-summary .fapi-total small {
  color: var(--ink-soft);
  display: block;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 10px;
  text-align: right;
}

.fapi-preview-consents {
  display: grid;
  gap: 14px;
  padding: 24px 18px 18px;
}

.fapi-preview-consents label {
  align-items: flex-start;
  color: var(--ink-soft);
  cursor: pointer;
  display: grid;
  font-size: 12px;
  gap: 11px;
  grid-template-columns: 22px 1fr;
  line-height: 1.5;
}

.fapi-preview-consents a {
  color: var(--pink-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fapi-preview-submit {
  background: var(--pink);
  border: 0;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  font-weight: 700;
  gap: 2px;
  justify-content: center;
  margin: 0 18px;
  min-height: 62px;
  padding: 12px 20px;
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.fapi-preview-submit:hover {
  background: var(--pink-dark);
  box-shadow: 0 14px 32px rgba(134, 33, 73, .22);
}

.fapi-preview-submit:active {
  transform: translateY(1px);
}

.fapi-preview-submit span {
  font-size: 11px;
  font-weight: 500;
  opacity: .9;
}

.fapi-preview-security {
  color: var(--ink-soft);
  font-size: 10px;
  margin: 12px 18px 24px;
  text-align: center;
}

.purchase-help {
  align-items: center;
  background: var(--gradient-pastel);
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding: 24px;
}

.purchase-help-mark {
  align-items: center;
  border: 1px solid var(--pink);
  border-radius: 50%;
  color: var(--pink-dark);
  display: flex;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.purchase-help h2 {
  font-size: 27px;
  margin-bottom: 8px;
}

.purchase-help p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 13px;
  margin: 0;
}

.payment-state-page {
  align-items: center;
  background: linear-gradient(160deg, #fff8fb 0%, #fbf3f8 45%, #f4eefa 100%);
  display: flex;
  justify-content: center;
  min-height: calc(100dvh - 70px);
  overflow: hidden;
  padding: 40px 18px;
  position: relative;
}

/* Farebné rozmazané škvrny za kartou — to je „blur" pozadie nového dizajnu. */
.payment-state-page::before,
.payment-state-page::after {
  border-radius: 50%;
  content: "";
  filter: blur(70px);
  pointer-events: none;
  position: absolute;
}

.payment-state-page::before {
  background: radial-gradient(circle, rgba(242, 122, 174, .55), rgba(242, 122, 174, 0) 70%);
  height: 30rem;
  right: -9rem;
  top: -9rem;
  width: 30rem;
}

.payment-state-page::after {
  background: radial-gradient(circle, rgba(146, 80, 146, .42), rgba(146, 80, 146, 0) 70%);
  bottom: -11rem;
  height: 32rem;
  left: -10rem;
  width: 32rem;
}

.payment-state-page.is-error::before { background: radial-gradient(circle, rgba(238, 143, 120, .5), rgba(238, 143, 120, 0) 70%); }

/* Zrušená objednávka — rovnaká stránka, iný stav (issue #34): chladnejšia levanduľová. */
.payment-state-page.is-cancelled {
  background: linear-gradient(160deg, #f8f6fb 0%, #f3eff8 55%, #fbf6f4 100%);
}

.payment-state-page.is-cancelled::before { background: radial-gradient(circle, rgba(203, 188, 228, .7), rgba(203, 188, 228, 0) 70%); }

.payment-state-card {
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 30px;
  box-shadow: 0 30px 70px -30px rgba(110, 55, 82, .35), 0 0 0 1px rgba(167, 47, 99, .06);
  max-width: 780px;
  padding: 36px 20px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 1;
}

.payment-state-icon {
  align-items: center;
  background: linear-gradient(135deg, #a72f63, #925092);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(167, 47, 99, .1), 0 14px 28px -10px rgba(167, 47, 99, .6);
  color: white;
  display: flex;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 27px;
  font-weight: 700;
  height: 62px;
  justify-content: center;
  margin: 0 auto 24px;
  width: 62px;
}

.is-error .payment-state-icon {
  background: linear-gradient(135deg, #d4506b, #a72f63);
  box-shadow: 0 0 0 8px rgba(212, 80, 107, .12), 0 14px 28px -10px rgba(190, 60, 90, .6);
}

.payment-state-page.is-cancelled .payment-state-icon {
  background: linear-gradient(135deg, #b9a6dc, #8f7bb8);
  box-shadow: 0 0 0 8px rgba(143, 123, 184, .14), 0 14px 28px -10px rgba(143, 123, 184, .6);
  color: #fff;
}

.payment-state-card h1 {
  font-size: clamp(36px, 8vw, 60px);
  line-height: 1.05;
  margin-inline: auto;
  max-width: 680px;
  text-wrap: balance;
}

.payment-state-lead {
  color: var(--ink-soft);
  font-size: 16px;
  margin: 0 auto;
  max-width: 620px;
}

.payment-next-steps {
  display: grid;
  gap: 10px;
  margin: 28px auto;
  max-width: 650px;
  text-align: left;
}

.payment-next-steps article {
  align-items: flex-start;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(167, 47, 99, .1);
  border-radius: 20px;
  display: grid;
  gap: 13px;
  grid-template-columns: 34px 1fr;
  padding: 16px;
}

.payment-next-steps article > span {
  align-items: center;
  background: var(--rose-mist, #f8dce7);
  border-radius: 50%;
  color: var(--pink-dark);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.payment-next-steps article strong {
  font-size: 14px;
}

.payment-next-steps article p {
  color: var(--ink-soft);
  font-size: 12.5px;
  margin: 3px 0 0;
}

.payment-state-card .button {
  border-radius: 999px;
  min-height: 52px;
}

.payment-state-card > .button {
  width: min(100%, 330px);
}

.payment-state-help {
  color: var(--ink-soft);
  font-size: 12.5px;
  margin: 18px 0 0;
}

.payment-state-help a {
  color: var(--pink-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.payment-recovery {
  background: rgba(255, 244, 242, .8);
  border: 1px solid rgba(212, 80, 107, .16);
  border-radius: 22px;
  margin: 28px auto;
  max-width: 610px;
  padding: 22px 24px;
  text-align: left;
}

.payment-recovery h2 {
  font-size: 25px;
  margin-bottom: 10px;
}

.payment-recovery ul {
  color: var(--ink-soft);
  list-style: disc;
  margin: 0;
  padding-left: 20px;
}

.payment-state-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.payment-state-actions .button {
  width: 100%;
}

@media (min-width: 640px) {
  .fapi-preview-section,
  .fapi-preview-summary {
    padding: 34px 34px 38px !important;
  }

  .fapi-preview-consents {
    padding: 28px 34px 20px;
  }

  .fapi-preview-submit {
    margin-inline: 34px;
  }

  .fapi-preview-security {
    margin: 13px 34px 30px;
  }

  .fapi-field-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fapi-field-wide {
    grid-column: 1 / -1;
  }

  .purchase-help {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 28px 32px;
  }

  .payment-state-card {
    border-radius: 36px;
    padding: 56px;
  }

  .payment-next-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .payment-next-steps article {
    display: block;
  }

  .payment-next-steps article > span {
    display: flex;
    margin-bottom: 10px;
  }

  .payment-state-actions {
    flex-direction: row;
  }

  .payment-state-actions .button {
    width: auto;
  }
}

@media (min-width: 920px) {
  .purchase-page {
    padding-block: 66px 100px;
  }

  .purchase-intro,
  .purchase-form-shell,
  .purchase-help {
    width: min(100% - 64px, 860px);
  }

  .purchase-intro {
    padding-bottom: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fapi-preview-submit,
  .fapi-product-choice,
  .fapi-field input,
  .fapi-field select {
    transition-duration: .01ms;
  }
}

@media (min-width: 760px) {
  .marketing-footer .footer-brand {
    font-size: 38px;
    width: 165px;
  }

  .sales-focus-header {
    height: 78px;
    padding: 0 clamp(28px, 6vw, 92px);
  }

  .sales-focus-footer {
    flex-direction: row;
    justify-content: space-between;
    padding: 26px clamp(40px, 7vw, 100px);
    text-align: left;
  }
}

/* Curated byMishel photography — premium, restrained image direction */

.image-frame,
.personal-hero-image,
.academy-photo,
.member-preview-image,
.campaign-visual > img,
.contact-portrait,
.pricing-hero-photo {
  isolation: isolate;
}

.image-frame {
  background: linear-gradient(150deg, #f7e4ea, #e8deef);
  border: 8px solid rgba(255, 255, 255, .72);
  border-radius: 46% 46% 28px 28px / 24% 24% 28px 28px;
  box-shadow: 0 28px 65px rgba(102, 48, 77, .18);
  height: min(68vw, 650px);
  overflow: hidden;
}

.image-frame img {
  max-height: none;
  object-fit: cover;
  object-position: 50% 34%;
}

.about-photo {
  margin-inline: auto;
  max-width: 520px;
}

.about-photo::before,
.personal-hero-image::before {
  border-radius: 45% 45% 24px 24px / 18% 18% 24px 24px;
}

.about-photo img,
.personal-hero-image img {
  border-radius: 44% 44% 22px 22px / 18% 18% 22px 22px;
}

.about-photo img {
  object-position: 50% 28%;
}

.gallery-grid figure {
  background: #f2e6eb;
  border-radius: 8px 48px 8px 48px;
  box-shadow: 0 18px 42px rgba(102, 48, 77, .1);
}

.gallery-grid figure:nth-child(2) {
  border-radius: 48px 8px 48px 8px;
}

.gallery-grid img,
.calendar-card-image img,
.topic-grid img,
.blog-grid img,
.featured-post img,
.article-cover img {
  transition: transform .45s ease;
}

.gallery-grid figure:hover img,
.calendar-card:hover img,
.topic-grid article:hover img,
.blog-grid article:hover img,
.featured-post:hover img {
  transform: scale(1.025);
}

.pricing-hero-panel {
  overflow: hidden;
}

.pricing-hero-photo {
  aspect-ratio: 16 / 9;
  border-radius: 120px 120px 18px 18px;
  display: block;
  margin: -12px 0 24px;
  object-fit: cover;
  object-position: 50% 34%;
  width: 100%;
}

.personal-hero-image img {
  object-position: 50% 34%;
}

.calendar-card-image,
.topic-grid article {
  overflow: hidden;
}

.calendar-card-image img,
.topic-grid img {
  object-position: center;
}

.academy-photo {
  border: 7px solid rgba(255, 255, 255, .75);
  box-shadow:
    0 30px 75px rgba(102, 48, 77, .18),
    18px 18px 0 rgba(203, 188, 228, .28);
}

.academy-photo img {
  object-position: 50% 28%;
}

.academy-support-image {
  border-radius: 24px 160px 24px 24px;
  box-shadow: 0 24px 60px rgba(102, 48, 77, .14);
  overflow: hidden;
}

.academy-support-image img {
  object-position: 50% 34%;
}

.member-preview-image {
  border: 7px solid rgba(255, 255, 255, .75);
  border-radius: 160px 160px 24px 24px;
  box-shadow: 0 24px 55px rgba(102, 48, 77, .14);
}

.member-preview-image img {
  object-position: 50% 30%;
}

.campaign-visual > img {
  border: 7px solid rgba(255, 255, 255, .72);
  border-radius: 220px 220px 28px 28px;
  box-shadow: 0 30px 70px rgba(102, 48, 77, .18);
  object-position: 50% 50%;
}

.about-portrait-composition {
  min-height: 540px;
  position: relative;
}

.about-portrait-composition img:first-child {
  border: 7px solid rgba(255, 255, 255, .74);
  border-radius: 180px 180px 24px 24px;
  box-shadow: 0 28px 70px rgba(102, 48, 77, .16);
  height: 520px;
  object-position: 50% 28%;
  width: calc(100% - 54px);
}

.about-portrait-composition img:last-child {
  aspect-ratio: 1;
  border: 7px solid #fff;
  border-radius: 50%;
  bottom: 8px;
  box-shadow: 0 18px 45px rgba(102, 48, 77, .18);
  height: 150px;
  min-height: 0;
  object-fit: cover;
  position: absolute;
  right: 0;
  width: 150px;
}

.contact-portrait {
  background: var(--lavender-soft);
  border-radius: 90px 18px 90px 18px;
  box-shadow: 0 22px 55px rgba(102, 48, 77, .13);
  margin: 28px 0 0;
  max-height: 300px;
  overflow: hidden;
}

.contact-portrait img {
  display: block;
  height: 300px;
  object-fit: cover;
  object-position: 50% 28%;
  width: 100%;
}

.blog-page .blog-hero {
  align-items: center;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.blog-page .blog-hero > div > p:last-child {
  color: var(--ink-soft);
  max-width: 590px;
}

.blog-page .blog-hero > img {
  border: 7px solid rgba(255, 255, 255, .75);
  border-radius: 170px 170px 22px 22px;
  box-shadow: 0 24px 60px rgba(102, 48, 77, .16);
  height: 360px;
  object-fit: cover;
  object-position: 50% 34%;
  width: 100%;
}

.featured-post,
.article-cover {
  overflow: hidden;
}

.featured-post > img,
.article-cover img {
  border-radius: 18px 100px 18px 18px;
}

@media (min-width: 760px) {
  .blog-page .blog-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  }

  .blog-page .blog-hero > img {
    height: 390px;
  }

  .contact-portrait {
    max-width: 520px;
  }
}

@media (max-width: 759px) {
  .image-frame {
    height: 510px;
  }

  .about-portrait-composition {
    min-height: 460px;
  }

  .about-portrait-composition img:first-child {
    height: 440px;
  }

  .about-portrait-composition img:last-child {
    height: 118px;
    width: 118px;
  }

  .pricing-hero-photo {
    margin-top: -8px;
  }

  .blog-page .blog-hero > img {
    height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid img,
  .calendar-card-image img,
  .topic-grid img,
  .blog-grid img,
  .featured-post img,
  .article-cover img {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Doplnené oproti prototypu: do objednávkovej stránky sa vkladá skutočný
   formulár FAPI, ktorý si vlastný rámček aj tieň kreslí sám
   (public/css/fapi-form-bymishel.css). Bez tejto varianty by vznikla
   karta v karte. Vizuálny výsledok je zhodný s predlohou.
--------------------------------------------------------------------------- */
.purchase-form-shell.is-fapi {
  background: none;
  border: 0;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   Doplnené oproti prototypu: vstup do členskej zóny v hlavnom menu.
   Predloha ho v hlavičke nemala vôbec, členky ho pritom hľadajú ako prvé.
   Vychádza z tvaru tlačidiel (.button-primary), len nižšie, aby sa zmestilo
   do 70px hlavičky.
--------------------------------------------------------------------------- */
.pricing-nav a.nav-login {
  background: var(--pink);
  color: var(--white);
  font-weight: 700;
  justify-content: center;
  letter-spacing: .02em;
  min-height: 42px;
  padding: 0 18px;
  transition: background-color 200ms ease;
}

.pricing-nav a.nav-login:hover {
  background: var(--pink-dark);
  color: var(--white);
}

.pricing-nav a.nav-login.is-active::after {
  content: none;
}

.mobile-marketing-nav > nav a.nav-login,
.mobile-marketing-nav > nav a.nav-login:last-child {
  background: var(--pink);
  border-bottom: 0;
  color: var(--white);
  justify-content: center;
  margin-top: 12px;
  min-height: 50px;
}

.mobile-marketing-nav > nav a.nav-login:hover {
  background: var(--pink-dark);
}

/* ---------------------------------------------------------------------------
   Pätička v stĺpcoch.

   Predloha mala odkazy v jednom riadku vpravo. Osem odkazov sa do tretinového
   stĺpca nezmestilo už pri 768 px (stránka pretiekla o 88 px) a na desktope sa
   lámali do dvoch riadkov. S deviatym odkazom (Kalkulačka) to bolo horšie.

   Riešenie: tri tematické skupiny odkazov vedľa seba, takže sa nič neláme na
   žiadnej šírke. Pod nimi pás s dôveryhodnosťou platby a rok.

   Nahrádza pôvodné rozloženie z riadkov 2306 a 2768 — preto sú tu vypnuté
   grid-template-columns aj vodorovná navigácia z predlohy.
--------------------------------------------------------------------------- */
.marketing-footer {
  display: block;
  padding: 56px 20px 44px;
}

.footer-main,
.footer-trust,
.footer-copy {
  margin-inline: auto;
  max-width: 1180px;
}

.footer-main {
  display: grid;
  gap: 34px;
}

.footer-intro {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.footer-intro p {
  color: rgba(255, 255, 255, 0.9);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 17px;
  font-style: italic;
  margin: 0;
}

/* Vyššia špecifickosť ako `.marketing-footer nav` z predlohy (flex vpravo). */
.marketing-footer .footer-nav {
  display: grid;
  gap: 26px;
  justify-content: stretch;
}

.footer-col h2 {
  color: rgba(255, 255, 255, 0.88);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 2px;
  text-transform: uppercase;
}

/* Prepisuje zvislý zoznam odkazov z predlohy — ten cielil na `.marketing-footer nav a`. */
.marketing-footer .footer-col a {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
  display: flex;
  font-size: 15px;
  min-height: 48px;
  transition: color 0.18s ease;
}

.marketing-footer .footer-col a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.marketing-footer .footer-col a:focus-visible {
  border-radius: 4px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Dôveryhodnosť platby */

.footer-trust {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  justify-content: space-between;
  margin-top: 36px;
  padding-top: 26px;
}

.footer-secure {
  align-items: center;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  font-size: 13px;
  gap: 10px;
  line-height: 1.5;
  margin: 0;
  max-width: 46ch;
}

.footer-secure svg {
  flex: none;
}

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-badges li {
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px;
  color: #30232d;
  display: flex;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
}

.badge-word {
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.badge-visa {
  color: #1434cb;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.badge-stripe {
  color: #635bff;
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Dva prekryté krúžky = známa značka bez sťahovania cudzieho loga. */
.badge-mc {
  display: flex;
}

.badge-mc i {
  border-radius: 50%;
  display: block;
  height: 16px;
  width: 16px;
}

.badge-mc i:first-child {
  background: #eb001b;
}

.badge-mc i:last-child {
  background: #f79e1b;
  margin-left: -9px;
  mix-blend-mode: multiply;
}

/* Predloha dávala každému priamemu <p> v pätičke kurzívu Playfair — copyright
   je bežný text, preto sa tu vracia späť na základné písmo. */
.marketing-footer > .footer-copy {
  color: rgba(255, 255, 255, 0.86);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  margin-top: 26px;
}

/* Dva stĺpce už na telefóne — inak by pätička narástla o pol obrazovky. */
@media (min-width: 360px) {
  .marketing-footer .footer-nav {
    gap: 24px 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 560px) {
  .marketing-footer .footer-nav {
    gap: 28px 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .marketing-footer .footer-col a {
    border-bottom: 0;
    min-height: 40px;
  }
}

@media (min-width: 760px) {
  .marketing-footer {
    padding: 64px clamp(28px, 6vw, 92px) 48px;
  }
}

@media (min-width: 1000px) {
  .footer-main {
    gap: 56px;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
  }

  .marketing-footer .footer-nav {
    gap: 28px 32px;
  }
}

/* ---------------------------------------------------------------------------
   Profil členky.

   Predloha túto stránku nemala nakreslenú a triedy `profile-grid`,
   `profile-card` a `profile-row` nemali v CSS nič — karty sa preto skladali
   pod seba a polia formulárov boli neviditeľné (reset ruší rámiky vstupov).
   Doplnené v jazyku členskej zóny: biele karty, linka `--academy-line`.

   Súčasťou je aj správa predplatného — zrušenie je schované v <details>, aby
   sa naň nedalo kliknúť omylom.
--------------------------------------------------------------------------- */
.profile-grid {
  display: grid;
  gap: 18px;
  margin-top: 26px;
}

.profile-card {
  background: var(--academy-card);
  border: 1px solid var(--academy-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 22px;
}

.profile-card h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
}

.profile-card .eyebrow {
  color: var(--academy-muted);
  font-size: 11px;
  letter-spacing: 0.2em;
  margin: 0;
}

.profile-card > small,
.profile-card .muted {
  color: var(--academy-muted);
  font-size: 13px;
  line-height: 1.6;
}

.profile-row {
  align-items: center;
  border-top: 1px solid var(--academy-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  padding: 14px 0;
}

.profile-row strong {
  display: block;
  font-size: 16px;
}

.profile-row small {
  color: var(--academy-muted);
  font-size: 13px;
}

/* Formuláre v profile — bez týchto pravidiel nemajú vstupy rámik a stránka
   pôsobí ako rozsypaný text. */
.profile-card form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-card label {
  color: var(--academy-muted);
  font-size: 13px;
  margin-top: 8px;
}

.profile-card input {
  background: #fff;
  border: 1px solid var(--academy-line);
  color: var(--academy-ink);
  font: inherit;
  min-height: 48px;
  padding: 0 14px;
  width: 100%;
}

.profile-card input:focus-visible {
  border-color: var(--pink);
  outline: 2px solid rgba(167, 47, 99, 0.28);
  outline-offset: 1px;
}

.profile-card .chyba {
  color: var(--pink-dark);
  font-size: 13px;
  margin: 0;
}

.profile-card button {
  align-self: start;
  margin-top: 14px;
}

/* Správa predplatného */

.subscription-cancel {
  border-top: 1px solid var(--academy-line);
  padding-top: 14px;
}

.subscription-cancel > summary {
  color: var(--academy-muted);
  cursor: pointer;
  display: block; /* zruší predvolený trojuholník <details> */
  font-size: 14px;
  list-style: none;
  min-height: 44px;
  padding: 11px 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.subscription-cancel > summary::-webkit-details-marker {
  display: none;
}

.subscription-cancel > summary:hover {
  color: var(--academy-ink);
}

.subscription-cancel p,
.subscription-cancelled p {
  color: var(--academy-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 12px;
}

.subscription-cancelled {
  background: var(--rose-mist);
  border: 1px solid var(--academy-line);
  margin-top: 14px;
  padding: 18px;
}

.subscription-cancelled p {
  color: var(--academy-ink);
}

@media (min-width: 760px) {
  .profile-grid {
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-card {
    padding: 30px 28px;
  }
}

/* ---------------------------------------------------------------------------
   Hlášky a potvrdzovacie okno v členskej zóne.

   Trieda `flash` sa v šablónach používala od začiatku, ale v CSS nemala nič —
   správy sa zobrazovali ako obyčajný odsek. Farba tu nesie význam: červená
   „niečo si zrušila“, zelená „beží to ďalej“.
--------------------------------------------------------------------------- */
.flash {
  background: var(--lavender-soft);
  border-left: 4px solid var(--lavender);
  color: var(--academy-ink);
  font-size: 15px;
  line-height: 1.55;
  margin: 22px 18px 0;
  padding: 15px 18px;
}

/* Zarovnanie s obsahom nástenky, ktorá je na širokých obrazovkách vycentrovaná. */
@media (min-width: 1100px) {
  .flash {
    margin-inline: auto;
    max-width: 1480px;
    width: calc(100% - 36px);
  }
}

.flash.is-zrusenie,
.flash.is-chyba {
  background: #fdeef2;
  border-left-color: #b3213f;
  color: #6d1226;
}

.flash.is-obnovenie {
  background: #eaf6ec;
  border-left-color: #2f7d45;
  color: #1d4f2c;
}

.confirm-dialog {
  background: var(--academy-card);
  border: 1px solid var(--academy-line);
  box-shadow: 0 30px 80px rgba(48, 35, 45, 0.28);
  color: var(--academy-ink);
  margin: auto;
  max-width: min(440px, calc(100vw - 32px));
  padding: 26px 24px;
  width: 100%;
}

.confirm-dialog::backdrop {
  background: rgba(48, 35, 45, 0.55);
}

.confirm-dialog h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}

.confirm-dialog p {
  color: var(--academy-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px;
}

.confirm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.confirm-dialog-actions form {
  flex: 1 1 160px;
}

.confirm-dialog-actions button {
  margin: 0;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Dlaždice v knižnici a v kategórii (issues #8 a #10).

   Názvy okruhov a lekcií boli v predlohe 24 px a pri dvoch riadkoch prebíjali
   všetko ostatné — zmenšené na 20 px podľa zadania.

   Dlaždice sa navyše nedali čítať po stĺpcoch: názov mal raz jeden, raz tri
   riadky, a tak pásik postupu aj počet lekcií skákali. Karta je preto stĺpec
   a spodná dvojica sa tlačí k dolnej hrane bez ohľadu na dĺžku názvu.
--------------------------------------------------------------------------- */
/* Veľkosť ani riadkovanie tu už nie sú — určuje ich typografia názvu kurzu
   vyššie (issue #70). Toto pravidlo ich predtým prebíjalo na 20px/1.15. */

/* Blok s názvom sekcie bol nalepený na dlaždice. */
.library-results {
  margin-top: 26px;
}

.academy-course-card {
  display: flex;
  flex-direction: column;
}

.academy-course-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* V kategórii je spodná dvojica pásik + počet, v knižnici len počet. */
.academy-course-copy:has(.progress-track) .progress-track {
  margin-top: auto;
}

.academy-course-copy:not(:has(.progress-track)) .course-card-meta {
  margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Prekrývanie „Otvoriť obsah" a „+" v obsahu e-booku (issue #5).

   Predloha dáva každému <summary> na stránke plusko vpravo hore (accordion
   v častých otázkach) a k tomu odsadenie 50 px, aby text do neho nenarazil.
   Obsah e-booku má vlastné odsadenie 16 px, takže mu text vbehol priamo pod
   plusko. Vraciame mu miesto — a plusku výšku podľa vyššej hlavičky.
--------------------------------------------------------------------------- */
.reader-mobile-chapters > summary {
  padding-right: 48px;
}

.reader-mobile-chapters > summary::after {
  top: 50%;
  transform: translateY(-50%);
}

/* Zrušenie predplatného nie je accordion s otázkou — plusko tam mätie. */
.subscription-cancel > summary::after {
  content: none;
}

/* ---------------------------------------------------------------------------
   Prehrávač videolekcie.

   Predloha mala namiesto prehrávača len obrázok s tlačidlom (`.video-poster`),
   takže vložený <iframe> nemal v CSS nič a držal si predvolených 300×150 px —
   video sedelo v ľavom hornom rohu tmavého rámu.

   Prehrávač teraz vypĺňa celý stĺpec v pomere 16:9, rovnako ako to mal poster.
--------------------------------------------------------------------------- */
.lesson-video .video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.lesson-video .video iframe {
  border: 0;
  height: 100%;
  width: 100%;
}

/* Náhradný obrázok pri lekcii bez videa nech sa správa rovnako. */
.lesson-video > img {
  height: auto;
  width: 100%;
}

/* ---------------------------------------------------------------------------
   Záložky v knižnici: online kurzy verzus osobné školenia (issue #20).

   Odlíšenie je zámerne jemné — členská zóna má jeden vizuálny jazyk a druhá
   farebná schéma by z nej spravila dva rôzne weby. Stačí štítok na dlaždici
   v tmavšom odtieni z palety a dátum termínu namiesto dĺžky videa.
--------------------------------------------------------------------------- */
.library-tabs {
  /* Prepínač ako v iOS appke („Detail | Rezervácie“): sivoružová dráha
     a aktívna časť ako biela pilulka s jemným tieňom. Všetky časti rovnako
     široké, vždy jeden riadok. */
  background: #f1e8ed;
  border-radius: 999px;
  display: inline-grid;
  gap: 2px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin-bottom: 22px;
  max-width: 100%;
  padding: 4px;
}

.library-tabs a {
  align-items: center;
  border-radius: 999px;
  color: var(--academy-ink);
  display: flex;
  font-size: 14px;
  font-weight: 600;
  gap: 6px;
  justify-content: center;
  min-height: 44px;
  min-width: 0;
  padding: 0 18px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.library-tabs a:hover {
  background: rgba(255, 255, 255, 0.55);
}

.library-tabs a.is-active {
  background: #fff;
  box-shadow: 0 1px 3px rgba(48, 35, 45, 0.12), 0 4px 12px rgba(48, 35, 45, 0.06);
  color: var(--pink-dark);
}

/* Počet ako tiché číslo vedľa názvu, nie ďalší farebný odznak. */
.library-tabs .zalozka-pocet {
  color: var(--academy-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.library-tabs a.is-active .zalozka-pocet {
  color: var(--pink);
}

.library-tabs .zalozka-kratky {
  display: none;
}

/* Prepínač stojí medzi úvodnou kartou a filtrami — potrebuje vzduch nad
   sebou, pod ním ho už dáva jeho vlastný spodný okraj. */
.library-tabs {
  margin-top: 22px;
}

.library-tabs + .library-layout {
  padding-top: 0;
}

/* „Filtrovať kurzy“: plus bol posunutý pod text, lebo sedel napevno 9 px
   od vrchu. Teraz je zvislo v strede riadku. */
.mobile-filter-panel {
  padding: 0;
}

.mobile-filter-panel summary {
  align-items: center;
  display: flex;
  min-height: 54px;
  padding: 0 52px 0 18px;
}

.mobile-filter-panel summary::after {
  font-size: 28px;
  line-height: 1;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.library-tabs a:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: -2px;
}

/* Štítok osobného školenia — tmavší odtieň z tej istej palety, nie nová farba. */
.academy-course-image > span.is-osobne {
  background: var(--pink-dark);
  color: #fff;
}

@media (max-width: 559px) {
  /* Na mobile cez celú šírku a s krátkymi názvami (Online, Osobné). */
  .library-tabs {
    display: grid;
  }

  .library-tabs a {
    font-size: 13px;
    gap: 4px;
    padding: 0 4px;
  }

  .library-tabs .zalozka-dlhy {
    display: none;
  }

  .library-tabs .zalozka-kratky {
    display: inline;
  }
}

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

/* ---------------------------------------------------------------------------
   Filter knižnice ostáva na očiach pri rolovaní (issue #18).

   Len na desktope — na mobile je filter v rozbaľovacom paneli a lepiaci by
   ukrojil z obrazovky. Odsadenie zhora je výška hornej lišty, aby sa filter
   nezasunul pod ňu; `max-height` so scrollom pre prípad dlhého zoznamu tém.
--------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  .library-filters {
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    position: sticky;
    top: 84px;
  }
}

/* ---------------------------------------------------------------------------
   Knižnica po okruhoch (issue #29).

   Kategória je nadpis sekcie, okruhy sú dlaždice pod ním. Zoznam 247 lekcií
   nahradil zoznam okruhov — prechádzanie je hierarchické, hľadanie ostáva
   ploché a vtedy sa výpis prepne späť na lekcie.
--------------------------------------------------------------------------- */
.library-section + .library-section {
  margin-top: 34px;
}

.library-section .academy-section-heading {
  align-items: baseline;
  border-bottom: 1px solid var(--academy-line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
}

.library-section .academy-section-heading h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  letter-spacing: -0.03em;
  margin: 0;
}

.library-section .academy-section-heading span {
  color: var(--academy-muted);
  font-size: 12px;
  white-space: nowrap;
}

/* Pásik postupu má nad spodnou dvojicou vlastné miesto. */
.academy-course-copy .progress-track {
  margin-top: 12px;
}

.course-card-meta a {
  color: var(--pink-dark);
  font-weight: 800;
}

.results-heading {
  align-items: baseline;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.results-back {
  color: var(--pink-dark);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Navigačná cesta (issue #12).

   Kategória prestala byť samostatnou stránkou a stala sa filtrom v knižnici —
   cesta je odvtedy jediné miesto, kde členka vidí, kde stojí. Preto má
   posledný krok inú farbu než odkazy pred ním a na úzkej obrazovke sa skracuje
   namiesto toho, aby dlhý názov lekcie rozhodil celý riadok.
--------------------------------------------------------------------------- */
.lesson-breadcrumbs [aria-current="page"] {
  color: var(--academy-ink);
  font-weight: 700;
}

@media (max-width: 600px) {
  .lesson-breadcrumbs a,
  .lesson-breadcrumbs [aria-current="page"] {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
   Štítok „Novinka" (issue #13).

   Zámerne malý a z existujúcej palety — nie druhá farebná schéma. Sedí vedľa
   nadpisu kategórie, v riadku nad názvom okruhu aj v ceste lekcie, preto je
   zarovnaný na účiaru a nikde nemení výšku riadka.
--------------------------------------------------------------------------- */
.novinka-stitok {
  background: var(--blush);
  border-radius: 999px;
  color: var(--pink-dark);
  display: inline-block;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin-left: 6px;
  padding: 1px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

.academy-section-heading .novinka-stitok {
  position: relative;
  top: -2px;
}

/* ---------------------------------------------------------------------------
   Porovnávacia tabuľka v študijnom materiáli (issue #21, #22).

   Modul `data-table` zo špecifikácie: tabuľka ostáva tabuľkou. Nerobí sa z nej
   fact-grid, lebo tam by sa stratilo porovnanie riadkov. Prvý stĺpec je
   záhlavie riadka a pri posune do strany ostáva na mieste — inak by členka
   nevedela, ktorý riadok práve číta. Posuvná oblasť je zaostriteľná, aby sa
   tabuľka dala prejsť aj klávesnicou.
--------------------------------------------------------------------------- */
.reader-table {
  margin: 26px 0 34px;
}

.reader-table .eyebrow {
  margin-bottom: 10px;
}

.reader-table-scroll {
  border: 1px solid var(--academy-line);
  overflow-x: auto;
}

.reader-table-scroll:focus-visible {
  outline: 2px solid var(--pink-dark);
  outline-offset: 2px;
}

.reader-table table {
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  min-width: 100%;
  width: 100%;
}

.reader-table caption {
  color: var(--academy-muted);
  font-size: 12px;
  padding: 12px 16px;
  text-align: left;
}

.reader-table th,
.reader-table td {
  border-bottom: 1px solid var(--academy-line);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.reader-table thead th {
  background: #fbf8fa;
  color: var(--pink-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reader-table tbody th {
  background: var(--academy-card);
  color: var(--academy-ink);
  font-weight: 700;
  left: 0;
  position: sticky;
}

.reader-table tbody td {
  color: var(--academy-muted);
}

.reader-table tbody tr:last-child th,
.reader-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 700px) {
  .reader-table th,
  .reader-table td {
    min-width: 148px;
    padding: 10px 12px;
  }
}

/* ---------------------------------------------------------------------------
   Diskusia pod lekciou (issue #24).

   Trieda `.lesson-comments` existovala, ale nemala žiadne štýly — príspevky
   preto splývali do jedného stĺpca textu bez odsadenia. Je to otázka
   a odpoveď, nie sociálna sieť: odpoveď od lektorky má vlastné prevedenie,
   aby ju bolo v zozname vidieť na prvý pohľad.
--------------------------------------------------------------------------- */
.lesson-comments {
  border-top: 1px solid var(--academy-line);
  margin-top: 46px;
  padding-top: 30px;
}

.comments-heading {
  align-items: baseline;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 22px;
}

.comments-heading h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
  margin: 4px 0 0;
}

.comments-heading > span {
  color: var(--academy-muted);
  font-size: 12px;
  white-space: nowrap;
}

.comments-empty {
  background: #fbf8fa;
  border: 1px solid var(--academy-line);
  color: var(--academy-muted);
  font-size: 14px;
  line-height: 1.65;
  padding: 20px 22px;
}

.comments-list {
  display: grid;
  gap: 18px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.comments-list li {
  display: grid;
  gap: 14px;
  grid-template-columns: 38px 1fr;
}

/* Odpoveď lektorky je odsadená a farebne odlíšená — v dlhej diskusii sa
   inak nedá rozoznať, kde je odpoveď a kde ďalšia otázka. */
.comments-list li.is-odpoved {
  background: var(--rose-mist);
  border-left: 2px solid var(--pink-dark);
  margin-left: 22px;
  padding: 16px 18px;
}

.comment-avatar {
  align-items: center;
  background: var(--blush);
  border-radius: 50%;
  color: var(--pink-dark);
  display: flex;
  font-size: 12px;
  font-weight: 800;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.comments-list li.is-odpoved .comment-avatar {
  background: var(--pink-dark);
  color: var(--white);
}

.comment-body p {
  color: var(--academy-ink);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

.comment-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px !important;
}

.comment-meta strong {
  font-size: 14px;
}

.comment-meta time {
  color: var(--academy-muted);
  font-size: 12px;
}

.comment-badge {
  background: var(--pink-dark);
  border-radius: 999px;
  color: var(--white);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 2px 8px;
}

.comment-pending {
  background: var(--lavender-soft);
  border: 1px dashed var(--lavender);
  margin-bottom: 22px;
  padding: 16px 18px;
}

.comment-pending p {
  color: var(--academy-muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

.comment-pending strong {
  color: var(--academy-ink);
}

.comment-form label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.comment-form textarea {
  background: var(--academy-card);
  border: 1px solid var(--academy-line);
  color: var(--academy-ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  padding: 12px 14px;
  resize: vertical;
  width: 100%;
}

.comment-form textarea:focus-visible {
  border-color: var(--pink-dark);
  outline: 2px solid var(--blush);
  outline-offset: 1px;
}

.comment-form-foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-top: 12px;
}

.comment-form-foot small {
  color: var(--academy-muted);
  font-size: 12px;
}

@media (max-width: 600px) {
  .comments-list li.is-odpoved {
    margin-left: 0;
  }

  .comment-form-foot .button {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Osobné školenie na nástenke (issue #33).

   Osobný kurz má termín, miesto a prípravu — nedá sa naň prísť „keď bude čas".
   Preto stojí hneď pod uvítaním a nie medzi kurzami. Po kurze dlaždica ostáva,
   len stlmene: materiál je stále dostupný, ale už nie je na čo sa chystať.
--------------------------------------------------------------------------- */
.academy-personal {
  margin-bottom: 44px;
}

.personal-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .personal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.personal-card {
  background: var(--rose-mist);
  border: 1px solid var(--academy-line);
  border-left: 3px solid var(--pink-dark);
  padding: 22px 24px;
}

.personal-card.is-po-kurze {
  background: var(--academy-card);
  border-left-color: var(--lavender);
}

.personal-card h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

.personal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 16px 0 18px;
}

.personal-meta dt {
  color: var(--academy-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.personal-meta dd {
  color: var(--academy-ink);
  font-size: 15px;
  font-weight: 700;
  margin: 4px 0 0;
}

.personal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.personal-links .button {
  font-size: 13px;
  padding: 10px 16px;
}

.personal-note {
  color: var(--academy-muted);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 14px;
}

/* Pri osobnom kurze je prístup viazaný na termín, nie na predplatné. */
.lesson-access-note {
  background: var(--lavender-soft);
  color: var(--academy-ink);
  font-size: 14px;
  margin: 26px 0 0;
  padding: 14px 18px;
}

/* ---------------------------------------------------------------------------
   Záruky pri objednávke (issue #34).

   Tri tvrdenia tesne pod formulárom: čo sa stane, ak to zákazníčke nesadne,
   koľko ľudí tadiaľto prešlo a kto spracúva platbu. Zámerne striedmo — pásik
   odznakov cez celú šírku pôsobí ako reklama, nie ako informácia.
--------------------------------------------------------------------------- */
.purchase-guarantees {
  display: grid;
  gap: 18px;
  margin: 26px auto 0;
  width: min(100% - 36px, 820px);
}

@media (min-width: 780px) {
  .purchase-guarantees {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

.guarantee {
  align-items: flex-start;
  display: flex;
  gap: 12px;
}

.guarantee-mark {
  align-items: center;
  background: var(--blush);
  border-radius: 50%;
  color: var(--pink-dark);
  display: flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.guarantee strong {
  color: var(--ink);
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}

.guarantee p {
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.6;
  margin: 0;
}

/* Značka Stripe je vysádzaná rovnako ako v pätičke — jedno miesto pravdy. */
.guarantee .badge-stripe {
  vertical-align: baseline;
}

/* ---------------------------------------------------------------------------
   Právny text (obchodné podmienky).

   Dlhý súvislý text sa číta inak než marketingová stránka: užší stĺpec,
   väčšie riadkovanie a nadpisy, ktoré sa dajú preletieť očami. Zámerne bez
   ozdôb — je to dokument, nie stránka na presviedčanie.
--------------------------------------------------------------------------- */
.legal-text {
  margin-inline: auto;
  padding-bottom: 60px;
  width: min(100% - 36px, 760px);
}

.legal-text h2 {
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 38px 0 14px;
  padding-top: 26px;
}

.legal-text h2:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.legal-text p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 14px;
}

/* NailBE Academy: dve úrovne vedľa seba (issue #31). Karty sú v pravom
   stĺpci ponuky pod sebou, aby dvojstĺpcová mriežka sekcie ostala tak,
   ako bola. Preškrtnutá cena je pôvodná, tá po skončení akcie. */
.academy-price-cards {
  display: grid;
  gap: 20px;
}

.offer-price s {
  color: var(--ink-soft);
  font-size: 18px;
  text-decoration-thickness: 1px;
}

.offer-until {
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 12px;
}

/* Vedený program: lekcia, ktorá v harmonograme ešte nie je na rade (#31).
   Náhľad stlmíme a doplníme hodiny s dátumom — členka tak vidí, že video
   existuje a kedy naň príde rad. Ak ho má prístupné aj z knižnice, odkaz
   funguje ďalej; prístup jej neberieme, len ho nevydávame za program. */
.academy-course-image.je-v-harmonograme img {
  filter: grayscale(0.55);
  opacity: 0.65;
}

/* Vyššia váha než pri značke formátu — obe sedia na tom istom náhľade
   a táto má byť tá, ktorú vidno skôr. */
.academy-course-image > span.harmonogram-znamka {
  align-items: center;
  background: rgba(48, 35, 45, 0.86);
  /* Značka formátu sedí vľavo dole; bez zrušenia týchto dvoch by mala
     zadané všetky štyri strany a roztiahla by sa cez celý náhľad. */
  bottom: auto;
  left: auto;
  color: #fff;
  display: flex;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
  letter-spacing: 0.02em;
  padding: 6px 9px;
  position: absolute;
  right: 10px;
  top: 10px;
}

/* Cenník: členstvá, vedený program a balíky ako tri druhy ponuky (#35).
   Členstvá sú dve, nie tri — mriežka sa prispôsobí počtu kariet a nenechá
   po treťom stĺpci dieru. */
.plans-section .plan-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  max-width: 880px;
}

.price s {
  color: var(--ink-soft);
  font-size: 20px;
  font-weight: 400;
  margin-right: 2px;
  text-decoration-thickness: 1px;
}

.commitment-grid strong s {
  color: var(--ink-soft);
  font-weight: 400;
  margin-right: 4px;
}

.commitment-points {
  color: var(--ink-soft);
  font-size: 15px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.commitment-points li {
  margin: 7px 0;
  padding-left: 20px;
  position: relative;
}

.commitment-points li::before {
  color: var(--pink);
  content: "•";
  left: 4px;
  position: absolute;
}

/* Vedený program: vlastný pruh medzi členstvami a balíkmi, aby sa nečítal
   ako ďalšie, drahšie členstvo. */
.program-band {
  background: linear-gradient(135deg, var(--pink-dark), #7d1f49);
  color: #fff;
  display: grid;
  gap: 34px;
  padding: 72px 20px;
}

.program-band .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

.program-band h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(34px, 8vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 10px 0 16px;
}

.program-lead {
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  margin: 0;
  max-width: 46ch;
}

.program-points {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.program-points li {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 12px 0 12px 22px;
  position: relative;
}

.program-points li::before {
  content: "→";
  left: 0;
  opacity: 0.7;
  position: absolute;
}

.program-offer {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 28px;
}

.program-start {
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  margin: 0 0 14px;
}

.program-offer .price {
  align-items: baseline;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
  padding-bottom: 18px;
}

.program-offer .price strong {
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 46px;
  line-height: 1;
}

.program-offer .price s,
.program-offer .price small,
.program-offer .price span {
  color: rgba(255, 255, 255, 0.72);
}

.program-offer .button {
  width: 100%;
}

.program-offer .microcopy {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 12px;
  text-align: center;
}

@media (min-width: 900px) {
  .program-band {
    align-items: center;
    gap: clamp(50px, 7vw, 96px);
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    padding: 96px clamp(40px, 8vw, 130px);
  }
}

/* ---------------------------------------------------------------------------
   NailBE Academy — dôkazové sekcie, harmonogram, PRO/VIP a záver
   Mobile-first; desktopové mriežky až v @media (min-width: 760px) nižšie.
--------------------------------------------------------------------------- */

/* Členská zóna definuje `.academy-section-heading` ako flex riadok (nadpis
   vľavo, odkaz vpravo). Na predajnej stránke je to ale vycentrovaný blok —
   bez tohto pretlačenia sa perex vysadí vedľa nadpisu a vylezie z obrazovky. */
.academy-lp .academy-section-heading {
  display: block;
  margin: 0 auto 36px;
  max-width: 850px;
  text-align: center;
}

.academy-proof,
.academy-levels,
.academy-closing {
  padding: 74px 20px;
}

.academy-proof {
  background: var(--white);
}

.proof-facts {
  display: grid;
  gap: 12px;
  margin: 0 auto 34px;
  max-width: 900px;
}

.proof-facts > div {
  background: var(--rose-mist);
  border: 1px solid var(--line);
  padding: 20px;
  text-align: center;
}

.proof-facts strong {
  color: var(--pink);
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 38px;
  line-height: 1;
}

.proof-facts span {
  color: var(--ink-soft);
  display: block;
  font-size: 13px;
  margin-top: 8px;
}

.proof-gallery {
  display: grid;
  gap: 16px;
  margin: 0 auto;
  max-width: 1120px;
}

.proof-gallery figure {
  margin: 0;
}

.proof-gallery img {
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.proof-gallery figcaption {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
  padding-top: 10px;
}

/* Harmonogram — dátum vľavo, obsah vpravo, spojený linkou. */
.academy-timeline {
  list-style: none;
  margin: 0 auto;
  max-width: 940px;
  padding: 0;
}

.timeline-item {
  border-left: 2px solid var(--blush);
  display: grid;
  gap: 6px;
  padding: 0 0 28px 22px;
  position: relative;
}

.timeline-item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.timeline-item::before {
  background: var(--pink);
  border-radius: 999px;
  content: "";
  height: 11px;
  left: -6.5px;
  position: absolute;
  top: 4px;
  width: 11px;
}

.timeline-when {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.timeline-when span {
  color: var(--pink-dark);
  font-size: 13px;
  font-weight: 700;
}

.timeline-when em {
  background: var(--lime);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 4px 9px;
}

.timeline-what h3 {
  font-size: 21px;
  line-height: 1.2;
  margin: 0 0 6px;
}

.timeline-what p {
  color: var(--ink-soft);
  margin: 0;
}

.timeline-note {
  border-left: 3px solid var(--pink);
  color: var(--ink-soft);
  margin: 34px auto 0;
  max-width: 940px;
  padding-left: 16px;
}

/* PRO vs VIP */
.academy-levels {
  background: var(--white);
}

.levels-split {
  display: grid;
  gap: 16px;
  margin: 0 auto;
  max-width: 1080px;
}

.level-card {
  background: white;
  border: 1px solid var(--line);
  padding: 28px;
}

.level-card-vip {
  background: var(--gradient-pastel);
  border-color: var(--pink);
}

.level-card h3 {
  font-size: 26px;
  line-height: 1.15;
  margin: 6px 0 14px;
}

.level-card p {
  color: var(--ink-soft);
}

.level-card ul {
  border-top: 1px solid var(--line);
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
}

.level-card li {
  padding: 6px 0 6px 22px;
  position: relative;
}

.level-card li::before {
  color: var(--pink);
  content: "✓";
  font-weight: 700;
  left: 0;
  position: absolute;
}

.levels-hint {
  color: var(--ink-soft);
  margin: 26px auto 0;
  max-width: 720px;
  text-align: center;
}

/* Záverečné CTA */
.academy-closing {
  background: var(--rose-mist);
  display: grid;
  gap: 34px;
}

.closing-photo img {
  box-shadow: var(--shadow);
  display: block;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  width: 100%;
}

.closing-copy h2 {
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.1;
}

.closing-copy > p {
  color: var(--ink-soft);
}

.closing-sign {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  margin: 24px 0;
}

.closing-sign strong {
  color: var(--pink-dark);
}

.closing-slogan {
  color: var(--pink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  margin-top: 22px;
}

@media (min-width: 760px) {
  .academy-proof,
  .academy-levels {
    padding: 100px clamp(40px, 8vw, 130px);
  }

  .academy-closing {
    align-items: center;
    gap: clamp(40px, 6vw, 90px);
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    padding: 100px clamp(40px, 8vw, 130px);
  }

  .proof-facts {
    grid-template-columns: repeat(3, 1fr);
  }

  .proof-gallery {
    grid-template-columns: repeat(4, 1fr);
  }

  .levels-split {
    grid-template-columns: 1fr 1fr;
  }

  .timeline-item {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
    padding-left: 28px;
  }

  .timeline-when {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------------
   NailBE Academy — úpravy po prvom náhľade
--------------------------------------------------------------------------- */

/* Ponuka ako klasický cenník: úvod nad ním, dve karty vedľa seba. V pôvodnej
   dvojstĺpcovej mriežke sekcie sa PRO a VIP skladali pod seba do úzkeho
   stĺpca a nedali sa porovnať očami. */
.academy-lp .academy-offer {
  display: block;
}

.academy-lp .offer-copy {
  margin: 0 auto 40px;
  max-width: 760px;
  text-align: center;
}

.academy-lp .offer-copy .honest-urgency {
  background: rgba(255, 255, 255, .6);
  border-left: 0;
  border-top: 3px solid var(--pink);
  display: inline-block;
  padding: 16px 20px 0;
  text-align: left;
}

.academy-lp .academy-price-cards {
  margin: 0 auto;
  max-width: 940px;
}

/* Nadpisy dlaždíc PRO/VIP patria k ozdobnému rezu, rovnako ako ostatné
   nadpisy na stránke. */
.level-card h3 {
  font-family: "Playfair Display", Georgia, serif;
}

/* Referencie a fotogaléria: na mobile vodorovný posuvník so zarážkami
   (natívny, bez JS), na desktope kompaktná mriežka zarovnaná na vrch —
   masonry nechávalo pod krátkymi kartami veľké diery. */
.academy-swipe {
  -webkit-overflow-scrolling: touch;
  column-count: initial;
  display: grid;
  gap: 14px;
  grid-auto-columns: 78%;
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 10px;
  scroll-padding: 0 20px;
  scroll-snap-type: x mandatory;
}

.academy-swipe > * {
  scroll-snap-align: center;
}

.academy-swipe .reference-card {
  margin: 0;
}

/* Screenshoty referencií sa nesmú orezať ani preškálovať na `width: auto` —
   lazy obrázok bez načítania by mal nulovú šírku a karta by zmizla. Šírku
   drží stĺpec, pomer strán atribúty width/height v značke. */
.reference-grid.academy-swipe .reference-card {
  align-self: start;
}

/* Tenký posuvník, aby lišta neukrajovala z obrázkov. */
.academy-swipe::-webkit-scrollbar {
  height: 4px;
}

.academy-swipe::-webkit-scrollbar-thumb {
  background: var(--blush);
  border-radius: 999px;
}

@media (min-width: 760px) {
  .academy-lp .academy-price-cards {
    align-items: start;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .academy-swipe {
    grid-auto-flow: row;
    max-width: 1180px;
    margin-inline: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .proof-gallery.academy-swipe {
    grid-template-columns: repeat(4, 1fr);
  }

  .reference-grid.academy-swipe {
    align-items: start;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

/* ---------------------------------------------------------------------------
   Odovzdávanie prác vo vedenom programe
--------------------------------------------------------------------------- */

.praca-layout {
  display: grid;
  gap: 28px;
}

/* Výzva na odovzdanie pod okruhom v prehľade kurzu. */
.praca-vyzva {
  align-items: center;
  background: var(--rose-mist);
  border: 1px solid var(--academy-line);
  border-left: 3px solid var(--pink);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
  margin-top: 16px;
  padding: 16px 18px;
}

.praca-vyzva.je-hotova {
  border-left-color: #5c8a5c;
}

.praca-vyzva-nadpis {
  font-weight: 700;
}

.praca-vyzva-stav {
  color: var(--ink-soft);
  font-size: 13px;
}

.praca-hlaska {
  border-left: 3px solid var(--pink);
  margin: 18px 0;
  padding: 12px 16px;
}

.praca-hlaska.je-dobra {
  background: var(--lime);
  border-left-color: #5c8a5c;
}

.praca-hlaska.je-zla {
  background: var(--blush);
}

.praca-stav,
.praca-hodnotenie {
  background: white;
  border: 1px solid var(--academy-line);
  margin-bottom: 24px;
  padding: 20px;
}

.praca-stav p,
.praca-hodnotenie p {
  margin: 0;
}

.praca-hodnotenie p {
  white-space: pre-line;
}

.praca-hodnotenie small {
  color: var(--ink-soft);
  display: block;
  padding-top: 10px;
}

.praca-fotky h2 span {
  color: var(--ink-soft);
  font-family: system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.praca-prazdne {
  color: var(--ink-soft);
}

.praca-galeria {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 16px 0 30px;
}

.praca-galeria figure {
  margin: 0;
}

.praca-galeria img {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--academy-line);
  display: block;
  object-fit: cover;
  width: 100%;
}

.praca-galeria figcaption {
  align-items: baseline;
  color: var(--ink-soft);
  display: flex;
  font-size: 12px;
  gap: 8px;
  justify-content: space-between;
  padding-top: 6px;
}

.praca-galeria figcaption button {
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}

/* Jedno pole zadania — fotka alebo otázka. */
.praca-pole {
  background: white;
  border: 1px solid var(--academy-line);
  margin-bottom: 16px;
  padding: 22px;
}

/* Čo ešte chýba, má byť vidno skôr, než kurzantka klikne na Odoslať. */
.praca-pole.chyba {
  border-left: 3px solid var(--pink);
}

.praca-pole h2 {
  font-size: 20px;
  margin: 0;
}

.praca-nepovinne {
  background: var(--lavender-soft);
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-left: 8px;
  padding: 3px 8px;
  text-transform: uppercase;
  vertical-align: middle;
}

.praca-popis {
  color: var(--ink-soft);
  cursor: help;
  font-size: 14px;
  margin: 6px 0 16px;
}

.praca-otazka label {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 7px 0;
}

.praca-otazka button {
  background: none;
  border: 1px solid var(--academy-line);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  margin-top: 12px;
  padding: 9px 16px;
}

.praca-nahravanie {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.praca-nahravanie input[type="file"] {
  border: 1px solid var(--academy-line);
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px;
}

.praca-nahravanie .button {
  flex: 0 0 auto;
}

.praca-odoslanie {
  margin-top: 22px;
  text-align: center;
}

.praca-odoslanie .button {
  width: 100%;
}

.praca-odoslanie small {
  color: var(--ink-soft);
  display: block;
  padding-top: 10px;
}

.praca-suhrn {
  list-style: none;
  margin: 0;
  padding: 0;
}

.praca-suhrn li {
  border-bottom: 1px solid var(--academy-line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 22px;
}

.praca-suhrn span,
.praca-poznamka {
  color: var(--ink-soft);
  font-size: 13px;
}

.praca-poznamka {
  padding: 18px 22px;
}

@media (min-width: 1080px) {
  .praca-layout {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 310px;
  }
}

/* ---------------------------------------------------------------------------
   Konzultácie a certifikácia v členskej zóne
--------------------------------------------------------------------------- */

.konzultacie-page {
  margin: 0 auto;
  max-width: 900px;
  padding: 28px 20px 90px;
}

.konzultacie-hero {
  margin-bottom: 28px;
}

.konzultacie-hero h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 5.4vw, 40px);
  line-height: 1.1;
  margin: 8px 0 12px;
}

.konzultacie-hero > p:last-child {
  color: var(--ink-soft);
  max-width: 620px;
}

.konz-karta {
  background: white;
  border: 1px solid var(--academy-line);
  margin-bottom: 18px;
  padding: 26px;
}

/* Čo už má, sa odlišuje od toho, čo si vie pridať — inak by členka nevedela,
   za čo už platí a za čo ešte nie. */
.konz-karta.je-aktivna {
  border-left: 3px solid #5c8a5c;
}

.konz-karta.je-ponuka {
  background: linear-gradient(135deg, var(--rose-mist), var(--lavender-soft));
  border-left: 3px solid var(--pink);
}

.konz-karta-hlava {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  margin-bottom: 12px;
}

.konz-karta h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
}

.konz-stav {
  background: var(--lime);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.konz-cena {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  white-space: nowrap;
}

.konz-cena small {
  color: var(--ink-soft);
  font-family: system-ui, sans-serif;
  font-size: 12px;
  margin-left: 4px;
}

.konz-karta > p {
  color: var(--ink-soft);
}

.konz-body {
  list-style: none;
  margin: 16px 0;
  padding: 0;
}

.konz-body li {
  padding: 6px 0 6px 22px;
  position: relative;
}

.konz-body li::before {
  color: var(--pink);
  content: "✓";
  font-weight: 700;
  left: 0;
  position: absolute;
}

.konz-prace {
  border-top: 1px solid var(--academy-line);
  list-style: none;
  margin: 16px 0;
  padding: 0;
}

.konz-prace li {
  align-items: baseline;
  border-bottom: 1px solid var(--academy-line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: space-between;
  padding: 12px 0;
}

.konz-prace a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  font-weight: 700;
}

.konz-praca-stav {
  color: var(--ink-soft);
  font-size: 13px;
}

.konz-poznamka {
  border-left: 3px solid var(--blush);
  color: var(--ink-soft);
  font-size: 14px;
  margin: 16px 0;
  padding-left: 14px;
}

.konz-karta .button {
  margin-top: 8px;
}

.konz-karta > small {
  color: var(--ink-soft);
  display: block;
  margin-top: 12px;
}

@media (min-width: 760px) {
  .konzultacie-page {
    padding: 44px clamp(24px, 4vw, 56px) 90px;
  }
}

/* Ukážka toho, čo doplnok obsahuje, kým ho členka nemá — vidí to, ale
   stlmené, aby bolo jasné, že to zatiaľ nemá aktívne. */
.konz-body.je-zamknuta li {
  color: var(--ink-soft);
}

.konz-body.je-zamknuta li::before {
  content: "🔒";
  font-size: 11px;
  top: 7px;
}

/* Certifikácie v členskej zóne */
.cert-zoznam {
  border-top: 1px solid var(--academy-line);
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.cert-zoznam li {
  align-items: center;
  border-bottom: 1px solid var(--academy-line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 0;
}

.cert-zoznam a {
  border-bottom: 1px solid currentColor;
  color: var(--pink-dark);
  font-weight: 700;
}

.cert-zoznam small {
  color: var(--ink-soft);
  display: block;
  font-size: 13px;
  padding-top: 3px;
}

/* Zamknutá certifikácia sa zobrazuje stlmene, ale nezmizne — členka má
   vidieť, čo ju čaká. */
.cert-zoznam li.je-zamknuta a {
  border-bottom-color: transparent;
  color: var(--ink-soft);
}

.cert-zoznam li.je-hotova a {
  color: #3f6b3f;
}

.cert-stiahnut {
  white-space: nowrap;
}

/* Etapy certifikácie: test a praktická časť pod sebou. */
.cert-etapa {
  margin-bottom: 26px;
}

.cert-etapa h2 {
  font-size: 22px;
  margin: 0 0 14px;
}

.cert-etapa.je-hotova h2::after {
  color: #3f6b3f;
  content: " ✓";
}

.cert-etapa.je-zamknuta {
  opacity: .62;
}

.cert-komentar {
  background: var(--rose-mist);
  border-left: 2px solid var(--pink);
  color: var(--ink-soft);
  font-size: 13px;
  margin: 8px 0 0;
  padding: 8px 10px;
}

/* Založenie konzultácie priamo na záložke */
.konz-nova {
  border-top: 1px solid var(--academy-line);
  margin-top: 18px;
  padding-top: 18px;
}

.konz-nova label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.konz-nova textarea {
  border: 1px solid var(--academy-line);
  font: inherit;
  padding: 10px;
  resize: vertical;
  width: 100%;
}

.konz-chyba {
  color: var(--pink-dark);
  display: block;
  font-size: 13px;
  padding-top: 6px;
}

/* Doplňujúca veta pod stavom — vysvetlenie, nie hlavná informácia. */
.stav-detail {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 8px 0 0;
}

/* ---------------------------------------------------------------------------
   Chybové hlášky vo formulároch (issue #41)

   Doteraz sa `.chyba` vykresľovala ako obyčajný odsek — členka si jej
   nevšimla. Červená je tu významová, nie ozdobná: musí byť jasné, že sa má
   niečo zadať znova. Odtieň drží blízko značkovej ružovej, aby nekričal.
--------------------------------------------------------------------------- */

:root {
  --chyba: #b32738;
  --chyba-pozadie: #fdecef;
}

.chyba,
.konz-chyba {
  background: var(--chyba-pozadie);
  border-left: 3px solid var(--chyba);
  color: var(--chyba);
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin: 12px 0;
  padding: 11px 14px;
}

/* Pole, ktoré treba prepísať, má byť vidieť aj bez čítania hlášky. */
.academy-login-form input[aria-invalid="true"],
.profil-form input[aria-invalid="true"],
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--chyba);
  outline: 2px solid var(--chyba-pozadie);
}

/* Nápoveda pod poľom — čo sa od hesla čaká, kým ho členka zadá. */
.napoveda {
  color: var(--ink-soft);
  display: block;
  font-size: 13px;
  padding-top: 6px;
}

/* ---------------------------------------------------------------------------
   Výber fotky (issue #43)

   Natívne „Choose File" vyzerá ako systémový prvok a členka ho nehľadala.
   Skrytý input + štítok, ktorý vyzerá ako tlačidlo — vzhľad z nášho webu,
   správanie natívne (klávesnica aj čítačka fungujú cez `for`).
--------------------------------------------------------------------------- */

.fotka-vyber {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fotka-vyber input[type="file"] {
  height: .1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: .1px;
  z-index: -1;
}

.fotka-vyber label {
  background: white;
  border: 1px solid var(--pink);
  color: var(--pink-dark);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  gap: 8px;
  padding: 11px 18px;
}

.fotka-vyber label:hover,
.fotka-vyber input[type="file"]:focus-visible + label {
  background: var(--rose-mist);
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* Názov vybraného súboru dopĺňa skript nižšie; bez neho ostane prázdny. */
.fotka-nazov {
  color: var(--ink-soft);
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fotka-nazov.je-chyba { color: var(--pink-dark); font-weight: 700; white-space: normal; }

/* Náhľady vybraných fotiek pred odoslaním (klub, issue #74). */
.fotka-nahlady {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.fotka-nahlady[hidden] { display: none; }
.fotka-nahlad {
  align-items: center;
  background: var(--rose-mist);
  border-radius: 10px;
  color: var(--ink-soft);
  display: inline-flex;
  font-size: 11px;
  height: 72px;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
  text-align: center;
  width: 72px;
  word-break: break-all;
}
.fotka-nahlad img {
  height: 72px;
  margin: -4px;
  max-width: none;
  object-fit: cover;
  width: 72px;
}

/* ---------------------------------------------------------------------------
   Zväčšenie fotky (issue #44)

   Klik na fotku ju otvorí cez celú obrazovku. Používa natívny <dialog>,
   takže Esc a klik mimo fungujú bez knižnice.
--------------------------------------------------------------------------- */

.fotka-zoom {
  cursor: zoom-in;
}

dialog.lupa {
  /* Tmavé pozadie je na samotnom dialógu, nie len na ::backdrop — cez
     priehľadný dialóg by presvitala stránka pod ním. */
  background: rgba(31, 20, 27, .94);
  border: 0;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

dialog.lupa::backdrop {
  background: rgba(31, 20, 27, .88);
}

dialog.lupa img {
  display: block;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  width: 100%;
}

dialog.lupa button {
  background: white;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 16px;
  position: fixed;
  right: 16px;
  top: 16px;
}

/* ---------------------------------------------------------------------------
   Profil: prístupy a odhlásenie (issues #46, #51, #52)
--------------------------------------------------------------------------- */

/* Hierarchia karty: čo mám → za akých podmienok → čo k tomu → dokedy. */
.pristup-perioda {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-top: 8px;
  padding: 4px 10px;
  text-transform: uppercase;
  width: fit-content;
}

.pristup-doplnky {
  border-top: 1px solid rgba(255, 255, 255, .28);
  margin-top: 14px;
  padding-top: 12px;
}

.pristup-doplnky > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  opacity: .75;
  text-transform: uppercase;
}

.pristup-doplnky ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.pristup-doplnky li {
  font-size: 14px;
  padding: 2px 0;
}

/* Odhlásenie stojí samo, mimo dlaždíc — je to odchod, nie pomoc. */
.odhlasenie {
  margin: 26px auto 0;
  max-width: 1180px;
  padding: 0 20px;
}

.odhlasenie button {
  background: none;
  border: 1px solid var(--chyba);
  color: var(--chyba);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  width: 100%;
}

.odhlasenie button:hover {
  background: var(--chyba);
  color: white;
}

@media (min-width: 760px) {
  .odhlasenie button {
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   Spodná navigácia na mobile (issue #45)

   Piata položka ju lámala do dvoch riadkov. Profil sa presunul do pravého
   horného rohu, zvyšné štyri dostali ikony a drobný popis pod nimi — tak,
   ako to má iOS: ikona nesie význam, text ho potvrdzuje.
--------------------------------------------------------------------------- */

.academy-bottom-nav a {
  flex-direction: column;
  font-size: 10px;
  gap: 3px;
  letter-spacing: .01em;
  line-height: 1.1;
  padding: 8px 4px;
  text-align: center;
}

.academy-bottom-nav .ikona {
  height: 22px;
  width: 22px;
}

/* Aktívna položka: ružová ikona aj text, prúžok hore ostáva. */
.academy-bottom-nav a.is-active .ikona {
  color: var(--pink);
}

/* Ikona profilu v hornej lište — kruh ostáva, obsah je obrys postavy. */
.academy-profile-link .ikona {
  height: 20px;
  width: 20px;
}

.academy-profile-link {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Konzultácia na mobile (issue #47)

   Súhrn stavu visel až na konci dlhej stránky, takže členka najprv scrollovala
   a až potom sa dozvedela, v akom je konzultácia stave. Na mobile ide hore
   a zúži sa do dvoch stĺpcov; nadpis sekcie sa vynechá, lebo len opakuje
   nadpis stránky.
--------------------------------------------------------------------------- */

.konz-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 14px;
}

.konz-meta > span:first-child {
  color: var(--ink-soft);
  font-size: 14px;
}

.konz-odznak {
  background: var(--lime);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 10px;
  text-transform: uppercase;
}

@media (max-width: 1079px) {
  .praca-layout {
    display: flex;
    flex-direction: column;
  }

  .praca-layout > aside {
    order: -1;
  }

  /* Nadpis panela opakuje nadpis stránky — na mobile je to len šum. */
  .praca-layout > aside .curriculum-heading {
    display: none;
  }

  .praca-suhrn {
    display: grid;
    gap: 0 14px;
    grid-template-columns: 1fr 1fr;
  }

  .praca-suhrn li {
    border-bottom: 0;
    display: block;
    padding: 10px 16px;
  }

  .praca-suhrn li strong {
    display: block;
  }

  .praca-poznamka {
    padding-top: 4px;
  }
}

/* Odznak stavu konzultácie nesie význam aj farbou: zelená je hotovo,
   ružová „som na rade ja", vrátená volá po akcii členky. */
.konz-odznak.je-uzavreta {
  background: var(--lime);
}

.konz-odznak.je-otvorena {
  background: var(--blush);
  color: var(--pink-dark);
}

.konz-odznak.je-vratena {
  background: var(--chyba-pozadie);
  color: var(--chyba);
}

.konz-nova input[type="text"] {
  border: 1px solid var(--academy-line);
  font: inherit;
  padding: 11px;
  width: 100%;
}

/* Rozpracovaná konzultácia: úprava nadpisu a textu, potom vedomé odoslanie. */
.konz-uprava label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 14px 0 6px;
}

.konz-uprava input[type="text"],
.konz-uprava textarea {
  border: 1px solid var(--academy-line);
  font: inherit;
  padding: 11px;
  width: 100%;
}

.konz-uprava textarea {
  resize: vertical;
}

.konz-uprava button {
  margin-top: 14px;
}

.konz-odoslanie {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: space-between;
  margin: 24px 0;
}

.konz-odoslanie small {
  color: var(--ink-soft);
  display: block;
  padding-top: 8px;
}

.konz-zahodit button {
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

.konz-zahodit button:hover {
  color: var(--chyba);
}

/* ---------------------------------------------------------------------------
   Vedený program — vlastný priestor (ZADANIE-academy-priestor.md, fáza 1).

   Okruhy sú zámerne RIADKY, nie dlaždice: sedem riadkov sa zmestí na obrazovku,
   sedem náhľadov nie. Zdvihnutá karta je na stránke jediná — tá s „Pokračuj".
--------------------------------------------------------------------------- */

/* Hlavička priestoru programu (#73): štítok, nadpis a perex boli nalepené
   na seba. Medzi nimi je teraz vzduch a perex má čitateľné riadkovanie. */
.program-hlava { margin-bottom: 30px; }
.program-hlava .course-path-label { margin-bottom: 10px; }
.program-hlava h1 { font-family: "Playfair Display", Georgia, serif; line-height: 1.05; margin: 0 0 16px; }
.program-perex { color: var(--ink-soft); line-height: 1.65; max-width: 56ch; }

.program-postup { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.program-pas {
  flex: 1 1 200px; max-width: 380px; height: 6px; border-radius: 99px;
  background: var(--blush); overflow: hidden;
}
.program-pas i { display: block; height: 100%; border-radius: 99px; background: var(--pink); }
.program-postup span { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Záložky priestoru. Zatiaľ jedna — Klub a Moje práce pribudnú vo fázach 2 a 3. */
.program-zalozky {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px;
}
.program-zalozky a {
  padding: 13px 18px; margin-bottom: -1px; text-decoration: none;
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
/* Záložka sa nesmie zalomiť na dva riadky („Moje / práce"). Na úzkom
   displeji sú užšie a keby sa ani tak nezmestili, lišta sa posúva do
   strany namiesto toho, aby pretiekla. */
/* Spodná linka ako vnútorný tieň, nie border: pri overflow by sa aktívna
   podčiarknutá záložka (margin -1px) o pixel orezala. */
.program-zalozky { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; scrollbar-width: none; }
.program-zalozky::-webkit-scrollbar { display: none; }
.program-zalozky a { flex: none; margin-bottom: 0; white-space: nowrap; }
@media (max-width: 520px) {
  .program-zalozky { gap: 0; }
  .program-zalozky a { padding: 13px 12px; }
}
.program-zalozky a:hover { color: var(--ink); }
.program-zalozky a.is-active { color: var(--pink); border-bottom-color: var(--pink); }

/* Pokračovanie v programe — rovnaký pás ako na nástenke (.continue-strip). */
.program-pokracuj-pas { margin-bottom: 38px; padding-top: 0; }

.program-gombik {
  background: var(--pink); color: var(--white); border-radius: 99px;
  padding: 13px 26px; text-decoration: none; font-weight: 500; white-space: nowrap;
}
.program-gombik:hover { background: var(--pink-dark); }

.program-nadpis {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.program-nadpis h2 { font-family: "Playfair Display", Georgia, serif; font-size: 24px; }
.program-nadpis p { font-size: 13px; color: var(--ink-soft); }

.program-okruhy { border-top: 1px solid var(--line); margin-top: 10px; }
.program-okruh { border-bottom: 1px solid rgba(48, 35, 45, 0.08); }
.program-okruh h3 { margin: 0; font-size: inherit; font-weight: inherit; }

.program-okruh-hlava {
  width: 100%; background: none; cursor: pointer; text-align: left; font-family: inherit;
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 16px;
  padding: 17px 6px; color: var(--ink);
}
.program-okruh-hlava:hover { background: var(--rose-mist); }
.program-okruh-hlava:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; border-radius: 8px; }

/* Stavová značka vľavo — stav okruhu sa dá prečítať bez čítania textu. */
.program-znacka {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.je-hotovy .program-znacka { background: #5d6b36; border-color: #5d6b36; color: var(--white); }
.je-rozrobeny .program-znacka { border-color: var(--pink); border-width: 2px; color: var(--pink); }
.je-zamknuty .program-znacka { opacity: 0.55; }

.program-okruh-text { display: block; min-width: 0; }
.program-okruh-nazov { display: block; font-size: 17px; font-weight: 500; }
.je-hotovy .program-okruh-nazov { color: var(--ink-soft); }
.program-okruh-meta { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.program-okruh-vpravo { display: flex; align-items: center; gap: 14px; }
.program-sipka { color: var(--ink-soft); transition: transform 0.18s ease; }
.program-okruh-hlava[aria-expanded="true"] .program-sipka { transform: rotate(90deg); }

.program-odznak {
  font-size: 12px; font-weight: 500; border-radius: 99px; padding: 4px 11px; white-space: nowrap;
}
.program-odznak.je-zamknuty { background: var(--lavender-soft); color: #5b3f7a; }

.program-okruh-telo { padding: 0 6px 20px 48px; }
.program-lekcie { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.program-lekcia {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--ink); font-size: 15px;
}
a.program-lekcia:hover { background: var(--rose-mist); }
.program-stav { color: var(--ink-soft); }
.program-lekcia.je-hotova .program-stav { color: #5d6b36; }
.program-lekcia.je-zamknuta { color: var(--ink-soft); }
.program-dlzka { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.program-okruh-pata {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 14px; color: var(--ink-soft);
}

@media (max-width: 720px) {
  .program-okruh-hlava { grid-template-columns: 26px 1fr auto; gap: 12px; }
  .program-okruh-telo { padding-left: 14px; }
  .program-odznak.je-zamknuty { display: none; }
}

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

/* ---------------------------------------------------------------------------
   Spodná lišta na mobile — vždy JEDEN riadok.

   Predtým mala napevno štyri stĺpce, takže piata položka (vedený program)
   spadla do druhého riadku a lišta narástla cez pol obrazovky. Stĺpce sa
   teraz dopĺňajú samy, takže lišta vydrží štyri aj päť položiek.

   Držané pravidlá (Material Design, Apple HIG): najviac päť položiek, ikona
   s krátkym popisom, dotyková plocha aspoň 44 px a rešpektovaná bezpečná zóna
   pod gestovým prúžkom.
--------------------------------------------------------------------------- */

.academy-bottom-nav {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-columns: none;
}

.academy-bottom-nav a {
  min-height: 48px;
  gap: 4px;
  padding: 9px 2px;
  /* Dlhý názov radšej skráti, než by rozhodil stĺpce. */
  min-width: 0;
}

.academy-bottom-nav a span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

/* Aktívna položka: ružový prúžok hore je pri piatich stĺpcoch úzky, tak ho
   držíme kratší a hrubší — inak splynie s okrajom vedľajšej položky. */
.academy-bottom-nav a.is-active::before {
  left: 26%;
  right: 26%;
  border-radius: 0 0 3px 3px;
}

/* Ikona v zozname lekcií. Menšia než v menu a farbu berie zo stavu riadku. */
.program-stav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pink);
}
.program-lekcia.je-hotova .program-stav { color: #5d6b36; }
.program-lekcia.je-zamknuta .program-stav { color: var(--ink-soft); opacity: 0.7; }

/* Značka programu v menu. Logo je farebné a štvorcové, tak sa oreže do
   squircla — v rovnakom tvare ako kreslené ikony vedľa neho. */
.ikona-znacka {
  border-radius: 30%;
  object-fit: cover;
  display: block;
}
.academy-sidebar .ikona-znacka { margin-right: 2px; }

/* --- Priestor programu: záložka Moje práce (fáza 2) ---------------------- */

.program-pocet {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: var(--blush);
  color: var(--pink-dark);
  border-radius: 99px;
  padding: 1px 7px;
  margin-left: 6px;
}

.program-kvota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--rose-mist);
  border: 1px solid var(--blush);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 28px;
}
.program-kvota strong { font-family: "Playfair Display", Georgia, serif; font-size: 20px; }
.program-kvota span { font-size: 14px; color: var(--ink-soft); }

.program-prace { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.program-praca {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 16px 6px;
  border-bottom: 1px solid rgba(48, 35, 45, 0.08);
}
.program-praca-text { min-width: 0; }
.program-druh {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.program-praca h2 { font-size: 16px; font-weight: 500; }
.program-praca-popis { font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.program-praca-vpravo { display: flex; align-items: center; gap: 14px; }

/* Stav nesie farbu podľa toho, či čaká na ňu alebo na Mišku. */
.program-odznak.je-vyzva { background: var(--blush); color: var(--pink-dark); }
.program-odznak.je-rozpracovane { background: var(--lavender-soft); color: #5b3f7a; }
.program-odznak.je-ceka { background: var(--cream); color: var(--ink-soft); }
.program-odznak.je-hotovo,
.program-odznak.je-hotovy { background: var(--lime); color: #5d6b36; }

.program-gombik.je-tichy {
  background: none;
  color: var(--pink);
  border: 1px solid var(--line);
  padding: 9px 18px;
  font-size: 14px;
}
.program-gombik.je-tichy:hover { background: var(--rose-mist); border-color: var(--pink); }
.program-gombik:disabled { opacity: .6; cursor: progress; }

.program-okruh-cert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.program-okruh-cert p { flex: 1; min-width: 220px; margin: 0; }

.program-prazdne {
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 40px 20px;
  display: grid;
  justify-items: center;
  gap: 12px;
}

@media (max-width: 720px) {
  .program-praca { grid-template-columns: 1fr; }
  .program-praca-vpravo { justify-content: space-between; }
}

/* --- Klub behu (fáza 3) -------------------------------------------------- */

.klub-filtre { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 24px; }
.klub-filtre a {
  font-size: 13px;
  background: var(--white);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 15px;
  text-decoration: none;
}
.klub-filtre a:hover { border-color: var(--pink); color: var(--pink); }
.klub-filtre a.is-vybrany { background: var(--ink); border-color: var(--ink); color: var(--white); }
.klub-filtre a span { opacity: 0.7; font-variant-numeric: tabular-nums; }

.klub-pisatko {
  background: var(--white);
  border: 1px solid rgba(48, 35, 45, 0.08);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 30px;
}
.klub-pisatko textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  resize: vertical;
}
.klub-pisatko textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.klub-pisatko-spodok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
/* Popisok výberu okruhu má vlastný riadok, aby sa nelepil na políčko. */
.klub-pisatko-spodok > .napoveda { flex: 1 0 100%; margin: 0; }
.klub-pisatko-spodok select {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 9px 14px;
  font: inherit;
  font-size: 14px;
  background: var(--white);
  color: var(--ink);
  /* Názvy okruhov bývajú dlhé. Bez min-width: 0 by pole v riadku nafúklo
     na šírku najdlhšej položky a na mobile pretieklo mimo kartu. */
  min-width: 0;
  max-width: 100%;
  flex: 1 1 200px;
  text-overflow: ellipsis;
}
.klub-pisatko-spodok .program-gombik { margin-left: auto; border: 0; cursor: pointer; font: inherit; }

@media (max-width: 560px) {
  .klub-pisatko-spodok { align-items: stretch; }
  .klub-pisatko-spodok select,
  .klub-pisatko-spodok .fotka-vyber,
  .klub-pisatko-spodok .program-gombik { flex: 1 0 100%; margin-left: 0; }
  .klub-pisatko-spodok .program-gombik { text-align: center; }
}

.klub-len-citanie {
  background: var(--lavender-soft);
  border-radius: 14px;
  padding: 14px 18px;
  color: #5b3f7a;
  margin-bottom: 28px;
  max-width: 62ch;
}

.klub-prispevky { display: flex; flex-direction: column; gap: 26px; }

.klub-prispevok { border-bottom: 1px solid rgba(48, 35, 45, 0.08); padding-bottom: 24px; }
.klub-prispevok:last-child { border-bottom: 0; }

.klub-autor { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; flex-wrap: wrap; }
.klub-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 500; color: var(--pink-dark); background: var(--blush);
}
.klub-autor strong { font-size: 15px; font-weight: 500; }
.klub-cas { font-size: 13px; color: var(--ink-soft); }
.klub-tag { display: block; font-size: 12px; color: var(--pink); text-decoration: none; }
.klub-tag:hover { text-decoration: underline; }

.klub-text { max-width: 62ch; margin-bottom: 12px; white-space: pre-line; }
/* Adresy v príspevkoch sú klikateľné; dlhé nesmú roztiahnuť stránku na mobile. */
.klub-text a, .klub-odpoved p a { overflow-wrap: anywhere; }

.klub-fotky {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  max-width: 460px;
  margin-bottom: 12px;
}
.klub-fotka { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 10px; overflow: hidden; }
.klub-fotka img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.klub-fotka:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

.klub-reakcie { display: flex; align-items: center; gap: 18px; font-size: 14px; color: var(--ink-soft); }
.klub-reakcie form { display: contents; }
.klub-srdce {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px;
  color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
}
.klub-srdce:hover { color: var(--pink); }
.klub-srdce.je-dane { color: var(--pink); font-weight: 500; }
.klub-srdce span { font-size: 15px; }
.klub-zmazat {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--ink-soft); text-decoration: underline; margin-left: auto;
}
.klub-zmazat:hover { color: #b32738; }

.klub-odpoved {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--rose-mist);
  max-width: 62ch;
}
.klub-odpoved p { margin-top: 2px; white-space: pre-line; }
/* Miškina odpoveď musí byť na prvý pohľad jasná — v chate sa jej rada stratí. */
.klub-odpoved.je-od-misky { background: var(--lavender-soft); }
.klub-odpoved.je-od-misky strong { color: #5b3f7a; }

.klub-odpovedat { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.klub-odpovedat textarea {
  flex: 1; min-width: 200px; resize: vertical; field-sizing: content; min-height: 3.2em; max-height: 50vh;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 16px; font: inherit; background: var(--white); color: var(--ink);
}
.klub-odpovedat button { align-self: flex-end; }
.klub-odpoved-zmaz { margin-top: 4px; }
.klub-odpovedat textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.klub-odpovedat button { border: 1px solid var(--line); cursor: pointer; font: inherit; }

.program-okruh-diskusia a { color: var(--pink); text-decoration: none; font-weight: 500; }
.program-okruh-diskusia a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .klub-pisatko-spodok .program-gombik { margin-left: 0; width: 100%; text-align: center; }
  .klub-fotky { max-width: none; }
}

/* Moderácia klubu (fáza 4) — akcie sú zámerne nenápadné, aby z nástenky
   nespravili ovládací panel. */
.klub-moje-akcie { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.klub-nahlasit { margin-left: auto; }
.klub-odkaz {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--ink-soft); text-decoration: underline; padding: 0;
}
.klub-odkaz:hover { color: var(--pink); }
.klub-odkaz.je-nebezpecna:hover { color: #b32738; }

.klub-uprava { margin-bottom: 12px; display: grid; gap: 10px; justify-items: start; max-width: 62ch; }
.klub-uprava textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font: inherit; color: var(--ink); background: var(--white); resize: vertical;
}
.klub-uprava button { border: 1px solid var(--line); cursor: pointer; font: inherit; }

/* Upozornenia z klubu v profile (fáza 5). */
.profil-upozornenia {
  background: var(--white);
  border: 1px solid rgba(48, 35, 45, 0.08);
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 24px;
}
.profil-upozornenia h2 { font-family: "Playfair Display", Georgia, serif; font-size: 20px; margin-bottom: 14px; }
.profil-upozornenia form { display: grid; gap: 14px; justify-items: start; }
.profil-upozornenia label { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.profil-upozornenia input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pink); }
.profil-upozornenia strong { display: block; font-weight: 500; }
.profil-upozornenia span { font-size: 14px; color: var(--ink-soft); }
.profil-upozornenia button { border: 1px solid var(--line); cursor: pointer; font: inherit; }

/* ---------------------------------------------------------------------------
   Výzva na push a na pridanie na plochu.

   Sedí nad spodnou lištou, aby neprekryla navigáciu, a dá sa zavrieť —
   výzva, ktorá sa nedá odbiť, je otravnejšia než žiadna.
--------------------------------------------------------------------------- */

.push-vyzva {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 70;
  background: var(--white);
  border: 1px solid var(--blush);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(110, 55, 82, 0.22);
  padding: 16px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  max-width: 560px;
  margin: 0 auto;
}
.push-vyzva[hidden] { display: none; }
.push-vyzva > div:first-child { flex: 1; min-width: 200px; }
.push-vyzva strong { display: block; font-weight: 500; margin-bottom: 2px; }
.push-vyzva p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.push-vyzva-akcie { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.push-vyzva .program-gombik { border: 0; cursor: pointer; font: inherit; padding: 11px 20px; font-size: 14px; }
.push-zavriet {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--ink-soft); text-decoration: underline; white-space: nowrap;
}
.push-zavriet:hover { color: var(--ink); }

/* Na desktope spodná lišta nie je, tak môže sedieť nižšie. */
@media (min-width: 1080px) {
  .push-vyzva { bottom: 20px; }
}

/* Otvorená odpoveď a súhlas s použitím fotiek pri certifikácii. */
.praca-otazka textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  resize: vertical;
}
.praca-otazka textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.praca-otazka textarea:disabled { background: var(--cream); color: var(--ink-soft); }

.cert-suhlas {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
  max-width: 62ch;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}
.cert-suhlas input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pink); }

/* ---------------------------------------------------------------------------
   Text v e-booku — odsadenie odstavcov (issue #6).

   Preflight na začiatku súboru nuluje okraje všetkému, takže redakčné HTML
   z admina malo odstavce nalepené na seba a kapitola pôsobila ako jeden blok
   textu. Medzery sa preto dopĺňajú tu, pri čítačke, nie v obsahu — inak by
   sa museli písať do každého e-booku zvlášť.
--------------------------------------------------------------------------- */

.reader-section > p + p,
.reader-section > ul,
.reader-section > ol,
.reader-section > blockquote {
  margin-top: 1.15em;
}

.reader-section > ul,
.reader-section > ol {
  color: #564951;
  font-size: 17px;
  line-height: 1.72;
  padding-left: 22px;
}

.reader-section > ul { list-style: disc; }
.reader-section > ol { list-style: decimal; }
.reader-section li + li { margin-top: 0.4em; }

/* Podnadpis vnútri textu potrebuje väčší odstup nad sebou než pod. */
.reader-section > h4,
.reader-section > h5 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  line-height: 1.25;
  margin: 1.7em 0 0.5em;
}

.reader-section > p strong { color: var(--ink); font-weight: 600; }

/* Odkazy v texte e-booku. Samotná farba nestačí — v ružovom texte ich
   kurzantka prehliadne, a na tlačenej strane ich nevidno vôbec. Preto
   podčiarknutie, a pri odkazoch von z webu ešte šípka, aby bolo dopredu
   jasné, že klik odvedie preč (e-shopy v odporúčaniach). */
.reader-section a,
.reader-table a {
  color: var(--pink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(157, 42, 89, 0.4);
}
.reader-section a:hover,
.reader-table a:hover { text-decoration-color: currentColor; }
.reader-section a[href^="http"]:not([href*="bymishel."])::after,
.reader-table a[href^="http"]:not([href*="bymishel."])::after {
  content: "↗";
  display: inline-block;
  margin-left: 0.25em;
  font-size: 0.85em;
  text-decoration: none;
  vertical-align: baseline;
}

/* Dlhý text sa číta lepšie v užšom stĺpci než cez celú šírku čítačky. */
.reader-section > p,
.reader-section > ul,
.reader-section > ol { max-width: 68ch; }

/* Vodoznak s menom kurzantky. Je to poznámka pod čiarou, nie odkaz na
   konci kapitoly — preto tenšie, tichšie a s poriadnym odstupom od textu,
   aby nekričal hneď pod tlačidlom na ďalšiu kapitolu. */
.vodoznak {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid rgba(48, 35, 45, 0.08);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   Nechtovinky — hlavička zoznamu a karty na mobile (issue #38).

   Kategórie nemali žiadne štýly: boli to holé odkazy nalepené pod nadpisom,
   ktoré sa na úzkej obrazovke lámali doprostred vety. Sú to filtre, tak
   vyzerajú ako filtre — a na mobile sa posúvajú do strany namiesto toho, aby
   zaberali pol obrazovky.
--------------------------------------------------------------------------- */

.blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 24px;
}

.blog-toolbar > div {
  display: flex;
  gap: 8px;
  /* Na mobile sa kategórie posúvajú prstom; na desktope sa zmestia. */
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  max-width: 100%;
}
.blog-toolbar > div::-webkit-scrollbar { display: none; }

.blog-toolbar > div a {
  flex: none;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 15px;
}
.blog-toolbar > div a:hover { border-color: var(--pink); color: var(--pink); }
.blog-toolbar > div a.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* „Čítať ďalej →" nemalo určenú veľkosť, tak zdedilo veľkosť nadpisu karty
   a šípka prerástla text. */
.blog-grid strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--pink);
  line-height: 1.2;
}
.blog-grid strong span { font-size: 15px; line-height: 1; }

@media (max-width: 719px) {
  /* Obrázok 112 px vedľa textu je na telefóne priúzky — karta ide pod seba. */
  .blog-grid article > a { display: block; }
  .blog-grid img { aspect-ratio: 16 / 9; height: auto; min-height: 0; width: 100%; }
  .blog-grid article div { padding: 16px 16px 18px; }
  .blog-grid h3 { font-size: 19px; }

  .blog-toolbar { align-items: stretch; }
  /* Kategórie majú vlastný riadok a smú siahať po okraj obrazovky. */
  .blog-toolbar > div {
    margin: 0 -20px;
    padding: 0 20px 2px;
  }
}

/* Dôvody, prečo si vybrať iný kurz — býva ich viac, tak sú to odrážky
   a nie jeden dlhý odsek (issue #64). */
.fit-dovody {
  list-style: disc;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: var(--ink-soft);
}

/* Sekcie na stránke osobného kurzu — „ako prebieha" a „čo dostaneš" (#64). */
.course-sekcia { margin-top: 32px; max-width: 62ch; }
.course-sekcia h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  margin-bottom: 10px;
}
.course-sekcia ul {
  list-style: disc;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Semináre DNKa' (issue #64).

   Nie sú to ďalšie kurzy — sú kratšie, lacnejšie a Miška ich vedie za značku.
   V mriežke medzi kurzami splývali, tak stoja na vlastnom tmavom páse, ktorý
   preruší krémový rytmus stránky, a čítajú sa ako postupnosť: Base je základ,
   Builder na ňu nadväzuje.
--------------------------------------------------------------------------- */

.seminare-pas {
  /* Fialová je farba značky DNKa' (odčítaná z jej vlastných materiálov, odtieň
     274°). Pás ňou drží odstup od krémovej stránky bez toho, aby zčernel. */
  --dnka: #7c45c6;
  --dnka-tmava: #341c52;
  --dnka-tlmena: #6b5580;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(124, 69, 198, 0.16), transparent 62%),
    linear-gradient(180deg, #f6f1fc 0%, #efe6fa 100%);
  color: var(--dnka-tmava);
  border: 1px solid rgba(124, 69, 198, 0.16);
  border-radius: 28px;
  padding: clamp(30px, 4.4vw, 56px);
  /* Pás je sám o sebe karta, takže vonkajší okraj nesie on — inak sa zaoblené
     rohy oprú o okraj obrazovky a vypadne z odsadenia zvyšku stránky. Šírka
     aj medzery sedia na stĺpec, v ktorom stojí kalendár a katalóg. */
  margin-inline: auto;
  width: calc(100% - 40px);
  max-width: 1160px;
  display: grid;
  gap: clamp(26px, 3.4vw, 56px);
  align-items: start;
}

.seminare-uvod .eyebrow { color: var(--dnka); }

.seminare-uvod h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  text-wrap: balance;
}

.seminare-uvod p {
  color: var(--dnka-tlmena);
  font-size: 17px;
  line-height: 1.65;
  max-width: 46ch;
}

/* Poradie nesie význam, tak ho aj povieme slovami — nielen číslami v krúžku. */
.seminare-postup {
  margin-top: 14px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--dnka);
}

.seminare-kapacita {
  margin-top: 6px;
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0.8;
}

.seminare-zoznam {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.seminare-zoznam a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 20px;
  padding: 22px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(124, 69, 198, 0.14);
  border-radius: 18px;
  transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.seminare-zoznam a:hover {
  border-color: rgba(124, 69, 198, 0.42);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(52, 28, 82, 0.55);
}
.seminare-zoznam a:focus-visible { outline: 2px solid var(--dnka); outline-offset: 2px; }

.seminare-krok {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(124, 69, 198, 0.12);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--dnka);
}

.seminare-telo { display: grid; gap: 5px; min-width: 0; }
.seminare-telo strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 500;
  line-height: 1.15;
}
.seminare-perex {
  color: var(--dnka-tlmena);
  font-size: 15px;
  line-height: 1.55;
  max-width: 62ch;
  /* Perex má aj štyristo znakov a v zozname z neho bolo sedem riadkov —
     to sa nedá preletieť očami. Celý text je na detaile, kam riadok vedie. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.seminare-cena {
  font-size: 19px;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.seminare-sipka { color: var(--dnka); display: grid; place-items: center; }
.seminare-zoznam a:hover .seminare-sipka { transform: translateX(3px); }
.seminare-sipka { transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }

@media (min-width: 900px) {
  .seminare-pas { grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr); }
}

@media (max-width: 599px) {
  .seminare-zoznam a {
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-areas: "krok telo" ". cena";
    row-gap: 10px;
    padding: 18px;
  }
  /* V stĺpci patrí číslo k prvému riadku názvu, nie do stredu celej karty. */
  .seminare-krok { grid-area: krok; width: 26px; height: 26px; font-size: 12px; align-self: start; margin-top: 2px; }
  .seminare-telo { grid-area: telo; }
  .seminare-cena { grid-area: cena; font-size: 17px; }
  /* Na úzkej obrazovke sú riadky kratšie, tak sa zmestí o jeden viac. */
  .seminare-perex { -webkit-line-clamp: 3; line-clamp: 3; }
  /* Šípka pri stĺpcovom rozložení nemá kam ísť — riadok je celý klikací. */
  .seminare-sipka { display: none; }
}

/* ---------------------------------------------------------------------------
   Katalóg podľa úrovne.

   Štrnásť dlaždíc s rovnakou cenou aj veľkosťou sa nedalo prezerať. Skupiny
   dávajú oku miesta, kde sa zastaví, a stránka sa pýta zrozumiteľnú otázku:
   kde dnes stojíš?
--------------------------------------------------------------------------- */

.katalog-uroven + .katalog-uroven { margin-top: clamp(44px, 6vw, 76px); }

.katalog-uroven-hlavicka {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 18px;
  padding-bottom: 14px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid rgba(48, 35, 45, 0.14);
}

.katalog-uroven-hlavicka h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(23px, 2.8vw, 31px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

.katalog-uroven-hlavicka p {
  grid-column: 1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  max-width: 58ch;
}

/* Počet tém patrí k nadpisu skupiny, nie do vety — číslo si oko nájde samo. */
.katalog-uroven-hlavicka span {
  grid-row: 1;
  grid-column: 2;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* Vypísaný termín je jediná vec, ktorá dlaždicu odlíši od ostatných — a tá
   jediná si zaslúži plôšku, nie len inú farbu písma. Zelená, lebo znamená
   „dá sa ísť" (issue #69). */
.topic-grid article span.je-termin {
  background: #e7f4ec;
  border-radius: 999px;
  color: #1f6b42;
  display: inline-block;
  font-weight: 800;
  padding: 5px 11px;
}

/* Perexy majú od dvoch riadkov po osem a karty boli kvôli tomu rôzne vysoké.
   V katalógu ide o preletenie očami; celý text je na detaile kurzu. */
.katalog-uroven .topic-grid p {
  font-size: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Katalóg na mobile (issue #69).

   Cez telefón chodí viac než deväť z desiatich návštevníčok, takže toto nie
   je zúžená verzia desktopu — toto je tá stránka. Fotka najprv stála v 116px
   stĺpci vedľa textu, z ktorej bol zvislý odrezok, a text sa tlačil do 217 px.
   Karta sa preto skladá na seba.

   Druhá polovica problému bola veľkosť písma: perex mal 13 px a odkaz tiež.
   To je veľkosť pre popisku pod obrázkom na monitore, nie pre text, ktorý
   niekto číta v ruke. Perex má 15 px, odkaz 15 px a väčšiu plochu na prst.
--------------------------------------------------------------------------- */
@media (max-width: 759px) {
  .katalog-uroven .topic-grid article {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  /* Nižšia fotka: pri 190 px zabrala jedna karta celú obrazovku a katalóg
     mal pätnásť obrazoviek. Takto sa dajú karty porovnávať. */
  .katalog-uroven .topic-grid img { aspect-ratio: 16 / 9; }

  .katalog-uroven .topic-grid article > div {
    align-self: start;
    padding: 16px 18px 18px;
  }

  .katalog-uroven .topic-grid h3 {
    font-size: 20px;
    margin: 4px 0 6px;
  }

  .katalog-uroven .topic-grid p {
    font-size: 15px;
    line-height: 1.5;
    /* Na užšom riadku sú dva riadky toľko obsahu ako tri na širokom. */
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .katalog-uroven .topic-grid article a {
    font-size: 15px;
    margin-top: 12px;
    /* Odkaz je jediné, čo sa na karte dá stlačiť — nech sa dá trafiť. */
    padding-bottom: 6px;
  }

  .katalog-uroven .topic-grid article span.je-termin {
    font-size: 11px;
    padding: 6px 12px;
  }

  /* Nadpis skupiny a jej veta držia pokope; medzera patrí medzi skupiny. */
  .katalog-uroven-hlavicka { margin-bottom: 18px; padding-bottom: 12px; }
  .katalog-uroven-hlavicka p { font-size: 15px; }
  .katalog-uroven + .katalog-uroven { margin-top: 40px; }
}

/* V skupinách je dlaždíc pätnásť. S pôvodnou 330px fotkou mala sekcia cez päť
   obrazoviek a nedala sa preletieť — tu je fotka pripomienka, nie výjav. */
@media (min-width: 760px) {
  .katalog-uroven .topic-grid article { grid-template-rows: auto auto; }
  .katalog-uroven .topic-grid img { aspect-ratio: 4 / 3; }
  /* Dlaždice majú rôzne dlhé názvy; text musí začínať v jednej linke,
     inak sa mriežka rozkolíše. */
  .katalog-uroven .topic-grid article > div { padding: 20px; align-self: start; }
  .katalog-uroven .topic-grid h3 { font-size: 22px; }
}

@media (min-width: 1220px) {
  .katalog-uroven .topic-grid { grid-template-columns: repeat(4, 1fr); }
  .katalog-uroven .topic-grid img { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .seminare-zoznam a,
  .seminare-sipka { transition: none; }
}

/* ---------------------------------------------------------------------------
   Fotka sa drží vo svojej bunke, text nikdy nekončí na fotke (issue #69).

   Čo sa stalo: dlaždice kurzov mali fotku ako priame dieťa mriežky s pevným
   riadkom a výškou 100 %. Percento sa proti takému riadku nedopočíta
   spoľahlivo a prehliadač vtedy siahne po pomere strán z atribútov width a
   height v značke. Tie sme na trinástich miestach písali natvrdo 1800×1012,
   hoci polovica fotiek je na výšku (1080×1350, 1012×1800). Fotka sa preto
   vykreslila aj dvakrát vyššia, než mala, presiahla do riadka s textom — a
   keďže sa kreslí pred ním, ostali slová priamo na fotke.

   Dve pravidlá, ktoré tú triedu chýb zatvárajú:

   1. Výšku dlaždicovej fotky určuje pomer strán, nie percento. Taká fotka
      nemá ako pretiecť, v žiadnom prehliadači.
   2. Text v dlaždici má vlastný nepriehľadný podklad a stojí nad fotkou.
      Keby sa niečo predsa pohlo, slová zostanú čitateľné.

   Preto sa rozmery na neznámych fotkách (obálky kurzov, lekcií a článkov)
   do značky už nepíšu — miesto rezervuje pomer strán z CSS, ktorý si s
   realitou nemôže protirečiť.
--------------------------------------------------------------------------- */

.topic-grid img,
.blog-grid img,
.kniznica-karta img {
  height: auto;
  /* Bez tohto by sa prvok v mriežke odmietol zmenšiť pod svoj obsah. */
  min-height: 0;
  object-fit: cover;
  width: 100%;
}

.topic-grid img { aspect-ratio: 16 / 10; }

/* Poistka pre text v dlaždici: vlastný podklad a vrstva nad fotkou. */
.topic-grid article > div,
.blog-grid article div {
  background: var(--rose-mist);
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------------------
   Text lekcie v členskej zóne (`.obsah`).

   Doteraz nemal žiadnu typografiu: nadpisy mali rovnakých 16 px ako odsek,
   odrážky prišli o bodky a odstavce o medzery. Pri videolekciách to nebolo
   vidieť, lebo tam je text krátky popisok. Prípravné materiály okruhu 0 sú
   ale celá stránka na čítanie — a tá sa takto nedá preletieť očami.

   Pravidlá sú rovnaké ako pri článkoch na webe, len prispôsobené užšiemu
   stĺpcu členskej zóny a tomu, že sa číta hlavne na telefóne.
--------------------------------------------------------------------------- */

.obsah {
  color: #554953;
  font-size: 16px;
  line-height: 1.75;
  max-width: 68ch;
}

.obsah > p { margin: 0 0 18px; }
.obsah > p:last-child { margin-bottom: 0; }

.obsah h2 {
  color: var(--ink);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(23px, 5vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 40px 0 14px;
}
.obsah h2:first-child { margin-top: 0; }

.obsah h3 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 28px 0 10px;
}

.obsah ul,
.obsah ol {
  display: grid;
  gap: 10px;
  margin: 0 0 20px;
  padding-left: 22px;
}
.obsah ul { list-style: disc; }
.obsah ol { list-style: decimal; }
.obsah li::marker { color: var(--pink); }
.obsah li > p { margin: 0; }

.obsah strong { color: var(--ink); font-weight: 600; }

/* Odkazov je v prípravnom materiáli vyše štyridsať — musí byť vidieť,
   ktoré slovo je odkaz, aj bez toho, aby text zošedivel od podčiarknutí. */
.obsah a {
  color: var(--pink-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.obsah a:hover { text-decoration-thickness: 2px; }

/* Prvý a posledný odsek nesú kontext celého materiálu, nie ďalší bod zoznamu. */
.obsah .uvod,
.obsah .zaver {
  background: var(--rose-mist);
  border-left: 3px solid var(--pink);
  padding: 14px 16px;
}
.obsah .zaver { margin-top: 26px; }

.obsah hr {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  margin: 34px 0;
}

.obsah figure:has(table) { margin: 26px 0; overflow-x: auto; }
.obsah table { border-collapse: collapse; min-width: 100%; }
.obsah th,
.obsah td {
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.obsah th { background: var(--rose-mist); font-size: 13px; text-transform: uppercase; }

/* ---------------------------------------------------------------------------
   Obrázok v e-booku na celú veľkosť.

   Náhľady v čítaní sú orezané na 16:10, aby si strana držala rytmus. Fotky
   nechtov sú ale najčastejšie na výšku, takže z nich orez odreže vrch aj
   spodok — a práve tam býva to, na čo sa kurzantka pozerá. Kliknutím sa
   otvorí celá.
--------------------------------------------------------------------------- */

/* Spúšťač je tlačidlo, nie obrázok s onclickom — kvôli klávesnici
   a čítačkám. Vyzerať má ale ako obrázok, nie ako tlačidlo. */
.lupa-spust {
  background: none;
  border: 0;
  cursor: zoom-in;
  display: block;
  height: 100%;
  padding: 0;
  width: 100%;
}
.lupa-spust:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.lupa {
  background: rgba(24, 18, 22, 0.94);
  border: 0;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  width: 100%;
}
.lupa::backdrop { background: rgba(24, 18, 22, 0.94); }

.lupa figure {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 20px;
  /* Na iPhone by spodok popisku skončil pod gestovou lištou. */
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Celý obrázok, nie výrez: contain namiesto cover. To je celý zmysel lupy. */
.lupa img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.lupa figcaption {
  color: rgba(246, 238, 242, 0.8);
  font-size: 13px;
  line-height: 1.5;
  max-width: 60ch;
  text-align: center;
}

.lupa-zavri {
  background: rgba(246, 238, 242, 0.14);
  border: 0;
  border-radius: 50%;
  color: #f6eef2;
  cursor: pointer;
  font-size: 26px;
  height: 44px;
  line-height: 1;
  position: fixed;
  right: 14px;
  top: max(14px, env(safe-area-inset-top));
  width: 44px;
  z-index: 1;
}
.lupa-zavri:hover { background: rgba(246, 238, 242, 0.24); }

/* Absolvovaná VIP konzultácia (issue #28) — záznam, nie výzva. */
.konz-absolvovana {
  color: var(--academy-muted, #74656e);
  font-size: 13px;
  margin: 6px 0 0;
}

/* ---------------------------------------------------------------------------
   Kurz, ktorý členka nemá (issue #65).

   Predtým jednoriadková hláška v záhlaví, ktorá farbou splývala s ostatnými.
   Je to pritom moment, keď členka práve ukázala, čo chce — preto karta
   s obrázkom kurzu, plánom, ktorý ho odomyká, a dvoma cestami ďalej.
--------------------------------------------------------------------------- */
/* Karta má „udrieť do očí" (#65): plný gradient značky, zaoblené rohy
   a fotka ako vsadený obrázok. Bez farebného ľavého okraja — ten pôsobí
   ako šablóna z generátora (#82). */
.zamknuty-kurz {
  background: var(--gradient-rich);
  border-radius: 20px;
  box-shadow: 0 22px 44px -26px rgba(134, 33, 73, 0.7);
  color: #fff;
  display: grid;
  gap: 4px;
  margin: 0 0 28px;
  overflow: hidden;
  padding: 10px;
  position: relative;
}

/* Jemný lesk v rohu, aby gradient nepôsobil ako plochá tehla. */
.zamknuty-kurz::after {
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.zamknuty-kurz > img {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.zamknuty-kurz-telo { padding: 14px 12px 12px; position: relative; z-index: 1; }
.zamknuty-kurz-telo .eyebrow {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
}

.zamknuty-kurz-telo h2 {
  color: #fff;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
  text-wrap: pretty;
}

.zamknuty-kurz-telo p { color: rgba(255, 255, 255, 0.88); font-size: 15px; line-height: 1.55; margin: 0; }
.zamknuty-kurz-telo strong { color: #fff; }

.zamknuty-kurz-akcie {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.zamknuty-kurz-akcie .button { border-radius: 999px; justify-content: center; text-align: center; }
/* Na gradiente je hlavná akcia biela, vedľajšia len obrys. */
.zamknuty-kurz-akcie .button-primary { background: #fff; border-color: #fff; color: var(--pink-dark); }
.zamknuty-kurz-akcie .button-primary:hover { background: var(--blush); border-color: var(--blush); }
.zamknuty-kurz-akcie .button-secondary { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.zamknuty-kurz-akcie .button-secondary:hover { background: rgba(255, 255, 255, 0.12); }

@media (min-width: 760px) {
  .zamknuty-kurz { gap: 10px; grid-template-columns: 240px 1fr; }
  .zamknuty-kurz > img { aspect-ratio: auto; height: 100%; }
  .zamknuty-kurz-telo { padding: 18px 22px 18px 14px; }
  .zamknuty-kurz-akcie { display: flex; flex-wrap: wrap; }
}

/* Individuálny kurz — tri kroky namiesto dátumu (#31). */
.individual-kroky {
  counter-reset: krok;
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.individual-kroky li {
  align-items: center;
  counter-increment: krok;
  display: flex;
  font-size: 15px;
  gap: 12px;
}
.individual-kroky li::before {
  align-items: center;
  background: var(--rose-mist);
  border-radius: 50%;
  color: var(--pink-dark);
  content: counter(krok);
  display: inline-flex;
  flex: none;
  font-size: 13px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.zamknuty-kurz-vip {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.55;
  margin: 18px 0 0 !important;
  padding-top: 14px;
}
.zamknuty-kurz-vip a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Detail kurzu — úvod, program po blokoch a ohlasy (semináre DNKa').

   Obsah semináru je na starom webe dlhý súvislý text s dvoma blokmi
   programu. Aby sa dal na mobile čítať, nesie ho úzky stĺpec, program má
   očíslované bloky a v bodoch je zvýraznený len ich názov — oko preletí
   názvy a zastaví sa pri tom, čo ho zaujíma.
--------------------------------------------------------------------------- */

.course-tagline {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(19px, 5vw, 24px);
  font-style: italic;
  line-height: 1.3;
  margin: -4px 0 16px;
  text-wrap: balance;
}

.course-o-kurze {
  padding: 64px 20px 76px;
}

.course-o-kurze-uvod {
  margin: 0 auto 64px;
  max-width: 780px;
}
.course-o-kurze-uvod p {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.7;
  max-width: 62ch;
  text-wrap: pretty;
}
.course-o-kurze-uvod p + p { margin-top: 1.1em; }
/* Prvý odsek je téza celej stránky. Odlíši sa len tmavšou farbou — serif
   by z neho spravil ďalší ťažký blok, akým bol predtým perex. */
.course-o-kurze-uvod p:first-child { color: var(--ink); }

.course-program { margin: 0 auto; max-width: 780px; }
.course-program .pricing-section-heading { margin-bottom: 28px; }

.course-program-bloky {
  display: grid;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.course-program-blok {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px 8px;
}

.course-program-blok header {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  padding-bottom: 16px;
}
.course-program-cislo {
  color: var(--pink);
  flex: none;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-top: 5px;
}
.course-program-blok h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(22px, 5.6vw, 26px);
  line-height: 1.2;
  text-wrap: balance;
}
.course-program-blok header p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-top: 4px;
}

.course-program-blok ul { list-style: none; margin: 0; padding: 0; }
.course-program-blok li {
  border-bottom: 1px solid rgba(48, 35, 45, 0.06);
  padding: 16px 0;
}
.course-program-blok li:last-child { border-bottom: 0; }
.course-program-blok li strong {
  color: var(--ink);
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.course-program-blok li span {
  color: var(--ink-soft);
  display: block;
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.course-ohlasy {
  background: var(--rose-mist);
  padding: 76px 20px;
}
.course-ohlasy .pricing-section-heading h2 { font-size: clamp(28px, 7vw, 42px); }
.course-ohlasy-mriezka {
  align-items: start;
  display: grid;
  gap: 14px;
  margin: 0 auto;
  max-width: 1040px;
}
.course-ohlas {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(102, 48, 77, 0.1);
  overflow: hidden;
}
.course-ohlas img { display: block; height: auto; width: 100%; }

@media (min-width: 760px) {
  .course-o-kurze { padding: 96px clamp(40px, 8vw, 130px); }
  .course-program-blok { padding: 28px 32px 12px; }
  .course-ohlasy { padding: 96px clamp(40px, 8vw, 130px); }
  .course-ohlasy-mriezka { grid-template-columns: repeat(3, 1fr); }
}

/* Seminár má len „pre koho", bez druhej karty — nech nevisí na pol šírky. */
@media (min-width: 760px) {
  .course-fit-section.is-jedna { grid-template-columns: minmax(0, 780px); justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Živé vysielanie NailBE Academy (Whereby Embedded).
--------------------------------------------------------------------------- */

.zive-bodka.is-zalozka {
  display: inline-block;
  height: 8px;
  margin-left: 6px;
  vertical-align: 0.15em;
  width: 8px;
}

.zive-okno {
  background: #1d1519;
  border-radius: 18px;
  margin-bottom: 32px;
  overflow: hidden;
}
.zive-okno-hlava {
  align-items: center;
  color: white;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 6px 10px;
  padding: 12px 16px;
}
.zive-okno-hlava span:last-child { color: rgba(255, 255, 255, 0.65); font-variant-numeric: tabular-nums; margin-left: auto; }
.zive-bodka {
  animation: zive-pulz 1.6s ease-in-out infinite;
  background: #ff3b52;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}
@keyframes zive-pulz { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .zive-bodka { animation: none; } }

/* Video má pomer 16:9; na mobile na výšku by 16:9 bolo drobné, tak mu
   dáme aspoň 60 % výšky obrazovky. */
.zive-embed {
  aspect-ratio: 16 / 9;
  display: block;
  min-height: 60svh;
  width: 100%;
}
@media (min-width: 900px) { .zive-embed { min-height: 0; } }

.zive-okno > .zive-pomoc { color: rgba(255, 255, 255, 0.6); padding: 10px 16px 14px; }
.zive-pomoc { color: var(--ink-soft); font-size: 13px; margin-top: 10px; }

.zive-dalsie h2 { font-family: "Playfair Display", Georgia, serif; font-size: 24px; margin-bottom: 12px; }
.zive-dalsie ul { border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.zive-dalsie li {
  align-items: baseline;
  border-bottom: 1px solid rgba(48, 35, 45, 0.08);
  display: grid;
  gap: 4px 20px;
  grid-template-columns: minmax(150px, auto) 1fr;
  padding: 14px 0;
}
.zive-dalsie time { display: grid; }
.zive-dalsie time strong { font-weight: 600; }
.zive-dalsie time span { color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .zive-dalsie li { grid-template-columns: 1fr; } }

.zive-zapojenie {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 10px 16px;
  justify-content: space-between;
  padding: 14px 16px;
}
.zive-zapojenie p { flex: 1 1 240px; }
.zive-gombik {
  align-items: center;
  background: var(--pink);
  border-radius: 99px;
  color: white;
  display: inline-flex;
  font-weight: 600;
  min-height: 44px;
  padding: 0 20px;
  text-decoration: none;
  white-space: nowrap;
}
.zive-gombik:hover { background: var(--pink-dark); }
.zive-gombik.is-tichy { background: rgba(255, 255, 255, 0.12); }
.zive-gombik.is-tichy:hover { background: rgba(255, 255, 255, 0.2); }

.zive-zapojena {
  color: white;
  padding: 28px 20px 24px;
}
.zive-zapojena-nadpis {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  margin-bottom: 14px;
}
.zive-zapojena ol {
  display: grid;
  gap: 8px;
  line-height: 1.55;
  margin: 0 0 18px;
  padding-left: 22px;
}
.zive-zapojena-pomoc { color: rgba(255, 255, 255, 0.7); font-size: 14px; margin-bottom: 18px; }
.zive-zapojena-pomoc a { color: white; }
.zive-zapojena .zive-gombik { border: 0; cursor: pointer; font: inherit; font-weight: 600; }

/* Tréningová a ostrá práca v okruhu NailBE Academy. */
.program-prace { display: grid; gap: 8px; }
.program-prace-nadpis { color: var(--ink); font-size: 14px; font-weight: 600; }
.program-praca {
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px 14px;
  text-decoration: none;
}
.program-praca:hover { border-color: var(--pink); }
.program-praca-druh { font-weight: 500; }
.program-praca-stav { color: var(--ink-soft); font-size: 13px; }
.program-praca.je-hotova .program-praca-stav { color: #2f7d4f; }

/* ---------------------------------------------------------------------------
   Hlasové hodnotenie od Mišky — miniprehrávač v hodnotení práce
--------------------------------------------------------------------------- */
.hlasove-hodnotenie {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 14px;
}

.praca-hodnotenie .eyebrow + .hlasove-hodnotenie {
  margin-top: 8px;
}

.hlas-prehravac {
  align-items: center;
  background: var(--rose-mist);
  border: 1px solid var(--blush);
  border-radius: 999px;
  display: flex;
  gap: 12px;
  padding: 8px 14px 8px 8px;
}

/* Bez JS ostáva natívny prehrávač, vlastné ovládanie sa skryje. */
.hlas-prehravac:not(.je-pripraveny) > :not(audio) {
  display: none;
}

.hlas-prehravac:not(.je-pripraveny) audio {
  width: 100%;
}

.hlas-prehravac.je-pripraveny audio {
  display: none;
}

.hlas-play {
  align-items: center;
  background: var(--pink);
  border: 0;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  transition: background 0.15s;
  width: 44px;
}

.hlas-play:hover {
  background: var(--pink-dark);
}

.hlas-play svg {
  fill: currentColor;
  height: 22px;
  width: 22px;
}

.hlas-ikona-pauza,
.hlas-prehravac.hra .hlas-ikona-play {
  display: none;
}

.hlas-prehravac.hra .hlas-ikona-pauza {
  display: block;
}

.hlas-telo {
  flex: 1;
  min-width: 0;
}

.hlas-hlavicka {
  align-items: baseline;
  display: flex;
  font-size: 13px;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 4px;
}

.praca-hodnotenie .hlas-hlavicka span {
  white-space: nowrap;
}

.hlas-meno {
  color: var(--ink);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hlas-cas {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.hlas-posuvnik {
  --hlas-priebeh: 0%;
  appearance: none;
  background: linear-gradient(to right, var(--pink) var(--hlas-priebeh), var(--blush) var(--hlas-priebeh));
  border-radius: 999px;
  cursor: pointer;
  display: block;
  height: 4px;
  margin: 8px 0;
  width: 100%;
}

.hlas-posuvnik::-webkit-slider-thumb {
  appearance: none;
  background: var(--pink);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(48, 35, 45, 0.3);
  height: 14px;
  width: 14px;
}

.hlas-posuvnik::-moz-range-thumb {
  background: var(--pink);
  border: 2px solid white;
  border-radius: 50%;
  height: 14px;
  width: 14px;
}

.hlas-rychlost {
  background: white;
  border: 1px solid var(--blush);
  border-radius: 999px;
  color: var(--pink);
  cursor: pointer;
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 48px;
  padding: 6px 8px;
}

/* Na telefóne stačí nadpis karty — meno by sa aj tak skrátilo na „Hlas…". */
@media (max-width: 480px) {
  .hlas-meno {
    display: none;
  }

  .hlas-hlavicka {
    justify-content: flex-end;
  }
}

.praca-hodnotenie p.hlas-text {
  margin-top: 14px;
}

/* ---------------------------------------------------------------------------
   Záložka Konzultácie — prehľad „kto je na rade" (redizajn 2026-09)

   Prvá obrazovka (hlavne na mobile / v PWA) má povedať jedno: odpísala mi
   Miška? Preto hore krátky nadpis, signál s ikonou a hneď zoznam konzultácií
   zoradený podľa toho, kto je na rade. Každý stav má vlastnú farbu a ikonu
   v squircli (tá istá rodina tvarov ako ikony v menu), nárok a ponuky idú
   až pod to.
--------------------------------------------------------------------------- */

.visually-hidden {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.konzultacie-hero.je-kompaktna {
  margin-bottom: 18px;
}

.konzultacie-hero.je-kompaktna h1 {
  font-size: clamp(30px, 6vw, 40px);
  margin-bottom: 10px;
}

.konz-signal {
  align-items: center;
  color: var(--ink-soft);
  display: flex;
  font-size: 15px;
  gap: 10px;
  margin: 0;
}

.konz-signal .ikona {
  flex: none;
}

.konz-signal.je-odpisala {
  background: var(--blush);
  border-radius: 14px;
  color: var(--pink-dark);
  font-weight: 600;
  padding: 12px 14px;
}

.konz-prehlad {
  margin-bottom: 34px;
}

/* Kvóta ako bodky — koľko ešte môže poslať, bez čítania čísel. */
.konz-kvota {
  align-items: center;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 8px 12px;
  margin-bottom: 14px;
}

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

.konz-kvota-prenos {
  color: var(--academy-muted);
  display: block;
  font-size: 12px;
}

.konz-kvota-bodky {
  display: inline-flex;
  gap: 5px;
}

.konz-kvota-bodky i {
  border: 1.5px solid var(--pink);
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.konz-kvota-bodky i.je-volna {
  background: var(--pink);
}

.konz-zoznam {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.konz-riadok {
  --stav: var(--ink-soft);
  --stav-pozadie: var(--academy-bg);
  background: white;
  border: 1px solid var(--academy-line);
  border-radius: 18px;
  color: var(--ink);
  display: flex;
  gap: 14px;
  padding: 16px;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.konz-riadok:hover,
.konz-riadok:focus-visible {
  border-color: var(--stav);
  box-shadow: 0 10px 30px rgba(110, 55, 82, .10);
}

.konz-riadok:active {
  transform: scale(.99);
}

.konz-riadok.je-odpisala {
  --stav: var(--pink);
  --stav-pozadie: var(--blush);
  border-color: var(--pink);
  box-shadow: 0 10px 30px rgba(167, 47, 99, .12);
}

.konz-riadok.je-rozpracovana {
  --stav: #6b4f9a;
  --stav-pozadie: var(--lavender-soft);
  border-style: dashed;
}

.konz-riadok.je-caka {
  --stav: #8a6a2f;
  --stav-pozadie: var(--cream);
}

.konz-riadok.je-uzavreta {
  --stav: #3f6b3f;
  --stav-pozadie: var(--lime);
}

.konz-riadok-ikona {
  align-items: center;
  background: var(--stav-pozadie);
  border-radius: 14px;
  color: var(--stav);
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.konz-riadok.je-odpisala .konz-riadok-ikona {
  background: var(--pink);
  color: white;
}

.konz-riadok-telo {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.konz-riadok-stav {
  color: var(--stav);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.konz-riadok-nazov {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.konz-riadok-odpoved {
  background: var(--rose-mist);
  border-left: 2px solid var(--stav);
  border-radius: 0 10px 10px 0;
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 12px;
}

.konz-riadok-odpoved q {
  color: var(--ink);
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
}

.konz-riadok-prilohy {
  color: var(--pink-dark);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  gap: 6px 14px;
}

.konz-riadok-prilohy > span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.konz-riadok-datum {
  color: var(--ink-soft);
  font-size: 13px;
  margin-top: 4px;
}

.konz-riadok.je-odpisala .konz-riadok-datum {
  color: var(--pink-dark);
  font-weight: 600;
}

.konz-prazdne {
  background: var(--rose-mist);
  border: 1px dashed var(--academy-line);
  border-radius: 18px;
  color: var(--ink-soft);
  padding: 18px;
}

.konz-prehlad .konz-nova {
  background: white;
  border: 1px solid var(--academy-line);
  border-radius: 18px;
  margin-top: 14px;
  padding: 16px;
}

.konz-prehlad .konz-nova label {
  align-items: center;
  display: flex;
  font-size: 15px;
  gap: 8px;
  margin-bottom: 10px;
}

.konz-prehlad .konz-nova label .ikona {
  background: var(--pink);
  border-radius: 8px;
  color: white;
  padding: 2px;
}

.konz-nova-riadok {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.konz-nova-riadok input[type="text"] {
  flex: 1 1 220px;
  min-height: 48px;
}

.konz-prehlad .konz-nova .button {
  margin-top: 0;
  min-height: 48px;
}

.konz-archiv {
  margin-top: 18px;
}

.konz-archiv summary {
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 0;
}

.konz-archiv summary span {
  background: var(--lime);
  border-radius: 99px;
  color: var(--ink);
  font-size: 12px;
  margin-left: 6px;
  padding: 2px 8px;
}

.konz-archiv .konz-zoznam {
  margin-top: 8px;
}

.konz-oddiel {
  border-top: 1px solid var(--academy-line);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  margin: 0 0 14px;
  padding-top: 22px;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .konz-riadok {
    gap: 12px;
    padding: 14px;
  }

  .konz-riadok-ikona {
    border-radius: 12px;
    height: 40px;
    width: 40px;
  }

  .konz-prehlad .konz-nova .button {
    width: 100%;
    justify-content: center;
  }
}

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

/* Prečítaná vrátená konzultácia: už nie nová, ale akcia je stále na nej. */
.konz-riadok.je-na-rade {
  --stav: var(--pink-dark);
  --stav-pozadie: var(--blush);
  border-color: var(--blush);
}

.konz-riadok.je-precitana {
  --stav: var(--pink-dark);
  --stav-pozadie: var(--rose-mist);
}

/* ---------------------------------------------------------------------------
   Sticky panely v členskej zóne — jednotný odstup od hornej lišty

   Lišta (.academy-topbar) má na desktope ~95 px, panely mali top 84–98 px,
   takže sa lepili priamo na lištu a vyzeralo to ako chyba. Jedna premenná
   pre všetky: výška lišty + rovnaká medzera, akú majú karty medzi sebou.
--------------------------------------------------------------------------- */

:root {
  --academy-topbar-vyska: 96px;
  --academy-sticky-top: calc(var(--academy-topbar-vyska) + 24px);
}

@media (min-width: 1080px) {
  .lesson-curriculum,
  .library-filters,
  .reader-chapter-nav,
  .reader-tools,
  .calculator-tool-intro {
    top: var(--academy-sticky-top);
  }

  .library-filters,
  .reader-chapter-nav {
    max-height: calc(100vh - var(--academy-sticky-top) - 24px);
  }
}

/* Detail konzultácie: „Miška odpísala" ako zelený odznak s bodkou, nie odsek
   textu — kurzantka to má vidieť, nie čítať. Klik zavedie k odpovedi. */
.konz-odznak.je-odpisala {
  align-items: center;
  background: #e3f1e3;
  border-radius: 99px;
  color: #2f6b3a;
  display: inline-flex;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  text-decoration: none;
}

.konz-odznak.je-odpisala i {
  background: #3a9a4c;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(58, 154, 76, .22);
  height: 8px;
  width: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .konz-odznak.je-odpisala i {
    animation: konz-pulz 2s ease-out infinite;
  }
}

@keyframes konz-pulz {
  0% { box-shadow: 0 0 0 0 rgba(58, 154, 76, .45); }
  100% { box-shadow: 0 0 0 8px rgba(58, 154, 76, 0); }
}

/* ---------------------------------------------------------------------------
   Rozhovor ku konzultácii — história správ ako v chate

   Miškine správy vľavo (biele s ružovým okrajom, pri nich hlasovky),
   kurzantkine vpravo v jemnej levanduľovej. Pole na odpoveď je pod
   poslednou správou, kde ho v chate každá čaká.
--------------------------------------------------------------------------- */

.konz-rozhovor {
  background: white;
  border: 1px solid var(--academy-line);
  margin-bottom: 24px;
  padding: 22px;
}

.konz-rozhovor > h2 {
  color: var(--pink-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0 0 16px;
  text-transform: uppercase;
}

.konz-vlakno {
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.konz-sprava {
  display: grid;
  gap: 4px;
  justify-items: start;
  max-width: 88%;
}

.konz-sprava.je-moja {
  justify-items: end;
  justify-self: end;
}

.konz-sprava-autor {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  padding: 0 6px;
}

.konz-sprava.je-od-misky .konz-sprava-autor {
  color: var(--pink-dark);
}

.konz-sprava-bublina {
  background: var(--rose-mist);
  border: 1px solid var(--blush);
  border-radius: 4px 18px 18px 18px;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  width: 100%;
}

.konz-sprava.je-moja .konz-sprava-bublina {
  background: var(--lavender-soft);
  border-color: var(--lavender);
  border-radius: 18px 4px 18px 18px;
}

.konz-sprava-bublina p {
  line-height: 1.55;
  margin: 0;
  white-space: pre-line;
}

.konz-sprava-bublina .hlasove-hodnotenie {
  margin: 0;
}

.konz-sprava time {
  color: var(--ink-soft);
  font-size: 12px;
  padding: 0 6px;
}

.konz-odpoved-form {
  border-top: 1px solid var(--academy-line);
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  scroll-margin-top: var(--academy-sticky-top, 120px);
}

.konz-odpoved-form textarea {
  border: 1px solid var(--academy-line);
  border-radius: 14px;
  font: inherit;
  min-height: 90px;
  padding: 12px 14px;
  resize: vertical;
  width: 100%;
}

.konz-odpoved-form textarea:focus {
  border-color: var(--pink);
  outline: 2px solid var(--blush);
}

.konz-odpoved-form .button {
  justify-self: end;
}

.konz-rozhovor-koniec {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 18px 0 0;
}

@media (max-width: 520px) {
  .konz-rozhovor {
    padding: 16px;
  }

  .konz-sprava {
    max-width: 94%;
  }

  .konz-odpoved-form .button {
    justify-content: center;
    justify-self: stretch;
  }
}

/* ---------------------------------------------------------------------------
   Nástenka ako mobilná aplikácia (issue #82).

   Predtým: 44px serifové nadpisy, hranaté aj zaoblené boxy, farebné ľavé
   okraje a osem obrazoviek scrollovania. Teraz jeden systém: malé šedé
   popisky sekcií, biele karty so zaoblením 18 px, riadky so zoznamom
   a prepínač Prehľad / Cesty. Zvýraznenie je buď gradient značky
   (Pokračuj), alebo tónovaný riadok so stavovou pilulkou (môj kurz).
--------------------------------------------------------------------------- */
.nastenka,
.profil,
.kniznica,
.lekcia {
  --n-karta: #fff;
  --n-ciara: #f0e8ed;
  --n-tlmene: #8a7b85;
}
.nastenka { max-width: 1120px; }

.nastenka-hlavicka p { color: var(--n-tlmene); font-size: 14px; margin: 0; }
.nastenka-hlavicka h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  margin: 2px 0 16px;
}

.nastenka-prepinac {
  background: #ece3e8;
  border-radius: 999px;
  display: none;
  margin: 0 0 16px;
  padding: 3px;
}
.nastenka.ma-zalozky .nastenka-prepinac { display: flex; }
.nastenka-prepinac button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #6e5f69;
  cursor: pointer;
  flex: 1;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
}
.nastenka-prepinac button[aria-selected="true"] {
  background: #fff;
  box-shadow: 0 1px 3px rgba(48, 35, 45, 0.1);
  color: var(--ink);
}

.nastenka-popiska {
  align-items: baseline;
  color: var(--n-tlmene);
  display: flex;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  justify-content: space-between;
  letter-spacing: 0;
  margin: 20px 4px 7px;
  text-transform: none;
}
.nastenka-popiska a { color: var(--pink); font-weight: 600; text-decoration: none; }
.nastenka-panel > .nastenka-popiska:first-child { margin-top: 4px; }

/* Pokračuj — jediná vec na plný gradient. */
.nastenka-pokracuj {
  align-items: center;
  background: var(--gradient-rich);
  border-radius: 20px;
  color: #fff;
  display: flex;
  gap: 12px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  text-decoration: none;
}
.nastenka-pokracuj::after {
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.nastenka-pokracuj img { border-radius: 14px; flex: none; height: 64px; object-fit: cover; width: 64px; }
.nastenka-pokracuj-text { display: grid; flex: 1; gap: 1px; min-width: 0; position: relative; z-index: 1; }
.nastenka-pokracuj-text small { color: rgba(255, 255, 255, 0.82); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nastenka-pokracuj-text strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.nastenka-pokracuj .progress-track { background: rgba(255, 255, 255, 0.3); height: 3px; margin-top: 5px; }
.nastenka-pokracuj .progress-track i { background: #fff; }
.nastenka-pokracuj-play {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  color: var(--pink-dark);
  display: flex;
  flex: none;
  font-size: 13px;
  height: 38px;
  justify-content: center;
  position: relative;
  width: 38px;
  z-index: 1;
}

.nastenka-cisla { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.nastenka-cisla div { background: var(--n-karta); border-radius: 14px; box-shadow: 0 0 0 1px var(--n-ciara); padding: 10px 6px; text-align: center; }
.nastenka-cisla strong { display: block; font-size: 17px; font-weight: 700; }
.nastenka-cisla small { color: var(--n-tlmene); font-size: 11px; }

.nastenka-zoznam {
  background: var(--n-karta);
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--n-ciara), 0 6px 18px -14px rgba(102, 48, 77, 0.35);
  overflow: hidden;
}
.nastenka-riadok {
  align-items: center;
  color: var(--ink);
  display: flex;
  gap: 12px;
  padding: 11px 14px;
  text-decoration: none;
}
.nastenka-riadok + .nastenka-riadok { border-top: 1px solid var(--n-ciara); }
.nastenka-riadok:hover { background: #fcf8fa; }
.nastenka-riadok-text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.nastenka-riadok-text strong { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.nastenka-riadok-text small { color: var(--n-tlmene); font-size: 12.5px; }
.nastenka-riadok-text .progress-track { height: 3px; margin-top: 6px; }
.nastenka-sipka { color: #c4b7bf; flex: none; font-size: 20px; }

.nastenka-dlazdica {
  align-items: center;
  border-radius: 12px;
  display: flex;
  flex: none;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.nastenka-dlazdica.is-rose { background: var(--blush); color: var(--pink-dark); }
.nastenka-dlazdica.is-lavender { background: var(--lavender-soft); color: #5d3f86; }
.nastenka-dlazdica.is-lime { background: var(--lime); color: #4d5a1f; }
.nastenka-dlazdica.is-peach { background: #fdeede; color: #9a5320; }
.nastenka-dlazdica.is-gradient { background: var(--gradient-rich); color: #fff; }

.nastenka-datum {
  align-items: center;
  background: #f5eef2;
  border-radius: 12px;
  display: flex;
  flex: none;
  flex-direction: column;
  height: 48px;
  justify-content: center;
  line-height: 1;
  width: 44px;
}
.nastenka-datum strong { font-size: 18px; }
.nastenka-datum small { color: var(--n-tlmene); font-size: 11px; margin-top: 3px; text-transform: uppercase; }

/* Kurz, na ktorý je prihlásená — zelený, lebo „toto je tvoje, ideš". */
.nastenka-riadok.is-moj { background: #eef8f1; }
.nastenka-riadok.is-moj .nastenka-datum { background: #d5eedd; color: #1f6b42; }
.nastenka-riadok.is-moj .nastenka-datum small { color: #1f6b42; }
.nastenka-stav {
  border-radius: 999px;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  white-space: nowrap;
}
.nastenka-stav.is-zeleny { background: #fff; color: #1f6b42; }
.nastenka-akcia { color: var(--pink-dark); flex: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.nastenka-viac {
  border-top: 1px solid var(--n-ciara);
  color: var(--pink);
  display: block;
  font-size: 13px;
  font-weight: 600;
  padding: 12px;
  text-align: center;
  text-decoration: none;
}

/* Na širokej obrazovke je miesta dosť — obe časti vedľa seba, bez prepínača. */
@media (min-width: 1000px) {
  .nastenka-hlavicka h1 { font-size: 32px; }
  .nastenka.ma-zalozky .nastenka-prepinac { display: none; }
  .nastenka { column-gap: 28px; display: grid; grid-template-columns: 1.3fr 1fr; }
  .nastenka-hlavicka { grid-column: 1 / -1; }
  .nastenka-panel#panel-cesty { padding-top: 0; }
}

/* ---------------------------------------------------------------------------
   Profil ako v mobilnej aplikácii (issue #77).

   Hore karta členstva na gradiente značky, pod ňou tie isté zoznamy ako na
   nástenke. Formuláre sú v riadkoch <details> a rozbalia sa na mieste.
--------------------------------------------------------------------------- */
.profil { max-width: 640px; }

.profil-hlavicka {
  background: var(--gradient-rich);
  border-radius: 22px;
  color: #fff;
  overflow: hidden;
  padding: 18px;
  position: relative;
}
.profil-hlavicka::after {
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.22), transparent 55%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.profil-hlavicka h1 {
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}
.profil-hlavicka > p { font-size: 13px; margin: 3px 0 14px; opacity: 0.85; }

.profil-clenstvo {
  background: #fff;
  border-radius: 16px;
  color: var(--ink);
  padding: 12px 14px;
  position: relative;
  z-index: 1;
}
.profil-clenstvo > strong { display: block; font-size: 17px; font-weight: 700; margin: 2px 0 6px; }
.profil-clenstvo-riadok {
  align-items: center;
  color: #8a7b85;
  display: flex;
  font-size: 12.5px;
  gap: 8px;
  justify-content: space-between;
}
.profil-clenstvo-riadok small { font-size: 12px; }
.profil-clenstvo .pristup-perioda { font-size: 12px; white-space: nowrap; }
.profil-stav {
  background: #f5eef2;
  border-radius: 999px;
  color: var(--pink-dark);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  white-space: nowrap;
}
.profil-stav.is-zeleny { background: #e7f4ec; color: #1f6b42; }
.profil-doplnky { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
.profil-doplnky li {
  background: #f5eef2;
  border-radius: 999px;
  color: var(--pink-dark);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
}

.profil-ikona {
  align-items: center;
  background: #f5eef2;
  border-radius: 10px;
  color: var(--pink-dark);
  display: flex;
  flex: none;
  font-size: 15px;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.profil-riadok + .profil-riadok,
.nastenka-zoznam > * + * { border-top: 1px solid #f0e8ed; }
.profil-riadok { border-bottom: 0; padding: 0; }
.profil-riadok summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: inherit;
  font-weight: inherit;
  gap: 12px;
  list-style: none;
  min-height: 0;
  padding: 12px 14px;
}
.profil-riadok summary::after { content: none; }
.profil-riadok summary small { font-weight: 400; }
.profil-riadok p { max-width: none; padding: 0; }
.profil-riadok summary::-webkit-details-marker { display: none; }
.profil-riadok summary .nastenka-sipka { transition: transform 0.2s ease; }
.profil-riadok[open] summary .nastenka-sipka { transform: rotate(90deg); }
.profil-obsah { padding: 0 14px 16px 60px; }
.profil-obsah .profile-row { border-top: 1px solid #f0e8ed; padding: 10px 0; }
.profil-obsah .profile-row:first-child { border-top: 0; padding-top: 0; }
.profil-obsah form { display: grid; gap: 6px; }
.profil-obsah label { color: #8a7b85; font-size: 12px; margin-top: 6px; }
.profil-obsah input {
  background: #f7f3f5;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
}
.profil-obsah input:focus { background: #fff; border-color: var(--pink); outline: none; }
.profil-obsah .button {
  border-radius: 999px;
  justify-self: start;
  margin-top: 10px;
  padding: 10px 20px;
}
.profil-obsah > small { color: #8a7b85; display: block; font-size: 12px; margin-top: 6px; }

.profil-prepinac-riadok {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  padding: 12px 14px;
}
.profil-prepinac-riadok[hidden] { display: none; }
.profil-klub { margin: 0; }
.profil-klub .profil-prepinac-riadok + .profil-prepinac-riadok { border-top: 1px solid #f0e8ed; }

/* Prepínač v štýle iOS — pre checkbox aj pre tlačidlo s role="switch". */
.profil-prepinac {
  appearance: none;
  background: #ddd3d9;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  flex: none;
  height: 26px;
  margin: 0;
  padding: 0;
  position: relative;
  transition: background 0.2s ease;
  width: 44px;
}
.profil-prepinac::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  content: "";
  height: 20px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 0.2s ease;
  width: 20px;
}
.profil-prepinac:checked,
.profil-prepinac[aria-checked="true"] { background: #34a853; }
.profil-prepinac:checked::after,
.profil-prepinac[aria-checked="true"]::after { transform: translateX(18px); }
.profil-prepinac:disabled { opacity: 0.6; }
.profil-prepinac:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

.profil-bez-upozorneni { color: #8a7b85; font-size: 13px; margin: 0; padding: 12px 14px; }

.profil-odhlasenie { margin: 22px 0 0; max-width: none; padding: 0; width: 100%; }
.profil-odhlasenie button {
  background: #fff;
  border: 0;
  border-radius: 18px;
  color: #b32738;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 0 0 1px #f0e8ed;
  padding: 13px;
  width: 100%;
}

/* Položky členstva v rozbalenom riadku — kompaktne a so stavom v pilulke. */
.profil-obsah .profile-row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.profil-obsah .profile-row strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.profil-obsah .profile-row small { color: #8a7b85; font-size: 12px; }
.profil-obsah .course-status {
  background: #e7f4ec;
  border: 0;
  border-radius: 999px;
  color: #1f6b42;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  white-space: nowrap;
}
.profil-obsah .course-status.is-locked { background: #f5eef2; color: var(--pink-dark); }
.profil-obsah .subscription-cancel,
.profil-obsah .subscription-cancelled { border: 0; margin-top: 6px; padding: 0; }
.profil-obsah .subscription-cancel > summary { font-size: 13px; min-height: 0; padding: 8px 0; }

.profil-obsah .profile-row { flex-wrap: nowrap; }
.profil-obsah .profile-row > div { min-width: 0; }

/* ---------------------------------------------------------------------------
   Spodné menu ako plávajúca „pilulka“ (vzor z iOS appky Frigg / iOS 26).

   Namiesto lišty prilepenej k spodnému okraju je menu samostatný zaoblený
   ostrovček s odstupom od krajov. Aktívnu položku nesie mäkká kapsula za
   ikonou aj textom — nie tenký prúžok hore, ktorý bol pri piatich
   položkách ťažko viditeľný. Ikony sú väčšie (26 px), popisy čitateľnejšie.

   Pilulka sedí nad gestovým prúžkom iPhonu, ale nie až tak vysoko ako celá
   bezpečná zóna — tak to robí aj iOS. Obsah pod ňou dostane dosť miesta,
   aby posledný riadok nikdy neostal schovaný.
--------------------------------------------------------------------------- */

@media (max-width: 1079.98px) {
  :root {
    --menu-odstup: max(12px, calc(env(safe-area-inset-bottom) - 12px));
  }

  .academy-app {
    padding-bottom: calc(100px + var(--menu-odstup));
  }

  .academy-bottom-nav {
    left: 12px;
    right: 12px;
    bottom: var(--menu-odstup);
    max-width: 520px;
    margin: 0 auto;
    min-height: 0;
    padding: 6px;
    gap: 2px;
    /* Matné sklo ako v iOS: obsah pod menu presvitá rozmazaný a sýtosť
       farieb sa zvýši, aby nevyzeral vyblednuto. Rozmazanie robí grafický
       čip telefónu — pri jednom malom prvku to výkon nepocíti. Svetlá
       linka zhora (inset) je odlesk hrany skla. */
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      0 0 0 0.5px rgba(110, 55, 82, 0.12),
      0 12px 32px rgba(110, 55, 82, 0.16),
      0 1px 3px rgba(110, 55, 82, 0.08);
  }

  /* Prehliadač bez rozmazania by pod textom ukázal ostrý obsah — vtedy
     radšej takmer plné biele pozadie. */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .academy-bottom-nav {
      background: rgba(255, 255, 255, 0.96);
    }
  }

  .academy-bottom-nav a {
    min-height: 58px;
    padding: 8px 2px 7px;
    gap: 4px;
    border-radius: 999px;
    color: var(--academy-ink);
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, transform 0.12s ease;
  }

  .academy-bottom-nav a span {
    font-size: 11px;
  }

  .academy-bottom-nav .ikona {
    width: 26px;
    height: 26px;
    color: var(--academy-muted);
  }

  /* Pri piatich položkách (kurzantka programu) je každý stĺpec užší —
     „Konzultácie“ by sa inak orezali o pixel. */
  .academy-bottom-nav:has(> a:nth-child(5)) {
    gap: 0;
  }

  .academy-bottom-nav:has(> a:nth-child(5)) a {
    padding-inline: 0;
  }

  .academy-bottom-nav:has(> a:nth-child(5)) a span {
    font-size: 10.5px;
  }

  /* Aktívna položka = ružová kapsula, prúžok hore už netreba. */
  .academy-bottom-nav a.is-active {
    /* Aj kapsula je na skle trochu priesvitná, inak by pôsobila nalepene. */
    background: rgba(247, 214, 228, 0.7);
    color: var(--pink-dark);
  }

  .academy-bottom-nav a.is-active .ikona {
    color: var(--pink);
  }

  .academy-bottom-nav a.is-active::before {
    display: none;
  }

  /* Pri ťuknutí sa položka jemne stiahne — okamžitá odozva ako v appke. */
  .academy-bottom-nav a:active {
    transform: scale(0.95);
  }

  .academy-bottom-nav a:focus-visible {
    outline: 2px solid var(--pink);
    outline-offset: -2px;
  }

  /* Výzva na push sedí nad pilulkou, nie cez ňu. */
  .push-vyzva {
    bottom: calc(86px + var(--menu-odstup));
  }
}

/* Kto má v systéme zapnuté „Znížiť priehľadnosť“, dostane plné menu. */
@media (max-width: 1079.98px) and (prefers-reduced-transparency: reduce) {
  .academy-bottom-nav {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .academy-bottom-nav a { transition: none; }
  .academy-bottom-nav a:active { transform: none; }
}

.profil-bez-predplatneho { font-size: 13px; margin: 10px 0 0; }

/* ---------------------------------------------------------------------------
   Knižnica ako mobilná appka (návrh ku #82, časť 1).

   Malý nadpis, hľadanie ako pilulka, filtre v spodnom paneli, čipy
   kategórií a každá kategória ako vodorovný pás kariet (posúva sa prstom
   ako v App Store). Pri vybranej kategórii sa pás zalomí do mriežky.
--------------------------------------------------------------------------- */
.sr-only {
  border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;
}

.kniznica { max-width: 1240px; }
.kniznica .lesson-breadcrumbs { margin-bottom: 10px; }
.kniznica .zamknuty-kurz { margin-bottom: 16px; }

.kniznica-hladanie { display: flex; gap: 8px; margin: 0 0 12px; }
.kniznica-hladanie form { flex: 1; min-width: 0; }
.kniznica-hladanie input[type="search"] {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7b85' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 17px;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--n-ciara);
  font: inherit;
  font-size: 15px;
  height: 44px;
  margin: 0;
  padding: 0 16px 0 40px;
  width: 100%;
}
.kniznica-hladanie input[type="search"]:focus { box-shadow: 0 0 0 2px var(--pink); outline: none; }
.kniznica-filtre-tlacidlo {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--n-ciara);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex: none;
  height: 44px;
  justify-content: center;
  position: relative;
  width: 44px;
}
.kniznica-filtre-tlacidlo i {
  background: var(--pink);
  border: 2px solid #fff;
  border-radius: 50%;
  height: 11px;
  position: absolute;
  right: 6px;
  top: 6px;
  width: 11px;
}

/* Prepínač druhu obsahu — rovnaký ako na nástenke. */
.kniznica .kniznica-prepinac { display: flex; margin-bottom: 10px; }
.kniznica-prepinac a {
  align-items: baseline;
  border-radius: 999px;
  color: #6e5f69;
  display: flex;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  gap: 4px;
  justify-content: center;
  padding: 8px 2px;
  text-decoration: none;
  white-space: nowrap;
}
.kniznica-prepinac a.is-active { background: #fff; box-shadow: 0 1px 3px rgba(48, 35, 45, 0.1); color: var(--ink); }
.kniznica-prepinac .zalozka-pocet { color: var(--n-tlmene); font-size: 11.5px; font-weight: 500; }
.kniznica-prepinac .zalozka-dlhy { display: none; }
@media (min-width: 760px) {
  .kniznica-prepinac .zalozka-dlhy { display: inline; }
  .kniznica-prepinac .zalozka-kratky { display: none; }
}

.kniznica-cipy {
  display: flex;
  gap: 6px;
  margin: 0 -16px 4px;
  overflow-x: auto;
  padding: 2px 16px 6px;
  scrollbar-width: none;
}
.kniznica-cipy::-webkit-scrollbar { display: none; }
.kniznica-cipy a {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--n-ciara);
  color: #6e5f69;
  flex: none;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  text-decoration: none;
  white-space: nowrap;
}
.kniznica-cipy a.is-active { background: var(--ink); box-shadow: none; color: #fff; }

.kniznica-pocet { color: var(--n-tlmene); font-size: 12.5px; margin: 8px 4px 0; }
.kniznica-pocet strong { color: var(--ink); }
.kniznica-pocet a { color: var(--pink); font-weight: 600; }

.kniznica-sekcia { margin-top: 18px; }
.kniznica-sekcia-nadpis {
  align-items: baseline;
  display: flex;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  gap: 10px;
  justify-content: space-between;
  margin: 0 4px 10px;
}
.kniznica-sekcia-nadpis a {
  color: var(--pink);
  flex: none;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* Vodorovný pás: karty sa posúvajú prstom a zapadnú na miesto. */
.kniznica-pas {
  display: grid;
  gap: 12px;
  grid-auto-columns: 156px;
  grid-auto-flow: column;
  margin: 0 -16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 16px 6px;
  scroll-padding: 0 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.kniznica-pas::-webkit-scrollbar { display: none; }
.kniznica-pas.is-mriezka {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: visible;
  padding: 0;
}

.kniznica-karta { color: var(--ink); display: block; min-width: 0; scroll-snap-align: start; text-decoration: none; }
.kniznica-karta-obrazok {
  aspect-ratio: 4 / 3;
  background: var(--gradient-rich);
  border-radius: 16px;
  display: block;
  overflow: hidden;
  position: relative;
}
.kniznica-karta-obrazok img { height: 100%; object-fit: cover; transition: transform 0.3s ease; width: 100%; }
.kniznica-karta:hover .kniznica-karta-obrazok img { transform: scale(1.03); }
.kniznica-stitok {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  bottom: 8px;
  color: var(--pink-dark);
  font-size: 10.5px;
  font-weight: 700;
  left: 8px;
  padding: 3px 8px;
  position: absolute;
}
.kniznica-stitok.is-zeleny { background: #e7f4ec; color: #1f6b42; }
.kniznica-stitok.is-osobne { background: var(--ink); color: #fff; }
.kniznica-karta > strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; margin-top: 8px; overflow-wrap: anywhere; }
.kniznica-karta > small { color: var(--n-tlmene); display: block; font-size: 12px; margin-top: 1px; }
.kniznica-karta .progress-track { height: 3px; margin-top: 6px; }
.kniznica-karta .progress-track.is-hotovo i { background: #34a853; }
.kniznica-karta .novinka-stitok { margin-left: 4px; vertical-align: 1px; }

.kniznica-miniatura { border-radius: 12px; flex: none; height: 52px; object-fit: cover; width: 52px; }
.nastenka-stav.is-ruzovy { background: #fbeef3; color: var(--pink-dark); }
.nastenka-stav.is-zamknute { background: #f5eef2; color: #8a7b85; }
.nastenka-stav:not(.is-zeleny):not(.is-ruzovy):not(.is-zamknute) { background: #f7f3f5; color: #8a7b85; }
.kniznica .nastenka-zoznam { margin-top: 10px; }

.kniznica-prazdna {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--n-ciara);
  margin-top: 12px;
  padding: 20px;
}
.kniznica-prazdna h2 { font-family: "Playfair Display", Georgia, serif; font-size: 20px; margin: 0 0 8px; }
.kniznica-prazdna p { color: #5c4f58; font-size: 14.5px; line-height: 1.55; margin: 0 0 14px; }
.kniznica-prazdna .button { border-radius: 999px; }

/* Filtre ako spodný panel (na desktope okno v strede). */
.kniznica-filtre {
  border: 0;
  border-radius: 22px 22px 0 0;
  bottom: 0;
  margin: auto auto 0;
  max-height: 85vh;
  max-width: 560px;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  top: auto;
  width: 100%;
}
.kniznica-filtre::backdrop { background: rgba(31, 21, 32, 0.4); }
.kniznica-filtre-hlavicka { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 8px; }
.kniznica-filtre-hlavicka h2 { font-family: "Playfair Display", Georgia, serif; font-size: 22px; margin: 0; }
.kniznica-filtre-hlavicka a { color: var(--pink); font-size: 14px; font-weight: 600; }
.kniznica-filtre .filter-fields { display: grid; gap: 12px; }
.kniznica-filtre label { color: var(--n-tlmene); display: grid; font-size: 12.5px; font-weight: 600; gap: 5px; }
.kniznica-filtre select {
  background-color: #f7f3f5;
  border: 0;
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  padding: 11px 12px;
}
.kniznica-filtre .button { border-radius: 999px; width: 100%; }
.kniznica-filtre-zavriet {
  background: none;
  border: 0;
  color: var(--n-tlmene);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  margin-top: 8px;
  padding: 8px;
  width: 100%;
}
@media (min-width: 760px) {
  .kniznica-filtre { border-radius: 22px; margin: auto; }
  .kniznica-pas { grid-auto-columns: 200px; margin: 0; padding: 0 0 6px; }
  .kniznica-cipy { margin: 0 0 4px; padding: 2px 0 6px; }
}

/* ---------------------------------------------------------------------------
   Hlavička s fotkou v pozadí — kategória a okruh (redizajn knižnice, časť 2).

   Pravidlá z dizajn systému carouselu: horná časť fotky bez filtra, slivkové
   stmavenie až pri texte (nie celá fotka), text priamo na fotke s mäkkým
   tieňom, zvýraznené slovo sýtou ružovou kurzívou (#f27aae, nie tmavou
   značkovou), čísla v sklenených pilulkách. Bez fotky značkový gradient.
--------------------------------------------------------------------------- */
.hlavicka-foto {
  --prekryv: 31, 21, 32;
  background: #2a1a27;
  color: #fffcfd;
  margin: -34px -18px 0;
  min-height: 320px;
  overflow: hidden;
  position: relative;
}
.hlavicka-foto > img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center 35%;
  position: absolute;
  width: 100%;
}
.hlavicka-foto::after {
  background: linear-gradient(180deg,
    rgba(var(--prekryv), .28) 0%, rgba(var(--prekryv), 0) 22%,
    rgba(var(--prekryv), 0) 40%, rgba(var(--prekryv), .46) 64%,
    rgba(var(--prekryv), .7) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.hlavicka-foto.bez-fotky {
  background:
    radial-gradient(circle at 85% 18%, rgba(242, 122, 174, .45), transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(203, 188, 228, .25), transparent 45%),
    linear-gradient(160deg, #3a2336 0%, #2a1a27 45%, #5a1a38 100%);
}
.hlavicka-foto.bez-fotky::after { display: none; }
.hlavicka-foto-inicial {
  color: rgba(255, 255, 255, .07);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 220px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  right: -10px;
  top: 10px;
  user-select: none;
}
.hlavicka-foto-spat {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(40, 24, 36, .45);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  left: 16px;
  padding: 6px 12px;
  position: absolute;
  text-decoration: none;
  top: 14px;
  z-index: 2;
}
.hlavicka-foto-text {
  bottom: 20px;
  left: 18px;
  position: absolute;
  right: 18px;
  text-shadow: 0 1px 2px rgba(20, 10, 18, .65), 0 2px 10px rgba(20, 10, 18, .55), 0 4px 30px rgba(20, 10, 18, .5);
  z-index: 2;
}
.hlavicka-foto-nadtitul { font-size: 12px; font-weight: 600; letter-spacing: .06em; margin: 0; opacity: .92; text-transform: uppercase; }
.hlavicka-foto h1 {
  color: #fffcfd;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  margin: 4px 0 6px;
  overflow-wrap: anywhere;
}
.hlavicka-foto h1 em { color: #f27aae; font-style: italic; }
.hlavicka-foto-popis { font-size: 14px; line-height: 1.45; margin: 0 0 12px; max-width: 34em; }
.hlavicka-foto-pilulky { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; text-shadow: none; }
.hlavicka-foto-pilulky li {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(40, 24, 36, .5);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
}
.hlavicka-foto-pilulky b { color: #f27aae; }

.kategoria > .nastenka-popiska:first-of-type { margin-top: 20px; }
.kniznica-miniatura-ram { background: var(--gradient-rich); border-radius: 12px; flex: none; height: 52px; overflow: hidden; width: 52px; }
.kniznica-miniatura-ram .kniznica-miniatura { display: block; }
.nastenka-riadok .progress-track.is-hotovo i { background: #34a853; }
.okruh-zamok { color: #b5a8b0; flex: none; }

@media (min-width: 760px) {
  .hlavicka-foto { border-radius: 24px; margin: 0; min-height: 360px; }
  .hlavicka-foto h1 { font-size: 42px; }
  .hlavicka-foto-text { bottom: 28px; left: 32px; right: 32px; }
  .hlavicka-foto-spat { left: 24px; top: 20px; }
}
@media (min-width: 1080px) {
  .kategoria { max-width: 880px; }
}

/* ---------------------------------------------------------------------------
   Detail okruhu (redizajn knižnice, časť 3): hlavička s fotkou, karta
   „Pokračuj" jemne cez spodok fotky, popis na rozbalenie, lekcie ako zoznam
   s poradovým číslom — zelená ✓ hotové, ružová rozpozerané.
--------------------------------------------------------------------------- */
.okruh { margin: 0 auto; max-width: 880px; }
.okruh-drobceky { display: none; }
.okruh .hlavicka-foto { min-height: 300px; }
.okruh .hlavicka-foto-text { bottom: 44px; }
.okruh-pokracuj {
  box-shadow: 0 14px 30px -16px rgba(134, 33, 73, .7);
  margin: -26px 0 4px;
  padding: 12px 12px 12px 16px;
  position: relative;
  z-index: 3;
}
.okruh-hotovy {
  background: #e7f4ec;
  border-radius: 16px;
  color: #1f6b42;
  font-size: 14px;
  font-weight: 700;
  margin: -22px 0 4px;
  padding: 12px 16px;
  position: relative;
  z-index: 3;
}
.okruh-popis { border: 0; margin: 12px 4px 0; padding: 0; }
.okruh-popis summary {
  color: #5c4f58;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  min-height: 0;
  padding: 0;
}
.okruh-popis summary::after { content: none; }
.okruh-popis p { color: #5c4f58; font-size: 14px; line-height: 1.55; margin: 8px 0 0; max-width: none; padding: 0; }

.okruh-lekcia.is-rozpozerana { background: #fbeef3; }
.okruh-cislo {
  align-items: center;
  background: #f5eef2;
  border-radius: 50%;
  color: var(--pink-dark);
  display: flex;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.okruh-cislo.is-hotova { background: #e7f4ec; color: #1f6b42; }
.okruh-cislo.is-rozpozerana { background: var(--pink); color: #fff; }
.okruh-cislo.is-praca { background: var(--gradient-rich); color: #fff; }
.okruh-miniatura { background: var(--gradient-rich); border-radius: 10px; flex: none; height: 44px; overflow: hidden; width: 58px; }
.okruh-miniatura img { display: block; height: 100%; object-fit: cover; width: 100%; }
.okruh .harmonogram-znamka {
  align-items: center;
  background: #f5eef2;
  border-radius: 999px;
  color: var(--pink-dark);
  display: inline-flex;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  gap: 3px;
  padding: 3px 8px;
  position: static;
}
.okruh .praca-vyzva { border: 0; margin: 0; }
.okruh .praca-vyzva.je-hotova .okruh-cislo { background: #e7f4ec; color: #1f6b42; }

@media (min-width: 760px) {
  .okruh-drobceky { display: block; margin-bottom: 12px; }
  .okruh-pokracuj { margin: -30px 24px 4px; }
}

/* Lekcia, ktorá sa v programe otvorí neskôr — nie je odkaz, tak ani nevyzerá. */
.okruh-lekcia.je-zamknuta { cursor: default; }
.okruh-lekcia.je-zamknuta:hover { background: none; }
.okruh-lekcia.je-zamknuta .okruh-miniatura img { filter: grayscale(.7); opacity: .55; }
.okruh-lekcia.je-zamknuta .nastenka-riadok-text strong { color: #7d6f78; }

/* Práce k okruhu: samostatné karty s medzerou, tónované — iná vec než video. */
.okruh-prace { display: grid; gap: 8px; margin-top: 12px; }
.okruh-prace-nadpis {
  color: var(--pink-dark);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  margin: 4px 4px 0;
  text-transform: uppercase;
}
.okruh-praca {
  align-items: center;
  background: #fbeef3;
  border-radius: 18px;
  color: var(--ink);
  display: grid;
  gap: 4px 14px;
  grid-template-columns: auto 1fr auto;
  padding: 14px 16px;
  text-decoration: none;
  transition: background .15s, transform .15s;
}
.okruh-praca:hover { background: #f7e2eb; }
.okruh-praca.je-ostra {
  background: linear-gradient(115deg, #f7e3ee 0%, #efe3f3 100%);
  box-shadow: 0 0 0 1px rgba(167, 47, 99, .14);
}
.okruh-praca.je-ostra:hover { background: linear-gradient(115deg, #f3d8e6 0%, #e9d8ef 100%); }
.okruh-praca-ikona {
  align-items: center;
  background: #fff;
  border-radius: 12px;
  color: var(--pink);
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.okruh-praca.je-ostra .okruh-praca-ikona { background: var(--gradient-rich); color: #fff; }
.okruh-praca-text { display: grid; gap: 2px; min-width: 0; }
.okruh-praca-druh { color: var(--pink-dark); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.okruh-praca-text strong { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.okruh-praca-stav {
  background: #fff;
  border-radius: 999px;
  color: var(--pink-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  white-space: nowrap;
}
.okruh-praca.je-hotova { background: #eef8f1; box-shadow: none; }
.okruh-praca.je-hotova .okruh-praca-ikona { background: #d5eedd; color: #1f6b42; }
.okruh-praca.je-hotova .okruh-praca-druh,
.okruh-praca.je-hotova .okruh-praca-stav { color: #1f6b42; }
.okruh-praca.je-zatvorena { opacity: .7; }
@media (max-width: 519px) {
  .okruh-praca { grid-template-columns: auto 1fr; }
  .okruh-praca-stav { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* Certifikácia a diskusia pod okruhom vo vedenom programe. */
.okruh-cert {
  align-items: center;
  background: #f6f1f5;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  margin-top: 8px;
  padding: 14px 16px;
}
.okruh-cert p { color: #5c4f58; flex: 1 1 260px; font-size: 13.5px; line-height: 1.5; margin: 0; }
.okruh-diskusia {
  align-items: center;
  color: var(--pink);
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  margin: 10px 4px 0;
  text-decoration: none;
}
.okruh-diskusia span:not([aria-hidden]) {
  background: #f5eef2;
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 7px;
}
.okruh-diskusia:hover { color: var(--pink-dark); }

/* Vedený program NailBE Academy — hlavička so značkou namiesto fotky. */
.hlavicka-foto.je-nailbe.bez-fotky {
  background:
    radial-gradient(circle at 88% 12%, rgba(242, 122, 174, .55), transparent 46%),
    radial-gradient(circle at 0% 100%, rgba(203, 188, 228, .22), transparent 50%),
    linear-gradient(150deg, #3b1d33 0%, #2a1a27 40%, #6b1f45 100%);
}
.hlavicka-foto.je-nailbe::before {
  color: rgba(255, 255, 255, .06);
  content: "NB";
  font-family: "Playfair Display", Georgia, serif;
  font-size: 230px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  right: -14px;
  top: -6px;
  user-select: none;
}
.hlavicka-foto > img.hlavicka-foto-logo {
  border-radius: 14px;
  box-shadow: 0 10px 26px -10px rgba(10, 4, 8, .6), 0 0 0 1px rgba(255, 255, 255, .18);
  height: 56px;
  inset: auto;
  left: 16px;
  object-fit: cover;
  top: 14px;
  width: 56px;
  z-index: 2;
}
.je-program .program-zalozky { margin: 18px 0 0; }
.je-program .okruh-popis { margin-top: 14px; }

@media (min-width: 760px) {
  .hlavicka-foto > img.hlavicka-foto-logo { height: 68px; left: 28px; top: 24px; width: 68px; }
  .hlavicka-foto.je-nailbe::before { font-size: 300px; right: 10px; top: -20px; }
}

/* ---------------------------------------------------------------------------
   Detail videokurzu (redizajn knižnice, časť 4): video so zaoblením, meta
   riadok, akcie v jednom riadku (hotové · uložiť · materiály) a obsah
   rozdelený prepínačom Prehľad / Poznámky / Diskusia.
--------------------------------------------------------------------------- */
.lekcia-spat {
  color: var(--pink);
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin: 0 2px 10px;
  text-decoration: none;
}
.lekcia .lesson-video { border-radius: 18px; margin: 0 0 12px; overflow: hidden; }
.lekcia .lesson-video img { border-radius: 18px; display: block; width: 100%; }
.lekcia-hlavicka { margin: 0 0 14px; }
.lekcia-meta { color: var(--n-tlmene); font-size: 12.5px; margin: 0 2px; }
.lekcia-hlavicka h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  margin: 3px 2px 6px;
}
.lekcia-pozicia { color: var(--pink-dark); font-size: 12.5px; font-weight: 600; margin: 0 2px 8px; }

.lekcia-akcie { align-items: center; display: flex; gap: 8px; margin-top: 10px; }
.lekcia-akcie form { margin: 0; }
.lekcia-akcie form:first-child { flex: 1; }
.lekcia-hotovo {
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  height: 44px;
  padding: 0 16px;
  width: 100%;
}
.lekcia-hotovo.is-hotova { background: #e7f4ec; color: #1f6b42; }
.lekcia-ikona {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--n-ciara);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 4px;
  height: 44px;
  justify-content: center;
  min-width: 44px;
  padding: 0 12px;
  text-decoration: none;
}
.lekcia-ikona.is-ulozena { color: var(--pink); }

.lekcia .lekcia-prepinac { display: none; margin: 0 0 6px; }
.lekcia .lekcia-prepinac.je-aktivny { display: flex; }
.lekcia-prepinac button {
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #6e5f69;
  cursor: pointer;
  flex: 1;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
}
.lekcia-prepinac button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 3px rgba(48, 35, 45, .1); color: var(--ink); }
.lekcia-prepinac small { color: var(--n-tlmene); font-weight: 500; }

.lekcia-cast { padding-top: 4px; }
.lekcia-cast + .lekcia-cast { margin-top: 18px; }
.lekcia-cast-nadpis {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  margin: 4px 2px 10px;
}
.lekcia-body {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 0 0 1px var(--n-ciara);
  list-style: none;
  margin: 0;
  padding: 10px 14px;
}
.lekcia-body li { display: flex; font-size: 14px; gap: 10px; line-height: 1.45; padding: 4px 0; }
.lekcia-body li::before { color: #1f6b42; content: "✓"; flex: none; font-weight: 700; }
.lekcia-text { font-size: 15px; line-height: 1.6; margin-top: 14px; }
.lekcia-subor {
  align-items: center;
  background: #f5eef2;
  border-radius: 10px;
  color: var(--pink-dark);
  display: flex;
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  width: 38px;
}
.lekcia .lesson-access-note { font-size: 13px; margin: 12px 4px 0; }
.lekcia-dalsia { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--n-ciara); margin-top: 14px; }
.lekcia-dalsia small { color: var(--n-tlmene); }
/* Ďalšia lekcia programu, ktorá sa ešte neotvorila — bez odkazu, vyblednutá. */
.lekcia-dalsia.je-zamknuta { cursor: default; }
.lekcia-dalsia.je-zamknuta:hover { background: #fff; }
.lekcia-dalsia.je-zamknuta .okruh-miniatura img { filter: grayscale(.7); opacity: .55; }
.lekcia-dalsia.je-zamknuta strong { color: #7d6f78; }
.lesson-curriculum li.is-zamknuta > div { cursor: default; opacity: .6; }

.lekcia .lesson-notes { background: none; border: 0; box-shadow: none; padding: 4px 0 0; }
.lekcia .lesson-notes .eyebrow { font-size: 11px; margin: 0 2px; }
.lekcia textarea {
  background: #fffbe9;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 0 0 1px #f1e6b8;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  padding: 12px 14px;
  width: 100%;
}
.lekcia .comment-form textarea { background: #fff; box-shadow: 0 0 0 1px var(--n-ciara); }
.lekcia textarea:focus { box-shadow: 0 0 0 2px var(--pink); outline: none; }
.lekcia .lesson-notes .button,
.lekcia .comment-form .button { border-radius: 999px; margin-top: 8px; }
.lekcia-poznamka-info { color: var(--n-tlmene); display: flex; flex-wrap: wrap; font-size: 12px; gap: 4px 10px; justify-content: space-between; margin: 8px 2px 0; }
.lekcia-poznamka-info a { color: var(--pink); font-weight: 600; }

.lekcia .lesson-comments { background: none; border: 0; box-shadow: none; padding: 4px 0 0; }
.lekcia .comments-list { list-style: none; margin: 0 0 12px; padding: 0; }
.lekcia .comments-list li { display: flex; gap: 10px; padding: 12px 14px; }
.lekcia .comments-list li + li { border-top: 1px solid var(--n-ciara); }
.lekcia .comments-list li.is-odpoved { background: #fbeef3; }
.lekcia .comment-badge { background: var(--gradient-rich); border-radius: 999px; color: #fff; font-size: 10px; padding: 2px 7px; }
.lekcia .comments-empty { color: #5c4f58; font-size: 14px; margin: 0 2px 12px; }
.lekcia-vip { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--n-ciara); margin-top: 16px; }

/* Na mobile vedie ďalej karta „Ďalšia lekcia"; zoznam témy je na desktope. */
.lekcia .lesson-curriculum { display: none; }
@media (min-width: 1080px) {
  .lekcia-spat { display: none; }
  .lekcia .okruh-drobceky { display: block; }
  .lekcia .lesson-curriculum { display: block; }
  .lekcia-hlavicka h1 { font-size: 24px; }
}

/* Uložené: prepínač Uložené lekcie / Moje poznámky a karty poznámok. */
.ulozene-prepinac { margin-top: 4px; }
.ulozene-prepinac span { font-weight: 500; opacity: .7; }
.poznamky-zoznam { display: grid; gap: 10px; margin-top: 10px; }
.poznamka-karta {
  background: #fffbe9;
  border-radius: 16px;
  box-shadow: 0 0 0 1px #f1e6b8;
  color: var(--ink);
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  text-decoration: none;
}
.poznamka-karta-hlavicka { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; }
.poznamka-karta-hlavicka strong { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.poznamka-karta-hlavicka time { color: #9a8a5a; flex: none; font-size: 12px; }
.poznamka-karta small { color: #9a8a5a; font-size: 12px; }
.poznamka-karta-text {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: #5c4f2a;
  display: -webkit-box;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 6px;
  overflow: hidden;
  white-space: pre-line;
}

.lekcia .lekcia-cast .lekcia-cast-nadpis { font-size: 19px; line-height: 1.25; margin: 4px 2px 10px; }
@media (min-width: 1080px) { .lekcia .lekcia-cast .lekcia-cast-nadpis { font-size: 22px; } }

/* #102: globálne `details[open] summary::after` pridávalo „−" aj k riadkom,
   ktoré majú vlastnú šípku. Vyššia špecifickosť ho vypne. */
.profil-riadok[open] > summary::after,
.okruh-popis[open] > summary::after { content: none; }

/* #98: text v prepínači knižnice zarovnaný na stred a o kúsok väčší. */
.kniznica-prepinac a { align-items: center; font-size: 13.5px; line-height: 1.2; }
.kniznica-prepinac .zalozka-pocet { font-size: 12px; line-height: 1; }
@media (min-width: 760px) {
  .kniznica-prepinac a { font-size: 14.5px; padding: 10px 4px; }
}

/* #104: cesta z blogu späť do členskej zóny pre prihlásenú členku. */
.blog-spat-do-zony {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(48, 35, 45, .1);
  color: var(--pink-dark);
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin: 12px 0 0 16px;
  padding: 7px 14px;
  text-decoration: none;
}
@media (min-width: 760px) { .blog-spat-do-zony { margin-left: clamp(18px, 4vw, 68px); } }

/* ---------------------------------------------------------------------------
   Bez farebného ľavého okraja (#100, #101).

   Zvýraznenie pásikom na ľavej strane pôsobí ako šablóna z generátora a do
   dizajnu byMishel nepatrí (pravidlo v docs/design-system/zasady-webu.md).
   Namiesto neho: tónovaná plocha so zaoblením, prípadne malá pilulka alebo
   ikona. Citát v článku nesie veľká ružová úvodzovka, nie čiara.
   Čiara časovej osi (.timeline-item) nie je zvýraznenie, ale spojnica
   bodov — tá ostáva.
--------------------------------------------------------------------------- */
.honest-urgency,
.date-ticket,
.calculator-hero-note,
.calculator-help,
.personal-card,
.timeline-note,
.praca-vyzva,
.praca-hlaska,
.konz-karta.je-ponuka,
.konz-poznamka,
.cert-komentar,
.obsah .uvod,
.obsah .zaver {
  background: #fbeef3;
  border: 0;
  border-left: 0;
  border-radius: 16px;
}
.konz-karta.je-aktivna { background: #eef8f1; border: 0; border-left: 0; border-radius: 16px; }
.calculator-error,
.payment-recovery,
.chyba,
.konz-chyba,
.praca-pole.chyba {
  background: var(--chyba-pozadie, #fdecef);
  border-left: 0;
  border-radius: 12px;
}
.flash { background: var(--lavender-soft); border-left: 0; border-radius: 14px; }
.comments-list li.is-odpoved { background: #fbeef3; border-left: 0; border-radius: 14px; }
.konz-riadok-odpoved { background: var(--stav-pozadie, #fbeef3); border-left: 0; border-radius: 14px; }
.lesson-curriculum li.is-current { background: #fbeef3; border-left: 0; border-radius: 12px; }
.reader-tools nav a.is-active { background: #fbeef3; border-left: 0; border-radius: 999px; }

/* Citát: veľká ružová úvodzovka a kurzíva namiesto čiary. */
.about-copy blockquote,
.article-content blockquote,
.article-page .article-content blockquote {
  border: 0;
  border-left: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  padding: 18px 0 0 0;
  position: relative;
}
.about-copy blockquote::before,
.article-content blockquote::before {
  color: var(--pink);
  content: "„";
  font-family: "Playfair Display", Georgia, serif;
  font-size: 56px;
  font-style: normal;
  left: -2px;
  line-height: 1;
  position: absolute;
  top: -22px;
}

/* ---------------------------------------------------------------------------
   Konzultácie v štýle nástenky (#100): kompaktné biele karty, menší
   nadpis, zaoblený stav, výhody so zelenou fajkou, poznámka ako tónovaná
   plocha. Aktívny nárok nesie zelená pilulka, nie zelený pásik.
--------------------------------------------------------------------------- */
.konzultacie-page .konz-karta,
.konzultacie-page .konz-karta.je-aktivna,
.konzultacie-page .konz-karta.je-ponuka {
  background: #fff;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 0 0 1px #f0e8ed;
  padding: 16px;
}
.konzultacie-page .konz-karta.je-ponuka { background: #fbeef3; box-shadow: none; }
.konzultacie-page .konz-karta h2 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.konzultacie-page .konz-karta-hlava { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }
.konzultacie-page .konz-stav {
  background: #f5eef2;
  border-radius: 999px;
  color: var(--pink-dark);
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 4px 10px;
  text-transform: none;
}
.konzultacie-page .konz-karta.je-aktivna .konz-stav { background: #e7f4ec; color: #1f6b42; }
.konzultacie-page .konz-karta > p { color: #5c4f58; font-size: 14px; line-height: 1.5; margin: 8px 0 0; }
.konzultacie-page .konz-body { margin: 10px 0 0; padding: 0; }
.konzultacie-page .konz-body li { font-size: 14px; line-height: 1.45; padding: 3px 0 3px 24px; }
.konzultacie-page .konz-body li::before { color: #1f6b42; }
.konzultacie-page .konz-poznamka {
  background: #f7f3f5;
  border-radius: 12px;
  color: #5c4f58;
  font-size: 13px;
  margin: 12px 0 0;
  padding: 10px 12px;
}
.konzultacie-page .konz-karta .button { border-radius: 999px; }
.konzultacie-page .konz-oddiel {
  color: #8a7b85;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 22px 4px 8px;
  text-transform: none;
}
.konzultacie-page .konz-karta + .konz-karta { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   Referencie (snímky správ) na mobile ako vodorovný pás (#99). Karta má
   výšku, pri ktorej sa správa dá čítať, a zapadne na miesto. Ťuknutie ju
   zväčší (public/js/galeria.js). Na desktope ostáva mriežka.
--------------------------------------------------------------------------- */
.galeria-pocitadlo { display: none; }
@media (max-width: 759px) {
  .reference-grid {
    display: grid !important;
    gap: 12px;
    grid-auto-columns: 80%;
    grid-auto-flow: column;
    grid-template-columns: none !important;
    margin: 0 -16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 4px 16px 8px;
    scroll-padding: 0 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .reference-grid::-webkit-scrollbar { display: none; }
  .reference-grid .reference-card {
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(48, 35, 45, .08), 0 10px 24px -18px rgba(110, 55, 82, .5);
    height: 420px;
    margin: 0;
    overflow: hidden;
    padding: 10px;
    scroll-snap-align: start;
  }
  .reference-grid .reference-card img {
    cursor: zoom-in;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    width: 100%;
  }
  .galeria-pocitadlo {
    color: #8a7b85;
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    margin: 6px 0 0;
    text-align: center;
  }
}
.galeria-okno {
  background: transparent;
  border: 0;
  max-height: 100vh;
  max-width: 100vw;
  padding: 48px 12px 12px;
}
.galeria-okno::backdrop { background: rgba(31, 21, 32, .85); }
.galeria-okno img { border-radius: 14px; display: block; max-height: calc(100vh - 70px); max-width: min(560px, 100%); margin: 0 auto; }
.galeria-zavriet {
  background: rgba(255, 255, 255, .92);
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  font-size: 24px;
  height: 40px;
  line-height: 1;
  position: fixed;
  right: 14px;
  top: 12px;
  width: 40px;
}

/* ---------------------------------------------------------------------------
   Hlavička webu ako sklenený pás (#105). Nad polovicou svetlou a polovicou
   tmavou by obyčajný text zanikal — rozmazané pozadie ho drží čitateľný
   nad oboma. Na úvode pláva nad fotkou, inde je na svojom mieste.
   „Prihlásiť sa" je len orámovaná pilulka.
--------------------------------------------------------------------------- */
.marketing-header {
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  background: rgba(255, 252, 253, .74);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 1px rgba(110, 55, 82, .1), 0 10px 30px -18px rgba(110, 55, 82, .45);
  height: 60px;
  margin: 10px 10px 0;
  padding: 0 10px 0 20px;
  top: 10px;
}
.marketing-header.je-nad-hero { left: 0; position: fixed; right: 0; }
.pricing-nav a.nav-login {
  background: transparent;
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px var(--ink);
  color: var(--ink);
  min-height: 40px;
}
.pricing-nav a.nav-login:hover { background: var(--ink); color: #fff; }
@media (min-width: 900px) {
  .marketing-header { height: 64px; margin: 12px clamp(12px, 2vw, 28px) 0; padding: 0 12px 0 28px; }
}

/* Hero úvodu. */
.hero-v2 { background: #fffafc; position: relative; }
.hero-v2-foto { inset: 0; overflow: hidden; position: absolute; }
.hero-v2-foto img { display: block; height: 100%; object-fit: cover; object-position: center 18%; width: 100%; }
.hero-v2-foto::after {
  background: linear-gradient(180deg, rgba(31, 21, 32, .3) 0%, rgba(31, 21, 32, 0) 18%, rgba(31, 21, 32, 0) 38%, rgba(31, 21, 32, .58) 58%, rgba(31, 21, 32, .88) 100%);
  content: "";
  inset: 0;
  position: absolute;
}
.hero-v2-menovka { display: none; }
.hero-v2-text {
  color: #fffcfd;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding: 110px 18px 28px;
  position: relative;
  text-shadow: 0 1px 2px rgba(20, 10, 18, .6), 0 2px 12px rgba(20, 10, 18, .5);
  z-index: 1;
}
.hero-v2-nadtitul { color: #f7c3d8; font-size: 11px; font-weight: 700; letter-spacing: .14em; margin: 0; text-transform: uppercase; }
.hero-v2 h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(46px, 13vw, 64px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
  margin: 8px 0 12px;
}
.hero-v2 h1 em { color: #f27aae; font-style: italic; }
.hero-v2-veta { font-size: 17px; font-weight: 500; line-height: 1.4; margin: 0 0 8px; }
.hero-v2-popis { display: none; }
.hero-v2-akcie { display: flex; gap: 8px; margin-top: 10px; }
.hero-v2-akcie a {
  border-radius: 999px;
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  padding: 13px 14px;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
}
.hero-v2-hlavne { background: var(--gradient-rich); color: #fff; }
.hero-v2-vedlajsie {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
  color: #fff;
}
.hero-v2-dokazy { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 14px 0 0; padding: 0; text-shadow: none; }
.hero-v2-dokazy li {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(40, 24, 36, .5);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
}
.hero-v2-dokazy strong { color: #f27aae; }
.hero-v2-poznamka { font-size: 13px; margin: 12px 0 0; text-shadow: none; opacity: .9; }
.hero-v2-poznamka a { color: #fff; font-weight: 700; }

@media (min-width: 900px) {
  .hero-v2 { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 620px; }
  .hero-v2-foto { grid-column: 2; grid-row: 1; inset: auto; position: relative; }
  .hero-v2-foto::after { display: none; }
  .hero-v2-menovka {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(40, 24, 36, .5);
    border-radius: 999px;
    bottom: 24px;
    color: #fff;
    display: block;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 14px;
    font-style: italic;
    left: 24px;
    padding: 8px 16px;
    position: absolute;
  }
  .hero-v2-text {
    color: var(--ink);
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    min-height: 0;
    padding: 120px clamp(28px, 5vw, 80px) 48px;
    text-shadow: none;
  }
  .hero-v2-nadtitul { color: var(--pink); }
  .hero-v2 h1 { font-size: clamp(60px, 6.4vw, 92px); margin: 12px 0 16px; }
  .hero-v2 h1 em { color: var(--pink); }
  .hero-v2-veta { color: var(--ink); font-size: 21px; max-width: 26em; }
  .hero-v2-popis { color: #5c4f58; display: block; font-size: 16px; line-height: 1.55; margin: 0 0 22px; max-width: 32em; }
  .hero-v2-akcie a { flex: none; font-size: 15px; padding: 14px 24px; }
  .hero-v2-vedlajsie { background: #fff; box-shadow: 0 0 0 1px #e5d9df; color: var(--ink); }
  .hero-v2-dokazy { gap: 28px; margin-top: 28px; }
  .hero-v2-dokazy li { -webkit-backdrop-filter: none; backdrop-filter: none; background: none; color: #8a7b85; font-size: 12.5px; font-weight: 500; padding: 0; }
  .hero-v2-dokazy strong { color: var(--ink); display: block; font-family: "Playfair Display", Georgia, serif; font-size: 26px; }
  .hero-v2-poznamka { color: #6e5f69; }
  .hero-v2-poznamka a { color: var(--pink-dark); }
}
.hero-v2-akcie a { text-transform: none; }
.hero-v2-akcie a::first-letter { text-transform: uppercase; }
.hero-v2 .len-siroke { display: none; }
@media (min-width: 900px) { .hero-v2 .len-siroke { display: inline; } }

/* Rozbalené mobilné menu v tvare zvyšku rozhrania: zaoblený panel,
   prihlásenie ako orámovaná pilulka (#105). */
.mobile-marketing-nav > nav { border: 0; border-radius: 22px; box-shadow: 0 0 0 1px rgba(110, 55, 82, .1), 0 24px 50px -20px rgba(110, 55, 82, .45); top: 56px; }
.mobile-marketing-nav > nav a.nav-login,
.mobile-marketing-nav > nav a.nav-login:last-child {
  background: transparent;
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px var(--ink);
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   Titulka nástenky ako obálka magazínu (#103). Príbehy sú vodorovný pás
   (na mobile prstom, na desktope jeden príbeh + upútavky vpravo dole).
--------------------------------------------------------------------------- */
.titulka {
  border-radius: 0 0 26px 26px;
  color: #fffcfd;
  margin: -34px -18px 0;
  overflow: hidden;
  position: relative;
}
.titulka-hlavicka {
  display: flex;
  font-size: 11px;
  font-weight: 600;
  justify-content: space-between;
  left: 16px;
  letter-spacing: .14em;
  margin: 0;
  pointer-events: none;
  position: absolute;
  right: 16px;
  text-shadow: 0 1px 6px rgba(20, 10, 18, .5);
  text-transform: uppercase;
  top: 16px;
  z-index: 3;
}
.titulka-pas {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.titulka-pas::-webkit-scrollbar { display: none; }
.titulka-pribeh {
  background: #2a1a27;
  color: inherit;
  flex: 0 0 100%;
  height: 480px;
  position: relative;
  scroll-snap-align: start;
  text-decoration: none;
}
.titulka-pribeh img { height: 100%; inset: 0; object-fit: cover; object-position: center 22%; position: absolute; width: 100%; }
.titulka-pribeh::after {
  background: linear-gradient(180deg, rgba(31, 21, 32, .35) 0%, rgba(31, 21, 32, 0) 20%, rgba(31, 21, 32, 0) 40%, rgba(31, 21, 32, .5) 64%, rgba(31, 21, 32, .78) 100%);
  content: "";
  inset: 0;
  position: absolute;
}
.titulka-text {
  bottom: 22px;
  display: grid;
  gap: 6px;
  justify-items: start;
  left: 16px;
  position: absolute;
  right: 16px;
  text-shadow: 0 1px 2px rgba(20, 10, 18, .6), 0 2px 12px rgba(20, 10, 18, .5);
  z-index: 2;
}
.titulka-nadtitul { color: #f7c3d8; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.titulka-nazov { font-family: "Playfair Display", Georgia, serif; font-size: 32px; font-weight: 700; line-height: 1.04; }
.titulka-nazov em { color: #f27aae; font-style: italic; }
.titulka-popis { font-size: 14px; line-height: 1.4; max-width: 30em; }
.titulka-akcia {
  background: #fff;
  border-radius: 999px;
  color: var(--pink-dark);
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  padding: 10px 18px;
  text-shadow: none;
}
.titulka-bodky { display: flex; gap: 5px; left: 16px; pointer-events: none; position: absolute; top: 44px; z-index: 3; }
.titulka-bodky i { background: rgba(255, 255, 255, .4); border-radius: 3px; height: 3px; transition: background .2s; width: 18px; }
.titulka-bodky i.je-aktivna { background: #fff; }
.titulka-dalsie { display: none; }

/* Pokračuj + čísla a termíny vedľa seba, rovnako vysoké. */
.nastenka-dvojica { display: grid; gap: 0 16px; }
.nastenka-blok { display: flex; flex-direction: column; min-width: 0; }
.nastenka-blok .nastenka-pokracuj { margin-bottom: 8px; }
.nastenka .nastenka-cisla small { font-size: 11px; }

/* Vybrané pre teba — pás kariet ako v knižnici. */
.nastenka-vybrane .kniznica-karta > strong { font-size: 13.5px; }
.nastenka-vybrana-nadtitul { color: var(--pink) !important; font-size: 10.5px !important; font-weight: 700; letter-spacing: .08em; margin-top: 8px; text-transform: uppercase; }
.nastenka-vybrana > strong { margin-top: 2px !important; }

@media (min-width: 760px) {
  .titulka { border-radius: 24px; margin: 0 0 4px; }
  .titulka-pribeh { height: 380px; }
  .titulka-pribeh::after {
    background: linear-gradient(90deg, rgba(31, 21, 32, .7) 0%, rgba(31, 21, 32, .35) 45%, rgba(31, 21, 32, 0) 70%), linear-gradient(180deg, rgba(31, 21, 32, .25), transparent 30%);
  }
  .titulka-text { bottom: 28px; left: 28px; max-width: 460px; }
  .titulka-nazov { font-size: 42px; }
  .titulka-hlavicka { left: 28px; right: 28px; top: 20px; }
  .titulka-bodky { left: 28px; top: 50px; }
  .titulka-dalsie {
    bottom: 20px;
    display: grid;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 20px;
    width: 240px;
    z-index: 3;
  }
  .titulka-dalsie a {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(40, 24, 36, .5);
    border-radius: 14px;
    color: #fff;
    display: block;
    font-size: 12px;
    line-height: 1.3;
    padding: 8px 12px;
    text-decoration: none;
  }
  .titulka-dalsie b { color: #f27aae; display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
}
@media (min-width: 1000px) {
  .nastenka { display: block; }
  .titulka-pribeh { height: 400px; }
  .nastenka-dvojica.ma-terminy { align-items: stretch; grid-template-columns: 1.2fr 1fr; }
  .nastenka-dvojica.ma-terminy .nastenka-pokracuj { flex: 1; }
  .nastenka-dvojica.ma-terminy .nastenka-blok:last-child .nastenka-zoznam { display: flex; flex: 1; flex-direction: column; }
  .nastenka-dvojica.ma-terminy .nastenka-blok:last-child .nastenka-riadok { flex: 1; }
  .nastenka-vybrane { grid-auto-columns: calc((100% - 36px) / 4); }
  #panel-cesty { margin-top: 8px; }
}

/* Prepínač pod titulkou nesmie byť nalepený na fotke. */
.titulka + .nastenka-prepinac { margin-top: 16px; }
@media (min-width: 760px) { .titulka + .nastenka-prepinac { margin-top: 20px; } }

/* Stránkovanie (blog) — pilulky s číslami. */
.strankovanie { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 36px auto 12px; }
.strankovanie-cisla { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.strankovanie-cislo,
.strankovanie-krok {
  align-items: center;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(48, 35, 45, .12);
  color: var(--ink);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  height: 40px;
  justify-content: center;
  min-width: 40px;
  padding: 0 14px;
  text-decoration: none;
}
.strankovanie-cislo:hover,
.strankovanie-krok:hover { box-shadow: 0 0 0 1.5px var(--pink); color: var(--pink-dark); }
.strankovanie-cislo.is-aktivna { background: var(--ink); box-shadow: none; color: #fff; }
.strankovanie-krok.is-neaktivne { color: #b5a8b0; box-shadow: 0 0 0 1px rgba(48, 35, 45, .06); }
.strankovanie-bodky { color: #8a7b85; padding: 0 4px; }
@media (max-width: 520px) {
  .strankovanie-krok { flex: 1; }
  .strankovanie-cisla { order: -1; width: 100%; }
}

/* ---------------------------------------------------------------------------
   Vstup do členskej zóny v hlavičke: postava + „Prihlásenie“, po prihlásení
   vyplnená pilulka „Členská zóna“ so zelenou bodkou (components/vstup-do-zony).
   Tvar pilulky ostáva z bloku „Hlavička webu ako sklenený pás“ vyššie.
--------------------------------------------------------------------------- */
.pricing-nav a.nav-login,
.mobile-marketing-nav > nav a.nav-login {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}
.pricing-nav a.nav-login { padding: 0 18px 0 14px; }
.nav-login .ikona { flex: none; height: 18px; width: 18px; }
.nav-login-ikona { display: inline-flex; position: relative; }

/* Prihlásená: vyplnená, aby sa nedala zameniť za výzvu na prihlásenie. */
.pricing-nav a.nav-login.je-prihlasena,
.mobile-marketing-nav > nav a.nav-login.je-prihlasena,
.mobile-marketing-nav > nav a.nav-login.je-prihlasena:last-child {
  background: var(--ink);
  box-shadow: none;
  color: #fff;
}
.pricing-nav a.nav-login.je-prihlasena:hover,
.mobile-marketing-nav > nav a.nav-login.je-prihlasena:hover {
  background: var(--pink-dark);
  color: #fff;
}
/* Bodka má tmavý lem v farbe pilulky, aby sa od postavy čisto oddelila. */
.nav-login-bodka {
  background: #6fcf97;
  border-radius: 50%;
  bottom: -2px;
  box-shadow: 0 0 0 2px var(--ink);
  height: 8px;
  position: absolute;
  right: -3px;
  width: 8px;
}
.nav-login.je-prihlasena:hover .nav-login-bodka { box-shadow: 0 0 0 2px var(--pink-dark); }

/* ---------------------------------------------------------------------------
   E-book v štýle členskej zóny (október 2026): obálka, kapitola a bloky.

   Návrh a pravidlá: docs/design-system/bymishel-ebook (navrh.html, README).
   Obálka preberá hlavičku okruhu (hlavicka-foto, okruh-pokracuj), riadky
   a čísla z nástenky (nastenka-riadok, okruh-cislo) a akcie z videokurzu
   (lekcia-hotovo, lekcia-ikona). Nové sú len triedy ebook-*.
   Staré triedy reader-* (predošlá čítačka) sa už nevykresľujú.
--------------------------------------------------------------------------- */
.ebook {
  --n-karta: #fff;
  --n-ciara: #f0e8ed;
  /* Tmavšia šedá než #8a7b85 — malé popisky na bielej musia splniť WCAG AA. */
  --n-tlmene: #6e5f69;
  --ebook-pismo: 18px;
}
.ebook .nastenka-popiska span { color: var(--pink); font-weight: 600; }

/* Len pre vedenie: čo pred spustením chýba. */
.ebook-admin {
  background: #f5eef2;
  border-radius: 16px;
  color: #5c4f58;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 14px 0 0;
  padding: 12px 14px;
}
.ebook-admin strong { color: var(--ink); }

/* Obálka ----------------------------------------------------------------- */
/* Hlavička okruhu má len dve pilulky; e-book má aj podtitul — bez vyššej
   hlavičky by text vyšiel až k tlačidlu späť. */
.ebook-obalka .hlavicka-foto { min-height: 360px; }
@media (min-width: 760px) { .ebook-obalka .hlavicka-foto { min-height: 380px; } }
.ebook-rychla {
  display: grid;
  gap: 8px;
  grid-auto-columns: 148px;
  grid-auto-flow: column;
  margin: 0 -18px;
  overflow-x: auto;
  padding: 2px 18px 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ebook-rychla::-webkit-scrollbar { display: none; }
.ebook-rychla a {
  align-content: start;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--n-ciara);
  color: var(--ink);
  display: grid;
  gap: 8px;
  padding: 12px;
  scroll-snap-align: start;
  text-decoration: none;
}
.ebook-rychla a:hover { box-shadow: 0 0 0 1px #e7d6df, 0 8px 18px -12px rgba(102, 48, 77, .4); }
.ebook-rychla strong { font-size: 14px; font-weight: 600; line-height: 1.25; }
.ebook-rychla small { color: var(--n-tlmene); font-size: 12px; line-height: 1.3; }
.ebook-rychla-ikona {
  align-items: center;
  background: #fbeef3;
  border-radius: 11px;
  color: var(--pink-dark);
  display: flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}
.ebook-rychla-ikona.je-zelena { background: #eef8f1; color: #1f6b42; }
.ebook-rychla-ikona.je-fialova { background: var(--lavender-soft); color: #5d4387; }
.ebook-subor-dlazdica {
  align-items: center;
  background: var(--gradient-rich);
  border-radius: 12px;
  color: #fff;
  display: flex;
  flex: none;
  font-size: 11px;
  font-weight: 800;
  height: 52px;
  justify-content: center;
  letter-spacing: .04em;
  width: 52px;
}
.ebook-subor-dlazdica.je-mala { border-radius: 10px; height: 40px; width: 40px; }
.ebook-pata { color: var(--n-tlmene); font-size: 12.5px; line-height: 1.5; margin: 18px 4px 0; }
.ebook-pata strong { color: var(--ink); }
@media (min-width: 760px) {
  .ebook-rychla { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0; overflow: visible; padding: 0; }
}

/* Kapitola: lišta s priebehom, osnova, text -------------------------------- */
.ebook-lista {
  align-items: center;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(251, 248, 250, .94);
  box-shadow: inset 0 -1px 0 var(--n-ciara);
  display: flex;
  gap: 10px;
  margin: -34px -18px 0;
  padding: 10px 18px;
  position: sticky;
  /* Výšku hornej lišty zóny meria ebook.js (na mobile ~90 px, na počítači ~96 px). */
  top: var(--ebook-horna-lista, 90px);
  z-index: 20;
}
.ebook-lista-spat {
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--n-ciara);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  text-decoration: none;
  white-space: nowrap;
}
.ebook-lista-nazov { color: var(--n-tlmene); flex: 1; font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ebook-lista-nazov b { color: var(--ink); font-weight: 600; }
.ebook-aa {
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--n-ciara);
  color: var(--ink);
  cursor: pointer;
  flex: none;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  height: 34px;
  width: 46px;
}
.ebook-lista-priebeh { background: var(--pink); bottom: 0; height: 2px; left: 0; position: absolute; width: 0; }
.ebook-ikona-tl {
  align-items: center;
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--n-ciara);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex: none;
  height: 34px;
  justify-content: center;
  list-style: none;
  padding: 0;
  width: 34px;
}
.ebook-ikona-tl[hidden] { display: none; }
.ebook-ikona-tl::-webkit-details-marker { display: none; }
.ebook-ikona-tl::marker { content: ""; }
.ebook-citacka-vypni, .je-citacka .ebook-citacka-zapni { display: none; }
.je-citacka .ebook-citacka-vypni { display: block; }

/* Menu ⋯ — prečítané, záložka a poznámka na jednom mieste. */
.ebook-menu { border: 0; flex: none; position: relative; }
.ebook-menu > summary.ebook-ikona-tl { min-height: 0; padding: 0; position: static; }
.ebook-menu > summary::after { content: none; display: none; }
.ebook-menu[open] > summary { background: #f6eef2; }
.ebook-menu-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--n-ciara), 0 18px 40px -18px rgba(48, 35, 45, .35);
  display: grid;
  gap: 2px;
  padding: 8px;
  position: absolute;
  right: 0;
  top: 42px;
  width: min(320px, calc(100vw - 32px));
  z-index: 30;
}
.ebook-menu-polozka {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 14px;
  gap: 10px;
  padding: 10px;
  text-align: left;
  width: 100%;
}
.ebook-menu-polozka:hover { background: #fbf4f7; }
.ebook-menu-ikona { align-items: center; color: var(--pink-dark); display: flex; justify-content: center; width: 18px; }
.ebook-menu-ikona.je-fajka { color: #b9aab3; }
.ebook-menu-ikona.je-fajka.je-hotova { color: #1f6b42; }

/* Čítačka na celú obrazovku (ebook.js) — ako Reader v Safari: preč je
   zóna, osnova aj „späť“, ostáva papier, text a nenápadná lišta, ktorá sa
   pri čítaní nadol schová a pri posune nahor vráti. */
html.ebook-citacka body,
html.ebook-citacka .academy-app { background: #fbf7f3; }
html.ebook-citacka .academy-sidebar,
html.ebook-citacka .academy-topbar,
html.ebook-citacka .academy-bottom-nav,
html.ebook-citacka .ebook-osnova,
html.ebook-citacka .ebook-lista-spat,
html.ebook-citacka .ebook-v-kapitole,
html.ebook-citacka .reader-skip-link { display: none !important; }
html.ebook-citacka .academy-app { display: block; padding-bottom: 0; }
html.ebook-citacka .ebook { --ebook-horna-lista: 0px; }
html.ebook-citacka .ebook-lista { background: rgba(251, 247, 243, .94); padding-top: calc(10px + env(safe-area-inset-top)); transition: transform .25s ease; }
/* Pri čítaní nadol z lišty ostane len 5 px pás s priebehom (aj v PWA pod
   výrezom displeja); posun nahor ju vráti celú. */
/* Na širokej obrazovke drží lišta šírku textu — ovládanie nie je
   roztiahnuté do rohov monitora. */
html.ebook-citacka .ebook-lista { padding-left: max(18px, calc((100% - 720px) / 2)); padding-right: max(18px, calc((100% - 720px) / 2)); }
html.ebook-citacka .ebook-lista.je-skryta { transform: translateY(calc(-100% + 5px + env(safe-area-inset-top))); }
html.ebook-citacka .ebook-lista.je-skryta > :not(.ebook-lista-priebeh) { opacity: 0; pointer-events: none; }
html.ebook-citacka .ebook-lista-priebeh { transition: height .25s ease; }
html.ebook-citacka .ebook-lista.je-skryta .ebook-lista-priebeh { height: 5px; }
html.ebook-citacka .ebook-mriezka { display: block; }
html.ebook-citacka .ebook-kapitola { margin: 0 auto; max-width: 640px; padding-bottom: 40px; }

.ebook-mriezka { margin: 0 auto; max-width: 1000px; }
.ebook-osnova { display: none; }
.ebook-kapitola { margin: 0 auto; max-width: 680px; padding-top: 22px; }
.ebook-kapitola-meta { color: var(--n-tlmene); font-size: 12.5px; margin: 0 2px; }
.ebook-kapitola-hlavicka h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.15;
  margin: 4px 2px 8px;
}
.ebook-kapitola-popis { color: #5c4f58; font-size: 15.5px; line-height: 1.5; margin: 0 2px; }
.ebook-v-kapitole { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--n-ciara); margin: 16px 0 6px; }
.ebook-v-kapitole summary { align-items: center; display: flex; font-size: 13.5px; font-weight: 600; gap: 8px; min-height: 0; padding: 11px 44px 11px 14px; }
.ebook-v-kapitole summary small { color: var(--n-tlmene); font-weight: 500; }
/* Plus / mínus ako pri ostatných rozbaľovačoch na webe, len menšie. */
.ebook-v-kapitole summary::after { font-size: 22px; right: 14px; top: 5px; }
.ebook-v-kapitole nav { border-top: 1px solid var(--n-ciara); display: grid; padding: 6px 0; }
.ebook-v-kapitole nav a { color: var(--ink); font-size: 14px; padding: 7px 14px; text-decoration: none; }

.ebook-osnova-karta { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--n-ciara); padding: 14px 10px 8px; }
.ebook-osnova-hlava { color: var(--ink); display: block; padding: 0 6px 10px; text-decoration: none; }
.ebook-osnova-hlava small { color: var(--n-tlmene); display: block; font-size: 12px; font-weight: 600; }
.ebook-osnova-hlava strong { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.2; margin: 2px 0 8px; }
.ebook-osnova-hlava .progress-track { border-radius: 99px; height: 4px; }
.ebook-osnova-hlava > span:last-child { color: var(--n-tlmene); display: block; font-size: 12px; margin-top: 5px; }
.ebook-osnova-kap { align-items: flex-start; border-radius: 12px; color: var(--ink); display: flex; font-size: 13.5px; gap: 9px; line-height: 1.3; padding: 7px 6px; text-decoration: none; }
.ebook-osnova-kap:hover { background: #fcf8fa; }
.ebook-osnova-kap .okruh-cislo { font-size: 11px; height: 22px; width: 22px; }
nav[aria-label="Kapitoly e-booku"] .okruh-cislo.is-hotova,
.ebook-osnova-kap .okruh-cislo.is-hotova { background: #e7f4ec; box-shadow: inset 0 0 0 1.5px #3f9a68; color: #1f6b42; }
.ebook-osnova-kap.is-current { background: #fbeef3; font-weight: 600; }
.ebook-osnova-kotvy { border-left: 1px solid #ecdfe6; display: grid; margin: 2px 0 6px 17px; padding-left: 12px; }
.ebook-osnova-kotvy a { color: #6e5f69; font-size: 13px; line-height: 1.3; padding: 5px 0; text-decoration: none; }
.ebook-osnova-kotvy a.is-active { color: var(--pink-dark); font-weight: 600; }
.ebook-osnova-subor {
  align-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--n-ciara);
  color: var(--ink);
  display: flex;
  font-size: 13.5px;
  font-weight: 600;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  text-decoration: none;
}
.ebook-osnova-subor .ebook-subor-dlazdica { font-size: 10.5px; height: 32px; width: 32px; }

@media (min-width: 1080px) {
  .ebook-lista { margin: -48px calc(-1 * clamp(30px, 4vw, 68px)) 0; padding: 10px clamp(30px, 4vw, 68px); }
  .ebook-mriezka { align-items: start; display: grid; gap: 48px; grid-template-columns: 250px minmax(0, 680px); justify-content: center; }
  .ebook-mriezka.bez-osnovy { display: block; }
  .ebook-osnova { display: block; position: sticky; top: calc(var(--ebook-horna-lista, var(--academy-topbar-vyska)) + 72px); }
  .ebook-kapitola { margin: 0; padding-top: 30px; }
  .ebook-mriezka.bez-osnovy .ebook-kapitola { margin: 0 auto; }
  .ebook-kapitola-hlavicka h1 { font-size: 36px; }
  .ebook-v-kapitole { display: none; }
}

/* Čitateľný text — DM Sans, ~66 znakov na riadok; veľkosť mení tlačidlo Aa. */
.ebook-text { color: #2f2530; font-size: var(--ebook-pismo); line-height: 1.72; }
.ebook-text p { margin: 0 0 1em; }
.ebook-text ul, .ebook-text ol { list-style: none; margin: 0 0 1em; padding-left: 0; }
.ebook-text li { margin: 0 0 .9em; padding-left: 20px; position: relative; }
.ebook-text ul > li::before { background: var(--pink); border-radius: 50%; content: ""; height: 6px; left: 3px; position: absolute; top: .72em; width: 6px; }
/* Číslovanie necháva prehliadač — rešpektuje <ol start="2">, keď zoznam
   preruší blok (napr. veta pre klientku medzi bodmi). */
.ebook-text ol { list-style: decimal; padding-left: 22px; }
.ebook-text ol > li { padding-left: 4px; }
.ebook-text ol > li::marker { color: var(--pink-dark); font-weight: 700; }
/* Editor v admine pri uložení zabalí text bodu do odseku (<li><p>…</p></li>) —
   odsek v bode nesmie pridať medzeru navyše. */
.ebook-text li > p { margin: 0; }
.ebook-text li > p + p, .ebook-text li > p + ol, .ebook-text li > p + ul { margin-top: .5em; }
/* Bod začínajúci tučným pojmom (trieda ma-pojem, pridáva ju Kniha::pojmy):
   pojem ide na vlastný riadok ako malý nadpis — s odsekom aj bez neho. */
.ebook-text li.ma-pojem > strong:first-child,
.ebook-text li.ma-pojem > p:first-child > strong:first-child { display: block; line-height: 1.35; margin-bottom: 2px; }
.ebook-text strong { font-weight: 700; }
/* Body textu sú odseky s malým nadpisom, nie odrážky — čítajú sa plynulejšie. */
.ebook-text h3 { color: var(--ink); font-size: calc(var(--ebook-pismo) + 1px); font-weight: 700; line-height: 1.35; margin: 1.6em 0 .35em; }
.ebook-text > h3:first-child { margin-top: .4em; }
.ebook-zatvorka { color: var(--pink-dark); font-weight: 600; }
.ebook-sekcia h2 .ebook-zatvorka { font-family: inherit; }
.ebook-text a { color: var(--pink-dark); text-decoration: underline; text-underline-offset: 2px; }
.ebook-text img { border-radius: 14px; height: auto; max-width: 100%; }
.ebook-text blockquote { color: var(--pink-dark); font-family: "Playfair Display", Georgia, serif; font-style: italic; margin: 0 0 1em; }

/* Bloky ------------------------------------------------------------------- */
.ebook-bloky { margin-top: 22px; }
.ebook-blok { margin: 0 0 22px; scroll-margin-top: calc(var(--ebook-horna-lista, 96px) + 84px); }
.ebook-sekcia { scroll-margin-top: calc(var(--ebook-horna-lista, 96px) + 44px); }

.ebook-sekcia h2 {
  align-items: baseline;
  display: flex;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  gap: 10px;
  line-height: 1.25;
  margin: 40px 0 4px;
}
.ebook-bloky > .ebook-sekcia:first-child h2 { margin-top: 8px; }
/* Číslovanie častí pridávalo ďalšiu vrstvu značiek — číta sa bez neho. */
.ebook-sekcia h2 .okruh-cislo { display: none; }
.ebook-sekcia-podtitul { color: var(--n-tlmene); font-size: 14px; margin: 0 0 12px; }
.ebook-sekcia h2 + .ebook-text { margin-top: 10px; }

/* Nosná myšlienka — tichá kurzíva ako vytiahnutý citát v Apple Books,
   bez úvodzovky a rámika. */
.ebook-mysl {
  color: var(--pink-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  margin: 30px 0;
}

/* Pravidlo je zvýraznený odsek, nie karta: tenká čiara a číslo pri nadpise. */
.ebook-pravidlo { align-items: baseline; border-left: 2px solid var(--pink); display: flex; gap: 12px; padding: 2px 0 2px 16px; }
.ebook-pravidlo-hodnota {
  color: var(--pink-dark);
  flex: none;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
}
.ebook-pravidlo-text small { display: none; }
.ebook-pravidlo-text strong { display: block; font-size: calc(var(--ebook-pismo) - 1px); line-height: 1.4; }
.ebook-pravidlo-text p { color: #4d3f49; font-size: calc(var(--ebook-pismo) - 1px); line-height: 1.6; margin: 2px 0 0; }

.ebook-od-autorky { background: var(--cream); border-radius: 20px; padding: 16px; }
.ebook-od-autorky-hlava { align-items: center; display: flex; gap: 10px; margin-bottom: 10px; }
.ebook-od-autorky-hlava img { border-radius: 50%; height: 46px; object-fit: cover; object-position: 50% 20%; width: 46px; }
.ebook-od-autorky-hlava strong { display: block; font-size: 15px; }
.ebook-od-autorky-hlava small { color: var(--n-tlmene); display: block; font-size: 12.5px; }
.ebook-od-autorky .ebook-text { font-size: calc(var(--ebook-pismo) - 1px); }
.ebook-od-autorky .ebook-text > :last-child { margin-bottom: 0; }
.ebook-podpis { color: var(--pink); font-family: "Playfair Display", Georgia, serif; font-size: 21px; font-style: italic; font-weight: 600; margin: 8px 0 0; }

.ebook-ciele, .ebook-zhrnutie { padding: 0; }
.ebook-ciele > small, .ebook-zhrnutie > small { color: var(--n-tlmene); display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.ebook-ciele > strong, .ebook-zhrnutie > strong { display: block; font-size: 16px; line-height: 1.35; margin-bottom: 8px; }
.ebook-ciele ul, .ebook-zhrnutie ol { display: grid; gap: 9px; list-style: none; margin: 4px 0 0; padding: 0; }
.ebook-ciele li, .ebook-zhrnutie li { align-items: flex-start; display: flex; font-size: calc(var(--ebook-pismo) - 1px); gap: 10px; line-height: 1.55; }
.ebook-ciele .ebook-fajka { background: none; color: var(--pink); height: 20px; margin-top: 3px; width: 16px; }
.ebook-zhrnutie p { color: #4d3f49; font-size: 15px; line-height: 1.55; margin: 0; }
.ebook-fajka { align-items: center; background: #e7f4ec; border-radius: 50%; color: #1f6b42; display: flex; flex: none; height: 22px; justify-content: center; margin-top: 1px; width: 22px; }
.ebook-fajka svg { fill: none; height: 12px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.6; width: 12px; }

.ebook-fakty { display: grid; gap: 10px; }
.ebook-fakty > div { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--n-ciara); padding: 12px 14px; }
.ebook-fakty small { color: var(--n-tlmene); display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.ebook-fakty ul { display: grid; gap: 5px; list-style: none; margin: 0; padding: 0; }
.ebook-fakty li { font-size: 14.5px; line-height: 1.4; padding-left: 14px; position: relative; }
.ebook-fakty li::before { background: var(--pink); border-radius: 50%; content: ""; height: 5px; left: 1px; position: absolute; top: .6em; width: 5px; }

.ebook-checklist { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--n-ciara), 0 6px 18px -14px rgba(102, 48, 77, .35); overflow: hidden; }
.ebook-checklist-hlava { align-items: center; display: flex; gap: 10px; padding: 14px 16px 10px; }
.ebook-checklist-hlava div { flex: 1; }
.ebook-checklist-hlava small { color: var(--n-tlmene); display: block; font-size: 12px; font-weight: 600; }
.ebook-checklist-hlava strong { display: block; font-size: 16px; line-height: 1.3; }
.ebook-checklist-popis { color: #4d3f49; display: block; font-size: 14px; line-height: 1.45; margin-top: 4px; }
.ebook-checklist-pocet { background: #f1ecef; border-radius: 999px; color: #6e5f69; font-size: 12px; font-weight: 700; padding: 4px 10px; white-space: nowrap; }
.ebook-checklist-pocet.is-hotovo { background: #e7f4ec; color: #1f6b42; }
.ebook-checklist-krok {
  background: none;
  border: 0;
  border-top: 1px solid var(--n-ciara);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 12px;
  padding: 12px 16px;
  text-align: left;
  width: 100%;
}
.ebook-checklist-krok[aria-pressed="true"] { background: #f6fbf8; }
.ebook-checklist-kruh { align-items: center; border: 2px solid #dccfd6; border-radius: 50%; color: transparent; display: flex; flex: none; height: 24px; justify-content: center; margin-top: 1px; width: 24px; }
/* Fajka z komponentu nemá vlastný ťah — dostane ho tu, viditeľná je až po odškrtnutí. */
.ebook-checklist-kruh svg { fill: none; height: 13px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.6; width: 13px; }
.ebook-checklist-krok[aria-pressed="true"] .ebook-checklist-kruh { background: #34a853; border-color: #34a853; color: #fff; }
.ebook-checklist-obsah { display: grid; gap: 3px; min-width: 0; }
.ebook-checklist-obsah strong { font-size: 15px; line-height: 1.3; }
.ebook-checklist-riziko { color: var(--chyba, #b32738); font-size: 12.5px; font-weight: 600; }
.ebook-checklist-text { color: #4d3f49; font-size: 14.5px; line-height: 1.5; }
.ebook-checklist-pata { align-items: center; border-top: 1px solid var(--n-ciara); color: var(--n-tlmene); display: flex; font-size: 12px; gap: 10px; justify-content: space-between; padding: 10px 16px; }
.ebook-checklist-pata button { background: none; border: 0; color: var(--pink); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 0; }

/* Čo povedať klientke — bez podkladovej karty. Obe bubliny sú vľavo,
   kde začína čítanie; odpoveď je jemne ružová, nie sýta. */
.ebook-veta { margin: 26px 0; }
.ebook-veta-hlava { margin: 0 0 10px; }
.ebook-veta-hlava small { align-items: center; color: var(--n-tlmene); display: flex; font-size: 12px; font-weight: 600; gap: 6px; }
.ebook-veta-hlava strong { color: #4d3f49; display: block; font-size: calc(var(--ebook-pismo) - 1px); font-weight: 500; line-height: 1.5; margin-top: 2px; }
.ebook-bublina { border-radius: 18px; font-size: calc(var(--ebook-pismo) - 1px); line-height: 1.55; margin: 0; max-width: 92%; padding: 11px 15px; width: fit-content; }
.ebook-bublina-meno { color: var(--n-tlmene); font-size: 11.5px; font-weight: 600; margin: 0 4px 3px; }
.ebook-bublina-klientka { background: #fff; border-bottom-left-radius: 6px; box-shadow: 0 0 0 1px var(--n-ciara); }
.ebook-veta-ty { display: grid; justify-items: start; margin-top: 10px; }
.ebook-bublina-ty { background: #f8eef3; border-bottom-left-radius: 6px; color: var(--ink); }
.ebook-kopirovat {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--n-tlmene);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  gap: 5px;
  margin-top: 4px;
  padding: 4px 6px;
}
.ebook-kopirovat:hover { color: var(--pink-dark); }
.ebook-kopirovat[hidden] { display: none; }

.ebook-strany-stitok { color: var(--n-tlmene); display: block; font-size: 12px; font-weight: 600; margin: 0 4px 8px; }
.ebook-strany-mriezka { display: grid; gap: 10px; }
@media (min-width: 600px) {
  .ebook-strany-mriezka, .ebook-fakty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ebook-strana { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--n-ciara); overflow: hidden; }
.ebook-strana-hlava { background: #fbeef3; padding: 13px 14px 10px; }
.ebook-strana.je-druha .ebook-strana-hlava { background: var(--lavender-soft); }
.ebook-strana-hlava strong { display: block; font-size: 15.5px; line-height: 1.3; margin-top: 6px; }
.ebook-strana-hlava small { color: var(--n-tlmene); display: block; font-size: 12.5px; }
.ebook-pilulka { background: #fff; border-radius: 999px; color: var(--pink-dark); display: inline-flex; font-size: 12px; font-weight: 700; padding: 3px 9px; }
.ebook-strana.je-druha .ebook-pilulka { color: #5d4387; }
.ebook-strana ul { list-style: none; margin: 0; padding: 0; }
.ebook-strana li + li { border-top: 1px solid var(--n-ciara); }
.ebook-strana li a, .ebook-strana li > span { align-items: center; color: var(--ink); display: flex; font-size: 14px; gap: 8px; justify-content: space-between; line-height: 1.35; padding: 9px 14px; text-decoration: none; }
.ebook-strana li a:hover { background: #fcf8fa; }
.ebook-strana p { color: #4d3f49; font-size: 14.5px; line-height: 1.55; margin: 0; padding: 12px 14px 14px; }

.ebook-tip, .ebook-pozor { border-left: 2px solid #b9a5d6; padding: 2px 0 2px 16px; }
.ebook-pozor { border-left-color: var(--chyba, #b32738); }
.ebook-stitok { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 2px; }
.ebook-tip .ebook-stitok { color: #5d4387; }
.ebook-pozor .ebook-stitok { color: var(--chyba, #b32738); }
.ebook-tip strong, .ebook-pozor strong { display: block; font-size: calc(var(--ebook-pismo) - 1px); line-height: 1.4; }
.ebook-tip p, .ebook-pozor p { color: #4d3f49; font-size: calc(var(--ebook-pismo) - 1px); line-height: 1.6; margin: 2px 0 0; }

.ebook-foto { margin-left: 0; margin-right: 0; }
.ebook-foto-ram { background: #f5eef2; border: 0; border-radius: 18px; cursor: zoom-in; display: block; overflow: hidden; padding: 0; width: 100%; }
.ebook-foto-ram img { display: block; height: auto; width: 100%; }
.ebook-foto figcaption { color: var(--n-tlmene); font-size: 13px; line-height: 1.45; margin: 8px 4px 0; }
.ebook-foto figcaption b { color: var(--ink); }
.ebook-dvojica { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ebook-dvojica-popis { color: var(--n-tlmene); font-size: 12.5px; margin: 6px 4px 0; }
.ebook-dvojica .ebook-miesto { aspect-ratio: 3 / 4; padding: 12px; }
.ebook-dvojica .ebook-miesto p { font-size: 12.5px; }
/* Prázdne miesto na fotku — vidí ho len vedenie. */
.ebook-miesto {
  align-content: center;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, #f7eff3 0 14px, #f2e7ed 14px 28px);
  border: 1.5px dashed #dcc3d0;
  border-radius: 18px;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 18px;
  text-align: center;
}
.ebook-miesto-ikona { align-items: center; background: #fff; border-radius: 50%; box-shadow: 0 4px 14px -6px rgba(102, 48, 77, .35); color: var(--pink-dark); display: flex; height: 46px; justify-content: center; width: 46px; }
.ebook-miesto strong { font-size: 15px; }
.ebook-miesto p { color: #5c4f58; font-size: 13.5px; line-height: 1.45; margin: 0; max-width: 36ch; }
.ebook-miesto-cipy { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.ebook-miesto-cipy span { background: #fff; border-radius: 999px; color: #6e5f69; font-size: 12px; font-weight: 600; padding: 3px 9px; }

.ebook-video { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--n-ciara); overflow: hidden; }
.ebook-video-nahlad { display: block; position: relative; }
.ebook-video-nahlad img { aspect-ratio: 16 / 9; display: block; height: auto; object-fit: cover; width: 100%; }
.ebook-video-play { align-items: center; background: rgba(255, 255, 255, .92); border-radius: 50%; color: var(--pink-dark); display: flex; height: 56px; justify-content: center; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 56px; }
.ebook-video .nastenka-riadok-text { padding: 12px 14px; }
.ebook-video-popis { color: #4d3f49; font-size: 14px; line-height: 1.5; margin-top: 4px; }

/* Na stiahnutie — jediná plná výzva v kapitole. */
.ebook-subor {
  align-items: center;
  background: var(--gradient-rich);
  border-radius: 20px;
  color: #fff;
  display: flex;
  gap: 12px;
  overflow: hidden;
  padding: 14px;
  position: relative;
  text-decoration: none;
}
.ebook-subor::after { background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .22), transparent 55%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.ebook-subor .ebook-subor-dlazdica { background: rgba(255, 255, 255, .18); }
.ebook-subor .nastenka-riadok-text small { color: rgba(255, 255, 255, .85); }
.ebook-subor .nastenka-riadok-text strong { font-size: 16px; }
.ebook-subor-tlacidlo { align-items: center; background: #fff; border-radius: 999px; color: var(--pink-dark); display: flex; flex: none; font-size: 13.5px; font-weight: 700; gap: 6px; padding: 9px 14px; position: relative; z-index: 1; }

.ebook-tabulka > small { color: var(--n-tlmene); display: block; font-size: 12px; font-weight: 600; margin: 0 4px 8px; }
.ebook-tabulka-posun { background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--n-ciara); overflow-x: auto; }
.ebook-tabulka table { border-collapse: collapse; font-size: 14px; min-width: 520px; width: 100%; }
.ebook-tabulka caption { caption-side: bottom; color: var(--n-tlmene); font-size: 12.5px; padding: 8px 14px; text-align: left; }
.ebook-tabulka th, .ebook-tabulka td { padding: 10px 14px; text-align: left; vertical-align: top; }
.ebook-tabulka thead th { color: var(--n-tlmene); font-size: 12px; font-weight: 600; }
.ebook-tabulka tbody tr { border-top: 1px solid var(--n-ciara); }
.ebook-tabulka tbody th { font-weight: 600; }

.ebook-dalsi-krok { background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px var(--n-ciara), 0 6px 18px -14px rgba(102, 48, 77, .35); overflow: hidden; }
/* Ďalší krok je výzva na konci e-booku — fotka na plnú šírku ako pozvánka. */
.ebook-dalsi-krok-foto { min-height: 280px; position: relative; }
@media (min-width: 760px) { .ebook-dalsi-krok-foto { min-height: 360px; } }
.ebook-dalsi-krok-foto > img { height: 100%; inset: 0; object-fit: cover; object-position: 55% 55%; position: absolute; width: 100%; }
.ebook-dalsi-krok-foto.bez-fotky { background: radial-gradient(circle at 85% 18%, rgba(242, 122, 174, .45), transparent 42%), linear-gradient(160deg, #3a2336 0%, #2a1a27 45%, #5a1a38 100%); }
.ebook-dalsi-krok-foto > img + .ebook-dalsi-krok-nadpis,
.ebook-dalsi-krok-foto:not(.ma-miesto) .ebook-dalsi-krok-nadpis { color: #fff; text-shadow: 0 2px 10px rgba(20, 10, 18, .55); }
.ebook-dalsi-krok-foto > img + .ebook-dalsi-krok-nadpis::before { background: linear-gradient(transparent, rgba(31, 21, 32, .78)); content: ""; inset: -60px -16px -14px; position: absolute; z-index: -1; }
.ebook-dalsi-krok-foto.ma-miesto .ebook-miesto { aspect-ratio: auto; border: 0; border-radius: 0; min-height: 240px; padding-bottom: 118px; }
.ebook-dalsi-krok-nadpis { bottom: 14px; color: var(--ink); left: 16px; position: absolute; right: 16px; z-index: 1; }
.ebook-dalsi-krok-nadpis small { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ebook-dalsi-krok-nadpis strong { display: block; font-family: "Playfair Display", Georgia, serif; font-size: clamp(28px, 5vw, 36px); font-weight: 600; line-height: 1.1; }
.ebook-dalsi-krok-nadpis em { color: #f27aae; }
.ebook-dalsi-krok-foto.ma-miesto .ebook-dalsi-krok-nadpis em { color: var(--pink); }
.ebook-dalsi-krok-text { color: #4d3f49; font-size: 15px; line-height: 1.55; margin: 0; padding: 14px 16px 6px; }
.ebook-dalsi-krok .nastenka-riadok { padding: 14px 16px; }
.ebook-dalsi-krok .nastenka-riadok strong { color: var(--pink-dark); font-size: 16px; }
.ebook-dalsi-krok .nastenka-sipka { align-items: center; background: var(--pink); border-radius: 50%; color: #fff; display: flex; flex: none; font-size: 18px; height: 32px; justify-content: center; width: 32px; }
.ebook-dalsi-krok .nastenka-riadok-text small { font-size: 13.5px; line-height: 1.45; }

/* Koniec kapitoly ----------------------------------------------------------- */
.ebook-koniec { border-top: 1px solid var(--n-ciara); margin-top: 34px; padding-top: 22px; }
/* Ďalšia kapitola — decentný slivkový rámik, aby sa preklik nestratil. */
.ebook-koniec .nastenka-zoznam { border: 1.5px solid #925092; box-shadow: 0 2px 10px rgba(146, 80, 146, .10); }
.ebook-koniec .nastenka-riadok .okruh-cislo { background: #f3e9f3; color: #925092; }
.ebook-koniec .nastenka-sipka { color: #925092; }
.ebook-koniec .nastenka-riadok:hover { background: #faf4fa; }
.ebook-poznamka { background: #fffbe9; border-radius: 12px; box-shadow: 0 0 0 1px #f1e6b8; display: block; margin: 6px 0 0; padding: 10px 12px; }
.ebook-poznamka label { color: #7a6a2c; display: block; font-size: 12px; font-weight: 700; }
.ebook-poznamka textarea { background: transparent; border: 0; box-shadow: none; display: block; font: inherit; font-size: 15px; line-height: 1.5; margin: 6px 0 8px; min-height: 66px; padding: 0; resize: vertical; width: 100%; }
.ebook-poznamka textarea:focus { outline: none; }
.ebook-poznamka-pata { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.ebook-poznamka-pata small { color: #7a6a2c; font-size: 12px; }
.ebook-poznamka-pata button { background: var(--ink); border: 0; border-radius: 999px; color: #fff; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; }
.ebook-predosla { color: var(--n-tlmene); display: inline-block; font-size: 13.5px; font-weight: 600; margin: 12px 4px 0; text-decoration: none; }
.ebook-citanie .vodoznak { margin-top: 30px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .ebook-lista-priebeh, html.ebook-citacka .ebook-lista { transition: none; }
}

/* Tlač: len text kapitoly, bez lišty, osnovy, poznámky a tlačidiel. */
@media print {
  .academy-sidebar, .academy-topbar, .academy-bottom-nav,
  .ebook-lista, .ebook-osnova, .ebook-v-kapitole, .ebook-menu,
  .ebook-koniec .nastenka-zoznam, .ebook-predosla, .ebook-kopirovat, .ebook-checklist-pata, .reader-skip-link { display: none !important; }
  .ebook-mriezka { display: block; }
  .ebook-kapitola { max-width: none; }
  .ebook-blok { break-inside: avoid; }
}

/* Generálka spustenia ------------------------------------------------------- */
/* Zákazníčka s e-bookom vidí zónu celú, zamknuté časti pod svetlým závojom. */
.zavoj { position: relative; }
.zavoj-obsah { filter: blur(7px) saturate(.8); opacity: .75; pointer-events: none; user-select: none; }
.zavoj-stitok { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 6px; padding: 16px; text-align: center;
  background: linear-gradient(135deg, rgba(255, 246, 250, .62), rgba(243, 233, 243, .7)); border-radius: 18px; }
.zavoj-stitok span { justify-self: center; background: #fff; color: #925092; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 4px 14px rgba(146, 80, 146, .18); }
.zavoj-stitok strong { color: #3a1f2d; font-size: 16px; }
.zavoj-stitok p { margin: 0; max-width: 34ch; color: #4a3340; font-size: 13.5px; }
/* Zamknutá položka menu: malý zámok, text ostáva na jednom riadku. */
.academy-sidebar nav a.je-zamknuta, .academy-bottom-nav a.je-zamknuta { color: #8a7682; }
.academy-sidebar nav a.je-zamknuta::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 6px; vertical-align: -1px; background: #925092;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Ďakovná stránka: krátka animácia „vytváram účet“ (3 s). Bez JavaScriptu, koncový stav platí vždy. */
.priebeh-uctu { margin: 26px 0 8px; padding: 22px 24px; border-radius: 22px; background: rgba(255, 252, 253, .78); box-shadow: 0 0 0 1px rgba(48, 35, 45, .08); text-align: left; }
.priebeh-uctu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.priebeh-uctu li { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 600; color: #30232d; opacity: .5; animation: pu-text .35s ease forwards; animation-delay: calc(var(--d) + .1s); }
.pu-kruh { position: relative; flex: none; width: 28px; height: 28px; }
.pu-spin { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #f1d3df; border-top-color: #a72f63; animation: pu-tocenie .7s linear infinite, pu-zmiz .01s linear forwards; animation-delay: 0s, calc(var(--d) + .7s); }
.pu-fajka { position: absolute; inset: 0; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: #1f6b42; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; animation: pu-ukaz .3s ease forwards; animation-delay: calc(var(--d) + .7s); }
.pu-hotovo { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(48, 35, 45, .1); font-size: 16px; line-height: 1.55; color: #675964; opacity: 0; transform: translateY(6px); animation: pu-hotovo .5s ease forwards; animation-delay: 2.3s; }
.pu-hotovo strong { color: #1f6b42; }
@keyframes pu-tocenie { to { transform: rotate(360deg); } }
@keyframes pu-zmiz { to { opacity: 0; visibility: hidden; } }
@keyframes pu-ukaz { to { opacity: 1; } }
@keyframes pu-text { to { opacity: 1; } }
@keyframes pu-hotovo { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .priebeh-uctu li, .pu-spin, .pu-fajka, .pu-hotovo { animation: none; }
  .priebeh-uctu li { opacity: 1; }
  .pu-spin { display: none; }
  .pu-fajka { opacity: 1; }
  .pu-hotovo { opacity: 1; transform: none; }
}