/* ============================================================================
   PHILIPOVA METODA — stilovi landinga (template-philipova-metoda.php)
   1:1 po Figma SnMnvzTQtl4H8tuQzFK3j1 (desktop 1:2 @1920 · mobile 1:1124 @440)

   ORGANIZACIJA: svaka sekcija drži SVA svoja pravila na jednom mestu — bazna,
   pa njeni @media override-i (1100 → 860 → 480 → visinski). Kad menjaš sekciju,
   tražiš SAMO njen blok; ništa njeno ne živi na drugom kraju fajla.

   SADRŽAJ
     00  ZAJEDNIČKO (tokeni, reset, .pm-wrap, .pm-btn, ™, swoosh)
     01  HERO
     02  MOST
     03  ZAŠTO NE SPAVA
     04  SIMPTOMI
     05  ŠTA JE PM
     06  KOME JE NAMENJENA
     07  ŠTA ĆETE SAZNATI
     08  OVO NIJE SLEEP TRAINING
     09  DRUGAČIJI NAČIN
     10  ISKUSTVA RODITELJA  (→ pm-testimonials.css, deli se sa O nama)
     11  KO STOJI IZA
     12  PODRŽALI SU STRUČNJACI
     13  ŠTA TAČNO DOBIJATE (slajder na skrol)
     14  I SVE TO U JEDNOM SISTEMU
     15  IZABERITE SVOJ PROGRAM
     16  NISTE SIGURNI — CF7 FORMA
     17  ŽELIMO DA BUDETE SIGURNI
     18  FAQ
     19  PRICING

   Paleta: ink #584642 · brown #8B726C · cream #FDFAF8 · sand #F1EAE3
           blush #EFE5DE · gold #D6A14B · green #16C47F · red #FF3131
   Kolona: 1240px sadržaj (.pm-wrap max 1320 + 40px padding); mobilni 32px
   ============================================================================ */


/* ==========================================================================
   00  ZAJEDNIČKO
   tokeni, reset, .pm-wrap, .pm-btn, ™, swoosh — deli ih više sekcija
   ======================================================================= */
/* bukvar-trudnice.css ima `html, body { overflow-x: hidden }`. `hidden` čini
   html/body scroll kontejnerima (overflow-y postaje auto), a to LOMI
   position: sticky — skrol-vođena sekcija 13 se onda ne zakuca. `clip` jednako
   sprečava horizontalni skrol ali ne pravi scroll kontejner.
   Ovaj fajl se učitava samo na Philipova templejtu i posle bukvar bundle-a
   (deps u inc/setup.php), pa je pregaženo tačno tu gde treba.
   Ako browser ne podržava `clip` (Safari < 16), deklaracija otpada i ostaje
   staro ponašanje — sekcija se ne zakuca, ali ništa ne puca. */
html, body { overflow-x: clip; }
.philipova-page {
    overflow-x: clip;
    background: #FDFAF8;
    --ink: #584642; --brown: #8B726C; --cream: #FDFAF8; --sand: #F1EAE3; --blush: #EFE5DE;
    --gold: #D6A14B; --green: #16C47F; --red: #FF3131;
    --lora: 'Lora', Georgia, serif;
    --inter: 'Inter', system-ui, -apple-system, sans-serif;
    --track: -1.512px;   /* letter-spacing svih Lora naslova u dizajnu */
}
.philipova-page * { box-sizing: border-box; }
.philipova-page picture { display: contents; }
/* RESET — specifičnost mora da padne TAČNO između (0,0,1) i (0,1,0):
   · uicore-global.css se učitava POSLE ovog fajla i ima `p{margin-bottom:1em}`,
     `h1{margin:.67em 0}` i `body,p{letter-spacing:…}` — sve (0,0,1). Reset od
     (0,0,1) gubi u tie-u (kasniji fajl pobeđuje), pa je h1 dobijao 53.6px margine
     i gurao ceo hero naniže dok mu CTA nije ispao iz okvira.
   · Ali reset NE SME da pređe (0,1,0), inače gazi BEM pravila tipa
     `.pm-why__title { margin: 0 0 32px }`.
   Dupli `:is()` daje tačno (0,0,2): svaki `:is()` nosi specifičnost svog
   najjačeg argumenta (type = (0,0,1)), pa se dva sabiraju. */
:where(.philipova-page) :is(h1,h2,h3,h4,p,ul,ol,li):is(h1,h2,h3,h4,p,ul,ol,li) { margin: 0; }
/* letter-spacing prepuštamo kontejneru (Figma ga vodi po sekciji), ne uicore-u.
   Ranije je ovo stajalo kao `.pm-SEKCIJA p` (0,1,1) u 11 sekcija — a to je gazilo
   `.pm-SEKCIJA__sub { letter-spacing: var(--track) }` (0,1,0) i tekst je bio 3–7% širi. */
:where(.philipova-page) :is(p,ul,ol,li):is(p,ul,ol,li) { letter-spacing: inherit; }
:where(.philipova-page) :is(ul,ol):is(ul,ol) { padding: 0; list-style: none; }
/* style.css ima generičko `p {…}` pravilo → paragrafi bez klase nasleđuju od roditelja */
:where(.philipova-page) [class*="__text"] p, :where(.philipova-page) [class*="__body"] p {
    font-size: inherit; line-height: inherit; font-family: inherit; color: inherit;
}
/* child style.css:477 → `strong { font-weight: 600 !important }`. Figma koristi
   Inter Bold (700) za <strong>, a jedino !important sa vecom specificnoscu prolazi.
   `.pm-faq .faq-title strong` (0,3,0 !important) i dalje ostaje na 500. */
.philipova-page strong, .philipova-page b { font-weight: 700 !important; }
.philipova-page .screen-reader-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* Sadržajna kolona — 1240px unutar 1320 (40px bočno na užim ekranima) */
.pm-wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
/* ── ™ znak (kružić sa TM — SVG iz dizajna) ───────────────────────────── */
.pm-tm { display: inline-block; line-height: 0; vertical-align: top; }
.pm-tm img { display: block; width: 20px; height: 20px; }
.pm-tm--text img { width: 12px; height: 12px; }
.pm-tm--card img { width: 14px; height: 14px; }
.pm-tm--title img { width: 43px; height: 43px; }
.pm-tm--badge img { width: 20px; height: 20px; }
/* ── zlatni swoosh ispod italic linija (Ellipse 63) ──────────────────── */
.pm-underline { position: relative; display: inline-block; }
.pm-swoosh {
    position: absolute; left: 0; bottom: -6px; width: 100%; height: 21px; display: block; pointer-events: none;
}
/* ── dugme ───────────────────────────────────────────────────────────── */
.pm-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 279px; height: 48px; padding: 0 32px; border: 0; border-radius: 12px;
    background: var(--brown); color: var(--cream) !important;
    font-family: var(--inter); font-size: 15px; font-weight: 600; line-height: 16px;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
/* Program koji još nije u prodaji (proizvod u nacrtu) — ista veličina i mesto kao kupovno
   dugme, bez strelice i bez klika. (0,2,x) da pregazi .pm-btn--program::after i hover. */
.pm-btn.pm-btn--soon { cursor: default; pointer-events: none; opacity: .55; box-shadow: none; transform: none; }
.pm-btn.pm-btn--soon::before, .pm-btn.pm-btn--soon::after { display: none; }
.pm-btn:hover, .pm-btn:focus-visible {
    background: #7B655F; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(88,70,66,.18); color: var(--cream) !important;
}
/* UiCore/parent gazi boju linka preko #primary — zato eksplicitno */
#primary a.pm-btn, #primary a.pm-btn:link, #primary a.pm-btn:visited, #primary a.pm-btn:hover, #primary a.pm-btn:focus, #primary a.pm-btn:active {
    color: #FDFAF8 !important;
}
.pm-swoosh--hero { bottom: -15px; width: 98%; }
/* statistike: 3 kolone po 193px, centri na 96.5 / 313.5 / 530.5 */
.pm-stats { display: flex; align-items: flex-start; gap: 24px; margin: 0; }
.pm-swoosh--why { bottom: -32px; width: 58%; }
/* 3 kartice (391/392/391 × 398, gap 33) + strelice preko razmaka */
.pm-attempts {
    position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 33px; margin: 0 0 63px;
}
.pm-attempts__arrow {
    position: absolute; top: 50%; width: 78px; height: 64px; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.pm-attempts__arrow:nth-of-type(1) { left: 32.86%; }
.pm-attempts__arrow:nth-of-type(2) { left: 67.14%; }
.pm-attempts__arrow img { width: 78px; height: 64px; transform: rotate(180deg); display: block; }   /* Figma 1:290/1:293 */
.pm-swoosh--whatis { left: 20.6%; width: 78.7%; bottom: -18px; }
/* privremeni anchor za CTA dok sekcija "Izaberite program" nije urađena */
.pm-todo { height: 0; }
.pm-tm--know img { width: 32px; height: 32px; }
.pm-tm--btn img { width: 8px; height: 8px; }
/* ™ na TAMNOJ podlozi (braon dugmad, naslov stručnjaka, tamna cenovna kartica, insight kartica).
   tm.svg je ink (#584642); filter ga pretvara u belo bez posebnog asseta. Klasa se daje u
   templejtu: ivx_pm_tm('… pm-tm--light'). (Ranije mask + background NIJE radio: slika se
   i dalje crtala tamnim linijama preko pozadine unutar maske.) */
.pm-tm--light img { filter: brightness(0) invert(1); }
/* ™ u NASLOVIMA je u em — skalira se zajedno sa naslovom na svakoj širini (u px je na 1100–1400
   bio prevelik i gurao „?"). Odnosi su izmereni na 1920 (naslov 80px; „Kome je namenjena" 88px
   kurziv). font-size: inherit na <sup> da em važi prema naslovu, a ne prema umanjenom sup-u. */
.pm-whatis__title .pm-tm, .pm-programs__title .pm-tm, .pm-know__title .pm-tm,
.pm-author__title .pm-tm, .pm-experts__title .pm-tm { font-size: inherit; }
.pm-whatis__title .pm-tm img   { width: .45em;   height: .45em; }     /* 36 / 80 — bez preklopa sa „?" (odluka klijenta) */
.pm-programs__title .pm-tm img { width: .4886em; height: .4886em; }   /* 43 / 88 */
.pm-know__title .pm-tm img     { width: .4em;    height: .4em; }      /* 32 / 80 */
.pm-author__title .pm-tm img   { width: .3125em; height: .3125em; }   /* 25 / 80 */
.pm-experts__title .pm-tm img  { width: .375em;  height: .375em; }    /* 30 / 80 */
.pm-swoosh--know { bottom: -9px; height: 21px; }
.pm-know-card {
    display: flex; flex-direction: column; min-height: 327px; padding: 40px;
    border-radius: 32px; background: var(--brown); color: var(--cream);
    box-shadow: 2px 4px 20px rgba(0, 0, 0, .07);
}
.pm-know-card--light { background: var(--cream); color: var(--brown); }
.pm-know-card__head { display: flex; align-items: center; gap: 30px; }   /* Figma: centri boksova 83 / 82.5 */
.pm-know-card__num { font-family: var(--lora); font-weight: 700; font-size: 80px; line-height: 1; }
.pm-know-card__flag { font-family: var(--lora); font-weight: 600; font-style: italic; font-size: 32px; line-height: 1; }
/* boja MORA eksplicitno: uicore-global.css ima `body, p {color:…}`, a nasleđena
   vrednost sa .pm-know-card uvek gubi od direktne deklaracije na `p`.
   Postojeći `[class*="__text"] p` reset ne hvata ovo — ovde je __text sam <p>. */
.pm-know-card__text {
    max-width: 528px; margin-top: auto; padding-top: 24px; font-family: var(--inter); font-weight: 500; font-size: 24px; line-height: 1.21; color: var(--cream);
}
.pm-know-card--light .pm-know-card__text { color: var(--brown); }
.pm-know-card__text strong { font-weight: 700; }
/* link u tekstu kartice („umorno ili premoreno" → članak Philipova metoda: trening spavanja ili…) —
   boja teksta kartice, podvučeno da se vidi da je link (root-relativan URL, radi i na live-u) */
/* font-* inherit: globalni stil linkova (tema) je smanjivao slova linka u odnosu na tekst kartice */
.pm-know-card__text .pm-know-card__link { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity .2s ease; }
.pm-know-card__text .pm-know-card__link:hover { opacity: .75; }
.pm-know-card__accent { color: var(--ink); }
.pm-tm--author img { width: 25px; height: 25px; }
/* prefers-reduced-motion → bez pina, slajdovi jedan ispod drugog */
[data-pm-scroller][data-pm-static] { height: auto; }
.pm-swoosh--system { bottom: -14px; height: 17px; }
.pm-tm--sure img { width: 14px; height: 14px; }
.pm-choose .pm-btn--program { margin-top: 32px; }
.pm-tm--price img { width: 18px; height: 18px; }
.pm-price .pm-btn--program.pm-price__btn--invert { background: var(--cream); color: var(--brown) !important; }
.pm-price .pm-btn--program.pm-price__btn--invert:hover { background: #F1EAE3; }
.pm-price__card--dark .pm-btn--program.pm-price__btn--invert .pm-btn__label { color: var(--brown) !important; }
.pm-tm--experts img { width: 30px; height: 30px; }

@media (max-width: 1100px) {
    .pm-attempts { gap: 24px; }
    .pm-attempts__arrow { display: none; }
    .pm-know-card { min-height: 300px; padding: 32px; }
    .pm-know-card__num { font-size: 64px; }
    .pm-know-card__flag { font-size: 26px; }
    .pm-know-card__text { font-size: 20px; }
}

@media (max-width: 860px) {
    .pm-wrap { padding: 0 32px; }
    .pm-tm--badge img { width: 14px; height: 14px; }
    .pm-swoosh--hero { bottom: -8px; width: 60%; height: 12px; }   /* Figma 1:1124 — potez 196×12 ispod „zašto ne spava.“ (poseban sloj van noda 1:1167, zato ga nod-render nema) */
    .pm-tm--text img { width: 10px; height: 10px; }
    .pm-stats { gap: 9px; margin-top: 24px; }
    .pm-swoosh--why { bottom: -8px; width: 60%; height: 12px; }
    .pm-attempts { grid-template-columns: minmax(0, 1fr); gap: 11px; margin: 0 0 16px; }
    .pm-attempts__arrow { position: static; display: flex; height: 0; overflow: visible; transform: none; width: auto; }
    .pm-attempts__arrow img { width: 52px; height: 42px; transform: rotate(-90deg); }   /* Figma 1:1313 — arrow-left 52×42 sa -rotate-90 → 42×52 */
    .pm-tm--title img { width: 22px; height: 22px; }
    .pm-swoosh--whatis { bottom: -6px; height: 12px; }
    .pm-tm--card img { width: 12px; height: 12px; }
    .pm-tm--know img { width: 20px; height: 20px; }
    .pm-swoosh--know { bottom: -12px; height: 12px; }   /* Figma 1:1136 — 363×12 tačno ispod okvira leada 1:1137, ne preko slova */
    /* Figma 1:1140–1:1149 — broj Lora 64 (okvir 82) na y20, tekst Inter 18 na y106, 24px do dna; visine 218/262/218/240 */
    .pm-know-card { min-height: 0; padding: 20px 24px 24px; }
    .pm-know-card__head { gap: 0 24px; flex-wrap: wrap; }   /* Figma 1:1151 — flag na x124 (broj 24+76 + 24) */
    .pm-know-card__num { font-size: 64px; line-height: normal; }
    /* padding-block 12: u jednom redu flag ostaje centriran uz broj (centar 61); kad ispod ~388px pređe u novi red,
       daje 12 iznad flaga i 12+4 = 16 do teksta — bez širinskog guard-a koji zavisi od rendera fonta */
    .pm-know-card__flag { font-size: 24px; padding-block: 12px; }
    .pm-know-card__text { font-size: 18px; padding-top: 4px; }
    .pm-tm--experts img { width: 16px; height: 16px; }
    .pm-tm--author img { width: 16px; height: 16px; }
    .pm-swoosh--system { left: 50%; bottom: -12px; width: 182px; height: 12px; transform: translateX(-50%); }   /* Figma 1:1700 — 182×12, centriran ispod napomene */
    .pm-choose .pm-btn--program { margin-top: 20px; }   /* Figma 1:1702 / 1:1747 — lista (428 + 102) → dugme 550 = 20 */
}

/* 07 kartice: Figma 1:1142 / 1:1141 važe i na 440 (64 / 18), pa ≤480 nema umanjenja. */

/* ==========================================================================
   01  HERO
   Figma 1:137 / 1:1167
   ======================================================================= */
.pm-hero { position: relative; padding: 78px 30px 0; margin-bottom: 117px; }
/* sledeća sekcija počinje 117px ispod okvira (923→1040) */
/* Figma okvir je 1860 od 1920 platna = 30px uvuceno sa svake strane — tacno ono
   sto vec daje `padding: 78px 30px 0` na sekciji. Zato bez `max-width`: sa njim bi
   na 2560px hero ostao zakucana kartica od 1860px sa krem trakama sa strane, dok su
   sve sekcije ispod pune sirine.
   I bez `aspect-ratio`: sadrzaj hero-a je fiksne visine (843px), pa je odnos
   1860/845 na 1440px davao okvir od 627px i secao CTA dugme za 216px, a na 2560px
   ga razvlacio na 1136px. `min-height` daje Figminih 845 na svakoj sirini, a okvir
   moze da naraste ako sadrzaj ikad bude visi. */
.pm-hero__frame {
    position: relative; margin: 0 auto; min-height: 845px;
    border-radius: 24px; overflow: hidden; background: var(--cream);
    display: flex;
}
.philipova-page picture.pm-hero__bg { display: block; }
.pm-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* foto je u dizajnu uvećan: 2437×1372 na (0,−312) unutar 1860×845 */
/* `top: -36.9%` je procenat visine OKVIRA (845px), a `width: 131%` raste sa
   njegovom sirinom — pa je ispod ~1740px slika bila niza od 845+312=1157px koliko
   treba da pokrije okvir, i donji deo hero-a je ostajao prazan krem (na 1100px
   skoro 400px). `min-height: 136.9%` (= 100% + 36.9%) garantuje pokrivenost, a
   `object-fit: cover` cuva odnos slike umesto da je razvuce. Na 1920 je prirodna
   visina 1371 > 1157, pa min-height ne radi nista i kadar ostaje Figmin. */
.pm-hero__bg img {
    position: absolute; left: 0; top: -36.9%;
    width: 131%; max-width: none; height: auto; min-height: 136.9%;
    object-fit: cover; object-position: 50% 50%; display: block;
}
/* Preko 1920px okvir raste, ali `top` je procenat FIKSNE visine okvira (845px),
   dok bi `width: 131%` rastao sa sirinom — na 2560 slika postane 3275x1843, a
   isecak od 845px onda pokazuje samo gornju polovinu i beba ispada iz kadra.
   Zato iznad 1920 drzimo Figmin zum (2437px) i sliku sirimo tek toliko da pokrije
   okvir: vidljivi pojas ostaje 22–82% visine izvora, kao i na 1920 (23–84%). */
@media (min-width: 1921px) {
    .pm-hero__bg img { width: max(100%, 2437px); }
}
.pm-hero__tint {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(253,250,248,.4) 0%, rgba(253,250,248,0) 100%),
    linear-gradient(90deg, rgba(224,204,197,.4) 0%, rgba(255,255,255,0) 100%);
}
.pm-hero__fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 1; background: linear-gradient(0deg, rgba(253,250,248,.8) 0%, rgba(253,250,248,0) 100%);
}
.pm-hero__inner {
    position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 122px 0 80px;
}
.pm-hero__content { max-width: 777px; }
.pm-hero__badge {
    position: relative;                       /* Figma 1:167 — ™ je zaseban sloj, ne stavka u toku */
    display: inline-flex; align-items: center; gap: 0;
    padding: 16px 32px; margin: 0 0 16px;
    border: 1px solid var(--ink); border-radius: 1000px;
    font-family: var(--inter); font-size: 24px; font-weight: 400; line-height: 30px; color: var(--ink);
    text-transform: uppercase; white-space: nowrap;
}
.pm-hero__badge .pm-tm { position: absolute; top: 4px; right: 17px; margin: 0; }
/* ™ podignut iznad teksta (top 4px u dizajnu) */
.pm-hero__title {
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: 1; letter-spacing: var(--track);
    color: var(--ink); max-width: 777px;
}
.pm-hero__title-dot { display: none; }
/* mobilni H1 završava tačkom */
.pm-hero__sub {
    font-family: var(--lora); font-style: italic; font-weight: 500; font-size: 48px; line-height: 1.667; letter-spacing: var(--track);
    color: var(--brown); white-space: nowrap; margin: 0 0 29px;
}
/* 740×21 na top 434 = donja ivica linije od 80px */
.pm-hero__text {
    font-family: var(--inter); font-size: 24px; font-weight: 400; line-height: 1.21; color: var(--ink); max-width: 692px; margin: 0 0 16px;
}
.pm-hero__text strong { font-weight: 700; }
.pm-hero__cta--mobile { display: none; }
.pm-hero__cta--desktop { margin-top: 22px; }
.pm-stat {
    display: flex; flex-direction: column; align-items: center; text-align: center; width: 193px; color: var(--ink);
}
.pm-stat__icon { width: 56px; height: 56px; display: block; }
.pm-stat__stars { display: flex; align-items: center; height: 56px; gap: 0; }
.pm-stat__star { width: 37px; height: 37px; display: block; }
.pm-stat__num {
    display: block; margin-top: 8px; font-family: var(--inter); font-size: 24px; font-weight: 700; line-height: 1.21;
}
.pm-stat__label {
    display: block; margin-top: 2px; font-family: var(--inter); font-size: 20px; font-weight: 400; line-height: 1.21; white-space: nowrap;
}

