/* Paketi: a printed price list, then two halves to compare. */

/* ============ hero: the price list, figures huge and flush to the grid ============ */
.pl{align-items:end;padding:112px 0 clamp(100px,10vw,170px)}
.pl-h{grid-column:m 1/m 9;grid-row:1;--span:8;--fmax:190px;line-height:.98}
.pl-ph{grid-column:m 9/m-end;grid-row:1;aspect-ratio:3/4;overflow:hidden;background:var(--band)}
.pl-list{grid-column:m 1/m-end;grid-row:2;margin-top:clamp(40px,5vw,90px)}
.pl-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;padding:clamp(24px,2.8vw,44px) 0}
.pl-row+.pl-row{margin-top:clamp(6px,1vw,16px)}
.pl-l{grid-column:1/7;padding-bottom:.3em;min-width:0}
.pl-n{display:flex;flex-wrap:wrap;align-items:center;gap:.25em .45em;font-weight:700;font-size:clamp(24px,2.3vw,38px);letter-spacing:-.006em;line-height:1.1}
.pl-n .chip{font-size:.5em}
.pl-d{margin-top:.7em;font-size:var(--body);line-height:1.5}
.pl-x{margin-top:.7em;font-size:var(--body);line-height:1.5;max-width:30em}
.pl-p{grid-column:7/13;justify-self:end;padding-right:.06em;font-weight:800;font-size:clamp(64px,8.6vw,150px);letter-spacing:-.015em;line-height:.84;white-space:nowrap}
.pl-tbc .pl-p{font-size:clamp(20px,2vw,32px);letter-spacing:-.015em;line-height:1}
.pl-tbc .chip-xl{font-size:1em;padding:.36em .9em .42em .74em;white-space:normal}
@media (max-width:899px){
  .pl{padding-top:96px;align-items:start}
  .pl-h{grid-column:m 1/m 8;--span:7;--spanm:7;--fmaxm:90px;align-self:end}
  .pl-ph{grid-column:m 8/m-end}
  .pl-row{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px 0}
  .pl-p{font-size:clamp(64px,19vw,96px);justify-self:start}
  .pl-tbc .pl-p{font-size:19px}
}

