/* /free and /hr/besplatni-alati, round 5. Portal components from site.css and portal.css, only what they lack is here. No lime. */
.fr-block,#checks,#more,#preview{scroll-margin-top:70px}
#social{display:block;scroll-margin-top:70px}

/* hero: the page's own picker of the five tools */
.fr-hero{min-height:0;padding-bottom:clamp(24px,3vw,40px)}
.fr-lk{font-size:clamp(24px,2.6vw,34px);margin-bottom:14px}
.fr-hero .h1{font-size:clamp(58px,9vw,132px)}
.fr-lead{color:#fff;font-size:clamp(21px,2.3vw,32px);line-height:1.22;letter-spacing:-.022em;margin-top:6px;text-wrap:balance}
.fr-sub{color:#D4D9CF;font-size:clamp(16px,1.3vw,18px);line-height:1.4;margin-top:10px;text-wrap:balance}
.fr-jump{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:min(960px,100%);margin:clamp(24px,3vw,40px) auto 0}
.fr-t{display:grid;justify-items:center;gap:8px;min-width:0;padding:6px 6px 10px;border-radius:12px;color:inherit;text-decoration:none;background:rgba(243,245,240,.05);box-shadow:inset 0 0 0 1px rgba(243,245,240,.14);transition:background .2s,box-shadow .2s,transform .2s;scroll-snap-align:center}
.fr-t:hover{transform:translateY(-2px);background:linear-gradient(135deg,rgba(142,111,192,.62),rgba(94,134,184,.48) 55%,rgba(111,181,156,.5));box-shadow:inset 0 0 0 1.5px var(--chalk)}
.fr-t:focus-visible{outline:2px solid var(--chalk);outline-offset:2px}
.fr-th{display:grid;place-items:center;width:100%;aspect-ratio:16/9;border-radius:8px;background:#0B0C0B;overflow:hidden}
.fr-th img{display:block;width:100%;height:100%;object-fit:contain}
.fr-t .lk{font-size:clamp(13px,1.1vw,15px);white-space:nowrap;letter-spacing:-.04em;margin:0}
@media(max-width:900px){.fr-hero .ct{grid-template-columns:minmax(0,1fr);width:100%}.fr-jump{display:flex;overflow-x:auto;justify-self:stretch;min-width:0;width:auto;margin-inline:calc(var(--gut)*-1);padding:2px var(--gut);scroll-snap-type:x proximity;scrollbar-width:none}.fr-jump::-webkit-scrollbar{display:none}.fr-t{flex:0 0 clamp(120px,33vw,170px)}}

/* a tool block */
.sec.fr-block{padding-block:clamp(14px,2vw,26px)}
.fr-block .center .lk,.fr-tl{font-size:clamp(24px,2.6vw,34px)!important;margin-bottom:10px!important}
.fr-block .center .h2{font-size:clamp(32px,4.2vw,58px);text-wrap:balance}
.fr-block .center .lead{max-width:34em;margin-inline:auto;text-wrap:balance;font-size:clamp(16px,1.4vw,19px)}
@media(max-width:720px){.fr-block .tryframe{padding:22px 8px 8px}.fr-block .center{padding-inline:10px}}
@media(min-width:961px){.fr-block .stage{position:sticky;top:74px;align-self:start}.fr-block .stage canvas.art{max-height:calc(100svh - 190px);width:auto;max-width:100%;margin-inline:auto}}

/* check your brand */
.sec.fr-sec{padding-block:clamp(56px,8vw,120px) clamp(20px,3vw,40px)}
.fr-sec .h1{font-size:clamp(42px,6vw,88px)}
.fr-checks{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:clamp(26px,3.4vw,48px)}
.fr-card{display:flex;flex-direction:column;align-items:center;min-width:0;padding:clamp(14px,1.5vw,20px) clamp(14px,1.5vw,20px) clamp(18px,2vw,26px);border-radius:var(--r3);text-align:center;background:radial-gradient(90% 55% at 10% 0,rgba(142,111,192,.34),transparent 70%),radial-gradient(80% 60% at 100% 100%,rgba(111,181,156,.26),transparent 70%),radial-gradient(60% 40% at 90% 0,rgba(94,134,184,.22),transparent 70%),#1B1F22;box-shadow:inset 0 0 0 1px rgba(203,182,236,.24);transition:box-shadow .25s,transform .25s}
.fr-card:hover{box-shadow:inset 0 0 0 1px rgba(243,245,240,.42),0 40px 90px -40px rgba(142,111,192,.8)}
.fr-card .qtag{margin:clamp(16px,1.8vw,22px) 0 10px}
.fr-card h3{font-weight:500;font-size:clamp(23px,2vw,28px);line-height:1.16;letter-spacing:-.03em;color:#fff;padding-bottom:.08em;margin:0;text-wrap:balance}
.fr-facts{display:grid;gap:10px;margin:14px 0 18px;padding:0 6px;font-size:15px;line-height:1.35;width:100%}
.fr-facts div{display:grid;gap:1px}
.fr-facts dt{font-weight:600;color:#fff}
.fr-facts dd{margin:0;color:#D4D9CF;text-wrap:balance}
.fr-card .btn{margin-top:auto;width:100%;white-space:normal}
.fr-panel{grid-column:1/-1;min-width:0}
.fr-panel[hidden]{display:none}
.fr-tool{display:block;width:100%;height:560px;min-height:280px;border:0;background:transparent}

/* the example result shows the outcome before anyone starts. Words stay left, it reads like a real report */
.fr-ex{display:flex;flex-direction:column;justify-content:center;gap:9px;width:100%;min-height:208px;padding:14px 16px;border-radius:16px;background:rgba(11,12,11,.62);box-shadow:inset 0 0 0 1px rgba(243,245,240,.1),0 18px 44px -18px rgba(0,0,0,.7);font-size:14px;line-height:1.35;text-align:left;color:var(--chalk)}
.fr-ex small{display:block;font-size:13px;color:#C9CEC4;line-height:1.3}
.fr-ex p{margin:0}
.fr-score{display:flex;align-items:baseline;gap:6px;line-height:1.12}
.fr-score b,.fr-count b{font-family:Geist,Manrope,sans-serif;font-weight:500;letter-spacing:-.03em;background:linear-gradient(120deg,#cbb6ec,#9fb9dc 50%,#a4dcc4);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.fr-score b{font-size:42px}
.fr-score span{font-size:16px;color:#C9CEC4}
.fr-bars,.fr-fix,.fr-rows{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.fr-bars li{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:10px}
.fr-bars i{display:block;height:6px;border-radius:6px;background:rgba(243,245,240,.14);overflow:hidden}
.fr-bars i::after{content:"";display:block;height:100%;width:var(--w);border-radius:6px;background:var(--chalk)}
.fr-video{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:center}
.fr-frame{position:relative;aspect-ratio:16/10;border-radius:10px;background:radial-gradient(120% 90% at 10% 0,rgba(142,111,192,.6),transparent 70%),radial-gradient(100% 90% at 100% 100%,rgba(111,181,156,.5),transparent 70%),#1A1D1A}
.fr-frame .pl{left:50%;bottom:50%;transform:translate(-50%,50%)}
.fr-fix li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:4px}
.fr-fix b{font-family:Geist,Manrope,sans-serif;font-weight:500;color:#C9CEC4}
.fr-count{display:flex;align-items:baseline;gap:8px;line-height:1.15}
.fr-count b{font-size:30px}
.fr-rows li{display:flex;justify-content:space-between;gap:12px}
.fr-rows b{font-weight:500;white-space:nowrap}
.fr-rows .yes{color:#C9CEC4}
.fr-rows .no{color:#fff;font-weight:600}

/* more tools: real cards */
.fr-more{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:clamp(24px,3vw,40px)}
.fr-m{display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(20px,2.2vw,30px);border-radius:var(--r3);text-align:center;color:inherit;text-decoration:none;background:radial-gradient(120% 70% at 12% 0,rgba(142,111,192,.22),transparent 70%),radial-gradient(100% 70% at 100% 100%,rgba(111,181,156,.16),transparent 70%),rgba(28,32,34,.8);box-shadow:inset 0 0 0 1px rgba(203,182,236,.2);transition:box-shadow .25s,transform .25s}
.fr-m:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(243,245,240,.45),0 30px 70px -32px rgba(142,111,192,.9)}
.fr-m .pico{margin-bottom:8px}
.fr-m h3{font-weight:500;font-size:clamp(21px,1.8vw,25px);line-height:1.16;letter-spacing:-.028em;padding-bottom:.08em;margin:0;color:#fff}
.fr-m p{font-size:16px;line-height:1.36;color:#E2E6DD;text-wrap:balance;margin:0}
.fr-m small{font-size:14px;line-height:1.35;color:#C9CEC4;text-wrap:balance;margin-bottom:10px}
.fr-m .btn{margin-top:auto}
.fr-m:hover .btn{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
.fr-cost{margin-top:12px;padding-block:clamp(26px,3.4vw,44px)}
.fr-cost .h3{font-size:clamp(28px,3vw,42px)}
.fr-cost .lead{max-width:28em;text-wrap:balance}
.fr-cost .btn{min-width:220px}
.fr-calc{width:100%;margin-top:clamp(14px,2vw,24px);text-align:left}
.fr-calc[hidden]{display:none}
.fr-calc .stage{position:static;order:0;text-align:center}
.fr-calc .grp label{display:flex;justify-content:space-between;gap:12px;text-align:left}
.fr-calc .mini div{display:grid;justify-items:center;gap:2px}
.fr-calc .mini span{display:block}
.fr-calc input[type=range]{accent-color:#F3F5F0;width:100%}

/* close */
.sec.fr-close{padding-block:clamp(40px,6vw,90px) clamp(70px,9vw,130px)}
.fr-close .h1{font-size:clamp(38px,6vw,84px);text-wrap:balance}
.fr-close .spot{margin:10px 0 0;font-size:14px;color:#E2E6DD;display:inline-flex;align-items:center;gap:8px}
.fr-close .spot i{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#cbb6ec,#a4dcc4)}

@media(min-width:961px){
  .fr-checks{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .fr-card{order:1}
  .fr-panel{order:2}
  .fr-card h3{min-height:3.5em}
  .fr-facts{min-height:128px;align-content:start}
  .fr-more{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}
/* the example video frame: a small play button, the global .pl rule made it a black box */
.fr-frame .pl{position:absolute;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:26px;height:26px;aspect-ratio:auto;border-radius:50%;background:#F3F5F0}
.fr-frame .pl::after{content:"";position:absolute;left:10px;top:7px;border-left:9px solid #0B0C0B;border-top:6px solid transparent;border-bottom:6px solid transparent}