@media (max-width: 1100px) {
    .pm-hero__inner { padding: 90px 40px 60px; }
    .pm-stat { width: 160px; }
}

@media (max-width: 860px) {
    /* ── hero: okvir 408×959 sa 16px margine, most je UNUTAR okvira ── */
    .pm-hero { position: relative; padding: 59px 16px 0; margin-bottom: 0; }
    .pm-hero__frame { min-height: 0; border-radius: 24px; }
    /* portret 652×1361 na (−102,−346) u 408×959 */
    .pm-hero__bg img { left: -25%; top: -36%; width: 160%; }
    .pm-hero__tint { display: none; }
    .pm-hero__fade { height: 100%; }   /* Figma 1:1170 — mobilni fade ide preko CELE visine */
    /* okvir 959px: 85 gore + sadržaj + 161 razmak + most 136 + 16 dole (most je apsolutno pozicioniran u dnu okvira) */
    .pm-hero__inner { padding: 85px 16px 313px; }   /* Figma 1:1167 — dno statistika 646, most 807, okvir 959 */
    .pm-hero__content { max-width: none; }
    .pm-hero__badge { padding: 8px 32px; margin-bottom: 12px; font-size: 14px; line-height: 28px; }   /* Figma 1:1171 — 199×46 = 8+28+8 + 2px border */
    .pm-hero__badge .pm-tm { top: 6px; right: 21px; }
    .pm-hero__title { font-size: 40px; line-height: 1.28; max-width: 347px; }
    .pm-hero__title-dot { display: inline; }
    .pm-hero__sub { margin: 12px 0 0; font-size: 32px; line-height: 1.28; white-space: normal; max-width: 10.22em; }   /* em = 327px na 32px; prati clamp fonta na ≤480 pa prelom ostaje „…razumete / zašto ne spava.“ (swoosh je ispod 2. reda) */
    .pm-hero__text { margin: 20px 0 0; font-size: 18px; max-width: 369px; }
    .pm-hero__text .pm-tm { margin: 0 -8px 0 -2px; }   /* ceo frejm 1:1124 ima ™ kao preklop preko razmaka posle „metoda“ (nod 1:1179 ga nema — poseban sloj); neto širina 0, prelom sva 4 reda ostaje isti */
    .pm-hero__cta--mobile { display: block; margin-top: 24px; }
    .pm-hero__cta--desktop { display: none; }
    .pm-stat { width: 85px; }
    .pm-stat__icon { width: 40px; height: 40px; }
    .pm-stat__stars { height: 40px; }
    .pm-stat__star { width: 18.2px; height: 18.2px; }
    .pm-stat__num { margin-top: 8px; font-size: 16px; }
    .pm-stat__label { margin-top: 2px; font-size: 14px; white-space: normal; }   /* Figma 1:1185 broj 591+19, labela 1:1184 na 612 */
}

@media (max-width: 480px) {
    .pm-hero__title { font-size: clamp(32px, 9.5vw, 40px); }
    .pm-hero__sub { font-size: clamp(26px, 7.6vw, 32px); }
}

/* ==========================================================================
   02  MOST
   Figma 1:194
   ======================================================================= */
/* ── 2. MOST (1:194): 818×259, preklapa hero za 41px i sledeću sekciju za 101px ── */
.pm-bridge {
    position: absolute; left: 0; right: 0; bottom: -218px; z-index: 5; overflow: visible;
    width: 818px; max-width: calc(100% - 60px); margin: 0 auto; min-height: 259px;
    padding: 40px 40px 27px; border-radius: 32px; background: var(--sand); text-align: center;
}
.pm-bridge__line {
    font-family: var(--lora); font-weight: 400; font-size: 40px; line-height: 1.28; letter-spacing: var(--track); color: var(--ink);
}
.pm-bridge__line--italic { font-style: italic; margin-top: 4px; }
/* Strelica u kartici, 20px od donje ivice (odluka klijenta; Figma 1:197 ju je imala da visi ispod). */
.pm-bridge__arrow {
    position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
    display: block; width: 66px; height: 66px; margin: 0;
}
.pm-bridge__arrow img {
    display: block; width: 100%; height: 100%; transform: rotate(-90deg); transition: transform .2s ease;
}
.pm-bridge__arrow:hover img { transform: rotate(-90deg) translateX(-4px); }

@media (max-width: 860px) {
    .pm-bridge {
        position: absolute; left: 32px; right: 32px; bottom: 16px; width: auto; max-width: none; min-height: 136px; margin: 0; padding: 20px 16px 12px; border-radius: 24px;
    }
    /* Figma 1:1219 — 376×136: 20 + 26 + 4 + 26 + 8 + strelica 40 + 12 */
    .pm-bridge__line { font-size: 20px; line-height: 1.3; }
    .pm-bridge__line--italic { margin-top: 4px; }
    .pm-bridge__arrow { position: static; transform: none; width: 40px; height: 40px; margin: 8px auto 0; }
}

@media (max-width: 480px) {
    /* Figma 1:1220 / 1:1221 — svaka linija u JEDNOM redu (kartica 136). Sa 20px se na 390/360
       lomi u „… kako da" / „zaspi?"" i kartica naraste na 192. 440 → 20px, 390 → 17.7px, 360 → 16.4px. */
    .pm-bridge__line { font-size: clamp(16px, 4.55vw, 20px); }
}

/* ==========================================================================
   03  ZAŠTO NE SPAVA
   Figma 1:126 / 1:1153
   ======================================================================= */
.philipova-page picture.pm-why__bg { display: block; }
.pm-why { position: relative; overflow: hidden; background: var(--cream); padding: 274px 0 10px; }
.pm-why__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* 2178×1226 na (−252,−61) u 1920×744 */
.pm-why__bg img {
    position: absolute; left: -13.1%; top: -61px; width: 113.4%; max-width: none; height: auto; display: block;
}
/* Iznad 1920px: `width` u procentima raste sa ekranom, a vertikalno sidro je u
   FIKSNIM px — pa se vidljivi isecak sve vise zumira i motiv ispada iz kadra.
   Zato preko 1920 drzimo Figmin zum u px i sliku samo centriramo i sirimo tek
   toliko da pokrije pojas. */
@media (min-width: 1921px) {
    .pm-why__bg img { left: 50%; transform: translateX(-50%); width: max(100%, 2178px); }
}
.pm-why__fade-top {
    position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #FDFAF8 0%, rgba(253,250,248,.3) 19.885%, rgba(253,250,248,0) 100%);
}
/* Figma: dno sekcije 03 je BLUSH (238,228,221), ne krem — i sekcija 04 pocinje
   istim blush-om, pa je prelaz neprimetan. Gasenje u #FDFAF8 je pravilo tvrd rez
   krem -> blush na granici. (Mobilni blok je ovo vec radio ispravno.) */