/* ============ Uporedite: two halves, each with its own celebration ============ */
.cm{background:var(--band);padding:clamp(100px,10vw,170px) 0 clamp(90px,9vw,150px)}
.cm-head{align-items:end;padding-bottom:clamp(36px,4vw,64px)}
.cm-h{grid-column:1/7;--span:6;--fmax:190px;line-height:.98}
.cm-i{grid-column:7/12;font-size:var(--body);font-weight:500;padding-bottom:.4em;max-width:27em}
.cm-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gut);align-items:stretch;padding-inline:max(var(--mar), calc((100% - var(--maxw)) / 2));}
.cm-half{min-width:0;padding-bottom:40px;background:#fff}
.cm-sel{display:flex;flex-wrap:wrap;gap:8px;padding:22px clamp(18px,2.4vw,40px)}
.cm-sel button{height:46px;padding:0 17px;border-radius:999px;background:var(--band);font-size:15.5px;font-weight:600;transition:background-color .25s,color .25s}
.cm-sel button:hover{background:var(--band2)}
.cm-sel button[aria-pressed="true"]{background:var(--red);color:#fff}
.cm-ph{position:relative}
.cm-tr{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;outline-offset:-4px}
.cm-tr::-webkit-scrollbar{display:none}
.cm-sl{position:relative;flex:0 0 100%;aspect-ratio:4/5;scroll-snap-align:start;overflow:hidden;background:var(--band)}
.cm-sl picture{position:absolute;inset:0}
.cm-arw{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}
.cm-arw button{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.96);color:var(--ink);box-shadow:0 10px 26px -12px rgba(15,15,15,.5);transition:transform .3s var(--e2)}
.cm-arw button:hover{transform:scale(1.06)}
.cm-arw svg{width:20px;height:20px}
.cm-info{padding:28px clamp(18px,2.4vw,40px) 0}
.cm-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px}
.cm-name{font-weight:800;font-size:clamp(30px,2.8vw,48px);letter-spacing:-.01em;line-height:1}
.cm-price{padding-right:.06em;font-weight:800;font-size:clamp(56px,5.6vw,96px);letter-spacing:-.015em;line-height:.84;white-space:nowrap}
.cm-tbc{font-size:16px;letter-spacing:0;line-height:1;margin-bottom:6px}
.cm-list{margin-top:22px;font-size:17px;line-height:1.5}
.cm-plus{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px;font-size:16px}
.cm-x{margin-top:14px;font-size:16px;line-height:1.5;color:var(--ink2)}
.cm-info .btn{margin-top:26px}
.cm-p.enter-a{animation:cmA 1.05s var(--e1) both}
.cm-p.enter-b{animation:cmB 1.05s var(--e1) both}
@keyframes cmA{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes cmB{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:899px){
  .cm-h{grid-column:1/-1;--span:12;--fmaxm:96px}
  .cm-i{grid-column:1/-1;margin-top:18px}
  .cm-grid{display:block;padding-inline:0}
  .cm-half+.cm-half{margin-top:12px}
  .cm-sel{padding:18px var(--mar)}
  .cm-sel button{height:44px;padding:0 14px;font-size:15px}
  .cm-tr{gap:8px;padding:0 var(--mar);scroll-padding:0 var(--mar)}
  .cm-sl{flex-basis:86%}
  .cm-arw{right:calc(var(--mar) + 8px)}
  .cm-info{padding:24px var(--mar) 0}
  .cm-info .btn{width:100%}
}

/* ============ Kako ide: the process as one paragraph ============ */
.ki{padding:clamp(110px,11vw,180px) 0 clamp(60px,6vw,110px)}
.ki-h{grid-column:1/-1;font-weight:600;font-size:clamp(18px,1.5vw,24px);margin-bottom:.9em}
.ki-p{padding-right:.12em;grid-column:1/12;font-weight:500;font-size:clamp(30px,3.8vw,64px);letter-spacing:-.006em;line-height:1.14;color:var(--mute);text-wrap:pretty}
.ki-p b{font-weight:800;color:var(--ink)}
@media (max-width:899px){
  .ki-p{grid-column:1/-1;font-size:clamp(27px,7.6vw,34px);line-height:1.18}
}

/* ============ Pitali ste: an interview, every answer open ============ */
.iv{padding:clamp(60px,6vw,110px) 0 clamp(110px,11vw,180px);align-items:start}
.iv-h{grid-column:m 1/m 8;grid-row:1;--span:7;--fmax:170px;line-height:.98}
.iv-sub{grid-column:m 9/m-end;grid-row:1;align-self:end;font-size:var(--body);font-weight:500;padding-bottom:.5em}
.iv-ph{grid-column:full-start/m 6;grid-row:2;aspect-ratio:3/4;overflow:hidden;background:var(--band);margin-top:clamp(56px,6vw,104px)}
.iv-list{grid-column:m 7/m-end;grid-row:2;display:flex;flex-direction:column;gap:clamp(44px,4.4vw,76px);margin:clamp(56px,6vw,104px) 0 0}
.iv-qa dt{font-weight:700;font-size:clamp(26px,2.5vw,42px);letter-spacing:-.006em;line-height:1.1}
.iv-qa dd{margin:.55em 0 0;font-size:clamp(18px,1.4vw,22px);line-height:1.5;max-width:28em}
@media (max-width:899px){
  .iv-h,.iv-sub{grid-column:m 1/m-end}
  .iv-h{--span:12;--fmaxm:90px}
  .iv-sub{grid-row:2;margin-top:18px}
  .iv-ph{grid-column:full-start/full-end;grid-row:3;margin-top:36px}
  .iv-list{grid-column:m 1/m-end;grid-row:4;gap:40px;margin-top:44px}
}