/* Ported from kicksta.co/reviews custom code */
/* embed 1 */
body{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* embed 2 */
@media screen and (min-width: 992px) and (max-width: 1150px) {
.nav-brand { margin-right: 2rem; }
.nav-menu-links { grid-column-gap: 1rem; }
.nav-buttons-wrapper { grid-column-gap: 1rem; }
.nav-menu-inner { grid-column-gap: 1rem; }
}
/* embed 3 */
/* embed 4 */
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
-webkit-text-fill-color: var(--neutral--neutral-white);
-webkit-box-shadow: 0 0 0rem 0rem transparent inset;
transition: background-color 5000s ease-in-out 0s;
}
.select-toggle.w--open { border-color: var(--neutral--neutral-white); }
/* Stack pricing plans vertically on tablet + mobile (≤991px) — kills x-scroll */
/* embed 5 */
/* Trigger animations on .button-link when .nav-dropdown-link-blog-card-link is hovered */
/* embed 6 */
/* embed 7 */
/* Desktop Fluid Style */
/*
@media screen and (min-width: 2900px) {
html { font-size: calc(0.625rem + 0.41666666666666663vw); }
.container { max-width: 2300px; }
}
@media screen and (max-width: 2899px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
@media screen and (max-width: 1920px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
@media screen and (max-width: 1440px) { html { font-size: calc(0.5872384937238494rem + 0.41841004184100417vw); } }
@media screen and (max-width: 991px) { html { font-size: 16px; } }
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.w-richtext .w-embed,
.w-embed {
margin-bottom: 0 !important;
}
/* Nav Link Padding - START */
/* Nav Link Padding - END */
.faq-rich-text ul {
list-style: none;
padding: 0;
margin: 0;
}
.faq-rich-text ul li {
display: flex;
align-items: center;
gap: 0.5rem;
}
.faq-rich-text ul li::before {
content: "";
flex-shrink: 0;
width: 0.4375rem;
height: 0.4375rem;
background-color: currentColor;
border-radius: 50%;
display: inline-block;
}
.faq-rich-text > ul:last-child {
margin-bottom: 0rem !important;
}
/* Button Animation - START */
.button,
[data-wf--cta-button---primary--variant="green"] {
transition-delay: 0.25s;
}
.button-fill::before {
height: 3rem;
width: 3rem;
min-height: 3rem;
min-width: 3rem;
background: var(--brand--green);
border-radius: 100vw;
content: "";
display: block;
z-index: 3;
position: absolute;
right: 0;
transition: width .8s cubic-bezier(0.62, 0.05, 0.01, 0.99);
}
[data-wf--cta-button---primary--variant="green"] .button-fill::before {
background: var(--neutral--neutral-white);
}
[data-wf--cta-button---primary--variant="dark-small"] .button-fill::before {
height: 2.25rem;
width: 2.25rem;
min-height: 2.25rem;
min-width: 2.25rem;
}
@media screen and (min-width: 992px) {
.button:hover .button-fill::before {
width: 100%;
}
.button:hover {
color: var(--neutral--neutral-black);
}
}
@media screen and (max-width: 767px) {
.button-fill::before {
height: 2.25rem;
width: 2.25rem;
min-height: 2.25rem;
min-width: 2.25rem;
}
}
/* Button Animation - END */
/* Button Variant Animation - START*/
/* Button Variant Animation - END*/
/* Button Link Animation - START */
/* Button Link Animation - END */
/* Arrow Animation - START */
/* Arrow Animation - END */
/* Footer Social Media Link Animation - START */
/* Footer Social Media Link Animation - END */
/* Submit Button Animation - START */
/* Submit Button Animation - END */
/* Pricing Package */
/* ⛔ BOTH OF THESE ARE DEAD, AND ARE KEPT ONLY SO THE NEXT READER DOES NOT TRUST THEM.
⑫ below sets `.pricing-tooltip-holder { width: min(19rem, 100%) !important }` with no media
query, so it wins at EVERY width — measured: the holder computes to `min(304px, 100%)` at 1024
(inside the first range) and at 340 (inside the second). Neither 17.625rem nor 13.75rem is ever
applied. They are original site CSS, so they are left in place rather than deleted: if ⑫ is
ever removed these are the fallback it replaced, and `min(19rem, 100%)` is deliberately
responsive in a way the two fixed widths were not. */
/* ── Pricing block restyle · 2026-09-15 ──────────────────────────────────────
ONE JOB PER COLOUR. blue = action (CTAs, nothing else) · green = included /
affirmative · near-black = structure · grey = hierarchy · no red in this block.
Pre-change backup: marketing/kicksta-website/css-embed-backup-2026-09-15.css
───────────────────────────────────────────────────────────────────────── */
/* ㉒ CTA COLOUR REVERTED TO THE SITE'S OWN BLACK + GREEN (Igor, 2026-09-16), WIDTH KEPT.
`justify-self: start` is the whole rule now, and it is the one thing from the blue redesign
Igor asked to keep: the card is display:grid and the button was stretching to the full column,
which is what made the CTAs run full-bleed. Everything else — the blue fill, the tinted
Advanced variant, the cancelled hover sweep, the shadows — is lifted out verbatim into
`marketing/kicksta-website/pricing-blue-cta.css`, which is paste-ready and documents why each
rule exists. Re-implementing the blue design is one paste, right here.
⚠️ Removing the `transition` shorthand also restores the site's INHERITED transition, which is
what the hover sweep needs; the white-text-on-mouse-out bug that forced the sweep to be
cancelled was caused by that shorthand and cannot occur without it.
⚠️ BOTH CTAs are black + green again, so Growth and Advanced are once more visually identical.
That undoes Igor's original point 2 ("the Advanced plan CTA should be greyed out a bit") — it is
his call and it is recorded here so the next session does not "fix" it back. */
/* ㉞ …AND NOT FULL-BLEED ON THE PHONE EITHER (Igor, 2026-09-17: "let's make the CTA not 100%
width on mobile as well"). Below 768px Webflow's own breakpoint style puts `min-width: 100%` on
the button, and **min-width beats width** — so `justify-self: start` above, and any `width`
value, were being floored at the full column and the button ran edge to edge.
BOTH declarations are required and neither is sufficient: `min-width: 0` lifts the floor but a
block-level grid item with `width: auto` still fills its area (measured: still 314px), and
`width: max-content` alone is overruled by the 100% floor. Together: 208px inside a 358px card.
`max-width: 100%` is the guard — the label is localised, and a longer one must wrap inside the
card rather than push out of it.
⚠️ SCOPED TO <768 ON PURPOSE. At 768 the button already measures 220px of a 672px card, so the
tablet layout is not broken and is left alone.
⚠️ THIS COULD NOT BE MEASURED UNTIL TRANSITIONS WERE DISABLED. `.button` carries a transition,
and in headless the animation clock is frozen, so every probe returned the pre-change width —
including one where an inline `display: inline-block !important` still computed as `block`. Four
candidate fixes read as "does nothing" before the instrument itself was checked. Inject
`*{transition:none !important}` before measuring anything on this button. */
/* ㉟ THE PRICE IS BIGGER AND SITS CLOSER TO THE PARAGRAPH, ON PHONES (Igor, 2026-09-17:
"the spacing between paragraph and price is odd on mobile — maybe increase the price font size
a bit, and also reduce space to some extent").
The gap was 48px and only 28px of it was the card's row-gap. The other 20px is a `padding-top`
on `.column`, the wrapper each block of the card sits in — so the measured gap between the
paragraph's last line and the price was row-gap PLUS that padding, and trimming the row-gap
alone would have moved it by less than half. Dropping the column padding takes it to a clean 28,
which is the same rhythm the rest of the card already uses.
⚠️ It also lifts the plan pill by 20px, since the first column loses the same padding. That is
wanted — the card reads tighter overall — but it is the reason this is scoped to phones rather
than applied everywhere.
The price goes 32px -> 40px. The struck list price stays at 22px on purpose: the two are
bottom-aligned in a flex row (measured, both bottoms at the same y before and after), and the
gap between them IS the hierarchy — growing both would flatten it again. */
@media only screen and (min-width: 1085px) {
/* ④ "Stroke oko growth-a se clipuje". Measured: the card's left edge sat at EXACTLY 0px from
the pane edge, so the 6px halo had nowhere to render. Nothing had overflow:hidden — the card
was simply flush. Half a rem of room lets the halo land. */
}
/* ① "Spacing ispod cene prevelik, dugme predaleko" — measured 48px between the billing line and
the button, which is the card's own row-gap applied to every row. */
/* The suggested plan has to read as suggested at a glance. */
/* The suggested-plan badge: 🔥 + label, in the top-right corner. */
/* Prices. The struck list price is HIERARCHY, not an error — it stays (critical brand-truth fact
and an SEO must-survive string) but stops being red and stops competing at 36px. */
/* Excluded features. The cross is an inline SVG with a HARDCODED fill="#EF4444",
so no class rule can reach it — it needs an attribute selector. */
/* ③ "Drugacija animacija/ponasanje na dugmicima na planovima i ispod njih" — the plan CTAs no
longer sweep, so the Compare-plans buttons below were the only ones that still did. Same
treatment, so the two blocks behave alike. Their COLOUR is deliberately left alone. */
/* ⑩ COMPARE PLANS — the dead band under the heading.
`.compare-pricing-header` is position:sticky with `padding-top: 60px`, and that padding sits
ABOVE its white background child — so it is transparent dead space that content scrolls
through, not part of the sticky cover. Measured at 390px: 114px between "Kickstart your
Instagram growth today." and the GROWTH / ADVANCED pills, most of it this. */
/* ㉖ LESS HEIGHT (Igor, twice). The band was 192px at >=992 because the header box carries 32px
padding top and bottom plus a 32px gap between the plan pill and the Get Started button. First
trimmed to 20/20 with a 12px gap (band 148, header 172), then to 12/12 with an 8px gap:
band 128, header 152. Mobile is untouched (66px, no button). */
/* ㉙ A SOFT BOTTOM EDGE (Igor: "give this nav just a small fade effect at the bottom border").
The header is opaque so that rows cannot show through it, which also means rows are cut dead
straight at its bottom edge as they scroll under. A short white-to-transparent gradient hung off
`top: 100%` softens that cut without the header losing its cover.
`pointer-events: none` is not optional — it sits over the first feature row, and this session
already shipped one invisible box that quietly swallowed clicks (see ㉘). */
/* ㉗ THE GREEN CAP DRIFTED A COLUMN WHEN THE HEADING LEFT ITS ROW.
That row auto-places its children, and it had four: heading, empty, highlight cap, empty. Move
the heading into the header and only three remain, so they take columns 1-3 and the cap lands
under the label column instead of under Growth — measured at 1440: cap at x 454, Growth column
at x 772. Pinning it from the END of the grid works at both shapes without naming an index:
the highlight column is the second from the right whether the grid has four columns (desktop)
or three (mobile), and `-3 / -2` is that column in both. */
/* ⑪ TOOLTIPS BESIDE THE FEATURE NAME (choobie: "move the question mark inline next to the
feature text, make it an info button"). Both lists pinned the ? to the far right edge, so it
read as a column of its own rather than as part of the label it explains:
· compare rows are flex with justify-content: space-between — measured, the label ended at
195px and the ? sat at 350px;
· card rows are grid `1.5rem 1fr 1.5rem`, and the 1fr ate all the slack.
⚠️ The CARD half of this was later overruled by Igor — see ⑸. Compare plans keeps it. */
/* ⑫ …AND THE BUBBLE HAD TO BE RE-ANCHORED, BECAUSE ⑪ CROPPED IT (Igor, reported on mobile).
The bubble was hard-anchored to hang LEFTWARD off the `?`: `left: -270px; right: -10px` on the
compare tooltip, `left: -220px` on the card one. That geometry only worked while the `?` was
pinned to the far right of the row, where 270px of leftward room existed. Moving the `?` next to
the label took that room away — measured, the compare bubble's left edge landed at x = -67 on a
425px viewport, so the first words were off-screen.
Anchor it to the feature ROW instead of to the `?`: the row is on-screen by definition, so the
bubble cannot leave the viewport at any width, and `min(19rem, 100%)` keeps it from exceeding
the row on a narrow phone. The wrapper has to go position:static or it stays the containing
block and the box collapses to the 24px `?`.
⚠️ The arrow now centres on the BUBBLE rather than pointing at the `?` — the two cannot both be
true, since the arrow lives inside the bubble. Not cropped won over pointing.
⚠️ A resting tooltip is scale(0), so getBoundingClientRect reads 0 and a check on it is
vacuously green — these were measured with offsetLeft/offsetWidth, which are layout values. */
/* The saving belongs where the choice is made. Deliberately a ::after: pseudo-element content is
NOT part of textContent, so el_text stays exactly "Monthly"/"Quarterly"/"Yearly" and the live
tab-index-vs-label check in validate/pricing-component.js keeps all 15,084 of its labelled rows.
Quantity queries, not plain nth-child: the Mo/Yr variant on /lp/get-started has only TWO tabs,
where nth-child(2) is Yearly — a flat rule would have labelled it −20%. */
.pricing-tabs-menu .pricing-tab-link {
display: inline-flex;
align-items: center;
}
/* ⑤ (third pass) EQUAL-WIDTH TABS — and this is the pass that found the actual cause.
Passes 1 and 2 were both measured at DESKTOP, where they hold: 160/160/160 at identical x in
all three states. Igor was looking at a PHONE. Two things only happen below 768px:
· `min-width: 10rem` was gated to >=768px, so the tabs fell back to content width, and
· Quarterly carries a second Webflow class, `.highlight-pricing-tab-link`, whose mobile
breakpoint style is `padding: 12px 32px` against the others' `12px 16px`.
Measured at 390px: 89.2 / 181.4 / 126.6 = 397px inside a 358px menu (Monthly's left edge sat at
-3.6px, i.e. clipped), and selecting Quarterly dropped it 181.4 -> 149.4 because the w--current
padding override was the ONLY thing equalising padding — so the pill resized AND shoved the row
16px sideways. That is the movement being reported.
Fixed structurally instead of by clearance: the menu is a grid whose columns are all 1fr, so
every tab is the width of the widest one whatever the count (the /lp/get-started variant has
two tabs) and whatever the text. Padding is equalised on ALL tabs, not just the selected one. */
.pricing-tabs-menu {
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
.pricing-tabs-menu .pricing-tab-link,
.pricing-tabs-menu .pricing-tab-link.w--current {
min-width: 0;
justify-content: center;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.pricing-tabs-menu .pricing-tab-link:nth-child(2):nth-last-child(2)::after { content: "−20%"; }
.pricing-tabs-menu .pricing-tab-link:nth-child(3):nth-last-child(1)::after { content: "−40%"; }
.pricing-tabs-menu .pricing-tab-link:nth-child(2):nth-last-child(1)::after { content: "−40%"; }
.pricing-tabs-menu .pricing-tab-link::after {
margin-left: 0.5rem;
padding: 0.1875rem 0.5rem;
border-radius: 100vw;
background: rgba(0, 221, 131, 0.22);
color: #07734a;
font-size: 0.6875rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: 0.01em;
}
/* ㉝ THE SELECTED TAB STAYS BLACK — A LIGHT ONE WAS TRIED AND REJECTED (Igor, 2026-09-16:
"I dislike the color schema now, keep the toggle black, but leave 'most popular' as is").
㉚ had stepped BOTH the tab and the badge down to tints, on the reasoning that three near-black
objects above the fold meant nothing read as the primary action. Half of that survives: the
BADGE keeps its tint. The tab does not. Recorded so the next session does not "fix" it back —
the light tab is not an oversight, it was seen and turned down.
There is no rule here at all now: deleting it hands `.w--current` back to Webflow's own class
style, which is where the black came from in the first place.
⚠️ THE PILL HAD TO COME BACK WITH IT. ㉚ had switched this to the green tint because green on a
light tab is what reads; on a black tab that same pill is #07734a on near-black — dark on dark.
The two are a pair: whichever way the tab goes, the pill follows, or one of them is unreadable. */
/* On the selected (dark) tab a saturated green pill shouts; a translucent one reads as part of
the control, which is the reference treatment. */
.pricing-tabs-menu .pricing-tab-link.w--current::after {
background: rgba(255, 255, 255, 0.18);
color: var(--neutral--neutral-white);
}
/* ㉜ ⚠️ THIS BLOCK LIVES HERE, AFTER THE BASE RULES, AND THAT POSITION IS THE POINT.
It used to sit ABOVE them, which meant the mobile pill styling was fighting a LATER base rule
for the same properties and won only because every line carries `!important`. Source order was
backwards from the intent: delete one `!important` and mobile silently reverted to desktop
metrics, with nothing to show for it. A media query has no extra specificity — it beats a base
rule by coming after it, or not at all. Now it does, so the `!important` flags are belt-and-
braces against Webflow's own class styles rather than load-bearing against my own CSS. */
@media only screen and (max-width: 767px) {
.pricing-tabs-menu {
width: 100%;
}
/* ⑱ SLIM, ONE LINE — stacking the pill under the label was rejected on sight (Igor:
"really horrible, needs to be inline/slim"). It was only ever there because label + pill at
full size did not fit: 65px of label plus a 46px pill against ~101px of room at 390px.
Shrinking BOTH so they fit is the better trade — measured 107x38 at 360px and 117x38 at
390px, no tab or menu overflow, against 68.5px tall when stacked. Nearly half the height. */
.pricing-tabs-menu .pricing-tab-link,
.pricing-tabs-menu .pricing-tab-link.w--current {
flex-direction: row !important;
row-gap: 0 !important;
padding: 0.625rem 0.375rem !important;
font-size: 0.875rem !important;
}
.pricing-tabs-menu .pricing-tab-link::after {
margin-left: 0.25rem !important;
font-size: 0.5625rem !important;
padding: 0.125rem 0.3125rem !important;
}
}
/* ── Round 5 · 2026-09-16 · Igor, from a phone ───────────────────────────────────────────
Three reports plus one defect of my own found while fixing them.
────────────────────────────────────────────────────────────────────────────── */
/* ⑬ SUPERSEDED BY ⑱ — kept as a note because the reasoning is the useful part.
While the pill stacked UNDER the label, the pill-less tab's label sat 12px lower than the
others (208px vs 196px), so it got a hidden pill of identical metrics to pad the line box.
`content: ""` was not enough — an empty string collapses the line box and left a 7px error;
only a real string with `visibility: hidden` reserves a matching box.
Once the pill went back INLINE the problem dissolved: in a row every label is centred by
`align-items: center` regardless of whether its tab has a pill, so the spacer would now add
dead width and push the label off-centre. Removed rather than kept. */
/* ⑭ "Tooltips go full right on pricing/mobile" — and the cause was ⑪'s own fix.
`minmax(0, max-content)` gives the label column its natural width UNTIL the label needs to
wrap; past that it takes the whole column and the ? is pushed to the far edge. Measured at
360px: a one-line row put the ? 8px after the text, a two-line row put it **182px** away.
⚠️ The inline treatment this produced was then overruled for the CARDS — see ⑸ — but the
trailing-
rule below outlived it and is still needed. */
/* Twelve labels end with a TRAILING
in the Webflow content. It adds an empty line to the
label's box, which shows up as uneven row heights. `:last-child` hits only the trailing break,
so the 5 deliberate mid-label breaks are left alone. */
/* ⑸ AND IGOR OVERRULED IT: on the PLAN CARDS the ? is right-aligned in its own column.
choobie asked for inline and ⑭ delivered it, but inline means the icon lands wherever the text
happens to end, so a list of ten features gets ten different x positions — "the icons are
really misaligned". A fixed right-hand column is the tidier read on a narrow card, and it is
what the original grid did before ⑭.
⚠️ The COMPARE-PLANS list keeps the inline treatment from ⑪. The two lists now differ on
purpose: a compare row is one label across a wide table, a card row is one of ten stacked in a
~314px column. Igor scoped this to "main pricing cards".
`align-items: start` is what fixes the other half of the complaint — ⑭ had pinned the check
icon to the row's top with `position: absolute`, so on a two-line label it floated above the
text. Measured after: both the check and the ? sit within 1px of the FIRST line's centre on
every row, single- and multi-line alike. */
/* ㉔ "FEATURES INCLUDED" NOW LIVES INSIDE THE STICKY HEADER (Igor: "needs to be inside sticky
as well"), which also fixes the two sticky bugs the old approach was causing.
⛔ THIS RULE REQUIRES THE DESIGNER MOVE. The heading element was moved in Webflow out of
`.compare-pricing-row.no-border` and into `.compare-pricing-header`. Without that move these
selectors match nothing and the heading falls back to its own row below the header.
What this replaces, and why the old way was wrong — both defects confirmed by measurement at
1440, and both visible in Igor's screenshots:
· the lifted row does NOT contain only the heading. It also holds
`.compare-pricing-box.first-highlight-plan`, the green column's rounded top cap
(rgba(0,221,131,0.2), 318x18 at 1440). The negative margin dragged that into the header
band at z-index 12 — i.e. ON TOP of the header — which is the pale green block sitting
behind the Get Started buttons.
· a lifted row is not sticky, so on scroll it detached from the header it was pretending to
be part of.
Moving the node deletes the lift, the negative margins, the three per-breakpoint band heights
and the z-index fight in one go, and hands the green cap back to the row it belongs to.
⚠️ IT IS NESTED INSIDE `.bg-neutral-white`, NOT APPENDED TO THE HEADER, AND THAT MATTERS.
Pinning it to the header's own grid with `grid-row/column: 1` does not OVERLAY the label column
— it TAKES that cell, so `.bg-neutral-white` is displaced into column 2, every plan box shifts
one place right and the last one wraps onto a second row. Measured at 1440: the header grew
from 216px to 408px. Nesting it inside the element that already owns the cell inherits that
cell's box exactly, at every breakpoint, and displaces nothing. */
/* ㉘ BELOW 768px THE WHITE COVER SPANS ALL THREE COLUMNS, SO THE HEADING MUST NOT.
`.bg-neutral-white` is the label column alone at >=768px but spans the full width below it —
so `height: 100%` on the heading made an INVISIBLE box across the entire header. It looked
perfect and it sat on top of both plan pills: `elementFromPoint` at each pill's centre returned
`compare-pricing-feature`, not the pill. Nothing was hidden, but anything interactive under it
was unreachable. The mobile grid is three equal columns (measured identical at 360/480/767), so
a third of the cover is exactly the label column. */
/* ㉕ The compare table's crosses were still red. They are NOT the `circle[fill="#EF4444"]` the
cards use — they are `.icon-l.text-red` with `fill: currentColor`, which computes to
rgb(255, 0, 90). An attribute selector finds zero of them; only `color` moves them. Two
mechanisms for the same mark in the same design, which is why the first pass missed these. */
/* ⑯ MY BUG, FOUND WHILE CHECKING THE ABOVE: a CSS `content:` string CANNOT BE LOCALISED, and
this site has two more locales. `/es/pricing` and `/pt/pricing` serve the same classes, so the
badge I added in round 1 was rendering "Most popular" in ENGLISH on both. The saving pills are
safe — "−20%" is numeric — but any pseudo-element carrying WORDS needs one rule per locale.
⚠️ Treat this as the rule, not the incident: do not put copy in `content:` without checking
`html[lang]`. Translations are pending Igor's confirmation. */
/* ㉛ …AND THREE MORE LOCALES I MISSED THE FIRST TIME. /de, /fr and /it were skipped because the
rollout script's comment calls them "English-section pages with no pricing page of their own"
— true of ROUTING, false of CONTENT. Measured: html[lang] is de/fr/it and their billing tabs
read Monatlich|Vierteljährlich|Jährlich, Mensuel|Trimestriel|Annuel and
Mensile|Trimestrale|Annuale, so the badge was rendering ENGLISH beside fully translated labels.
⚠️ THE REAL FIX IS STRUCTURAL: copy in `content:` can never be localised, so every new locale
silently inherits English until someone notices. Moving the string into the Webflow ELEMENT
(which Webflow localises natively) removes the whole class of bug. Recorded as the follow-up.
⚠️ ALL FIVE TRANSLATIONS ARE UNCONFIRMED — they need a native speaker, not me. */
/* embed 8 */
/* embed 9 */
.vimeo-pp-btn{
position :absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition:transform .15s ease, background .15s ease, opacity .25s ease;
}
.vimeo-pp-btn:active{
transform:translate(-50%,-50%) scale(.92);
}
.vimeo-pp-btn.hidden{
opacity: 0;
pointer-events: none;
}
/* embed 10 */
/* embed 11 */
@media (min-width: 768px) {
/* Na tablet i desktopu: dropdown uvek otvoren, bez JS */
}