.pm-why__fade-bottom {
    position: absolute; left: 0; right: 0; bottom: 0; height: 263px; z-index: 1;
    background: linear-gradient(180deg, rgba(239,229,222,0) 0%, rgba(239,229,222,.85) 60%, #EFE5DE 100%);
}
.pm-why__inner { position: relative; z-index: 2; }
.pm-why__title {
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: 1; letter-spacing: var(--track); color: var(--ink); max-width: 626px; margin: 0 0 32px;
}
.pm-why__text {
    font-family: var(--inter); font-size: 24px; line-height: 1.21; color: var(--ink); max-width: 650px; margin: 0 0 32px;
}
.pm-why__sub {
    font-family: var(--lora); font-style: italic; font-weight: 500; font-size: 48px; line-height: 1.28; letter-spacing: var(--track); color: var(--ink); max-width: 768px;
}
.pm-why__familiar { display: flex; align-items: center; margin-top: 95px; }
.pm-why__familiar::before, .pm-why__familiar::after { content: ''; flex: 1 1 0; height: 1px; background: var(--ink); }
.pm-why__familiar span {
    padding: 0 20px; font-family: var(--lora); font-weight: 400; font-size: 40px; line-height: 1.28; letter-spacing: var(--track); color: var(--ink); white-space: nowrap;
}

@media (max-width: 860px) {
    /* ── zašto (440×382) ── */
    .pm-why { padding: 40px 0 10px; }
    /* 586×1040 na (0,−246) u 440×382 */
    .pm-why__bg img { left: 0; top: -246px; width: 133.2%; }
    .pm-why__fade-top {
        background: linear-gradient(180deg, #FDFAF8 0%, rgba(253,250,248,.3) 41%, rgba(253,250,248,0) 100%);
        z-index: 2;   /* Figma 1:1156 (krem) se crta IZNAD 1:1155 (blush); .pm-why__inner je z 2 i kasniji, pa ostaje iznad oba */
    }
    /* Figma 1:1155 — blush 440×452 na top −70: počinje 70px IZNAD sekcije, pa na vrhu već ima ~15% blush-a (višak seče overflow: hidden) */
    .pm-why__fade-bottom { height: calc(100% + 70px); background: linear-gradient(0deg, #EFE5DE 0%, rgba(239,229,222,0) 100%); }
    .pm-why__title { font-size: 40px; line-height: 1.28; max-width: 274px; margin-bottom: 17px; }
    .pm-why__text { font-size: 20px; max-width: 301px; margin-bottom: 17px; }
    .pm-why__sub { font-size: 32px; max-width: 327px; }
    .pm-why__familiar { margin-top: 40px; }
    .pm-why__familiar::before, .pm-why__familiar::after { background: var(--brown); }   /* Figma 1:1162 / 1:1163 — stroke #8B726C */
    .pm-why__familiar span { padding: 0 10px; font-size: 20px; }
}

@media (max-width: 480px) {
    .pm-why__title { font-size: clamp(32px, 9.5vw, 40px); }
    .pm-why__sub { font-size: clamp(26px, 7.6vw, 32px); }
}

/* ==========================================================================
   04  SIMPTOMI
   Figma 1:233 / 1:1250
   ======================================================================= */
.pm-symptoms {
    position: relative; z-index: 2; background: linear-gradient(180deg, #EFE5DE 0%, rgba(239,229,222,0) 100%); padding: 40px 0 0;
}
.pm-symptoms__row { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 0 80px; }
.pm-symptom {
    position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px;
}
/* Figma 1:234: kolone su SADRZAJNE (168/160/206/160/271), ne 5 jednakih po 248px —
   inace se linije i krugovi pomere do 65px udesno. */
/* Sirine su PROCENTI kolone od 1240, ne fiksni px: 168/1240, 160/1240, 206/1240,
   160/1240, 271/1240 = 77.81%, pa `space-between` deli preostalih 22.19% na 4
   razmaka — isti odnos kao Figma 1:234 na svakoj sirini. Sa fiksnim px je zbir
   od 965px prelivao sadrzajnu kolonu ispod ~1045px viewporta i peta kolona se
   secla (`overflow-x: clip` je krio da se to desava). */
.pm-symptom:nth-child(1) { width: 13.548%; }
.pm-symptom:nth-child(2) { width: 12.903%; }
.pm-symptom:nth-child(3) { width: 18.613%; }
.pm-symptom:nth-child(4) { width: 12.903%; }
/* 271px + bez bocnog paddinga: sa 287px i padding 0 8px label dobija 255px i
   prelama se u 5 redova umesto Figminih 4 (nod 1:266/1:267). Zbir kolona je onda
   965 = Figma 1:234, pa space-between deli preostalih 275px na 4 x 68.75px. */
.pm-symptom:nth-child(5) { width: 21.855%; padding-left: 0; padding-right: 0; }
/* Figma 1:243/1:252/1:259/1:265 — linije stoje na SREDINI razmaka (202/430/704/932),
   ne uz ivicu kolone. Na punoj koloni (>=1321px, wrap je tacno 1240) razmak je
   68.75px, pa je pomeraj pola toga. Uze od toga razmak se sam smanjuje i linija
   ostaje uz ivicu — namerno, da se ne racuna sa 100vw (koji nosi i scrollbar). */
.pm-symptom + .pm-symptom::before {
    content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 292px; background: var(--brown);
}
@media (min-width: 1321px) {
    .pm-symptom + .pm-symptom::before { left: -34px; }
    /* preliv labele preko razmaka ima smisla samo kad je razmak pun (68.75px) */
    .pm-symptom__label { margin-left: -28px; margin-right: -28px; }
}
.pm-symptom__circle {
    display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; border-radius: 50%; background: var(--brown);
}
.pm-symptom__icon { width: 88px; height: 88px; display: block; }
/* Figma 1:238 (mesec) i 1:256 (sat) su 80x80; beba/krevetac/flasica su 88x88.
   :where() drzi specificnost na (0,1,0) — inace bi (0,3,0) pregazilo i mobilni
   blok, gde Figma 1:1250 trazi 32px za SVE ikonice. */
:where(.pm-symptom:nth-child(1), .pm-symptom:nth-child(3)) .pm-symptom__icon { width: 80px; height: 80px; }
/* Label sme da bude siri od svoje kolone — razmak izmedju kolona je 68.75px, a
   separator stoji na njegovoj sredini (34px), pa 2x28px preliva ostavlja 6px
   vazduha do linije. Bez ovoga se "Uspavljivanje koje traje sat vremena" lomilo
   u 4 reda umesto u 2. Kruzici i separatori ostaju na Figma pozicijama. */
.pm-symptom__label {
    display: block; margin: 16px 0 0; max-width: none;
    font-family: var(--inter); font-size: 24px; font-weight: 500; line-height: 1.21; color: var(--ink);
}
.pm-attempt {
    display: flex; flex-direction: column; min-height: 398px; padding: 40px; border-radius: 32px; background: rgba(139,114,108,.3);
}
.pm-attempt__circle {
    display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; background: var(--brown);
}
.pm-attempt__icon { width: 56px; height: 56px; display: block; }
.pm-attempt__text {
    margin-top: auto; padding-top: 24px; max-width: 311px; font-family: var(--inter); font-size: 24px; font-weight: 500; line-height: 1.21; color: var(--ink);
}
/* tamna kartica 1240×429 sa "mozgom" */
.pm-insight {
    position: relative; overflow: hidden; border-radius: 32px; background: var(--ink); color: var(--cream); min-height: 429px;
}
.pm-insight__art { position: absolute; left: 20px; top: 0; width: 449px; height: 449px; }
.pm-insight__art img { display: block; width: 100%; height: 100%; }
.pm-insight__body { position: relative; z-index: 1; padding: 64px 120px 64px 494px; }
/* (0,2,0) je obavezno: reset `[class*="__body"] p` je (0,1,1) i gazi font-size,
   line-height I font-family. `white-space: nowrap` je sklonjen — izmedju ~861 i
   ~1284px je secao recenicu; kolona je 626px, a tekst 591px, pa i bez njega
   ostaje u jednom redu kao u Figmi (1:304). */
.pm-insight .pm-insight__kicker {
    position: relative; padding-bottom: 20px; margin-bottom: 20px;
    font-family: var(--inter); font-size: 24px; line-height: 1.21;
}
.pm-insight__kicker::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 464px; max-width: 100%; height: 1px; background: linear-gradient(90deg, #FDFAF8 0%, rgba(253,250,248,0) 100%);
}
.pm-insight__kicker::before {
    content: ''; position: absolute; left: 0; bottom: 0; width: 67px; height: 1px; background: var(--gold); z-index: 1;
}
.pm-insight__title {
    max-width: 626px; font-family: var(--lora); font-weight: 400; font-size: 48px; line-height: 1.28; letter-spacing: var(--track); color: var(--cream);
}
.pm-insight .pm-insight__outro {
    margin-top: 20px; font-family: var(--inter); font-size: 24px; line-height: 1.21;
}
.pm-insight__outro strong { font-weight: 700; }
.pm-insight__outro .pm-tm img { width: 9px; height: 9px; }

@media (max-width: 1100px) {
    .pm-symptom__circle { width: 120px; height: 120px; }
    .pm-symptom__icon { width: 64px; height: 64px; }
    :where(.pm-symptom:nth-child(1), .pm-symptom:nth-child(3)) .pm-symptom__icon { width: 58px; height: 58px; }
    .pm-symptom + .pm-symptom::before { height: 240px; }
    .pm-attempt { padding: 28px; min-height: 340px; }
    .pm-insight__art { width: 340px; height: 340px; left: 10px; }
    .pm-insight__body { padding: 48px 60px 48px 380px; }
}

@media (max-width: 860px) {
    /* ── simptomi: vertikalna lista sa linijama ── */
    .pm-symptoms { padding: 22px 0 0; background: linear-gradient(180deg, #EFE5DE 0%, rgba(239,229,222,0) 472px); }
    .pm-symptoms__row { flex-direction: column; align-items: stretch; margin: 0 0 25px; }   /* Figma 1:1250→1:1293 — 40px od liste do kartice (480 od vrha sekcije); u paru sa padding-top 12px u .pm-attempt__text */
    .pm-symptom {
        flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px solid var(--brown);   /* Figma 1:1260/1:1269/1:1276/1:1282 — puna #8B726C */
    }
    /* Sadrzajne sirine (0,2,0) sa desktopa moraju eksplicitno da se ponistе —
       `.pm-symptom` (0,1,0) ih ne bi pregazio. Figma 1:1250: red je pune sirine. */
    .pm-symptom:nth-child(1), .pm-symptom:nth-child(2), .pm-symptom:nth-child(3),
    .pm-symptom:nth-child(4), .pm-symptom:nth-child(5) { width: auto; }
    .pm-symptom:last-child { border-bottom: 0; margin-bottom: 0; }
    .pm-symptom + .pm-symptom::before { display: none; }
    .pm-symptom__circle { flex: 0 0 64px; width: 64px; height: 64px; }
    .pm-symptom__icon { width: 32px; height: 32px; }
    .pm-symptom__label { margin-top: 0; font-size: 18px; max-width: 296px; }
    .pm-symptom__label br { display: none; }
    .pm-symptom:last-child .pm-symptom__label { max-width: 270px; }   /* Figma 1:1291 — okvir 270: „… zaspi samo" / „uz dojenje, …"; na 390/360 kolona je već uža */
    .pm-attempt { min-height: 160px; padding: 20px; }
    .pm-attempt__circle { width: 64px; height: 64px; }
    .pm-attempt__icon { width: 30px; height: 30px; }
    .pm-attempt__text { padding-top: 12px; max-width: none; font-size: 18px; }   /* Figma 1:1294 — kružić 20+64 pa 12px; kartice 160/204/204 */
    .pm-insight { display: flex; flex-direction: column; border-radius: 32px; min-height: 0; }
    .pm-insight__art { order: 2; position: static; width: min(309px, 100%); height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }   /* na 360 je kartica 296 — fiksnih 309 je izlazilo 13px i crtež nije bio centriran */
    .pm-insight__body { padding: 40px 20px 0; }
    .pm-insight .pm-insight__kicker { padding-bottom: 12px; margin-bottom: 12px; font-size: 20px; }
    .pm-insight__title { font-size: 24px; max-width: 320px; }   /* Figma 1:1323 — okvir 335: „san," / „prvo … šta" / „ga remeti." */
    .pm-insight .pm-insight__outro { margin-top: 12px; font-size: 20px; }
    /* Figma 1:1325 — svetao ™ 9×9 preklapa tačku iza „metoda" (desktop 1:302 nema ™, zato filter samo ovde);
       nowrap drži „Philipova metoda.™" zajedno — bez njega ™ na ≤357px pada sam u 3. red */
    .pm-insight__outro .pm-tm { margin-left: -5px; }
    .pm-insight__outro .pm-tm img { filter: brightness(0) invert(1); }
    .pm-insight__outro strong { white-space: nowrap; }
}

/* ==========================================================================
   05  ŠTA JE PM
   Figma 1:77 / 1:1353
   ======================================================================= */
/* U Figmi frejm 1:77 počinje 29px iznad dna tamne kartice simptoma (preklop) → negativna margina, simptomi su iznad (z-index) */
.pm-whatis {
    position: relative; z-index: 1; overflow: hidden; background: var(--cream); margin-top: -29px; padding: 202px 0 80px;
}
.pm-whatis__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Tatjana postoji i u pozadinskoj fotografiji i kao zasebna fotografija. Pozadina je skalirana
   po širini sa px pomerajem naviše, a zasebna fotografija u % — na svakoj širini osim 1920 se
   „duh" figura iz pozadine vidi pored/iza zasebne. Pozadina se zato gasi udesno; desnu stranu
   drži zasebna fotografija, a levo ostaje bokeh iza teksta. */
@media (min-width: 861px) {
    .pm-whatis__bg {
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, #000000ad 52%);
        mask-image: linear-gradient(90deg, #000 0%, #000 34%, #000000ad 52%);
    }
}
/* 3060×2170 na (−19,−303) u 1920×1500 */
.pm-whatis__bg-img {
    position: absolute; left: -1%; top: -303px; width: 159.4%; max-width: none; height: auto; display: block;
}
@media (min-width: 1921px) {
    .pm-whatis__bg-img { left: 50%; transform: translateX(-50%); width: max(100%, 3061px); }
}
.pm-whatis__fade-top {
    position: absolute; left: 0; right: 0; top: 0; height: 1364px; z-index: 1; background: linear-gradient(180deg, #FBF7F4 0%, rgba(251,247,244,0) 100%);
}
/* Tatjana cutout: vidljivi deo 967×1673 na (1145,193) — IZNAD gornjeg fade-a, ISPOD donjeg */
.pm-whatis__photo { position: absolute; left: 59.6%; top: 193px; width: 50.4%; z-index: 2; pointer-events: none; }
.pm-whatis__photo-img { display: block; width: 100%; height: auto; }
.pm-whatis__fade-bottom {
    position: absolute; left: 0; right: 0; top: 1015px; bottom: 0; z-index: 3; background: linear-gradient(180deg, rgba(253,250,248,0) 0%, #FDFAF8 100%);
}
.pm-whatis__inner { position: relative; z-index: 4; }
.pm-whatis__title {
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: 1; letter-spacing: var(--track); color: var(--ink); white-space: nowrap;
}
/* Na užim desktopima 80px naslov (nowrap) ulazi u Tatjaninu fotografiju (na 1100 prelazi preko lica).
   Tečno smanjenje do 1400px; ™ je u em pa ide sa njim. Mobilni blok ima svoju veličinu. */
@media (min-width: 861px) and (max-width: 1400px) {
    .pm-whatis__title { font-size: clamp(50px, 5.4vw, 80px); }
}
.pm-whatis__title .pm-tm { margin: -.12em -.04em 0 .01em; }   /* odluka klijenta: ™ posle „metoda", NE preko „?" (Figma 1:84 ga je preklapala) — u em da stoji isto na svakoj širini */   /* Figma 1:84 — ™ preklapa kraj reci, „?" ostaje na 1169 */
.pm-whatis__sub {
    margin-top: 32px; font-family: var(--lora); font-size: 48px; line-height: 1.28; letter-spacing: var(--track); color: var(--ink); max-width: 909px;
}
.pm-whatis__sub-l1 { font-weight: 400; }
.pm-whatis__sub-l2 { font-weight: 600; font-style: italic; }
.pm-whatis__text {
    margin-top: 38px; max-width: 865px; font-family: var(--inter); font-size: 24px; line-height: 1.21; color: var(--ink);
}
.pm-whatis__text p + p { margin-top: 1.21em; }
.pm-whatis__text .pm-tm img { width: 10px; height: 10px; }   /* Figma 1:80 — 12px je tacno samo za hero (1:144) */
.pm-learn-card {
    margin-top: 64px; max-width: 693px; padding: 32px; border-radius: 24px; background: rgba(139,114,108,.6); color: var(--cream);
}
.pm-learn-card__title {
    position: relative; max-width: 508px; padding-bottom: 20px; margin-bottom: 20px; font-family: var(--lora); font-weight: 400; font-size: 40px; line-height: 1.28; letter-spacing: var(--track); color: var(--cream);
}
.pm-learn-card__title::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 508px; max-width: 100%; height: 1px; background: linear-gradient(90deg, #FDFAF8 0%, rgba(253,250,248,0) 100%);
}
.pm-learn-card__list { display: flex; flex-direction: column; gap: 16px; }
.pm-learn-card__list li {
    display: flex; gap: 8px; align-items: flex-start; font-family: var(--inter); font-size: 24px; line-height: 1.21; letter-spacing: -0.04em;
}
.pm-learn-card__num { flex: 0 0 auto; min-width: 35px; }
.pm-goal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 64px; }
.pm-goal__card {
    display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 303px; border-radius: 32px; overflow: hidden;
}
.pm-goal__card p {
    font-family: var(--lora); font-weight: 400; font-size: 32px; line-height: 1.28; letter-spacing: var(--track); color: var(--ink);
}
.pm-goal__card p em { font-weight: 500; font-style: italic; }
.pm-goal__card--no {
    padding: 40px 64px; background: rgba(253,250,248,.7); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pm-goal__icon { width: 80px; height: 80px; display: block; }
.pm-goal__card--no p { margin-top: 20px; max-width: 476px; }
.pm-goal__card--no .pm-tm { margin-top: 2px; }
.pm-goal__card--yes { padding: 48px 48px 40px; background: var(--cream); }
.pm-goal__check {
    display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; border-radius: 16px; background: var(--green);
}
.pm-goal__check img { width: 44px; height: 44px; display: block; }
.pm-goal__card--yes p { margin-top: 27px; max-width: 508px; }

@media (max-width: 1100px) {
    .pm-whatis__photo { left: 64%; width: 46%; top: 60px; }
    .pm-whatis__text, .pm-whatis__sub { max-width: 62%; }
    .pm-goal__card--no { padding: 32px 32px; }
    .pm-goal__card--yes { padding: 36px 32px 32px; }
}

@media (max-width: 860px) {
    /* ── šta je PM (mobile: bez Tatjane, bokeh bg 1439px na (−111, +380)) ── */
    .pm-whatis { margin-top: 0; padding: 53px 0 43px; }
    /* min-height: na 390/360 tekst ide u više redova i sekcija je viša od slike — bokeh je završavao pre dna, tvrd rez preko „cilj“ kartica */
    .pm-whatis__bg-img { left: -25%; top: 380px; width: 327%; min-height: calc(100% - 380px); object-fit: cover; object-position: 0 0; }
    .pm-whatis__fade-top { top: 380px; height: 657px; }
    .pm-whatis__photo { display: none; }
    .pm-whatis__fade-bottom { top: 597px; }
    .pm-whatis__title { font-size: 40px; line-height: 1.28; white-space: normal; max-width: 274px; }
    /* Figma 1:1124 — ™ je preklop iznad „a?": „a"+™+„?" jedan ink segment 146–179, vrh ™ 110 od vrha sekcije */
    .pm-whatis__title .pm-tm { margin: -.04em -.04em 0 .01em; }   /* bez preklopa sa „?", kao na desktopu */
    .pm-whatis__title .pm-tm img { width: 0.4em; height: 0.4em; }
    .pm-whatis__sub { margin-top: 12px; font-size: 32px; max-width: none; }
    .pm-whatis__sub-l1 { font-style: italic; font-weight: 500; }   /* Figma 1:1124 — i prva rečenica je kurziv; 500 je najbliži Figma ink-u */
    .pm-whatis__text { margin-top: 12px; max-width: none; font-size: 18px; font-weight: 500; }
    .pm-whatis__text p { font-weight: 500; }   /* Figma 1:1389 — Inter Medium; 500 sa kontejnera ne stiže do <p> (body,p iz style.css/uicore) */
    /* Figma 1:1389 / 1:1376 — ™ preklapa razmak iza reči umesto da zauzima mesto */
    .pm-whatis__text .pm-tm { margin-right: -10px; }
    .pm-goal__card--no .pm-tm { margin-right: -12px; }
    .pm-learn-card { margin-top: 24px; padding: 24px; }
    .pm-learn-card__title { max-width: none; padding-bottom: 16px; margin-bottom: 16px; font-size: 24px; }
    .pm-learn-card__list li { font-size: 18px; }
    .pm-learn-card__num { min-width: 26px; }
    .pm-goal { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; }
    .pm-goal__card { min-height: 0; }
    .pm-goal__card p { font-size: 24px; }
    .pm-goal__card--no { padding: 24px 28px; }
    .pm-goal__icon { width: 48px; height: 48px; }
    .pm-goal__card--no p { margin-top: 12px; }
    .pm-goal__card--yes { padding: 24px 28px; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
    .pm-goal__check { width: 48px; height: 48px; border-radius: 12px; }
    .pm-goal__check img { width: 32px; height: 32px; }
    .pm-goal__card--yes p { margin-top: 12px; }
}

@media (max-width: 480px) {
    .pm-whatis__title { font-size: clamp(32px, 9.5vw, 40px); }
    .pm-whatis__sub { font-size: clamp(26px, 7.6vw, 32px); }
}

/* ==========================================================================
   06  KOME JE NAMENJENA
   Figma 1:333, 1:334, 1:387
   ======================================================================= */
/* uicore-global `p{margin-bottom:1em; letter-spacing:0}` je (0,0,1), isto kao
   reset `:is(h1,h2,h3,p,ul,ol)` na l.21 — u tie-u pobeđuje kasnije učitan uicore.
   Zato sekcije 6–9 dobijaju svoj (0,1,1) reset. */
/* z-index: pojas sekcije 07 pocinje 175px iznad svoje sekcije (Figma 1:48) i,
   posto je kasnije u DOM-u, prekrivao je dno druge kartice zajedno sa njenom
   senkom. U Figmi je kartica 1:387 IZNAD pojasa — ovo vraca taj redosled. */
.pm-programs { position: relative; z-index: 1; padding: 120px 0 0; }
.pm-programs__title {
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: normal;
    letter-spacing: var(--track); color: var(--ink); text-align: center;
    margin: 0 0 56px; text-wrap: balance;
}
.pm-programs__title em { font-weight: 500; font-style: italic; font-size: 88px; }
.pm-programs__grid { display: flex; flex-direction: column; gap: 80px; }   /* Figma 1:334 dno 5491 -> 1:387 vrh 5571 */
.pm-program {
    position: relative; display: grid; align-items: stretch;
    background: var(--cream); box-shadow: 0 4px 20px rgba(0, 0, 0, .1); overflow: hidden;
}
.pm-program--baby { grid-template-columns: 1fr 423px; border-radius: 24px 24px 200px 24px; }
.pm-program--child { grid-template-columns: 423px 1fr; border-radius: 200px 24px 24px 24px; }
@media (min-width: 861px) {
    .pm-program--child { margin-bottom: 60px; }
}
/* kartica 1: foto je u DOM-u prva, ali u dizajnu stoji DESNO → eksplicitne ćelije */
.pm-program--baby .pm-program__media { grid-area: 1 / 2; }
.pm-program--baby .pm-program__body { grid-area: 1 / 1; }
/* ── foto ─────────────────────────────────────────────────────────────── */
.pm-program__media { position: relative; overflow: hidden; border-radius: 200px 24px 200px 0; min-height: 597px; }
.pm-program--child .pm-program__media { min-height: 688px; }
/* kartica 2: braon luk + mockup 6–9 (programs-mockup-6-9.png) umesto fotografije */
.pm-program--child .pm-program__media { background: #8B726C; }
@media (min-width: 861px) {
    .pm-program--child .pm-program__mockup { left: 50%; top: 50%; width: 88%; transform: translate(-50%, -50%); }
}
.philipova-page picture.pm-program__photo { display: block; }
.pm-program__photo { position: absolute; inset: 0; }
.pm-program__photo img, img.pm-program__photo {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block;
}
/* Figma 1:389: slika 917px na left -459 u okviru 423px -> 459/494.3 = 92.9% */
/* Figma 1:336 — foto kartice 1 je sidrena uz LEVU ivicu (x=0), ne centrirana. */
.pm-program--baby .pm-program__photo img,
.pm-program--baby img.pm-program__photo { object-position: 0% 42%; }
.pm-program--child .pm-program__photo img,
.pm-program--child img.pm-program__photo { object-position: 93% 42%; }   /* Figma 1:389 — klasa je na <img> */
/* mockup preko fotografije (samo kartica 1) — PNG sa alfom */
.pm-program__mockup { position: absolute; left: 3.5%; top: 28%; width: 93%; }
.philipova-page picture.pm-program__mockup-img { display: block; }
.pm-program__mockup-img { width: 100%; height: auto; display: block; }
/* Google 5/5 pilula */
.pm-program__rating {
    /* 25.2% = (262−172−24)/262 unutar mockup-a, po Figmi 1:340 (top 339 u foto okviru) */
    position: absolute; left: 50%; bottom: 25.2%;
    display: inline-flex; align-items: center; gap: 7.6px;
    height: 24px; padding: 0 10px 0 7.6px; border-radius: 38px;
    background: #fff; box-shadow: 0 2.5px 2.5px rgba(0, 0, 0, .1); white-space: nowrap;
}
.pm-program__rating-score {
    font-family: var(--inter); font-weight: 700; font-size: 11.4px; line-height: 1; color: var(--brown);
}
.pm-program__rating-stars { width: 40px; height: 8px; display: block; }
.philipova-page picture.pm-program__rating-logo { display: block; }
.pm-program__rating-logo { width: 36px; height: auto; display: block; }
/* ── tekst ────────────────────────────────────────────────────────────── */
.pm-program__body { display: flex; flex-direction: column; align-items: flex-start; padding: 48px; }
.pm-program--baby  .pm-program__body { padding-right: 80px; }
.pm-program--child .pm-program__body { padding-left: 80px; }
.pm-program__tag {
    display: inline-flex; align-items: center; height: 40px; padding: 0 25px;
    border: 1px solid var(--ink); border-radius: 30px;
    font-family: var(--inter); font-weight: 400; font-size: 12px; line-height: 30px;
    letter-spacing: 2.4px; text-transform: uppercase; color: var(--brown);
}
/* SVA pravila paragrafa sekcije 6 moraju biti (0,2,0): reset na l.24
   `[class*="__body"] p` je (0,1,1) i gazi font-family, font-size, line-height I
   color (roditelj je .pm-program__body). Media query NE diže specifičnost, pa i
   tablet/mobilni override-i dole moraju biti scope-ovani isto. */
.pm-programs .pm-program__lead {
    font-family: var(--lora); font-weight: 400; font-size: 24px; line-height: 34px;
    letter-spacing: -.24px; color: var(--ink); margin-top: 8px;
}
.pm-programs .pm-program__desc {
    font-family: var(--inter); font-weight: 300; font-size: 16px; line-height: 26px;
    color: var(--brown); margin-top: 20px;
}
/* child style.css:477 ima `strong{font-weight:600!important}` → jedino !important pobeđuje */
.pm-programs .pm-program__desc strong { font-weight: 700 !important; }
.pm-programs .pm-program__note {
    font-family: var(--lora); font-weight: 500; font-style: italic; font-size: 24px; line-height: 1.25;
    color: var(--brown); margin-top: auto; padding-top: 32px;
}
.pm-program__features { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.pm-program__features li {
    display: flex; align-items: center; gap: 8px; font-family: var(--inter); font-weight: 500; font-size: 20px; line-height: 26px; color: var(--brown);
}
.pm-program__ficon { width: 24px; height: 24px; flex: none; display: block; }
.pm-btn--program { margin-top: 28px; gap: 4px; padding: 0 40px; }   /* Figma 1:358 — sadrzaj pocinje na 40px */
.pm-btn--program::after {
    content: ""; width: 24px; height: 24px; flex: none;
    background: url("../images/philipova/arrow-right.svg") center / contain no-repeat;
    transform: rotate(180deg); transition: transform .2s ease;
}
.pm-btn--program:hover::after { transform: rotate(180deg) translateX(-3px); }

@media (max-width: 1100px) {
    /* 6. programi — uža foto kolona, manji naslov */
    .pm-programs__title { font-size: 56px; }
    .pm-programs__title em { font-size: 62px; }
    .pm-program--baby { grid-template-columns: 1fr 320px; }
    .pm-program--child { grid-template-columns: 320px 1fr; }
    .pm-program__media { min-height: 520px; border-radius: 150px 24px 150px 0; }
    .pm-program--child .pm-program__media { min-height: 560px; }
    .pm-program--baby { border-radius: 24px 24px 150px 24px; }
    .pm-program--child { border-radius: 150px 24px 24px 24px; }
    .pm-program__body { padding: 40px; }
    .pm-program--baby  .pm-program__body { padding-right: 48px; }
    .pm-program--child .pm-program__body { padding-left: 48px; }
    .pm-programs .pm-program__lead { font-size: 21px; line-height: 30px; margin-top: 24px; }
    .pm-programs .pm-program__note { font-size: 21px; }
    .pm-program__features li { font-size: 18px; }
}

@media (max-width: 860px) {
    /* ── 6. programi: kartice se slažu, foto 256px na vrhu (1:1391 / 1:1433) ── */
    .pm-programs { padding-top: 24px; }   /* Figma 1:1384 dno 4442 → 1:1390 vrh 4509 = 67px (ostatak sekcije 05 + 24) */
    .pm-programs__title { font-size: 40px; line-height: normal; margin-bottom: 48px; }   /* Figma 1:1390 dno 4611 → 1:1391 vrh 4659 */
    .pm-programs__title em { font-size: 40px; }
    /* Figma 1:1390 — ™ 16px je preklop preko kraja „a" i vrha „?", ne stavka u toku; (0,2,1) gazi .pm-tm--title img */
    .pm-programs__title .pm-tm { margin: 0.15em -0.175em 0 -0.125em; }
    .pm-programs__title .pm-tm img { width: 0.4em; height: 0.4em; }
    .pm-programs__grid { gap: 48px; margin-inline: -16px; }   /* Figma 1:1391 -> 1:1433; kartice x16 w408 (16px uz ivicu, ne 32 kao .pm-wrap) */
    /* minmax(0,·) je obavezno: `1fr` = minmax(auto,1fr), a auto-minimum ne da
       koloni da se suzi ispod min-content dugmeta (nowrap labela kartice 2). */
    .pm-program,
.pm-program--baby,
.pm-program--child {
        grid-template-columns: minmax(0, 1fr); border-radius: 24px; box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
    }
    .pm-program__media, .pm-program--child .pm-program__media {
        min-height: 0; height: auto; aspect-ratio: 408 / 256; border-radius: 24px;
    }
    .pm-program--baby .pm-program__media, .pm-program--baby .pm-program__body { grid-area: auto; }
    /* (0,2,1) — mora da gazi bazno `.pm-program--baby img.pm-program__photo` (object-position ne bi prošao).
       Figma 1:1406/1:1407 — kartica 1: slika 876×657 na (0,−320) u okviru 408×256 → samo bež pozadina desno od mockupa */
    .pm-program--baby .pm-program__photo img, .pm-program--baby img.pm-program__photo { inset: auto; left: 0; top: -125%; width: 214.7%; height: auto; max-width: none; }
    /* Figma 1:1448/1:1449 — kartica 2: slika 454×341 na (−46,−11) */
    .pm-program--child .pm-program__photo img, .pm-program--child img.pm-program__photo { inset: auto; left: -11.3%; top: -4.3%; width: 111.3%; height: auto; max-width: none; }
    .pm-program__mockup { left: 7.5%; top: 4%; width: 87%; }
    .pm-program__rating { display: none; }
    /* mobilni dizajn 1:1391 je nema */
    .pm-program__body,
.pm-program--baby .pm-program__body,
.pm-program--child .pm-program__body { padding: 24px; }
    .pm-programs .pm-program__lead { font-size: 18px; line-height: 26px; letter-spacing: -.18px; margin-top: 16px; }
    .pm-programs .pm-program__desc {
        font-family: var(--inter); font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: -.2px; color: var(--ink);
        margin-top: 16px;   /* Figma 1:1391 lead dno 466 → opis 482 */
    }
    /* letter-spacing -.2 (Figma -.15): sa -.15 Chrome lomi opis kartice 2 (1:1435) u 7 redova umesto 6 */
    .pm-programs .pm-program__note { font-size: 20px; padding-top: 16px; }   /* Figma 1:1391 opis dno 602 → napomena 618 */
    .pm-program__features { margin-top: 16px; }   /* Figma napomena dno 644 → lista 660 */
    .pm-program__features li { font-size: 18px; line-height: 26px; }   /* Figma 1:1414 / 1:1451 — Inter Medium 18/26, lista h102 */
    /* `white-space: nowrap` sa .pm-btn se MORA relaksirati: min-content labele
       kartice 2 je 331px, a raspoloživo je viewport−112px → preliv ispod ~412px. */
    .pm-btn--program {
        width: 100%; min-width: 0; margin-top: 24px; padding: 12px 16px;
        height: auto; min-height: 48px; white-space: normal; line-height: 1.3; text-align: center;
    }
    /* Figma 1:1396 / 1:1438 — ™ 8×8 leži preko razmaka posle „metoda" (labela 219px od x57); scope na .pm-programs jer .pm-tm--btn koriste i druge sekcije */
    .pm-programs .pm-btn--program .pm-tm--btn { margin-right: -8px; }
}

@media (max-width: 480px) {
    /* Figma 1:1390 — Lora 40 na 440 (40/440 = 9.09vw): 2 reda „Kome je namenjena / Philipova metoda?" */
    .pm-programs__title { font-size: min(40px, 9.09vw); }
    .pm-programs__title em { font-size: min(40px, 9.09vw); }
}

/* ==========================================================================
   07  ŠTA ĆETE SAZNATI
   Figma 1:48 / 1:1125
   ======================================================================= */
.pm-know { position: relative; padding: 120px 0 0; background: var(--cream); overflow: hidden; }
/* Figma 1:48/1:50 — pojas pocinje 175px IZNAD sekcije (preklapa dno sekcije 06),
   pa je naslov 295px od vrha pojasa, a ne 120px. `.pm-know{overflow:hidden}` odseca
   taj visak, sto je i u dizajnu tako (kartica 1:387 stoji iznad pojasa). */
.pm-know__bg { position: absolute; left: 0; top: -175px; width: 100%; height: 965px; z-index: 0; overflow: hidden; }
.philipova-page picture.pm-know__bg-img { display: block; }
/* Figma 1:49 — slika 2306x1618 u pojasu 1920x965: donja ivica flush sa dnom
   pojasa (sidrenje za DNO) + 1,2x zum u odnosu na cover. 2306/1920 = 120,1%.
   min-height je sigurnosna mreza: na 480px sirine 120,1% daje samo ~404px visine. */
.pm-know__bg-img, .pm-know__bg img {
    position: absolute; left: 50%; bottom: 0;
    width: 120.1%; height: auto; min-height: 100%;
    object-fit: cover; object-position: 50% 100%; display: block;
    transform: translateX(-50%) scaleX(-1);
}
/* Figma nod nije centriran: x=-258 umesto -193 (=(1920-2306)/2), tj. 65px vise
   odseceno levo. Vazi samo od 861px navise — ispod toga bi 120,1% sirine minus
   65px otkrilo prazninu uz desnu ivicu pojasa. */
@media (min-width: 1101px) {
    .pm-know__bg-img, .pm-know__bg img { transform: translateX(calc(-50% - 65px)) scaleX(-1); }
}
/* Iznad 1920: isto kao gore — 120.1% bi na 2560 dalo 3075x2156, a pojas od 965px
   bi onda pokazivao samo donjih 45% umesto Figminih 60%. Pomeraj od 65px je
   detalj Figminog platna od 1920 i ovde otpada (inace bi otvorio rupu desno). */
@media (min-width: 1921px) {
    .pm-know__bg-img, .pm-know__bg img {
        width: max(100%, 2306px); transform: translateX(-50%) scaleX(-1);
    }
}
/* Figma 1:50 + 1:51 + 1:60 — kremasti slojevi: odozgo pun, levo bočni, dole gašenje u čisto */
.pm-know__fade {
    /* fade OSTAJE na top:0 (pun krem tacno na granici sekcije = nema sava), samo
       je skracen na 790px = koliko pojasa ostane vidljivo posle pomeraja od 175px. */
    position: absolute; left: 0; top: 0; width: 100%; height: 790px; z-index: 1; display: block; pointer-events: none;
    background:
    linear-gradient(180deg, var(--cream) 0%, rgba(253, 250, 248, .35) 42%, rgba(253, 250, 248, .88) 78%, var(--cream) 100%),
    linear-gradient(90deg, var(--cream) 0%, rgba(253, 250, 248, 0) 72%);
}
.pm-know__inner { position: relative; z-index: 2; }
.pm-know__title {
    /* Figma daje 968px, ali render Lore prelama u 3 reda (Figma ima 2) — 1060px
    je najmanja širina koja vraća dizajnirana dva reda. */
    position: relative; max-width: 1060px;
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: 80px;
    letter-spacing: var(--track); color: var(--ink); margin: 0;
}
.pm-know__sub {
    max-width: 985px; margin: 40px 0 0;
    font-family: var(--lora); font-weight: 400; font-size: 40px; line-height: 1.2;
    letter-spacing: var(--track); color: var(--ink);
}
.pm-know__nobr { white-space: nowrap; }
.pm-know__lead {
    /* Figma daje 866px, ali render Lore traži 915px — na 866 se prelamalo u dva
    reda pa je swoosh (absolute, width:100%) stajao ispod pogrešnog opsega. */
    max-width: 940px; margin: 44px 0 0;
    font-family: var(--lora); font-weight: 500; font-style: italic; font-size: 48px; line-height: 80px;
    letter-spacing: var(--track); color: var(--brown);
}
.pm-know__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 78px; }
@media (min-width: 861px) {
    .pm-know__grid { padding-bottom: 20px; }
}

@media (max-width: 1100px) {
    /* 7–8 */
    .pm-know__title { font-size: 56px; line-height: 60px; }
    .pm-know__spark { right: -8px; }
    .pm-know__sub { font-size: 30px; }
    .pm-know__lead { font-size: 36px; line-height: 56px; }
}

@media (max-width: 860px) {
    /* ── 7. šta ćete saznati: kartice se slažu (1:1125) ── */
    /* Figma 1:1433 dno 6520 → 1:1139 vrh 6546 = 26px; 1:1149 dno 7867 → 1:1470 vrh 7955 = 88px (16 + 72 sekcije 08) */
    .pm-know { padding-top: 26px; padding-bottom: 16px; }
    /* Figma 1:1127 — pojas 440×500, 108px iznad naslova (82 iznad sekcije; višak seče .pm-know overflow). */
    .pm-know__bg, .pm-know__fade { top: -82px; height: 500px; }
    /* Figma 1:1128 — slika 870×611 na (−305,−112), preslikana: 870/440 = 197.7%, 305/870 + 50%/197.7% → −60.34% */
    .pm-know__bg-img, .pm-know__bg img { width: 197.7%; transform: translateX(-60.34%) scaleX(-1); }
    /* Figma 1:1129/1:1130/1:1135 — izmaglica je skoro ravnomerna, alfa krema 0.68–0.88 kroz ceo pojas
       (bazno .35 u sredini je pokazivalo devojčicu duplo jasnije nego u dizajnu) */
    .pm-know__fade {
        background:
        linear-gradient(180deg, var(--cream) 0%, rgba(253, 250, 248, .78) 18%, rgba(253, 250, 248, .68) 44%, rgba(253, 250, 248, .74) 58%, rgba(253, 250, 248, .87) 74%, rgba(253, 250, 248, .97) 90%, var(--cream) 100%),
        linear-gradient(90deg, var(--cream) 0%, rgba(253, 250, 248, 0) 72%);
    }
    .pm-know__title { font-size: 40px; line-height: normal; }
    /* Figma 1:1131 — ™ 16×16 preklapa kraj „u" (prsten x328, „?" x340), 2px ispod vrha reda; (0,2,1) gazi .pm-tm--know img */
    .pm-know__title .pm-tm { margin: 0.05em -0.225em 0 -0.2em; }
    .pm-know__title .pm-tm img { width: 0.4em; height: 0.4em; }
    .pm-know__sub { font-size: 20px; margin-top: 12px; line-height: normal; }   /* Figma 1:1138 — Lora 20, 3 reda, 12px ispod naslova */
    .pm-know__lead { font-size: 22px; line-height: normal; margin-top: 12px; }   /* Figma 1:1137 — h28, 12px ispod podnaslova */
    /* Figma 1:1140 — kartice x16 w408; prva 52px ispod okvira leada (40 ispod swoosha) */
    .pm-know__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 52px; margin-inline: -16px; }
}

@media (max-width: 480px) {
    /* Figma 1:1139 — Lora 40 na 440, okvir w354: „Šta ćete saznati / kada završite / Philipovu metodu?" */
    .pm-know__title { font-size: min(40px, 9.09vw); max-width: 354px; }
    .pm-know__lead { font-size: min(22px, 5vw); }   /* 1 red i na 360 */
}

/* ==========================================================================
   08  OVO NIJE SLEEP TRAINING
   Figma 1:427, 1:429
   ======================================================================= */
.pm-notrain { padding: 120px 0; background: var(--cream); }
.pm-notrain__title {
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: normal;
    letter-spacing: var(--track); color: var(--ink); text-align: center; margin: 0;
}
.pm-notrain__sub {
    font-family: var(--lora); font-weight: 400; font-size: 40px; line-height: 1.28;
    letter-spacing: -1.296px; color: var(--brown); text-align: center; margin: 16px 0 0;
}
/* identično not-sleep-divider-line.svg */
.pm-notrain__rule {
    display: block; height: 1px; margin: 48px 0 64px;   /* Figma: podnaslov->linija 48, linija->foto 64 */
    background: linear-gradient(90deg, rgba(139, 114, 108, 0) 0%, var(--brown) 50%, rgba(139, 114, 108, 0) 100%);
}
/* Foto/kartica idu u PROCENTIMA sadržajne kolone (1240px), ne u px: 527→42.5%,
   745→60.081%, pa je preklop uvek 2.581% (=32px na 1240) umesto da raste ka
   užim ekranima. margin-top u % se takođe računa od širine, pa i on skalira. */
.pm-notrain__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.pm-notrain__photo {
    position: relative;
    grid-area: 1 / 1; justify-self: start; width: 42.5%; aspect-ratio: 527 / 394; height: auto; overflow: hidden;
    border-radius: 24px 120px 24px 120px;
}
.philipova-page picture.pm-notrain__photo-img { display: block; }
/* Figma 1:431 — slika 791x665 na (-52, -191) u okviru 527x394; procenti su
   relativni na okvir (791/527, -52/527, -191/394).
   ⚠️ BEZ `object-fit: none`. Boks je vec TACNO Figma boks (150.1% od 527 = 791.0,
   a height:auto pri odnosu slike 1100/925 daje 665.2 — Figma trazi 665), pa
   `none` nije radio nikakav kadar nego je crtao bitmapu u PRIRODNOJ velicini
   1100x925 unutar boksa od 791 i tako je zumirao 1.39x preko dizajna. */
.pm-notrain__photo-img, .pm-notrain__photo img {
    position: absolute; left: -9.87%; top: -48.48%;
    width: 150.1%; height: auto; max-width: none;
    display: block;
}
.pm-notrain__card {
    grid-area: 1 / 1; justify-self: end; position: relative; z-index: 1;
    width: 60.081%; margin-top: 5.081%; padding: 44px 45px 68px 92px;
    border-radius: 24px; background: var(--cream); box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.pm-notrain__quote { position: absolute; width: 44px; height: 40px; }
.pm-notrain__quote--open { left: 32px; top: 32px; }
.pm-notrain__quote--close { right: 32px; bottom: 36px; transform: rotate(180deg); }
.pm-notrain__text {
    font-family: var(--inter); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: -.18px; color: var(--ink);
}
.pm-notrain__text p + p { margin-top: 26px; }
/* ™ u kartici je 10x10 po Figmi (1:436); shared .pm-tm--text je 12px zbog hero-a. */
.pm-notrain__text .pm-tm img { width: 10px; height: 10px; }
.pm-notrain__text strong { font-weight: 700; }

@media (max-width: 1100px) {
    .pm-notrain__title { font-size: 56px; }
    .pm-notrain__sub { font-size: 30px; }
    .pm-notrain__photo { border-radius: 24px 90px 24px 90px; }
    .pm-notrain__card { padding: 36px 36px 52px 64px; }
    .pm-notrain__quote { width: 34px; height: 31px; }
    .pm-notrain__quote--open { left: 20px; top: 24px; }
    .pm-notrain__quote--close { right: 20px; bottom: 24px; }
}

@media (max-width: 860px) {
    /* ── 8. ovo nije sleep training: foto pa kartica, bez preklapanja (1:1473 + 1:1477) ── */
    .pm-notrain { padding: 72px 0; }
    .pm-notrain__title { font-size: 32px; }
    .pm-notrain__sub { font-size: 24px; margin-top: 12px; }
    .pm-notrain__rule { margin: 24px 0 32px; }
    .pm-notrain__row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pm-notrain__photo, .pm-notrain__card { grid-area: auto; justify-self: stretch; width: 100%; }
    .pm-notrain__photo { height: 200px; aspect-ratio: auto; border-radius: 20px; }
    .pm-notrain__card { min-height: 0; margin-top: 0; padding: 40px 36px 50px 48px; }
    .pm-notrain__quote { width: 30px; height: 27px; }
    .pm-notrain__quote--open { left: 14px; top: 22px; }
    .pm-notrain__quote--close { right: 14px; bottom: 22px; }
    .pm-notrain__text p + p { margin-top: 20px; }
}

@media (max-width: 480px) {
    /* Figma 1:1477 → 1:1495 — 48px od dna kartice do uvoda 09. Vrh ostaje 72: 07 vec nosi 16 (1:1149 → 1:1470 = 88). */
    .pm-notrain { padding-bottom: 48px; }
    /* Figma 1:1470 — Lora 32 (okvir 41); na 360 skalira da ostane u 1 redu */
    .pm-notrain__title { font-size: min(32px, 8.4vw); }
    /* Figma 1:1471 — 281x62 = 2 reda x31 („Mi ne podržavamo treninge" / „spavanja."), 4px ispod naslova */
    .pm-notrain__sub { font-size: 24px; line-height: 31px; max-width: 281px; margin: 4px auto 0; }
    /* Figma 1:1472 — linija x16 w408 (vidljivo 23..416) */
    .pm-notrain__rule { margin: 24px -16px 32px; }
    /* Figma 1:1473 — okvir 376x281.1; postojeći procenti na img tada daju Figma kadar (radijus 20 iz 860 ostaje) */
    .pm-notrain__photo { height: auto; aspect-ratio: 376 / 281; }
    /* Figma 1:1477 — kartica x17 w408, vrh 22px preko dna fotografije; tekst 1:1480 na (78,40) w266.
       width:auto je obavezan jer 860 blok postavlja width:100%. */
    .pm-notrain__row { gap: 0; }
    .pm-notrain__card { --q: min(44px, 10vw); width: auto; margin: -22px -17px 0 -15px; padding: 40px calc(var(--q) + 20px) 50px calc(var(--q) + 34px); }
    /* Figma 1:1478 / 1:1479 — navodnici 44x40 na (20,32) i right 20 / bottom 41 */
    .pm-notrain__quote { width: var(--q); height: calc(var(--q) * .909); }
    .pm-notrain__quote--open { left: 20px; top: 32px; }
    .pm-notrain__quote--close { right: 20px; bottom: 41px; }
    .pm-notrain__text p + p { margin-top: 26px; }   /* Figma 1:1480 — prazan red 26 */
}

/* ==========================================================================
   09  DRUGAČIJI NAČIN
   Figma 1:74, 1:440
   ======================================================================= */
.pm-otherway { padding: 0 0 120px; background: var(--cream); }
/* Figma 1:76 — Ellipse 63 (536x21) stoji ispod POSLEDNJEG REDA uvodne rečenice,
   desno poravnat sa njenim krajem; cue linija 1:75 u Figmi NEMA podvlačenje. */
.pm-otherway__intro {
    position: relative;
    max-width: 1100px; margin: 0 auto;
    font-family: var(--lora); font-weight: 500; font-style: italic; font-size: 48px; line-height: 1.25;
    letter-spacing: var(--track); color: var(--brown); text-align: center;
}
.pm-swoosh--otherway {
    left: auto; right: 152px; bottom: -21px; width: 536px; height: 21px;   /* 113px od desne ivice Figma boksa + 39.5px jer je __intro max-width 1100 */
}
.pm-otherway__cue {
    margin: 86px 0 80px;
    font-family: var(--lora); font-weight: 400; font-size: 48px; line-height: 1.25;
    letter-spacing: -1.296px; color: var(--brown); text-align: center;
}
.pm-otherway__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.pm-otherway__photo {
    grid-area: 1 / 1; justify-self: end; width: 42.5%; aspect-ratio: 527 / 690; height: auto; overflow: hidden;
    border-radius: 120px 24px 120px 24px;
}
.philipova-page picture.pm-otherway__photo-img { display: block; }
.pm-otherway__photo-img, .pm-otherway__photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block;
}
.pm-otherway__card {
    grid-area: 1 / 1; justify-self: start; position: relative; z-index: 1;
    width: 60.081%; margin-top: 4.355%; padding: 70px 82px 61px 92px;
    border-radius: 24px; background: var(--cream); box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.pm-otherway__quote { position: absolute; width: 44px; height: 40px; }
.pm-otherway__quote--open { left: 32px; top: 32px; }
.pm-otherway__quote--close { right: 32px; bottom: 32px; transform: rotate(180deg); }
/* uicore-global.css ima `ul[class]:not(.wp-block-list){list-style:none}` — to je
   (0,2,1) jer :not() računa specifičnost argumenta, pa gazi .pm-otherway__list
   (0,1,0). Zato tačkica ide na <li>, koji uicore ne gađa uopšte. */
.pm-otherway__list { padding-left: 27px; margin: 0 0 24px; }
.pm-otherway__list li {
    list-style: disc; font-family: var(--inter); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: -.18px; color: var(--ink);
}
.pm-otherway__list li + li { margin-top: 2px; }
.pm-otherway__text {
    font-family: var(--inter); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: -.18px; color: var(--ink);
}
.pm-otherway__text p + p { margin-top: 26px; }
/* scope-ovano na (0,2,0): reset `[class*="__text"] p` (0,1,1) gazi font-size,
   font-family, line-height I color — bez ovoga bi "cilj" linija izgubila Loru. */
.pm-otherway__text .pm-otherway__strong { font-weight: 700; }
.pm-otherway__text .pm-otherway__goal {
    font-family: var(--lora); font-weight: 500; font-style: italic; font-size: 24px; line-height: 26px;
    color: var(--brown);
}
.pm-otherway__text .pm-tm img { width: 10px; height: 10px; }   /* Figma 1:448 */

@media (max-width: 1100px) {
    /* 9 */
    .pm-otherway__intro, .pm-otherway__cue { font-size: 34px; }
    .pm-otherway__photo { border-radius: 90px 24px 90px 24px; }
    .pm-otherway__card { padding: 52px 48px 48px 64px; }
    .pm-otherway__quote { width: 34px; height: 31px; }
    .pm-otherway__quote--open { left: 20px; top: 24px; }
    .pm-otherway__quote--close { right: 20px; bottom: 24px; }
    .pm-otherway__text .pm-otherway__goal { font-size: 21px; line-height: 28px; }
}

@media (max-width: 860px) {
    /* ── 9. drugačiji način: foto pa kartica (1:1475 + 1:1485) ── */
    .pm-otherway { padding-bottom: 72px; }
    .pm-otherway__intro { font-size: 24px; }
    .pm-otherway__cue { font-size: 24px; margin: 20px 0 32px; }
    .pm-swoosh--otherway { left: 50%; right: auto; transform: translateX(-50%); bottom: -9px; width: 182px; height: 12px; }
    .pm-otherway__row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pm-otherway__photo, .pm-otherway__card { grid-area: auto; justify-self: stretch; width: 100%; }
    .pm-otherway__photo { order: -1; height: 240px; aspect-ratio: auto; border-radius: 20px; }
    .pm-otherway__card { min-height: 0; margin-top: 0; padding: 40px 36px 44px 48px; }
    .pm-otherway__quote { width: 30px; height: 27px; }
    .pm-otherway__quote--open { left: 14px; top: 22px; }
    .pm-otherway__quote--close { right: 14px; bottom: 22px; }
    .pm-otherway__list { padding-left: 22px; margin-bottom: 20px; }
    .pm-otherway__text p + p { margin-top: 20px; }
    .pm-otherway__text .pm-otherway__goal { font-size: 20px; line-height: 28px; }
}

@media (max-width: 480px) {
    /* Figma 1:1485 → 1:1497 — 48px od dna kartice do naslova 10 */
    .pm-otherway { padding-bottom: 48px; }
    /* Figma 1:1495 — Lora 500 italic 24, 376x93 = 3 reda x31; swoosh 1:1494 tada pada pod „dete može da zaspi." (90px od vrha) */
    .pm-otherway__intro { font-size: 24px; line-height: 31px; }
    /* Figma 1:1496 — 234x31, 57px ispod uvoda, 48px do fotografije 1:1475 */
    .pm-otherway__cue { font-size: 24px; line-height: 31px; margin: 57px 0 48px; }
    /* Figma 1:1475 / 1:1476 — okvir 376x281.1, slika 376x527 na y=-132 → 132/(527-281) = 54% (radijus 20 iz 860 ostaje) */
    .pm-otherway__photo { height: auto; aspect-ratio: 376 / 281; }
    .pm-otherway__photo-img, .pm-otherway__photo img { object-position: 50% 54%; }
    /* Figma 1:1485 — kartica x17 w408, vrh 22px preko dna fotografije; lista 1:1493 na (78,24) w266. width:auto gazi width:100% iz 860. */
    .pm-otherway__row { gap: 0; }
    .pm-otherway__card { --q: min(44px, 10vw); width: auto; margin: -22px -17px 0 -15px; padding: 24px calc(var(--q) + 20px) 39px calc(var(--q) + 34px); }
    /* Figma 1:1486 / 1:1487 — navodnici 44x40 na (20,32) i right 20 / bottom 32 */
    .pm-otherway__quote { width: var(--q); height: calc(var(--q) * .909); }
    .pm-otherway__quote--open { left: 20px; top: 32px; }
    .pm-otherway__quote--close { right: 20px; bottom: 32px; }
    /* Figma 1:1493 — tekst stavke od x105 u kartici (78 + 27), 9 redova x26 bez razmaka; 7px do teksta 1:1488 */
    .pm-otherway__list { padding-left: 27px; margin-bottom: 7px; }
    .pm-otherway__list li + li { margin-top: 0; }
    .pm-otherway__text p + p { margin-top: 26px; }   /* Figma 1:1488 — p+p 26 */
    /* Figma 1:1488 — „Cilj je..." Lora 500 italic 20/26, 4 reda na 440 */
    .pm-otherway__text .pm-otherway__goal { font-size: 20px; line-height: 26px; }
}

/* ==========================================================================
   10  ISKUSTVA RODITELJA
   Figma 1:452 — [bukvar_testimonials]
   ======================================================================= */
/* Stilovi su u assets/css/pm-testimonials.css — ista komponenta je i na stranici
   O nama (page-o-nama.php), pa živi na jednom mestu. Enqueue: inc/setup.php. */

/* ==========================================================================
   11  KO STOJI IZA
   Figma 1:513 / 1:1541
   ======================================================================= */
.pm-author {
    position: relative; padding: 120px 0 80px; overflow: hidden;
    background: linear-gradient(180deg, rgba(139, 114, 108, 0) 0%, rgba(139, 114, 108, .81) 80.2%, rgba(139, 114, 108, .9) 100%);
}
.philipova-page picture.pm-author__mark { display: block; }
.pm-author__mark {
    position: absolute; left: 50%; margin-left: 477px; top: 138px; width: 285px; height: auto; opacity: .05; pointer-events: none; z-index: 0;
}
.pm-author .pm-wrap { position: relative; z-index: 1; }
.pm-author__title {
    max-width: 755px; margin: 0;   /* Figma 1:536 — red 1:514 pocinje tacno na dnu naslovnog boksa */
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: normal;
    letter-spacing: var(--track); color: var(--ink);
}
.pm-author__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.pm-author__photo {
    grid-area: 1 / 1; justify-self: end; width: 50%; aspect-ratio: 620 / 599; overflow: hidden; border-radius: 32px;
}
.philipova-page picture.pm-author__photo-img { display: block; }
.pm-author__photo-img, .pm-author__photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block;
}
.pm-author__card {
    grid-area: 1 / 1; justify-self: start; position: relative; z-index: 1;
    width: 60%; margin-top: 4.435%; padding: 48px;
    border-radius: 24px; background: var(--cream);
}
.pm-author__lead { font-family: var(--lora); font-weight: 400; font-size: 24px; line-height: 34px; color: var(--ink); }
.pm-author__text {
    margin-top: 21px; font-family: var(--inter); font-weight: 300; font-size: 18px; line-height: 26px; letter-spacing: -.18px; color: var(--ink);
}
.pm-author__text p + p { margin-top: 26px; }
.pm-author__text strong { font-weight: 700 !important; }
.pm-author__btn {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 21px;
    height: 47px; padding: 12px 40px; border: 1px solid var(--brown); border-radius: 10px;
    font-family: var(--inter); font-weight: 600; font-size: 15px; line-height: 16px;
    color: var(--ink) !important; text-decoration: none; transition: background .2s ease, transform .2s ease;
}
/* arrow-right.svg je kremast (#FDFAF8) — na .pm-btn (braon) je tacan, ali ovde je
   podloga svetla pa bi bio nevidljiv. Mask ga boji u currentColor. */
.pm-author__btn::after {
    content: ""; width: 24px; height: 24px; flex: none; transform: rotate(180deg);
    background: currentColor;
    -webkit-mask: url("../images/philipova/arrow-right.svg") center / contain no-repeat;
    mask: url("../images/philipova/arrow-right.svg") center / contain no-repeat;
}
.pm-author__btn:hover { background: rgba(139, 114, 108, .08); transform: translateY(-2px); }
#primary a.pm-author__btn,
#primary a.pm-author__btn:hover,
#primary a.pm-author__btn:visited {
    color: var(--ink) !important;
}

@media (max-width: 1100px) {
    /* 11 */
    .pm-author__title { font-size: 56px; margin-bottom: 40px; }
    .pm-author__card { padding: 36px; }
    .pm-author__lead { font-size: 21px; line-height: 30px; }
    .pm-author__text { font-size: 16px; line-height: 24px; }
    .pm-author__mark { display: none; }
}

@media (max-width: 860px) {
    /* ── 11. ko stoji iza: foto pa kartica ── */
    /* Figma 1:1541 — naslov na y=48, kartica se zavrsava 48px pre kraja; gradijent providno → .9 (80%) → #8B726C,
       pa je dno 11 isto kao vrh 12 (1:1626) */
    .pm-author { padding: 48px 0 48px; background: linear-gradient(180deg, rgba(139,114,108,0) 0%, rgba(139,114,108,.9) 80%, #8B726C 100%); }
    /* Figma 1:1542 — Lora 40, centrirano, sirina 345, prelom „Ko stoji iza / Philipove metode™?", 48px do fotografije;
       clamp: fiksnih 40px bi na 390/360 prelomilo u 3 reda */
    .pm-author__title { max-width: 8.625em; margin: 0 auto 48px; font-size: clamp(32px, 9.1vw, 40px); text-align: center; }
    /* Figma 1:1561 — ™ 14×14, 5px ispod vrha reda, zalazi u „e" (tm.svg ima unutrasnju belinu) */
    .pm-author__title .pm-tm { margin: 0 -0.15em 0 -0.1em; }
    .pm-author__title .pm-tm img { width: 0.35em; height: 0.35em; margin-top: 0.125em; }
    .pm-author__row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pm-author__photo, .pm-author__card { grid-area: auto; justify-self: stretch; width: 100%; }
    .pm-author__photo { order: -1; aspect-ratio: 376 / 515; border-radius: 26px; }   /* Figma 1:1543 — portret, radius 25.746 */
    .pm-author__card { margin-top: 0; padding: 24px; }
    /* Figma 1:1545 lead Lora 20 / normal; 1:1546 tekst Inter 16/22, pasusi odvojeni praznim redom 22; dugme 1:1547 24px ispod */
    .pm-author__lead { font-size: 20px; line-height: normal; }
    .pm-author__text { font-size: 16px; line-height: 22px; letter-spacing: -.16px; margin-top: 16px; }
    .pm-author__text p + p { margin-top: 22px; }
    .pm-author__card .pm-tm { margin-right: -10px; }   /* Figma 1:1545/1:1546 — ™ preklapa razmak posle „metoda" */
    .pm-author__btn { width: 100%; justify-content: center; padding: 12px 20px; margin-top: 24px; }
}

/* ==========================================================================
   12  PODRŽALI SU STRUČNJACI
   Figma 1:541 — [bukvar_reviewers]
   ======================================================================= */
/* Figma 1:568: linija stoji na y=1, tj. na samoj granici sekcije — bez gornjeg paddinga. */
.pm-experts { position: relative; padding: 0 0 120px; overflow: hidden; background: rgba(139, 114, 108, .9); }
/* `height: 913px` je bilo duze od same sekcije (972 - 99 = 873), pa se gasenje
   secelo pre kraja i dno je ostajalo na (247,243,241) umesto na punom krem-u —
   sitan ali vidljiv rez prema sekciji 13. `bottom: 0` ga vezuje za kraj sekcije. */
.pm-experts__fade {
    position: absolute; left: 0; top: 99px; bottom: 0; width: 100%; z-index: 0; display: block; pointer-events: none;
    background: linear-gradient(180deg, rgba(253, 250, 248, 0) 0%, var(--cream) 100%);
}
.philipova-page picture.pm-experts__mark { display: block; }
.pm-experts__mark {
    position: absolute; left: 50%; margin-left: -740px; top: 8%; width: 285px; height: auto; opacity: .05; z-index: 0; pointer-events: none;
}
.pm-experts .pm-wrap { position: relative; z-index: 1; }
.pm-experts__rule {
    display: block; height: 1px; margin-bottom: 80px; background: linear-gradient(90deg, rgba(253,250,248,0) 0%, rgba(253,250,248,.55) 50%, rgba(253,250,248,0) 100%);
}
.pm-experts__title {
    max-width: 990px; margin: 0 auto 91px;
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: normal;
    letter-spacing: var(--track); color: var(--cream); text-align: center;
}
/* raspored šortkoda po dizajnu */
.pm-experts .bukvar-reviewers { padding: 0; background: transparent; }   /* reviewers.css:8 stavlja #FDFAF8 preko braon gradijenta */
.pm-experts .bukvar-reviewers__inner { max-width: none; }
.pm-experts .bukvar-reviewer { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; margin: 0; }
.pm-experts .bukvar-reviewer__image {
    grid-area: 1 / 1; justify-self: start; position: relative; width: 44.35%; aspect-ratio: 550 / 476; overflow: hidden; border-radius: 43px; margin: 0;
}
.pm-experts .bukvar-reviewer__image img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block;
}
/* reviewers.css centrira pločicu sa `left:50% + translateX(-50%)`; ovde je
   razvučena preko cele širine fotografije, pa se transform MORA poništiti —
   inače je pomerena za pola svoje širine ulevo i izlazi iz kadra. */
.pm-experts .bukvar-reviewer__name {
    position: absolute; left: 24px; right: 24px; bottom: 24px; transform: none; padding: 12px 24px; text-align: center;
    border-radius: 12px; background: rgba(253, 250, 248, .79); box-shadow: 0 40px 70px rgba(206, 134, 103, .1);
    font-family: var(--lora); font-weight: 400; font-size: 24px; line-height: 48px; color: var(--brown);
}
.pm-experts .bukvar-reviewer__card {
    grid-area: 1 / 1; justify-self: end; position: relative; z-index: 1;
    width: 60.08%; margin: 3.87% 0 0; padding: 40px 45px 40px 92px;
    border-radius: 24px; background: var(--cream); box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.pm-experts .bukvar-reviewer__text {
    font-family: var(--inter); font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: -.18px; color: var(--ink);
}
.pm-experts .bukvar-reviewer__text p + p { margin-top: 26px; }
.pm-experts .bukvar-reviewer__text, .pm-experts .bukvar-reviewer__buttons { padding: 0; }   /* reviewers.css: 0 40px */
.pm-experts .bukvar-reviewer__qmark { position: absolute; width: 44px; height: 40px; color: var(--ink); }
.pm-experts .bukvar-reviewer__qmark svg { width: 100%; height: 100%; display: block; }
.pm-experts .bukvar-reviewer__qmark--open { left: 32px; top: 32px; }
.pm-experts .bukvar-reviewer__qmark--close { right: 32px; bottom: 124px; transform: rotate(180deg); }
.pm-experts .bukvar-reviewer__buttons { display: flex; gap: 16px; margin-top: 32px; }
.pm-experts .bukvar-reviewer__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer;
    width: 248px; max-width: 100%; height: 68px; border-radius: 10px; border: 0;
    font-family: var(--inter); font-weight: 600; font-size: 16px; line-height: 17.6px;
}
.pm-experts .bukvar-reviewer__btn--primary {
    background: linear-gradient(90deg, #D9B1A8 0%, #584642 100%); color: var(--cream);
}
.pm-experts .bukvar-reviewer__btn--secondary {
    background: transparent; border: 1px solid var(--brown); color: var(--brown);
}
/* ™ posle „Philipova metoda" u citatu (str_replace u templejtu) — Figma ga traži na mobilnom (1:1634);
   desktop nije proveren prema Figmi, pa se tamo ne prikazuje. */
.pm-experts .pm-tm--quote { display: none; }

@media (max-width: 860px) {
    /* Figma 1:1626 — linija na y=0 sekcije, kartica se zavrsava 48px pre kraja (sekcija 1049);
       gradijent #8B726C gore → .9 na 20% → providno dole (nod je rotiran 180°), zato bez __fade */
    .pm-experts { padding: 0 0 48px; background: linear-gradient(180deg, #8B726C 0%, rgba(139,114,108,.9) 20%, rgba(139,114,108,0) 100%); }
    .pm-experts__fade { display: none; }
    /* Figma 1:1649 — Lora 32, sirina 319, y 25..107, prelom „Philipovu metodu™ / podrzali su strucnjaci", foto na y=131 */
    .pm-experts__title { max-width: 319px; margin: 0 auto 24px; font-size: 32px; }
    /* Figma 1:1650 — ™ 14×14 krem, ne ulazi u sirinu reda */
    .pm-experts__title .pm-tm { margin-right: -0.4375em; }
    .pm-experts__title .pm-tm img { width: 0.4375em; height: 0.4375em; filter: brightness(0) invert(1); }
    /* Figma 1:1627 — stroke #FDFAF8 0 → puna na 50% → 0 */
    .pm-experts__rule { margin-bottom: 24px; background: linear-gradient(90deg, rgba(253,250,248,0) 0%, #FDFAF8 50%, rgba(253,250,248,0) 100%); }
    .pm-experts__mark { display: none; }
    .pm-experts .bukvar-reviewer { gap: 0; }
    .pm-experts .bukvar-reviewer__image, .pm-experts .bukvar-reviewer__card {
        grid-area: auto; justify-self: stretch; width: 100%;
    }
    /* Figma 1:1628 — 376×325.4 (bazni aspect-ratio 550/476 umesto height:360 iz reviewers.css), radius 29.665 */
    .pm-experts .bukvar-reviewer__image { height: auto; border-radius: 30px; }
    /* Figma 1:1630 — 343×56 na (16,197) u fotografiji, 72px od dna, radius 8; 1:1631 Lora 18 / 32.8 */
    .pm-experts .bukvar-reviewer__name {
        left: 16px; right: 17px; bottom: 22.25%; max-width: none; padding: 11px 8px 12px; border-radius: 8px;
        font-size: clamp(16px, 4.1vw, 18px); line-height: 33px; white-space: nowrap;
    }
    /* Figma 1:1632 — 408 siroko (16px od ivica ekrana), preklapa foto 41px, radius 16, padding 32 */
    .pm-experts .bukvar-reviewer__card { width: calc(100% + 32px); margin: -41px -16px 0; padding: 32px; border-radius: 16px; box-shadow: 0 4px 8px rgba(0,0,0,.1); }
    /* Figma 1:1633 — Inter 18/26; (0,2,1) gazi reviewers.css .bukvar-reviewer__text p 15px/1.55 */
    .pm-experts .bukvar-reviewer__text, .pm-experts .bukvar-reviewer__text p { font-size: 18px; line-height: 26px; }
    .pm-experts .pm-tm--quote { display: inline-block; }
    .pm-experts .bukvar-reviewer__text .pm-tm--quote { margin-right: -10px; }   /* Figma 1:1634 — ™ preklapa zarez, ne zauzima mesto u redu */   /* Figma 1:1634 — ™ 10×10 posle „metoda" */
    /* Figma 1:1638 — kolona, gap 16; 1:1639/1:1643 344×68, Inter 600 16, gradijent #D9B1A8 → #735E59 */
    .pm-experts .bukvar-reviewer__buttons { flex-direction: column; gap: 16px; padding: 0; }
    .pm-experts .bukvar-reviewer__text { padding: 0; }
    .pm-experts .bukvar-reviewer__btn { width: 100%; height: 68px; font-size: 16px; }
    .pm-experts .bukvar-reviewer__btn--primary { background: linear-gradient(90deg, #D9B1A8 0%, #735E59 100%); }
    /* Figma 1:1648 otvoreni „66" 21×20 na (12,12); 1:1647 zatvoreni „99" 22×20 na (374,358) — reviewers.css ih krije */
    .pm-experts .bukvar-reviewer__qmark { display: block; width: 22px; height: 20px; }
    .pm-experts .bukvar-reviewer__qmark--open { left: 12px; top: 12px; }
    .pm-experts .bukvar-reviewer__qmark--open svg { transform: rotate(180deg); }
    .pm-experts .bukvar-reviewer__qmark--close { right: 12px; bottom: 208px; }
}

/* ==========================================================================
   13  ŠTA TAČNO DOBIJATE (slajder na skrol)
   Figma 1:573 + 10109–10111
   ======================================================================= */
/* Skrolom vođena sekcija: „staza" je visoka, unutra je zakucan (sticky) sadržaj,
   a napredak skrola kroz stazu pomera traku. Visina staze = 1 ekran za pin +
   po ~85vh za svaki prelaz između slajdova. */
.pm-get { padding: 0; background: var(--cream); }
.pm-get__scroller { position: relative; height: calc(100vh + 255vh); }
.pm-get__sticky {
    /* header sajta je `position: fixed` (96px na 40px od vrha) — zakucani
    sadržaj mora da ga očisti, inače naslov upada pod njega. */
    --pm-head: 142px;
    position: sticky; top: 0; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--pm-head) 0 0;   /* bez donjeg: panel je sad 62px nize, a sekcija mora da stane u 1080 */
}
[data-pm-scroller][data-pm-static] .pm-get__sticky { position: static; min-height: 0; }
.pm-get__slider[data-pm-static] .pm-get__viewport { overflow: visible; }
.pm-get__slider[data-pm-static] .pm-get__track { display: block; transform: none !important; }
.pm-get__slider[data-pm-static] .pm-get__slide { margin-bottom: 64px; }
.pm-get__slider[data-pm-static] .pm-get__nav { display: none; }
.pm-get__head { display: flex; align-items: center; gap: 48px; }   /* Figma: naslov do 1019, linija 1:590 od 1067 */
.pm-get__title {
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: normal;
    letter-spacing: var(--track); color: var(--ink); margin: 0; white-space: nowrap;
}
.pm-get__rule { flex: 1; height: 1px; background: var(--brown); display: block; }
.pm-get__rule--bottom { width: 54.7%; margin-top: 56px; }
/* Figma Line 47 (x341, y811, w678) je u SVA 4 frejma, u ravni dna panela — zato ide u
   svaku kolonu, a ne ispod zakucanog dela gde se na desktopu nije ni videla.
   ⚠️ (0,2,0) jer bazni `.pm-get__rule` ima `flex: 1`, a u flex KOLONI to razvuce visinu.
   24px providnog bordera + background-clip garantuju razmak iznad linije i kad je
   tekst visi od panela (margin-top: auto tada padne na 0). */
.pm-get__rule.pm-get__rule--slide {
    flex: none; display: block; width: 105.1%; height: 25px; margin-top: auto;   /* 678 / 645 */
    border-top: 24px solid transparent; background: var(--brown); background-clip: content-box; box-sizing: border-box;
}
@media (min-width: 861px) {
    .pm-get__rule--bottom { display: none; }
}
/* ── slajder ───────────────────────────────────────────────────────────
   Kretanje je JEDAN translate3d na traci: GPU kompozit, bez layout/paint po
   frejmu. `will-change` je stalno jer traka i jeste jedini element koji se miče. */
.pm-get__slider { position: relative; margin-top: 24px; outline: none; }   /* odluka klijenta: panel NE ulazi pod podnaslov (Figma 1:576 ga je imala -38px) — u prelazu je slika prelazila preko teksta */
.pm-get__viewport { overflow: hidden; }
.pm-get__track { display: flex; gap: 160px; will-change: transform; transform: translate3d(0, 0, 0); }   /* razmak izmedju slajdova — da se u prelazu ne lepe */
.pm-get__slide {
    flex: 0 0 100%; min-width: 0;
    display: grid; grid-template-columns: 52% 36.29%; justify-content: space-between; align-items: start;   /* 51.77% = 641.9px, a 1:594 trazi 642.9 → lomilo se u 2 reda */
}
/* dok JS ne preuzme, vidi se samo prvi slajd — bez skoka na učitavanju */
.pm-get__slider:not([data-pm-ready]) .pm-get__slide:not(:first-child) { visibility: hidden; }
.pm-get__slider[data-pm-ready] .pm-get__slide { visibility: visible; }
/* reduce motion: JS izlazi pre `data-pm-ready`, pa bi pravilo iznad ostavilo slajdove 2–4 nevidljive
   (~1650px praznog krema). (0,4,0) kao i ono, a kasnije je — pobeđuje i bez JS-a. */
.pm-get__slider[data-pm-static] .pm-get__slide:not(:first-child) { visibility: visible; }
/* Kolona je flex kolona rastegnuta na visinu slajda, da bi donja linija (Figma Line 47,
   y811 = dno panela) mogla da sedne na dno sa `margin-top: auto`. */
.pm-get__col { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.pm-get__col > .pm-get__pill { align-self: flex-start; }
.pm-get__sub {
    max-width: 679px; margin-top: 20px;   /* Figma 1:588 y202 = naslov 80+102+20 */
    font-family: var(--lora); font-weight: 500; font-style: italic; font-size: 32px; line-height: 1.28;
    color: var(--brown);
}
.pm-get__pill {
    display: inline-flex; align-items: center; margin-top: 40px; padding: 15px 32px;   /* Figma 1:592 visina 62; y348 = podnaslov 284 + slajder 24 + 40 */
    border: 1px solid var(--ink); border-radius: 1000px;
    font-family: var(--inter); font-weight: 400; font-size: 24px; line-height: 30px; color: var(--ink);
}
.pm-get__lead {
    margin-top: 40px;   /* Figma 1:594 y450 = pilula 348+62+40 */
    font-family: var(--lora); font-weight: 500; font-style: italic; font-size: 32px; line-height: 34px; color: var(--ink);
}
.pm-get__tick { display: block; flex: none; width: 47px; height: 1px; margin: 24px 0 0; background: var(--ink); }   /* Figma 1:595 y508 = kurziv 450+34+24 */
.pm-get__text {
    margin-top: 23px; font-family: var(--inter); font-weight: 400; font-size: 20px; line-height: 28px; letter-spacing: -.2px; color: var(--ink);   /* Figma 1:574 y532 */
}
.pm-get__list { margin: 28px 0 0; padding-left: 30px; }
.pm-get__text + .pm-get__list { margin-top: 40px; }   /* Figma 1:574->1:575 */
.pm-get__list li {
    list-style: disc; font-family: var(--inter); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: -.2px; color: var(--ink);
}
/* razmaci po redosledu elemenata — slajdovi imaju razlicit redosled (Figma 33:26/27, 33:49, 33:61/62) */
@media (min-width: 861px) {
    .pm-get__pill + .pm-get__list { margin-top: 40px; }    /* slajd 04: lista odmah posle pilule, y450 */
    .pm-get__tick + .pm-get__list { margin-top: 23px; }    /* slajd 03: lista posle crtice */
    .pm-get__text + .pm-get__text { margin-top: 28px; }    /* slajd 03: prazan red izmedju dve recenice (1 tekst nod, 84px) */
}
/* Visina je vezana za ekran da bi zakucani sadržaj stao i na laptop od ~800px,
   uz očuvan Figma odnos 450/565 — širina se izvodi iz visine. */
.pm-get__panel {
    position: relative; width: 100%; height: auto; aspect-ratio: 450 / 565;
    justify-self: end; background: var(--brown); overflow: hidden; border-radius: 40px;
}
/* Svi paneli sekcije 13 dele isti oblik (Figma 1:576). Slajdovi 02 i 03 su
   nosili samo `--books` bez ijednog pravila, pa su ispadali pravougaoni dok su
   01 i 04 bili luk — sekcija je zato izgledala kao da se raspada u hodu. */
.pm-get__panel--arch { border-radius: 300px 300px 40px 40px; }
.philipova-page picture.pm-get__panel-img { display: block; }
.pm-get__panel-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.pm-get__panel--motto { display: flex; align-items: center; justify-content: center; padding: 40px; }
/* ── makete knjiga u panelu (Figma 33:2 / 33:25, panel 450x565) ──
   Isti obrazac kao telefoni na slajdu 01: procenti panela, pa se sve skalira
   zajedno sa njim na svakom breakpointu i visinskom guard-u.
   bela  33:10 — x 65,  y 150, 184.33x279    -> 14.44% / 26.55% / 40.96%
   braon 33:15 — x 208, y 188, 177.88x269.33 -> 46.22% / 33.27% / 39.53% */
.pm-get__book { position: absolute; }
.pm-get__book--white { left: 14.44%; top: 26.55%; width: 40.96%; }
.pm-get__book--brown { left: 46.22%; top: 33.27%; width: 39.53%; z-index: 1; }
.philipova-page picture.pm-get__book-img { display: block; }
.pm-get__book-img { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.pm-get__book-shadow { position: absolute; left: 3%; bottom: -3.5%; width: 96%; height: auto; z-index: 0; }
.pm-get__motto {
    font-family: var(--lora); font-weight: 400; font-size: 40px; line-height: 1.35;
    letter-spacing: var(--track); color: var(--cream); text-align: center; text-transform: uppercase;
}
.pm-get__motto-l { display: block; }
/* Figma 33:51 — tri reda BOLD, sve uza velicina da bi sva tri bila iste sirine (~293px):
   visine tekst boksova 68 / 58 / 53, vrh grupe na y207 u panelu 450x565.
   cqw = procenat sirine panela, pa se moto skalira sa panelom i u visinskim guard-ovima. */
@media (min-width: 861px) {
    .pm-get__panel--motto { container-type: inline-size; display: block; padding: 0; }
    .pm-get__motto { position: absolute; left: 0; right: 0; top: 36.64%; margin: 0; font-weight: 700; }
    /* em na SPAN-u, ne na <p>: letter-spacing u em se preracuna u px tamo gde je deklarisan
       i nasledjuje kao fiksna vrednost — na <p> bi sva tri reda dobila isti razmak. */
    .pm-get__motto-l { letter-spacing: -0.06em; }
    .pm-get__motto-l--1 { font-size: 11.78cqw; line-height: 15.11cqw; }
    .pm-get__motto-l--2 { font-size: 10cqw;    line-height: 12.89cqw; }
    .pm-get__motto-l--3 { font-size: 9.11cqw;  line-height: 11.78cqw; }
}
/* ── indikacija napretka (tackice) ──────────────────────────────────────
   Nema strelica: sekcija se pomera skrolom, tackice su samo prikaz dokle si. */
.pm-get__nav { display: flex; align-items: center; gap: 20px; margin-top: 12px; }
.pm-get__dots { display: flex; align-items: center; gap: 10px; }
.pm-get__dot {
    width: 10px; height: 10px; padding: 0; cursor: pointer; border: 0; border-radius: 50%;
    background: rgba(139, 114, 108, .35);
    transition: background .3s ease, width .3s ease;
}
.pm-get__dot[aria-selected="true"] { width: 32px; border-radius: 5px; background: var(--brown); }
.pm-get__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* varijante teksta koje traže novi slajdovi */
.pm-get__text--top { margin-top: 20px; }   /* Figma 33:26 y430 */
.pm-get__lead--after { margin-top: 23px; }   /* Figma 33:62 y638 = crtica 614 + 24 */
/* Figma 33:27 (izmereno na 627x187 renderu): tacka, naslov bold, opis regular, uvlacenje
   teksta 20px, a izmedju dve stavke TACNO jedan prazan red od 28px (7 redova x 28). */
.pm-get__list--plain li { list-style: disc; font-weight: 400; }
@media (min-width: 861px) {
    .pm-get__list.pm-get__list--plain { padding-left: 20px; }
    .pm-get__list--plain li { margin-top: 0; }
    .pm-get__list--plain li + li { margin-top: 28px; }
}
.pm-get__list--plain li strong { font-weight: 700; }
.pm-get__phone { position: absolute; width: 29.07%; }
/* 130.8 / 450 */
.pm-get__phone--white { left: 24%; top: 25.66%; }
/* 108 / 450 , 145 / 565 */
.pm-get__phone--brown { left: 46.99%; top: 37.17%; }
/* 211.5 / 450 , 210 / 565 */
.philipova-page picture.pm-get__phone-img { display: block; }
.pm-get__phone-img { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.pm-get__phone-shadow { position: absolute; left: 6.5%; bottom: -6%; width: 87%; height: auto; z-index: 0; }

@media (max-width: 1100px) {
    /* 13 / 14 */
    .pm-get__title { font-size: 48px; }
    .pm-get__sub { font-size: 26px; }
    .pm-get__lead { font-size: 26px; line-height: 30px; }
    .pm-get__pill { font-size: 18px; padding: 12px 24px; margin-top: 110px; }
    .pm-get__text, .pm-get__list li { font-size: 18px; line-height: 26px; }
    .pm-get__motto { font-size: 32px; }
}

@media (max-width: 860px) {
    /* ── 13 / 14 ── */
    /* Zakucani deo MORA da ima --pm-head iznad naslova zbog fiksnog headera: bela kartica
       headera je na 10–106px, pa 116 = njeno dno + 10 (sa 96 je header trajno sekao vrh naslova,
       a na nizim ekranima ceo naslov). Sekcija ulazi preko praznog donjeg padding-a sekcije 12
       (48px, tamo je vec krem). Razmak 12 → 13 u toku je zato 116 umesto 96 iz Figme 1:1124 —
       veca negativna margina bi prekrila sadrzaj sekcije 12 (.pm-get ima krem pozadinu). */
    .pm-get { padding-top: 0; margin-top: -48px; }
    .pm-get__head { flex-direction: column; align-items: stretch; gap: 16px; }
    /* `.pm-get__rule` je `flex: 1` — u koloni to znaci visina 0 i linija nestane.
       Figma 1:1657 je ionako ne stavlja izmedju naslova i podnaslova nego ISPOD
       podnaslova, pa je ovde nosi sam podnaslov kao border-bottom. */
    .pm-get__head .pm-get__rule { display: none; }
    .pm-get__rule.pm-get__rule--slide { display: none; }
    /* Figma 1:1655 — 40px centrirano. clamp jer 40px staje u jedan red tek od
       ~389px sirine; ispod toga bi se naslov prelomio i zakucani blok narastao ~69px. */
    .pm-get__title { font-size: clamp(26px, 9.4vw, 40px); text-align: center; white-space: normal; }
    .pm-get__rule--bottom { display: none; }   /* Figma 1:1654: ispod panela nema linije, redovi 912–960 su cist krem */
    /* sve mora da stane u JEDAN zakucan ekran → zbijenije nego na desktopu */
    .pm-get__scroller { height: calc(100svh + 240svh); }
    /* Bez min-height 100svh i centriranja: sadrzaj krece odmah ispod headera, a visak visine
       ekrana vise ne pravi prazninu iznad naslova i ispod tackica (bilo ~40px gore i dole).
       Zakucavanje radi i kad je sticky nizi od ekrana — ispod njega je krem pozadina staze. */
    .pm-get__sticky { --pm-head: 116px; min-height: 0; justify-content: flex-start; padding: var(--pm-head) 0 0; }
    .pm-get__slide { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    /* NE `margin: 0 auto` — na grid item-u to gasi stretch i pretvara ga u
       fit-content; panel slajda 1 ima samo apsolutno pozicionirane telefone,
       pa mu je fit-content bio 0. Centriranje ide preko justify-self. */
    /* Figma 1:1664 — 376x206 (puna sirina sadrzaja, pejzaz 1.825), a ne desktop
       portret 450/565. max-width drzi Figma sirinu i iznad 440px da sekcija ostane
       u jednom ekranu. justify-self (ne `margin: 0 auto`) — v. komentar iznad. */
    .pm-get__panel {
        width: 100%; max-width: 376px; height: auto;
        aspect-ratio: 376 / 206; justify-self: center; margin: 0;
    }
    /* telefoni su procenti panela, pa moraju da se preracunaju za novi oblik */
    .pm-get__phone { width: 18.51%; }                      /* 69.59 / 376 */
    .pm-get__phone--white { left: 33.51%; top: 8.25%; }    /* 1:1667 — 126/376, 17/206 */
    .pm-get__phone--brown { left: 48.15%; top: 25.04%; }   /* 1:1671 — 181.05/376, 51.58/206 */
    /* Knjige na mobilnom: desktop procenti (40.96% sirine) su za USPRAVNI panel 450x565 —
       na polozenom 376x206 knjiga je bila 154x233px i isecena. Mobilni Figma nod za ovaj
       panel nije dostupan, pa je primenjena ISTA razmera kao kod telefona na slajdu 01
       (desktop 130.8px -> mobilni 69.59px = 0.532), a grupa je centrirana u panelu kao i
       telefoni: bela 98x148 na (102.6, 21.4), braon 94.6x143 na (178.7, 41.6). */
    .pm-get__book--white { left: 27.29%; top: 10.36%; width: 26.08%; }
    .pm-get__book--brown { left: 47.53%; top: 20.18%; width: 25.17%; }
    .pm-get__motto { font-size: 20px; }
    .pm-get__nav { justify-content: center; gap: 14px; margin-top: 18px; }
    .pm-get__text--top { margin-top: 16px; }
    .pm-get__sub { font-size: 16px; line-height: 1.35; margin-top: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--brown); }   /* Figma 1:1657 */
    .pm-get__pill { font-size: 13px; padding: 7px 14px; margin-top: 14px; }
    .pm-get__lead { font-size: 17px; line-height: 23px; margin-top: 14px; }
    .pm-get__tick { margin-top: 12px; }
    .pm-get__list--plain li { margin-top: 8px; }
    .pm-get__lead--after { margin-top: 14px; }
    .pm-get__text, .pm-get__list li { font-size: 13.5px; line-height: 20px; }
    .pm-get__text { margin-top: 12px; }
    .pm-get__list { margin-top: 12px; }
    .pm-get__list { padding-left: 22px; }
    .pm-get__panel--arch { border-radius: 20px; }   /* Figma 1:1664 — ujednacen na sva 4 ugla */
    /* slajder: panel ide ispod teksta, kao na mobilnim frejmovima */
    .pm-get__slider { margin-top: 10px; }   /* 10 + pilula 14 = 24px, Figma 1:1657 -> 1:1658 */
    .pm-get__track { gap: 32px; }
    /* Panel na DNO slajda. Traka ima visinu NAJVISEG slajda (03), pa je kod nizih ispod panela
       ostajalo 21–41px praznog (kraj staze → kartica 14 bilo 125px, Figma 48), a u prelazu su
       dva susedna panela stajala na razlicitoj visini (stepenik do 41px). */
    .pm-get__slide { grid-template-rows: auto 1fr; }
    .pm-get__panel { align-self: end; }
    /* Figma 1:1654 — podnaslov i pilula su centrirani, kao i naslov */
    .pm-get__sub { text-align: center; }
    .pm-get__col > .pm-get__pill { align-self: center; }
}

/* ── NISKI PROZORI: zakucani sadrzaj sekcije 13 mora da stane u ekran ──────
   ⚠️ REDOSLED JE NOSIV. Svi blokovi su iste specificnosti, pa odlucuje ko je
   kasniji — TESNJI guard MORA da stoji ISPOD sireg. Kad su bili obrnuto,
   `max-height: 900px` je vracao --pm-head na 140px i gazio 80px iz tesnjeg
   bloka, pa uzi-i-nizi prozori nisu dobijali nista.
   Redosled: 1000 -> 900 -> 820 -> (uzi) 820 -> (uzi) 720 -> mob 839 -> mob 730/699
   Mobilni pragovi su izmereni mrezom 8 sirina × 32 visine (tackice u ekranu, rezerva >= 6px
   za 360–440 i visine >= 634); ispod toga JS spusta sticky `top` (philipova-13-get.js, `off`).
   `prefers-reduced-motion: no-preference`: u reduce rezimu nista nije zakucano, pa nema
   razloga da se tekst sabija na 11.5px. */
@media (min-width: 861px) and (max-height: 1000px) {
    .pm-get__panel { width: auto; height: 56vh; }
}
@media (min-width: 861px) and (max-height: 900px) {
    .pm-get__sticky { --pm-head: 140px; }
    .pm-get__panel { width: auto; height: 52vh; }
    .pm-get__title { font-size: 54px; }
    .pm-get__sub { font-size: 24px; margin-top: 16px; }
    .pm-get__slider { margin-top: 16px; }
    .pm-get__pill { font-size: 18px; padding: 11px 24px; margin-top: 34px; }
    .pm-get__lead { font-size: 24px; line-height: 30px; margin-top: 28px; }
    .pm-get__tick { margin-top: 14px; }
    .pm-get__text { font-size: 17px; line-height: 24px; margin-top: 14px; }
    .pm-get__text--top { margin-top: 28px; }
    .pm-get__list { margin-top: 18px; }
    .pm-get__list li { font-size: 17px; line-height: 24px; }
    .pm-get__list--plain li { margin-top: 12px; }
    .pm-get__lead--after { margin-top: 22px; }
    .pm-get__nav { margin-top: 24px; }
    .pm-get__motto { font-size: 30px; }
}
@media (min-width: 861px) and (max-height: 820px) {
    .pm-get__sticky { --pm-head: 104px; padding: var(--pm-head) 0 12px; }
    .pm-get__title { font-size: 44px; }
    .pm-get__sub { font-size: 20px; margin-top: 12px; }
    .pm-get__panel { width: auto; height: 46vh; }
    .pm-get__pill { font-size: 16px; padding: 9px 20px; margin-top: 4px; }
    .pm-get__slider { margin-top: 12px; }
    .pm-get__lead { font-size: 21px; line-height: 26px; margin-top: 20px; }
    .pm-get__text, .pm-get__list li { font-size: 16px; line-height: 22px; }
    .pm-get__list { margin-top: 18px; }
    .pm-get__text + .pm-get__list { margin-top: 24px; }
    .pm-get__nav { margin-top: 18px; }
    .pm-get__rule--bottom { margin-top: 24px; }
}
@media (min-width: 861px) and (max-width: 1100px) and (max-height: 820px) {
    .pm-get__sticky { --pm-head: 96px; }
    .pm-get__slide { grid-template-columns: 61% 31%; }
    .pm-get__title { font-size: 38px; }
    .pm-get__lead { font-size: 19px; line-height: 24px; }
    .pm-get__text, .pm-get__list li { font-size: 15px; line-height: 20px; }
    .pm-get__pill { margin-top: 0; }
}
@media (min-width: 861px) and (max-width: 1100px) and (max-height: 720px) {
    .pm-get__sticky { --pm-head: 80px; padding: var(--pm-head) 0 8px; }
    .pm-get__title { font-size: 32px; }
    .pm-get__sub { font-size: 17px; margin-top: 8px; }
    .pm-get__lead { font-size: 17px; line-height: 21px; margin-top: 14px; }
    .pm-get__text, .pm-get__list li { font-size: 13.5px; line-height: 18px; }
    .pm-get__pill { font-size: 14px; padding: 7px 16px; margin-top: 0; }
    .pm-get__nav { margin-top: 12px; }
}
@media (max-width: 860px) and (max-height: 839px) and (prefers-reduced-motion: no-preference) {
    .pm-get__sticky { --pm-head: 116px; padding: var(--pm-head) 0 10px; }   /* header je i ovde 10–106px */
    .pm-get__title { font-size: 22px; }
    .pm-get__sub { font-size: 14px; line-height: 1.3; margin-top: 8px; }
    .pm-get__panel { max-width: 300px; height: auto; }   /* 155px je bilo kalibrisano za portret; sa pejzazom bi dalo traku 155x85 */
    .pm-get__slide { gap: 10px; }
    .pm-get__pill { font-size: 12px; padding: 6px 12px; margin-top: 10px; }
    .pm-get__lead { font-size: 15px; line-height: 20px; margin-top: 10px; }
    .pm-get__tick { margin-top: 8px; }
    .pm-get__text, .pm-get__list li { font-size: 12.5px; line-height: 18px; }
    .pm-get__text, .pm-get__list { margin-top: 8px; }
    .pm-get__text--top { margin-top: 10px; }
    .pm-get__list--plain li { margin-top: 6px; }
    .pm-get__lead--after { margin-top: 10px; }
    .pm-get__nav { margin-top: 12px; }
    .pm-get__motto { font-size: 16px; }
}
@media (max-width: 419px) and (max-height: 730px) and (prefers-reduced-motion: no-preference),
       (max-width: 860px) and (max-height: 699px) and (prefers-reduced-motion: no-preference) {
    .pm-get__sticky { --pm-head: 116px; padding: var(--pm-head) 0 8px; }
    .pm-get__title { font-size: 20px; }
    .pm-get__sub { font-size: 12.5px; padding-bottom: 14px; margin-top: 6px; }
    .pm-get__panel { max-width: 220px; }
    .pm-get__slide { gap: 8px; }
    .pm-get__pill { font-size: 11px; padding: 5px 10px; margin-top: 8px; }
    .pm-get__lead { font-size: 13.5px; line-height: 18px; margin-top: 8px; }
    .pm-get__text, .pm-get__list li { font-size: 11.5px; line-height: 16px; }
    .pm-get__slider { margin-top: 8px; }
}


/* Panel je na desktopu pun 565px po Figmi 1:576, ali zakucani sadrzaj mora da
   stane u JEDAN ekran — na nizim prozorima se skuplja, uz ocuvan odnos 450/565. */
/* Niski prozori: zakucani sadrzaj MORA da stane u ekran, inace se sekcija 13
   preliva i skrol izgleda polomljeno. Na uzim desktopima tekst kolona je ta koja
   raste (na 900x700 je kolona 431px, a panel samo 364), pa se ovde smanjuje i
   tipografija, ne samo panel. Redosled: 1000 -> 900 -> 820, svaki uzi od prethodnog. */


/* Najtesnji ugao: usko I nisko (npr. 900x700). Tu je dvokolonski slajd najgori —
   tekst kolona je samo ~430px pa se recenice lome u duplo vise redova nego na
   1920. Zato ovde tekst dobija vise sirine na racun panela. */










/* ==========================================================================
   14  I SVE TO U JEDNOM SISTEMU
   Figma 1:596 / 1:1676
   ======================================================================= */
.pm-system { padding: 96px 0 60px; background: var(--cream); }   /* Figma 1:596 dno -> 1:621 vrh = 120px, deljeno 60/60 */
.pm-system__card {
    padding: 64px 40px 93px; text-align: center;
    border: 1px solid var(--brown); border-radius: 20px; background: var(--cream);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
}
.pm-system__title {
    font-family: var(--lora); font-weight: 400; font-size: 64px; line-height: normal;
    letter-spacing: var(--track); color: var(--brown); margin: 0;
}
.pm-system__features { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 80px; margin: 48px 0 0; }
.pm-system__features li {
    display: flex; align-items: center; gap: 8px; font-family: var(--inter); font-weight: 500; font-size: 24px; line-height: 26px; color: var(--brown);
}
.pm-system__icon { width: 48px; height: 48px; flex: none; display: block; }
.pm-system__text {
    max-width: 642px; margin: 48px auto 0; font-family: var(--inter); font-weight: 400; font-size: 24px; line-height: 32px; letter-spacing: -.24px; color: var(--ink);
}
.pm-system__note {
    margin-top: 65px; font-family: var(--lora); font-weight: 500; font-style: italic; font-size: 32px; line-height: 32px; letter-spacing: -.32px; color: var(--brown);
}

@media (max-width: 1100px) {
    .pm-system__title { font-size: 44px; }
    .pm-system__features { gap: 20px 40px; }
    .pm-system__features li { font-size: 19px; }
    .pm-system__icon { width: 38px; height: 38px; }
    .pm-system__text { font-size: 20px; line-height: 28px; }
    .pm-system__note { font-size: 24px; line-height: 30px; }
}

@media (max-width: 860px) {
    .pm-system { padding: 20px 0 24px; }   /* gore: panel → kartica = tackice 18 + 10 + 20 = 48 (Figma); dole: 1:1676 dno -> 1:1701 vrh = 48px */
    /* Figma 1:1676 — kartica 376×660; 1:1677 naslov Lora 32, sirina 296, y 40..122, prelom „I sve to u jednom / sistemu" */
    .pm-system__card { padding: 39px 24px 51px; }
    .pm-system__title { max-width: 296px; margin: 0 auto; font-size: 32px; }
    /* Figma 1:1678 — centrirana kolona, gap 24; stavka = ikonica 40×40, gap 8, natpis Inter 500 18/26 */
    .pm-system__features { flex-direction: column; align-items: center; gap: 24px; margin-top: 24px; }
    .pm-system__features li { flex-direction: column; gap: 8px; font-size: 18px; line-height: 26px; }
    .pm-system__icon { width: 40px; height: 40px; }
    /* Figma 1:1698 — Inter 16/24, sirina 292, 24px ispod stavki */
    .pm-system__text { max-width: 292px; margin: 24px auto 0; font-size: 16px; line-height: 24px; letter-spacing: -.16px; }
    /* Figma 1:1699 — Lora 500 italic 20/24, sirina 242, 3 reda; swoosh 1:1700 u sekciji 00 */
    .pm-system__note { max-width: 242px; margin: 24px auto 0; font-size: 20px; line-height: 24px; letter-spacing: -.2px; }
}

/* ==========================================================================
   15  IZABERITE SVOJ PROGRAM
   Figma 1:621, 1:622, 1:667
   ======================================================================= */
.pm-choose { padding: 60px 0 0; background: var(--cream); }
/* donji razmak sada nosi .pm-choose__sub (Figma 1:701) */
.pm-choose__title {
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: normal;
    letter-spacing: var(--track); color: var(--ink); text-align: center; margin: 0;
}
/* Figma 1:701 — kurzivni podnaslov izmedju naslova i kartica; naslov zato gubi
   svoj donji razmak (bio 56px), a ritam preuzima podnaslov: 24px gore, 80px dole. */
.pm-choose__sub {
    margin: 24px 0 80px;
    font-family: var(--lora); font-weight: 400; font-style: italic; font-size: 48px; line-height: 61px;
    letter-spacing: var(--track); color: var(--ink); text-align: center;
}
.pm-choose__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pm-choose__card {
    display: flex; flex-direction: column; padding: 23px; border: 1px solid var(--brown); border-radius: 48px; background: var(--cream);
}
.pm-choose__media {
    position: relative; aspect-ratio: 560 / 276; overflow: hidden; border-radius: 40px; background: var(--brown);
}
.philipova-page picture.pm-choose__photo { display: block; }
.pm-choose__photo { position: absolute; inset: 0; }
.pm-choose__photo img, img.pm-choose__photo {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 21%; display: block;   /* Figma 1:669: 30/144 */
}
/* Kartica 1 (Figma 1:624): foto 1132x849 na (0, -134.86) u okviru 560x276 —
   2,02x uvecana i priljubljena uz levu ivicu. */
.pm-choose__card:first-child .pm-choose__photo {
    inset: auto; left: 0; top: -48.86%; width: 202.14%; height: auto; aspect-ratio: 4 / 3;
}
.pm-choose__mockup { position: absolute; left: 14.1%; top: 1.4%; width: 71.8%; }
.philipova-page picture.pm-choose__mockup-img { display: block; }
.pm-choose__mockup-img { width: 100%; height: auto; display: block; }
.pm-choose__rating {
    position: absolute; left: 43.5%; bottom: 23.6%;
    display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 12px 0 9px;
    border-radius: 47px; background: #fff; box-shadow: 0 3px 3px rgba(0, 0, 0, .1); white-space: nowrap;
}
.pm-choose__rating-score {
    font-family: var(--inter); font-weight: 700; font-size: 14px; line-height: 1; color: var(--brown);
}
.pm-choose__rating-stars { width: 49px; height: 9px; display: block; }
.philipova-page picture.pm-choose__rating-logo { display: block; }
.pm-choose__rating-logo { width: 45px; height: auto; display: block; }
/* Figma 1:697 — ™ je 16x16 odmah posle „Philipova metoda" u nazivu kartice */
.pm-tm--choose img { width: 16px; height: 16px; }
.pm-choose__name {
    font-family: var(--lora); font-weight: 400; font-size: 40px; line-height: 1.2; letter-spacing: var(--track); color: var(--ink); margin: 24px 0 0;
}
.pm-choose__name em { font-weight: 700; font-style: italic; }
.pm-choose__text {
    margin-top: 24px; font-family: var(--inter); font-weight: 400; font-size: 18px; line-height: 25px; letter-spacing: -.18px; color: var(--ink);
}
.pm-choose__features { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 0; }
.pm-choose__features li {
    display: flex; align-items: center; gap: 8px; font-family: var(--inter); font-weight: 500; font-size: 20px; line-height: 26px; color: var(--brown);
}
.pm-choose__icon { width: 24px; height: 24px; flex: none; display: block; }
.pm-choose__btn { width: 96.25%; margin-top: auto; align-self: flex-start; }   /* Figma 1:661 — 539/560, levo poravnato */

@media (max-width: 1100px) {
    /* 15 / 19 */
    .pm-choose__title { font-size: 48px; }
    .pm-choose__name { font-size: 30px; margin-top: 36px; }
    .pm-choose__text { font-size: 16px; line-height: 23px; }
    .pm-choose__features li { font-size: 17px; }
}

@media (max-width: 860px) {
    /* ── 15 / 19: sve u jednu kolonu ── */
    .pm-choose { padding-top: 24px; }
    /* Figma 1:1124 — mobilni dizajn nema h2: posle kartice 14 (1:1676) odmah ide podnaslov 1:1701, 48px.
       h2 ostaje u DOM-u (SEO, čitači ekrana), samo je vizuelno sakriven. */
    .pm-choose__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    /* Figma 1:1701 — Lora Medium Italic 24, tracking -0.24, okvir 317 → 2 reda */
    .pm-choose__sub { font-size: 24px; line-height: 31px; font-weight: 500; letter-spacing: -.24px; max-width: 317px; margin: 0 auto 48px; }
    /* Figma 1:1702 / 1:1747 — kartica 376×618, rounded 32; foto okvir 1:1703 336×206 na 20px od spoljne ivice, rounded 24; razmak kartica 24 */
    .pm-choose__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .pm-choose__card { position: relative; z-index: 1; padding: min(19px, 4.32vw); border-radius: 32px; }   /* z-index: pozadina sekcije 16 krece 94px iznad svoje sekcije (v. 16) */
    .pm-choose__media { border-radius: 24px; aspect-ratio: 336 / 206; }
    /* Figma 1:1749 — kartica 2: slika 336×252 poravnata uz gornju ivicu okvira (kartica 1 ima height:auto, pa tu nema efekta) */
    .pm-choose__photo img, img.pm-choose__photo { object-position: 50% 0; }
    /* Figma 1:1704 / 1:1707 / 1:1708 — kartica 1: foto 707×530 na (-8,-161), mockup 291×194 na (22,6), Google pilula 112.7×21.5 */
    .pm-choose__card:first-child .pm-choose__photo { left: -2.38%; top: -78.22%; width: 210.42%; }
    .pm-choose__mockup { left: 6.55%; top: 2.91%; width: 86.61%; }
    .pm-choose__rating { height: 21.5px; gap: 6.5px; padding: 0 8.5px 0 6.5px; box-shadow: 0 2px 2px rgba(0, 0, 0, .1); }
    .pm-choose__rating-score { font-size: 10px; }
    .pm-choose__rating-stars { width: 35px; height: 6.5px; }
    .pm-choose__rating-logo { width: 32px; }
    /* <picture> Google loga je display:contents, pa je prazan <source> postajao flex item i dodavao još jedan gap (pilula 117.8 umesto 112.7) */
    .pm-choose__rating source { display: none; }
    /* Figma 1:1720 / 1:1721 / 1:1727 / 1:1777 — naziv Lora 26 normal (2 reda), ™ 12×12, tekst Inter 16/23 -0.16, stavke 18; ritam 20/12/12/20 */
    .pm-tm--choose img { width: 12px; height: 12px; }
    .pm-choose__name { font-size: 26px; line-height: normal; margin-top: 20px; max-width: 328px; }
    .pm-choose__text { font-size: 16px; line-height: 23px; letter-spacing: -.16px; margin-top: 12px; }
    .pm-choose__features { margin-top: 12px; }
    .pm-choose__features li { font-size: 18px; }
    .pm-choose__btn { width: 100%; }   /* mora ovde: .pm-btn--program{width:100%} u 860 bloku stoji RANIJE u fajlu */
}

/* Figma 1:1727 — stavke 18/26 staju u karticu do ~371px sirine; ispod toga treca
   („Dozivotan pristup programu") ide u 2 reda. Isti guard kao u sekciji 19. */
@media (max-width: 380px) {
    .pm-choose__features li { font-size: 16px; line-height: 24px; }
}

/* ==========================================================================
   16  NISTE SIGURNI — CF7 FORMA
   Figma 1:3 / 1:1626
   ======================================================================= */
.pm-form-sec { position: relative; padding: 120px 0 80px; overflow: hidden; background: var(--cream); }
.pm-form-sec__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.philipova-page picture.pm-form-sec__bg-img { display: block; }
.pm-form-sec__bg-img, .pm-form-sec__bg img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block;
}
/* Figma 1:5 + 1:6 — krem gašenje odozgo i odozdo */
.pm-form-sec__fade {
    position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none;
    background: linear-gradient(180deg, var(--cream) 0%, rgb(253 250 248 / 70%) 45%, rgb(253 250 248 / 70%) 62%, var(--cream) 100%);
}
.pm-form-sec__inner {
    position: relative; z-index: 2; display: grid; grid-template-columns: 42.26% 49.03%; justify-content: space-between; align-items: start;
}
.pm-form-sec__title {
    max-width: 524px; margin: 0;
    font-family: var(--lora); font-weight: 400; font-size: 64px; line-height: normal;
    letter-spacing: var(--track); color: var(--ink);
}
.pm-form-sec__text {
    max-width: 524px; margin-top: 32px; font-family: var(--inter); font-weight: 400; font-size: 24px; line-height: 32px; color: var(--ink);
}
.pm-form-sec__mail {
    display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; opacity: .85; text-decoration: none;
    font-family: var(--inter); font-weight: 700; font-size: 18px; line-height: 20px; color: var(--ink) !important;
}
.pm-form-sec__mail-icon { width: 22px; height: 22px; flex: none; display: block; }
#primary a.pm-form-sec__mail,
#primary a.pm-form-sec__mail:hover,
#primary a.pm-form-sec__mail:visited {
    color: var(--ink) !important;
}
.pm-form-sec__card { padding: 40px; border-radius: 48px; background: var(--cream); }
.pm-form-sec__card-title {
    font-family: var(--inter); font-weight: 500; font-size: 28px; line-height: 32px; color: var(--brown); margin: 0 0 20px;
}
/* .pm-form__grid je SPOLJNI omotač svih polja + dugmeta (v. ivx_philipova_cf7_form_template),
   ne jedan red — zato wrap i flex-basis po stavci, a ne jednaka podela. */
.pm-form .pm-form__grid { display: flex; flex-wrap: wrap; gap: 16px; }
.pm-form .pm-form__field { flex: 1 1 100%; min-width: 0; }
.pm-form .pm-form__field--half { flex: 1 1 calc(50% - 8px); }
.pm-form .pm-form__submit { flex: 1 1 100%; position: relative; }
/* CF7 renderuje <input type=submit> koji ne moze da nosi ikonu, a forma je vec
   sacuvana u bazi — strelica ide kao pseudo-element na omotacu. */
.pm-form .pm-form__submit::after {
    content: ""; position: absolute; left: 50%; bottom: 16px; width: 24px; height: 24px;
    margin-left: 68px; pointer-events: none; transform: rotate(180deg);
    background: url("../images/philipova/arrow-right.svg") center / contain no-repeat;
    filter: brightness(0) invert(1);
}
.pm-form input[type="text"],
.pm-form input[type="email"],
.pm-form input[type="tel"] {
    width: 100%; height: 56px; padding: 0 17px; box-sizing: border-box;
    border: 1px solid var(--brown); border-radius: 10px; background: var(--cream);
    font-family: var(--inter); font-weight: 400; font-size: 16px; line-height: 20px; color: var(--ink);
}
.pm-form input::placeholder { color: var(--ink); opacity: 1; }   /* opacity MORA ostati — Firefox default je .54 */
.pm-form input:focus { outline: 2px solid var(--brown); outline-offset: 1px; }
.pm-form .pm-form__submit { margin-top: 8px; }
/* uicore-global ima `.uicore-bl-styles input[type="submit"]{background:var(--uicore-primary-color)}`
   = (0,2,1), što tuče `.pm-form .pm-form__btn` (0,2,0) — dugme je ispadalo zeleno.
   Zato (0,3,1) sa dodatnim scope-om i `input`. */
.pm-form-sec .pm-form input.pm-form__btn {
    width: 100%; height: 48px; border: 0; border-radius: 10px; cursor: pointer;
    background: var(--brown); color: var(--cream);
    font-family: var(--inter); font-weight: 600; font-size: 15px; line-height: 16px;
    transition: background .2s ease, transform .2s ease;
}
.pm-form-sec .pm-form input.pm-form__btn:hover { background: #7B655F; transform: translateY(-2px); }
.pm-form .wpcf7-not-valid-tip { font-family: var(--inter); font-size: 13px; color: var(--red); margin-top: 6px; }
.pm-form .wpcf7-response-output {
    font-family: var(--inter); font-size: 14px; border-radius: 10px; margin: 16px 0 0; padding: 12px 16px;
}

@media (max-width: 1100px) {
    /* 16 */
    .pm-form-sec__title { font-size: 44px; }
    .pm-form-sec__text { font-size: 19px; line-height: 28px; }
    .pm-form-sec__card { padding: 28px; border-radius: 32px; }
    .pm-form-sec__card-title { font-size: 22px; }
    .pm-form input[type="text"],
.pm-form input[type="email"],
.pm-form input[type="tel"] { height: 48px; }
}

@media (max-width: 860px) {
    /* ── 16: kolone se slažu ── */
    /* Figma 1:1124 — 48px od kartice 2 (1:1747) do naslova 1:1594 i od kartice forme 1:1596 do naslova 17 (1:1781) */
    /* Figma 1:1581 — pozadina (foto + oba gasenja) pocinje 94px IZNAD sekcije, iza dna kartice 2
       sekcije 15, i pokriva 1070px. overflow:hidden → clip-path: pusta tacno 94px nagore, a dole i
       bocno sece kao ranije. z-index 0 zatvara stacking context; kartice 15 imaju z-index 1. */
    .pm-form-sec { padding: 48px 0; z-index: 0; overflow: visible; clip-path: inset(-94px 0 0 0); }
    .pm-form-sec__bg, .pm-form-sec__fade { top: -94px; }
    /* foto 1:1582 2048×1153 na (-286, 0) u tom okviru; preko nje dva tacna krem gasenja:
       1:1584 odozgo i 1:1583 odozdo (vidljivost fotografije t·(1−t), najvise 25% na sredini) */
    .pm-form-sec__bg-img, .pm-form-sec__bg img { height: 107.76%; object-position: 17.78% 0; transform: none; }
    .pm-form-sec__fade { background: linear-gradient(180deg, var(--cream), rgba(253, 250, 248, 0)), linear-gradient(0deg, var(--cream), rgba(253, 250, 248, 0)); }
    /* Figma 1:1594 / 1:1595 / 1:1585 — tekstualni blok centriran: naslov Lora 40 (w 354, 2 reda), tekst Inter 18/24 (w 360), mail 18; razmaci 24/24/48 */
    .pm-form-sec__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .pm-form-sec__col { text-align: center; }
    .pm-form-sec__title { font-size: min(40px, calc((100vw - 64px) / 8)); max-width: 354px; margin: 0 auto; }
    .pm-form-sec__text { font-size: 18px; line-height: 24px; max-width: 360px; margin: 24px auto 0; }
    .pm-form-sec__mail { display: flex; width: fit-content; margin: 24px auto 0; font-size: 18px; }
    .pm-form-sec__card { padding: 24px; border-radius: 24px; }
    /* Figma 1:1597–1:1619 — naslov kartice 328×32 (Inter 500 ~28px, u jednom redu), polja 328×56 u koraku 72, dugme 1:1620 na y516 → kartica 588.
       @1100 spušta polja na 48px, pa bi dugme bilo na y468 i kartica 540. */
    .pm-form-sec__card-title { font-size: min(28px, calc((100vw - 112px) / 11.4)); }
    .pm-form input[type="text"],
    .pm-form input[type="email"],
    .pm-form input[type="tel"] { height: 56px; }
    .pm-form .pm-form__field--half { flex: 1 1 100%; }
    /* Figma 1:1620 / 1:1621 — dugme 328×48, grupa „labela 123 + 4 + strelica 24" centrirana, strelica top 12; 24px do dna kartice.
       CF7 spinner (inline-block 24px) padao je u novi red, pa je ::after (bottom:16px) visio ispod dugmeta.
       Samo mobilni: ista izmena u baznom pravilu skraćuje desktop karticu 581 → 548 i pomera sekcije ispod. */
    .pm-form .pm-form__submit .wpcf7-spinner { position: absolute; top: 12px; left: 12px; margin: 0; }
    .pm-form .pm-form__submit::after { top: 12px; bottom: auto; margin-left: 51px; }
    .pm-form-sec .pm-form input.pm-form__btn { padding: 0 28px 0 0; }
}

/* ==========================================================================
   17  ŽELIMO DA BUDETE SIGURNI
   Figma 1:784, 1:785
   ======================================================================= */
.pm-sure { padding: 80px 0 40px; background: var(--cream); }
.pm-sure__title {
    max-width: 1000px; margin: 0 auto 56px;
    font-family: var(--lora); font-weight: 400; font-size: 80px; line-height: normal;
    letter-spacing: var(--track); color: var(--ink); text-align: center;
}
.pm-sure__cards { position: relative; max-width: 1132px; margin: 0 auto; min-height: 443px; }
.pm-sure__card {
    position: absolute; width: 53.36%; min-height: 303px;               /* 604 / 1132 */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 39px 48px; border: 1px solid var(--brown); border-radius: 32px; text-align: center;
}
.pm-sure__card p {
    font-family: var(--lora); font-weight: 400; font-size: 32px; line-height: 1.25; letter-spacing: var(--track); color: var(--ink); margin-top: 22px;
}
/* Tekst kartica se razlikuje između desktop (1:787/1:797) i mobilne Figme (1:1783/1:1793) */
.pm-sure__txt--mob { display: none; }
.pm-sure__card p em { font-style: italic; font-weight: 500; }
.pm-sure__card--no {
    left: 0; top: 0; background: rgba(253, 250, 248, .7); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pm-sure__card--no p { max-width: 395px; }
.pm-sure__card--yes { right: 0; top: 140px; z-index: 1; background: var(--cream); }
.pm-sure__card--yes p { max-width: 508px; }
.pm-sure__icon { width: 80px; height: 80px; display: block; }
.pm-sure__check {
    display: flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 16px; background: var(--green);
}
.pm-sure__check img { width: 44px; height: 44px; display: block; }
/* ── garancija: linija 1:801 + uslovi 1:802 + braon CTA 1:803 ── */
.pm-sure__guarantee {
    display: grid; grid-template-columns: 695fr 481fr; column-gap: 64px; align-items: start;   /* 695+64+481 = 1240 */
    margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--brown);
}
.pm-sure__terms { margin: 0; padding-left: 36px; }
.pm-sure__terms li {
    list-style: disc;
    font-family: var(--lora); font-weight: 400; font-size: 24px; line-height: 1.3;
    letter-spacing: var(--track); color: var(--ink);
}
.pm-sure__terms li + li { margin-top: 24px; }
.pm-sure__cta {
    min-height: 186px; border-radius: 24px; background: var(--brown);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px 25px; text-align: center;
}
.pm-sure__cta-title {
    margin: 0; font-family: var(--lora); font-weight: 400; font-size: 24px; line-height: 1.3;
    letter-spacing: var(--track); color: var(--cream);
}
.pm-sure .pm-sure__cta-text {
    margin: 0; font-family: var(--inter); font-weight: 400; font-size: 18px; line-height: 1.2;
    letter-spacing: var(--track); color: var(--cream);
}
.pm-sure__cta-btn {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    width: 370px; max-width: 100%; height: 48px; border-radius: 10px; background: var(--cream);
    font-family: var(--inter); font-weight: 600; font-size: 15px; line-height: 16px;
    color: var(--brown) !important; text-decoration: none; transition: background .2s ease, transform .2s ease;
}
.pm-sure__cta-btn:hover { background: #F1EAE3; transform: translateY(-2px); }
#primary a.pm-sure__cta-btn,
#primary a.pm-sure__cta-btn:hover,
#primary a.pm-sure__cta-btn:visited { color: var(--brown) !important; }
.pm-sure__cta-arrow {
    width: 24px; height: 24px; flex: none; transform: rotate(180deg);
    background: currentColor;
    -webkit-mask: url("../images/philipova/arrow-right.svg") center / contain no-repeat;
    mask: url("../images/philipova/arrow-right.svg") center / contain no-repeat;
}

@media (max-width: 1100px) {
    /* 17 */
    .pm-sure__title { font-size: 48px; }
    .pm-sure__card { padding: 28px 32px; min-height: 260px; }
    .pm-sure__card p { font-size: 24px; margin-top: 16px; }
    .pm-sure__cards { min-height: 380px; }
    .pm-sure__card--yes { top: 120px; }
    .pm-sure__icon { width: 60px; height: 60px; }
    .pm-sure__check { width: 54px; height: 54px; }
    .pm-sure__check img { width: 34px; height: 34px; }
    .pm-sure__guarantee { column-gap: 40px; margin-top: 48px; padding-top: 48px; }
    .pm-sure__terms li { font-size: 20px; }
}

@media (max-width: 860px) {
    .pm-sure__txt--desk { display: none; }
    .pm-sure__txt--mob { display: inline; }
    /* ── 17: kartice se slažu, bez preklapanja ── */
    /* Figma 1:1124 — naslov 17 je 48px ispod kartice forme (taj razmak nosi padding sekcije 16); CTA 1:1799 → FAQ 1:1808 = 48 */
    .pm-sure { padding: 0 0 48px; }
    /* Figma 1:1781 — Lora 32, prelom „Želimo da budete / sigurni u svoju odluku", 48 do kartica */
    .pm-sure__title { font-size: 32px; max-width: 300px; margin: 0 auto 48px; }
    /* Figma 1:1782 / 1:1792 — kartice 376 (201 / 232), razmak 20; ikonica 48 na y24, tekst Lora 24 normal na y84 (w 319) */
    .pm-sure__cards { min-height: 0; display: flex; flex-direction: column; gap: 20px; }
    .pm-sure__card { position: static; width: 100%; min-height: 0; padding: 23px 28px; }
    .pm-sure__card--yes { top: auto; }
    .pm-sure__card p { font-size: 24px; line-height: normal; margin-top: 12px; max-width: none; }
    .pm-sure__icon { width: 48px; height: 48px; }
    .pm-sure__check { width: 48px; height: 48px; border-radius: 12px; }
    .pm-sure__check img { width: 30px; height: 30px; }
    /* Figma 1:1797 — linija 376×1 koja se gasi ka krajevima (#8B726C 0 → pun na 50% → 0), 24 ispod kartice DA i 24 iznad uslova */
    .pm-sure__guarantee {
        grid-template-columns: minmax(0, 1fr); row-gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 0;
        background: linear-gradient(90deg, rgba(139, 114, 108, 0), #8B726C 50%, rgba(139, 114, 108, 0)) top / 100% 1px no-repeat;
    }
    /* Figma 1:1798 — li ms-[27px] (tekst na x59), Lora 18 leading normal, prazan pasus 23px između stavki */
    .pm-sure__terms { padding-left: 27px; }
    .pm-sure__terms li { font-size: 18px; line-height: normal; }
    .pm-sure__terms li + li { margin-top: 23px; }
    /* Figma 1:1799–1:1802 — CTA 376×203: naslov Lora 24 (y24), tekst Inter 18 normal w 279 u 2 reda (y71), dugme 260×48 centrirano; razmaci 16 */
    .pm-sure__cta { min-height: 0; padding: 24px 20px; gap: 16px; }
    .pm-sure__cta-title { font-size: 24px; line-height: normal; }
    .pm-sure .pm-sure__cta-text { font-size: 18px; line-height: 1.21; max-width: 279px; }   /* Figma „normal" za Inter 18 = 21.78px; Chrome normal daje 21 */
    .pm-sure__cta-btn { width: 260px; }
}

/* ==========================================================================
   18  FAQ
   Figma 1:702 — ivapix/faq-accordion
   ======================================================================= */
.pm-faq { position: relative; padding: 110px 0 120px; overflow: hidden; background: #E6CBC2; }
.pm-faq::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    /* CSS pozadine ne prolaze kroz ivx_picture(), pa .webp mora rucno preko
       image-set() — inace se servira 346K JPG umesto 258K webp-a. type() bira
       browser; stariji bez podrske padnu na jpg iz drugog unosa. */
    background: url("../images/philipova/faq-wall.jpg") center / cover no-repeat;
    background-image: -webkit-image-set(url("../images/philipova/faq-wall.webp") type("image/webp"), url("../images/philipova/faq-wall.jpg") type("image/jpeg"));
    background-image: image-set(url("../images/philipova/faq-wall.webp") type("image/webp"), url("../images/philipova/faq-wall.jpg") type("image/jpeg"));
}
/* Braon sloj + GASENJE NA IVICAMA. Bez ovoga tamna traka pocinje i zavrsava se
   rezom: krem -> #8B726C (delta 411) i #8B726C -> pesak (delta 322) — najgrublja
   dva prelaza na stranici. Gradijenti stoje IZNAD braon tinta (prvi u listi je
   najgornji sloj) ali ISPOD sadrzaja (.pm-wrap je z-index 1), pa ne diraju tekst.
   Gore 96px: naslov pocinje na 110px pa je vec u punoj braon boji.
   Dole 110px: zavrsava u rgb(233,220,206) = vrh sekcije 19 posle nove pozadine (ranije #EDE3D9) — to je STVARNA renderovana boja vrha sekcije
   19 (--sand + fotografija na 45%), ne cist --sand; sa cistim sand-om ostaje step. */
.pm-faq::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background:
        /* ⚠️ SVE STANICE U px. Bilo je „.55 42% → 0 96px": stanica u % (≈430px) je veća od
           sledeće u px, browser ih poravna na 42% i ceo gornji deo (i donjih 45%) bude ispran —
           zid se video samo kao traka u sredini. Sad je gašenje samo na ivicama. */
        linear-gradient(180deg, var(--cream) 0, rgba(253, 250, 248, .55) 40px, rgba(253, 250, 248, 0) 96px),
        linear-gradient(0deg, rgb(233, 220, 206) 0, rgba(233, 220, 206, .55) 48px, rgba(233, 220, 206, 0) 110px),
        rgba(139, 114, 108, .7);
}
.pm-faq .pm-wrap { position: relative; z-index: 1; }
.pm-faq__title {
    font-family: var(--lora); font-weight: 700; font-style: italic; font-size: 160px; line-height: 1;
    letter-spacing: -1.296px; color: var(--cream); text-align: center; margin: 0 0 44px;
}
.pm-faq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 80px; }
/* Podloga je sada TAMNA, pa child style.css:2133 (`h4.faq-title{color:#fff!important}`)
   zapravo odgovara — ali se svejedno postavlja eksplicitno zbog jasnoće. */
.pm-faq .faq-item { border-bottom: 1px solid rgba(253, 250, 248, .35); margin-bottom: 0; }
.pm-faq .faq-title {
    font-family: var(--inter); font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -1.296px; color: var(--cream) !important; margin: 0;
}
.pm-faq .faq-title strong { font-weight: 500 !important; color: var(--cream) !important; }
.pm-faq .faq-question { padding: 26px 0; gap: 40px; }
/* Figma 1:702 — svih 6 linija u obe kolone je na istom y (411/510/609/708/806/905):
   korak reda je uvek 99px bez obzira da li je pitanje u jednom ili dva reda. Zato
   red dobija fiksnu visinu umesto vertikalnog padding-a. Ograniceno na >=997px jer
   ispod toga deljeni style.css gazi .faq-question padding sa !important i tamo
   ritam ionako nije 99px. 98px + 1px border na .faq-item = tacno 99px. */
@media (min-width: 997px) {
    .pm-faq .faq-question { min-height: 98px; padding: 8px 0; }
}
.pm-faq .faq-icon img { width: 40px; height: 40px; }
.pm-faq .faq-answer-inner {
    font-family: var(--inter); font-size: 17px; line-height: 28px; color: var(--cream); padding-bottom: 24px; opacity: .88;
}
.pm-faq .faq-answer-inner p { color: var(--cream); margin-bottom: 0; }
.pm-faq .faq-answer-inner p + p { margin-top: 16px; }

@media (max-width: 860px) {
    /* 10 / 12 / 18 */
    .pm-faq { padding: 48px 0 48px; }   /* Figma 1:1811 — naslov na y48; od poslednje linije do dna 48 (1147 -> 1195) */
    /* Figma 1:1808 — ravno braon od vrha do dna, TVRDE ivice (sav krem → braon postoji i u dizajnu).
       Ranija gasenja 64/46px su ispirala vrh iza naslova i pravila mrlju iznad sekcije 19;
       klijent trazi da pozadina pokrije celu sekciju sa naslovom. */
    .pm-faq::after { background: rgba(139, 114, 108, .7); }
    .pm-faq__title { font-size: 80px; line-height: normal; margin-bottom: 51px; }   /* Figma 1:1811 — Lora Bold Italic 80, okvir 102; lista 1:1812 na y201 */
    .pm-faq__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* Figma 1:1814 — Inter Medium 20 (velicinu daje style.css h4.faq-title 20px!important), tracking -1.296, 2 reda = 48 */
    .pm-faq .faq-title { letter-spacing: -1.296px; line-height: 24px; }
    /* Figma 1:1812 — kolona gap 16: red / 16 / linija 1px puna krem (1:1818) / 16; prvi red bez gornjeg paddinga.
       !important gazi style.css (@media 996) .faq-question 14px 0 0 i .faq-item padding-bottom 20px; 15 + 1px border = 16 */
    .pm-faq .faq-item { padding-bottom: 0 !important; border-bottom-color: var(--cream); }
    .pm-faq .faq-question { padding: 16px 0 15px !important; gap: 20px; }
    .pm-faq .faq-accordion:first-child .faq-item:first-child .faq-question { padding-top: 0 !important; }
    /* Figma 1:1815 — plus 40x40; (0,2,2)!important gazi style.css span.faq-icon img 20px!important */
    .pm-faq span.faq-icon img { width: 40px !important; height: 40px !important; }
    .pm-faq .faq-answer-inner { font-size: 15px; line-height: 24px; }
}

/* ==========================================================================
   19  PRICING
   Figma 1:812, 1:928, 1:943
   ======================================================================= */
.pm-price { position: relative; padding: 80px 0 110px; overflow: hidden; background: var(--sand); }
/* Figma 1:813 — slika (izvor 1448x1086, ISTI kao price-bg.jpg; veći ne postoji) je u Figmi razvučena
   na 3905px u okviru od 1920, sidrena LEVO i pomerena 505px nagore: vidi se samo levi, skoro
   jednobojni bež deo. Ranije je bila `cover` + blur + 45% providnosti — centar slike, pa se video
   pikselizovan detalj (beba). Okvir je visok kao sekcija i širok 203.39% (3905/1920); cover +
   object-position 57.6% po visini daje Figmin vertikalni isečak (505 od 2929) i uvek pokriva sekciju. */
.pm-price__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.philipova-page picture.pm-price__bg-img { display: block; }
.pm-price__bg-img, .pm-price__bg img {
    position: absolute; left: 0; top: 0; width: 203.39%; height: 100%; max-width: none;
    object-fit: cover; object-position: 0 57.6%; display: block;
}
.pm-price__inner { position: relative; z-index: 1; }
.pm-price__title, .pm-price__outro {
    max-width: 1191px; margin: 0 auto;
    font-family: var(--lora); font-weight: 400; font-size: 64px; line-height: normal;
    letter-spacing: var(--track); color: var(--ink); text-align: center;
}
.pm-price__outro { margin-top: 64px; }
.pm-price__sub {
    margin: 64px 0 64px; font-family: var(--lora); font-weight: 500; font-style: italic; font-size: 48px; line-height: 1.2; letter-spacing: -.48px; color: var(--ink); text-align: center;
}
.pm-price__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pm-price__card {
    display: flex; flex-direction: column; align-items: center; padding: 48px; border-radius: 48px; background: rgba(253, 250, 248, .5); text-align: center;
}
.pm-price__card--dark { background: var(--brown); }
.pm-price__brand {
    font-family: var(--lora); font-weight: 400; font-size: 40px; line-height: normal; letter-spacing: var(--track); color: var(--ink);
}
.pm-price__ornament { width: 332px; max-width: 100%; height: auto; display: block; margin: 8px 0 20px; }
.pm-price__plan {
    max-width: 377px; font-family: var(--lora); font-weight: 400; font-size: 56px; line-height: normal; letter-spacing: var(--track); color: var(--ink); margin: 0;
}
.pm-price__tick {
    display: block; align-self: flex-start; width: 40px; height: 1px; margin: 20px 0 0; background: var(--ink);
}
.pm-price__text {
    margin-top: 16px; font-family: var(--inter); font-weight: 400; font-size: 20px; line-height: 27px; color: var(--ink); text-align: left;
}
.pm-price__features { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; align-self: flex-start; }
.pm-price__features li {
    display: flex; align-items: center; gap: 8px; font-family: var(--inter); font-weight: 500; font-size: 20px; line-height: 26px; color: var(--brown);
}
.pm-price__icon { width: 24px; height: 24px; flex: none; display: block; }
/* Figma 1:928 (514x343 na rel. 50,549 u kartici 608x1033) i 1:943 (524x332 na
   rel. 38,542) — mockup je prakticno pune sirine sadrzajnog boksa (608 - 2x48 = 512).
   Pilula 1:931 / 1:949 je 199x38, sa levom ivicom na ~45% sirine mockupa. */
.pm-price__mockup { position: relative; width: 100%; margin: -8px 0 -36px; }
.philipova-page picture.pm-price__mockup-img { display: block; }
.pm-price__mockup-img { width: 100%; height: auto; display: block; }
.pm-price__rating {
    position: absolute; left: 45.4%; bottom: 21%;
    display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px 0 11px;
    border-radius: 47px; background: #fff; box-shadow: 0 3px 3px rgba(0, 0, 0, .1); white-space: nowrap;
}
.pm-price__rating-score {
    font-family: var(--inter); font-weight: 700; font-size: 18px; line-height: 1; color: var(--brown);
}
.pm-price__rating-stars { width: 63px; height: 11px; display: block; }
.philipova-page picture.pm-price__rating-logo { display: block; }
.pm-price__rating-logo { width: 57px; height: auto; display: block; }
.pm-price__amount {
    margin: auto 0 20px; font-family: var(--lora); font-weight: 400; font-size: 48px; line-height: normal; letter-spacing: var(--track); color: var(--ink);
}
.pm-price__btn { width: 370px; max-width: 100%; border-radius: 10px; }
/* razmak cena->dugme nosi .pm-price__amount (20px, Figma 917->937); bez ovoga
   se na njega dodaje jos 28px iz .pm-btn--program i kartica naraste za 28px. */
.pm-price .pm-price__btn { margin-top: 0; }
/* tamna kartica — sve u krem */
.pm-price__card--dark .pm-price__brand,
.pm-price__card--dark .pm-price__plan,
.pm-price__card--dark .pm-price__text,
.pm-price__card--dark .pm-price__amount {
    color: var(--cream);
}
.pm-price__card--dark .pm-price__features li { color: var(--cream); }
.pm-price__card--dark .pm-price__tick { background: var(--cream); }
/* `#primary a.pm-btn{color:#FDFAF8!important}` je (1,1,1) — da bi invert dugme
   dobilo braon tekst, treba (1,2,1): ID + dve klase + element. Bez `.pm-btn`
   u selektoru natpis ostaje krem na krem, tj. nevidljiv. */
#primary a.pm-btn.pm-price__btn--invert,
#primary a.pm-btn.pm-price__btn--invert:hover,
#primary a.pm-btn.pm-price__btn--invert:visited,
#primary a.pm-btn.pm-price__btn--invert .pm-btn__label {
    color: var(--brown) !important;
}
.pm-price__btn--invert::after {
    filter: brightness(0) saturate(100%) invert(48%) sepia(9%) saturate(755%) hue-rotate(329deg) brightness(94%) contrast(88%);
}
.pm-price__trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 72px 0 0; }
/* Figma 1:895 — sva cetiri natpisa pocinju na istom y, a ikonice su razlicitih
   visina (95/122/96/112). Fiksan slot od 122px (najvisa ikonica) sa centriranjem
   u njemu izjednacava natpise; `align-content: start` je obavezan, bez njega se
   `auto` red rastegne i natpisi se opet raziđu. Razmak 6px = Figma 1886 - 1758 - 122. */
.pm-price__trust li {
    display: grid; grid-template-rows: 122px auto; align-content: start;
    align-items: center; justify-items: center; row-gap: 6px;
    text-align: center; font-family: var(--inter); font-weight: 700; font-size: 24px; line-height: 27px; color: var(--ink);
}
.pm-price__trust-icon { display: block; width: auto; height: auto; max-width: 100%; object-fit: contain; }
/* :where() drzi (0,1,0) — inace (0,3,1) probije @media 1100/860 i mobilne
   ikonice ostanu na desktop velicinama. */
:where(.pm-price__trust li:nth-child(1)) .pm-price__trust-icon { width: 95px;  height: 95px; }
:where(.pm-price__trust li:nth-child(2)) .pm-price__trust-icon { width: 122px; height: 122px; }
:where(.pm-price__trust li:nth-child(3)) .pm-price__trust-icon { width: 96px;  height: 96px; }
:where(.pm-price__trust li:nth-child(4)) .pm-price__trust-icon { width: 122px; height: 112px; }

@media (max-width: 1100px) {
    .pm-price__title, .pm-price__outro { font-size: 44px; }
    .pm-price__sub { font-size: 32px; }
    .pm-price__card { padding: 32px; }
    .pm-price__brand { font-size: 30px; }
    .pm-price__plan { font-size: 38px; }
    .pm-price__text, .pm-price__features li { font-size: 17px; line-height: 24px; }
    .pm-price__amount { font-size: 38px; padding-top: 32px; }
    .pm-price__trust li { font-size: 18px; grid-template-rows: auto auto; row-gap: 20px; }   /* ispod 1100 su sve ikonice iste visine */
    .pm-price__trust-icon { width: 68px; height: 68px; }
}

@media (max-width: 860px) {
    .pm-price { padding: 48px 0 48px; }   /* Figma 1:1995 naslov na y48; poslednji trust natpis 2190 -> dno 2238 */
    .pm-price__title { font-size: 32px; text-align: left; }   /* Figma 1:1995 — Lora 32, levo, 4 reda */
    .pm-price__outro { font-size: 24px; margin-top: 48px; }   /* Figma 1:1997 — Lora 24, centrirano, 2 reda, 48 ispod kartice */
    .pm-price__sub { font-size: 24px; line-height: normal; letter-spacing: -.24px; text-align: left; margin: 16px 0 48px; }   /* Figma 1:1996 — Lora Medium Italic 24, levo; kartica 1:1889 na y338 */
    .pm-price__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }   /* Figma 1:1889 y338 h694 -> 1:1942 y1080 */
    .pm-price__card { padding: 24px 20px; border-radius: 24px; }   /* Figma 1:1889 — rounded 24, brend y24, dugme -> dno 24 */
    .pm-price__brand { font-size: 24px; }
    /* Figma 1:1889 — na mobilnom brend (x=24) i ornament (x=220, w=132) stoje u
       ISTOM redu, a naslov plana je levo poravnat; na desktopu (1:812) su slozeni
       i centrirani, zato je sve zakljucano u ovaj media blok. */
    .pm-price__card { display: grid; grid-template-columns: 1fr auto; align-items: center; }
    /* :where() drzi (0,1,0) — bez njega bi :not() digao specificnost na (0,3,0).
       "sve osim brenda i ornamenta" da nova deca kartice (npr. .pm-price__mockup)
       automatski idu preko obe kolone. */
    .pm-price__card > :where(:not(.pm-price__brand, .pm-price__ornament)) { grid-column: 1 / -1; }
    .pm-price__brand { text-align: left; padding-left: 4px; }   /* Figma 1:1890 — brend x24, stavke/mockup/dugme x20 */
    .pm-price__brand .pm-tm img { width: 14px; height: 14px; }   /* Figma 1:1891 / 1:1991 — ™ 14x14; (0,2,1) gazi .pm-tm--price img */
    /* SVG je 332x20 sa preserveAspectRatio="none": width:132 + height:auto spljosti
       zvezdicu na 8x8. object-fit:none crta artwork u prirodnoj velicini i isece
       centralnih 132px, pa zvezdica ostaje 20x20. */
    .pm-price__ornament { width: 132px; height: 20px; margin: 0 4px 0 0; object-fit: none; object-position: center; }   /* Figma 1:1895 — x220 w132 */
    /* Figma 1:1899 — Lora 32, levo, x24 w328; tamna 1:1948 ima tracking -2px */
    .pm-price__plan { font-size: 32px; text-align: left; max-width: none; margin-top: 24px; }
    .pm-price__card--dark .pm-price__plan { letter-spacing: -2px; }
    .pm-price__plan, .pm-price__text { padding-inline: 4px; }
    /* Figma 1:1889 / 1:1942 — mobilni nema crticu izmedju plana i opisa: plan (kraj 120) -> opis 1:1900 (y140) = 20 */
    .pm-price__tick { display: none; }
    .pm-price__text { font-size: 16px; line-height: 24px; margin-top: 20px; }
    .pm-price__card--dark .pm-price__text { letter-spacing: -1px; }   /* Figma 1:1949 — tracking -1, 4 reda */
    /* Figma 1:1901 — Inter Medium 18/26, gap 12, na y256 */
    .pm-price__features { margin-top: 20px; }
    .pm-price__features li { font-size: 18px; line-height: 26px; text-align: left; }
    /* Figma 1:1920 mockup na y352; cena 1:1935 Lora 40 na 547 (29px preko mockupa), dugme 1:1936 na 622 */
    .pm-price__mockup { margin: -6px 0 -29px; }
    .pm-price__amount { font-size: 40px; padding-top: 0; margin-bottom: 24px; }
    /* Figma 1:1974 — tamni mockup 345.65x230.4 (kartica 1 je 336x224); transform ne menja layout */
    .pm-price__card--dark .pm-price__mockup-img { transform: scale(1.029); transform-origin: 0 0; }
    /* Figma 1:1923 / 1:1975 — pilula 125.66x24 na (170,498) / (183,502); .63 = 18px -> 11.3px, zvezdice 63 -> 39.7 */
    .pm-price__rating { bottom: 24%; transform: scale(.63); transform-origin: 0 100%; }
    .pm-price__card--dark .pm-price__rating { left: 48.5%; bottom: 22.3%; }
    .pm-price__btn { width: 100%; }
    /* Figma 1:2000–1:2015 — ikonice 64 / 72 / 54 / 64x59, natpisi Inter Bold 18/21 u 2 reda (sirina 130, 4. je 169),
       redovi na 36px, 48 ispod outro-a */
    .pm-price__trust { grid-template-columns: repeat(2, minmax(0, 172px)); justify-content: center; gap: 36px 0; margin-top: 48px; }
    .pm-price__trust li { font-size: 18px; line-height: 21px; grid-template-rows: 72px auto; row-gap: 4px; }
    .pm-price__trust li:nth-child(n+3) { grid-template-rows: 59px auto; }
    .pm-price__trust span { max-width: 130px; }
    .pm-price__trust li:last-child span { max-width: none; margin-inline: -8px; }
    .pm-price__trust-icon { width: 56px; height: 56px; }
    /* :where pravila MORAJU ici posle generickog 56px (ista specificnost (0,1,0) — odlucuje redosled) */
    :where(.pm-price__trust li:nth-child(1)) .pm-price__trust-icon { width: 64px; height: 64px; }
    :where(.pm-price__trust li:nth-child(2)) .pm-price__trust-icon { width: 72px; height: 72px; }
    :where(.pm-price__trust li:nth-child(3)) .pm-price__trust-icon { width: 54px; height: 54px; }
    :where(.pm-price__trust li:nth-child(4)) .pm-price__trust-icon { width: 64px; height: 59px; }
    /* Figma 1:1887 / 1:1888 / 1:1886 — isti asset kao price-bg.jpg, bez opacity i blur-a: 1242x930 sidreno levo,
       drugi pojas (930–1860) ogledalski (-scale-y), treci ponovo uspravan. Desktop zadrzava <img> sa blur-om. */
    .pm-price__bg {
        opacity: 1;
        background-image: url("../images/philipova/price-bg.jpg");
        background-image: image-set(url("../images/philipova/price-bg.webp") type("image/webp"), url("../images/philipova/price-bg.jpg") type("image/jpeg"));
        background-position: 0 0; background-size: 1242px 930px; background-repeat: repeat-y;
    }
    .pm-price__bg::before {
        content: ""; position: absolute; left: 0; right: 0; top: 930px; height: 930px;
        background-image: url("../images/philipova/price-bg.jpg");
        background-image: image-set(url("../images/philipova/price-bg.webp") type("image/webp"), url("../images/philipova/price-bg.jpg") type("image/jpeg"));
        background-position: 0 0; background-size: 1242px 930px; background-repeat: no-repeat;
        transform: scaleY(-1);
    }
    .pm-price .pm-price__bg img { display: none; }   /* (0,2,1) gazi .pm-price__bg img; lazy jpg se na mobilnom ne ucitava */
}
/* Figma nema frejm uzi od 440: ispod ~430px brend sa ™ (min-content ~186px) vise ne staje pored ornamenta
   i prelama se u 2 reda — ornament ide u svoj red ispod brenda. 429 (ne 420): na 421–429 kolona je < 186px. */
@media (max-width: 429px) {
    .pm-price__card { grid-template-columns: minmax(0, 1fr); }
    .pm-price__ornament { justify-self: start; margin-top: 8px; }
}
/* Figma 1:1901 — 18px stavke staju u 336px do ~380px; ispod toga treca („Dozivotan pristup programu") ide u 2 reda */
@media (max-width: 380px) {
    .pm-price__features li { font-size: 16px; line-height: 24px; }
}