/* Stelar · Apple Watch layout (watchOS WebKit with disabled-adaptations=watch) Loaded only via media="(max-width: 240px)"; every rule is also inside the same query, so phones, tablets and desktop never see any of it. New names use the "aw-" prefix. */ @media (max-width:240px){ /* ---------- base ---------- */ html{scroll-padding-top:60px;scroll-behavior:auto} body{font-size:16px;line-height:1.45;overflow-x:hidden} .wrap{padding:0 10px!important;max-width:none!important} /* ---------- motion off (same as the site's own reduced-motion mode) ---------- */ .cinx,#intro{display:none!important} #nav *,#top *,.foot2 *{animation:none!important;transition:none!important} #top .rv,#top .split .wi,#top .cc .rc,.foot2 .rv, html.hz:not(.hg) #nav .nav__in>*, html.hz:not(.hg) .hero h1 .wi{opacity:1!important;transform:none!important;filter:none!important} html.hz .hero h1{transform:none!important} #top .sweep{display:none!important} /* ---------- top bar ---------- */ #nav{position:sticky;top:0} #nav .nav__in{display:flex;align-items:center;justify-content:space-between;gap:6px;height:auto;min-height:52px;padding:4px 8px!important} #nav .nav__links,#nav .progress,#nav .nav__right>.btn{display:none!important} #nav .logo{min-height:44px} #nav .logo img{height:20px;transform:none!important} #nav .nav__right{display:flex;gap:0} .lang{display:inline-flex} .lang button{min-width:44px;min-height:44px;font-size:14px;padding:0 6px} /* ---------- what is hidden on the watch ---------- */ #top>.sdv,body>.sdv, #oricine,#de-ce,#beneficii,#pentru-cine,#inainte-dupa,#comparatie,#raport,#niciodata, #top .hero .stage, #cum .phone-wrap,#cum .howbar, #top .ico3d, .foot2 .giant,.foot2 .f2cols,.foot2 .spill,.foot2 .totop{display:none!important} #top video{display:none!important} /* ---------- type ---------- */ #top h1{font-size:23px!important;line-height:1.15!important;letter-spacing:-.01em} #top h2{font-size:20px!important;line-height:1.2!important} #top h3{font-size:17px!important;line-height:1.25!important} #top p,#top li,#top summary{font-size:15px!important;line-height:1.45!important} #top .eyebrow{font-size:12px!important} #cum .head .eyebrow,#preturi .head .eyebrow,#intrebari .head .eyebrow{display:none!important} #top .band{padding:26px 0!important} #top .head{margin-bottom:12px!important;text-align:left} /* ---------- buttons: full width, at least 44px ---------- */ #top .btn,.foot2 .btn{display:flex!important;width:100%!important;min-height:46px!important;padding:8px 12px!important;white-space:normal!important;text-align:center;line-height:1.2!important;font-size:15px!important;transform:none!important} #top .textlink{display:flex;justify-content:center;width:100%;min-height:44px} /* ---------- hero ---------- */ #top .hero{padding:16px 0 22px!important;min-height:0!important;height:auto!important} #top .hero .wrap{display:block!important} #top .hero__copy{max-width:none!important;padding:0!important;text-align:left} #top .hero .badge{font-size:12px;margin-bottom:10px} #top .hero__sub{margin-top:10px!important} #top .hero__cta{display:flex!important;flex-direction:column;gap:6px;margin-top:14px!important} /* ---------- how it works: three steps, all visible, no pinning ---------- */ #cum.how{height:auto!important} #cum .how__stick{position:static!important;height:auto!important;overflow:visible!important;padding:26px 0!important;display:block!important} #cum .how__grid{display:block!important} #cum .steps{margin-top:12px!important;gap:8px!important} #cum .step{display:flex!important;opacity:1!important;transform:none!important;background:#fff!important;padding:10px!important;gap:8px!important;box-shadow:none!important} #cum .step p{display:block!important;font-size:14px!important;margin-top:2px!important} #cum .step h3{font-size:16px!important} #cum .step .num{flex:0 0 28px!important;height:28px!important;font-size:14px} /* ---------- examples: two cards, stacked ---------- */ #exemple .head__sub{display:none!important} #exemple .collage{display:block!important;height:auto!important;margin-top:8px!important} #exemple .collage .cc{position:static!important;width:auto!important;height:auto!important;transform:none!important;filter:none!important;opacity:1!important;margin:0 0 10px!important} #exemple .collage .cc:nth-child(n+3),#exemple .collage>div:not(.cc){display:none!important} #exemple .cc .ci,#exemple .cc .face{position:static!important;transform:none!important;height:auto!important} #exemple .cc .face.f1{display:none!important} #exemple .rc{padding:12px!important;height:auto!important} #top .rc__top{gap:8px} #top .rc .av{width:28px;height:28px;font-size:13px;flex:0 0 28px} #top .rc__src,#top .posted{font-size:12px!important} #top .reply{padding:10px!important;margin-top:8px!important} #top .stars svg{width:11px;height:11px} /* ---------- prices ---------- */ #preturi .founder{padding:10px!important;gap:8px;margin-bottom:12px!important} #preturi .founder__ico{display:none!important} #preturi .period{width:100%!important;margin:0 0 12px!important;flex-wrap:wrap;justify-content:center;border-radius:22px} #preturi .period__btn{flex:1 1 auto;justify-content:center;padding:0 8px!important;min-height:44px;font-size:14px!important;flex-wrap:wrap;gap:4px} #preturi .period__btn em{font-size:11px!important;padding:3px 6px!important} #preturi .prices{display:block!important;padding-top:0!important} #preturi .price{padding:14px 12px!important;margin:0 0 10px!important;transform:none!important;border-radius:18px!important} #preturi .price__top{flex-wrap:wrap;gap:6px} #preturi .amount{flex-wrap:wrap} #preturi .amount b{font-size:34px!important} #preturi .setup{display:none!important} #preturi .feats{margin:10px 0!important} #preturi .feats li{gap:6px} #preturi .feats svg{flex:0 0 14px;width:14px;height:14px} #preturi .free{display:block!important;padding:12px!important} #preturi .free .btn{margin-top:10px} #preturi .free b{font-size:17px!important;line-height:1.25!important} #preturi .free span{font-size:15px!important} #preturi .pnote{display:block!important;font-size:13px!important} #preturi .pnote i{display:none} #preturi .pnote>*{display:block;margin:4px 0} #preturi .ref-note{display:inline-block;padding:10px 0;min-height:44px} /* ---------- FAQ ---------- */ #intrebari .faqgrid{display:block!important} #intrebari details summary{min-height:44px;padding:10px 0!important;gap:6px;align-items:center} #intrebari details summary svg{flex:0 0 14px;width:14px;height:14px} #intrebari details p{padding:0 0 12px!important} /* ---------- final call to action ---------- */ #top .pre{padding:26px 0!important} #top .pre__in{padding:18px 12px!important;border-radius:18px!important;text-align:left} #top .pre__cta{display:flex!important;flex-direction:column;gap:6px;margin-top:12px!important} #top .trust{display:none!important} /* ---------- footer ---------- */ .foot2{padding:22px 0 18px!important} .foot2 .f2top{display:block!important} .foot2 .logo img{height:20px} .foot2 .f2tag{font-size:14px!important;margin-top:8px} .foot2 .f2mid{display:flex;justify-content:flex-start;margin:12px 0!important;padding:0!important} .foot2 .f2bot{display:block!important;font-size:13px} .foot2 .f2legal{display:flex!important;flex-direction:column;gap:0;margin-top:6px} .foot2 .f2legal a{display:flex;align-items:center;min-height:44px;font-size:14px;overflow-wrap:anywhere} .foot2 .f2legal a[href^="mailto"]{font-size:12px} .foot2 .f2co{font-size:11px!important;margin-top:8px} .foot2 .badges{display:flex!important;flex-direction:column;gap:6px;margin-top:10px} .foot2 .badge2{min-height:44px;width:auto!important;max-width:100%;white-space:normal!important;flex-wrap:wrap;gap:4px 8px;padding:8px 10px!important} .foot2 .badge2 span{white-space:normal!important;min-width:0} .foot2 .badges{display:block!important} .foot2 .badge2{display:flex!important;flex-direction:column;align-items:flex-start;width:100%!important;min-width:0!important;margin:0 0 6px!important} .foot2 .badge2 *{white-space:normal!important;overflow-wrap:anywhere} } /* ================= onboarding.html on the watch ================= */ @media (max-width:240px){ header.nav:not(#nav) .nav__in{height:auto;min-height:52px;gap:4px;padding:4px 8px!important;flex-wrap:wrap} header.nav:not(#nav) .logo img{height:20px} .obl-navr{gap:2px!important} .obl-navr .nav__back{display:none!important} .obl-lang button{min-width:44px!important;min-height:44px!important;font-size:14px!important} body>section.hero{padding:16px 0 18px!important} body>section.hero h1{font-size:22px!important;line-height:1.15!important} body>section.hero p{font-size:15px!important} body>section.hero .eyebrow{font-size:12px!important} body>section.hero .steps{display:none!important} .main{padding:14px 0 28px!important} .main::before{content:"Formularul merge și de pe ceas, dar e mai comod pe telefon. Sau scrie-ne: get@stelar.reviews";display:block;margin:0 10px 12px;padding:10px 12px;border-radius:14px;background:var(--forest);color:#fff;font:500 14px/1.4 Inter,sans-serif;overflow-wrap:anywhere} html:lang(en) .main::before{content:"The form works on the watch, but it is easier on a phone. Or email us: get@stelar.reviews"} #ob .card,.main .panel .card{padding:14px 10px!important;border-radius:18px!important;margin-bottom:12px!important} #ob .card__head{gap:8px!important;margin-bottom:12px!important;flex-direction:column} #ob .num{width:32px!important;height:32px!important;font-size:15px!important} #ob h2,.main .panel h2{font-size:18px!important;line-height:1.2!important} #ob h3{font-size:16px!important} #ob p,#ob li,#ob label,.main .panel p{font-size:15px!important;line-height:1.4!important} #ob .grid,#ob .grid--2,#ob .help,#ob .choices,#ob .choices--3{display:block!important} #ob .grid>*,#ob .help>*,#ob .choices>*{margin-bottom:10px!important} #ob .f input,#ob .f textarea,#ob select{font-size:16px!important;min-height:44px;padding:10px!important;border-radius:12px!important} #ob .f label{display:block!important;min-height:0} #ob .mailbox{padding:10px!important;gap:8px!important;display:block!important} #ob .mailbox code{display:block;font-size:14px!important;margin-bottom:8px} #ob .tabs{display:flex!important;flex-wrap:wrap;width:100%;border-radius:18px} #ob .tabs button{flex:1 1 auto;padding:0 8px!important;font-size:14px!important} #ob .howto li{padding:10px 10px 10px 44px!important;font-size:14px!important} #ob .howto li::before{left:8px!important;width:26px!important;height:26px!important} #ob .choice{padding:12px 10px 12px 44px!important} #ob .choice .dot{left:12px!important;top:14px!important} #ob .choice--tone{padding:44px 10px 12px!important} #ob .review{padding:10px!important} #ob .av{width:30px!important;height:30px!important} #ob .promise{padding:10px 12px!important;font-size:15px!important} #ob .check{padding:10px!important;gap:8px!important} #ob .submit,.main .panel .row{display:block!important} #ob .btn,.main .panel .btn{display:flex!important;width:100%!important;min-height:46px!important;padding:8px 12px!important;white-space:normal!important;text-align:center;line-height:1.2!important;margin:0 0 8px!important} #ob a,.main .panel a{overflow-wrap:anywhere} #ob .pre,.main .panel .pre{font-size:12px!important;padding:10px!important} .foot{padding:16px 0!important} .foot .foot__in{display:block!important} .foot .foot__in>span{display:block;margin-bottom:6px} .foot .foot__in>span:last-child{font-size:0} #ob .review__top{flex-wrap:wrap} .foot .foot__in a{font-size:14px;display:flex!important;min-height:44px;overflow-wrap:anywhere} #ob fieldset{min-width:0!important;max-width:100%} #ob .howto{display:block!important} #ob .howto li{margin-bottom:8px;min-width:0} #ob .ui,#ob code,#ob b{white-space:normal!important;overflow-wrap:anywhere} #ob .card *{max-width:100%} #ob .t,#ob .choice span{white-space:normal!important;overflow-wrap:anywhere;min-width:0} #ob .choice,#ob .choice *{min-width:0!important} #toast.toast{white-space:normal!important;max-width:calc(100vw - 16px)!important;bottom:8px!important;font-size:14px!important} /* ---------- pgx headlines (2026-11-09): normal size, static, solid colour on the watch ---------- */ .pgx-t,.hero h1.pgx-t,.head h2.pgx-t,.final h2.pgx-t{transform:none!important;letter-spacing:-.01em!important;max-width:none!important} .pgx-t .wi{animation:none!important;background:none!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;filter:none!important;opacity:1!important;transform:none!important} .pgx-t::before{display:none!important;animation:none!important} .head:has(>.pgx-t){max-width:none!important} .pgx-giant svg{transform:none!important} } /* ---------- sd-: review slider on the watch (Nov 9), glass card over the clip ---------- */ @media (max-width:240px){ #oricine{display:block!important} #oricine .head__sub{display:none!important} #oricine .head{margin-bottom:10px!important} #top #sl{aspect-ratio:auto!important;height:min(224px,calc(100vh - 18px));border-radius:18px;box-shadow:none} #top #sl .sl__media{inset:0;background:#0e0f0c center/cover no-repeat} #top #sl .sl__slide:nth-child(1) .sl__media{background-image:url(stelar-clip-barber.jpg)} #top #sl .sl__slide:nth-child(2) .sl__media{background-image:url(stelar-clip-mechanic.jpg)} #top #sl .sl__slide:nth-child(3) .sl__media{background-image:url(stelar-clip-cafe2.jpg)} #top #sl .sl__slide:nth-child(4) .sl__media{background-image:url(stelar-clip-dentist.jpg)} #top #sl .sl__slide:nth-child(5) .sl__media{background-image:url(stelar-clip-gym4.jpg)} #top #sl .sl__slide:nth-child(6) .sl__media{background-image:url(stelar-clip-bakery4.jpg)} #top #sl::after{background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 36%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.78));z-index:2} #top #sl .sl__bars{left:8px;right:8px;top:7px;gap:3px} #top #sl .sl__bars span{height:2px} #top #sl .sl__rate{left:7px;top:14px;gap:5px;padding:4px 8px 4px 5px;border-radius:10px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.24)} #top #sl .sl__rate .g{width:15px;height:15px;-webkit-mask:radial-gradient(circle,transparent 4px,#000 4.5px);mask:radial-gradient(circle,transparent 4px,#000 4.5px)} #top #sl .sl__rate .g::after{display:none} #top #sl .sl__rate small{display:none} #top #sl .sl__rate b{font-size:13px;color:#fff;gap:3px} #top #sl .sl__rate b .rstars svg{width:8px;height:8px} #top #sl .sl__rate b .rstars .off svg{fill:rgba(255,255,255,.35)} #top #sl .sl__nav{top:13px;right:7px;left:auto;bottom:auto;gap:4px} #top #sl .sl__btn{width:30px;height:30px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.26)} #top #sl .sl__btn svg{width:12px;height:12px;stroke:#fff} #top #sl .sl__count{display:none} #top #sl .sl__card{left:6px;right:6px;bottom:6px;width:auto;max-width:none;padding:7px 9px 7px!important;border-radius:14px;color:#fff;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 22px rgba(0,0,0,.24);text-shadow:0 1px 2px rgba(0,0,0,.25)} #top #sl .sl__card .av,#top #sl .sl__card .rc__src,#top #sl .sl__card .posted{display:none!important} #top #sl .sl__card .rc__top{gap:0} #top #sl .sl__card .rc__who{font-size:12px!important;line-height:1.2!important;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #top #sl .sl__card .stars svg{width:9px;height:9px;fill:rgba(255,255,255,.32)} #top #sl .sl__card.is-on .stars svg.f,#top #sl .sl__card .stars.is-on svg.f{fill:#f2b600} #top #sl .sl__card .rc__text{font-size:12.5px!important;line-height:1.3!important;margin-top:3px;color:#fff;font-weight:500;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;opacity:1;transform:none} #top #sl .sl__card .reply{margin-top:5px!important;padding:4px 7px 5px!important;border-radius:9px;background:rgba(0,0,0,.28)} #top #sl .sl__card .reply__lbl{font-size:10px!important;line-height:1.15!important;font-weight:700;color:rgba(255,255,255,.75);margin-bottom:1px;letter-spacing:.02em} #top #sl .sl__card .reply__txt{font-size:12px!important;line-height:1.3!important;color:#fff;min-height:1.3em;max-height:2.6em;overflow:hidden} #top #sl .sl__card .reply__txt .typing{padding:3px 0}#top #sl .sl__card .reply__txt .typing i{background:#fff;width:5px;height:5px} #top #sl .sl__card .caret{background:#fff} /* ---------- ws-: review swipe carousel (#exemple) + swipe hint (#oricine), Nov 9 ---------- */ #top #exemple.ws-on .collage{display:none!important} #top .ws-car{display:block;margin-top:8px} #top .ws-track{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;padding:2px 0 4px;outline:none} #top .ws-track::-webkit-scrollbar{display:none} #top .ws-card{flex:0 0 calc(100% - 20px);scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box;margin:0;padding:10px 10px 10px;border-radius:16px;background:#fff;border:1px solid rgba(22,33,10,.12);color:#111;display:flex;flex-direction:column;min-width:0} #top .ws-who{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0} #top .ws-who b{font-size:13px!important;line-height:1.2!important;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} #top .ws-stars{display:inline-flex;gap:1px;flex:none} #top .ws-stars svg{width:9px;height:9px;fill:rgba(22,33,10,.18)} #top .ws-stars svg.f{fill:#f2b600} #top p.ws-biz{font-size:11px!important;line-height:1.25!important;margin:2px 0 0;color:rgba(17,17,17,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #top p.ws-text{font-size:13px!important;line-height:1.35!important;margin:5px 0 0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} #top .ws-reply{margin-top:auto;padding-top:7px} #top .ws-reply>*{margin:0} #top .ws-reply{background:none} #top .ws-reply .ws-lbl,#top .ws-reply .ws-ans{background:#16210a;color:#f1f4ec} #top p.ws-lbl{font-size:10px!important;line-height:1.2!important;font-weight:700;letter-spacing:.02em;color:#E0F41C!important;padding:6px 8px 2px;border-radius:10px 10px 0 0} #top p.ws-ans{font-size:12px!important;line-height:1.35!important;padding:0 8px 7px;border-radius:0 0 10px 10px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden} /* dots: a 16px hit area each, the current card is a lime-ringed dark pill */ #top .ws-dots{display:flex;justify-content:center;margin-top:4px} #top .ws-dot{-webkit-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:16px;height:20px;min-width:0!important;min-height:0!important;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none} #top .ws-dot i{display:block;width:5px;height:5px;border-radius:5px;background:rgba(22,33,10,.25);transition:width .2s,background .2s!important} #top .ws-dot.is-on i{width:12px;background:#16210a;box-shadow:0 0 0 1.5px #E0F41C} #top .ws-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px;min-height:22px} #top .ws-row--sl{margin-top:6px} #top p.ws-hint{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:12px!important;line-height:1!important;font-weight:600;color:#16210a;transition:opacity .35s!important} #top .ws-hint i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:9px;background:#E0F41C;color:#16210a;font-size:11px;font-weight:700;animation:ws-nudge 1.4s ease-in-out infinite!important} #top p.ws-hint.ws-gone{opacity:0;visibility:hidden} #top .ws-count{font-size:11px;font-weight:600;color:rgba(17,17,17,.6);font-variant-numeric:tabular-nums;margin-left:auto} #top .ws-track.ws-peek>.ws-card{animation:ws-peek 1.1s cubic-bezier(.45,0,.25,1) 1 both!important} @keyframes ws-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}} @keyframes ws-peek{0%,100%{transform:translateX(0)}45%,55%{transform:translateX(-24px)}} @media (prefers-reduced-motion:reduce){ #top .ws-hint i,#top .ws-track.ws-peek>.ws-card{animation:none!important} } } /* ================= wd2-: the desktop sections and design, adapted to the Watch (Levi, Nov 9 14:34) ================= Every desktop section, in desktop order, condensed; multi-card sets are touch-swipe carousels (built by the wd2- script: .wd2-track / .wd2-slide / .wd2-nav). No vertical scroll-snap anywhere: the crown scrolls the page freely, and the carousels are overflow-y:hidden with overscroll-behavior-x only, so a crown turn passes straight by them. */ @media (max-width:240px){ /* ---------- bring the sections back ---------- */ #de-ce,#beneficii,#pentru-cine,#inainte-dupa,#comparatie,#raport,#niciodata{display:block!important} #top .band{padding:28px 0!important} #top .head{margin-bottom:12px!important} #top .head .eyebrow{display:block!important;margin:0 0 6px!important;font-size:11px!important;line-height:1.2!important;letter-spacing:.06em;font-weight:700;color:rgba(17,17,17,.55)} #top .band--forest .head .eyebrow{color:#E0F41C!important} #top h2{font-size:19px!important;line-height:1.18!important;letter-spacing:-.015em!important} #top h3{font-size:15px!important;line-height:1.28!important;letter-spacing:-.005em} #top .head__sub{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin-top:6px!important;font-size:13px!important;line-height:1.4!important;color:rgba(17,17,17,.68);max-width:none!important} #top .band--forest .head__sub{color:rgba(241,244,236,.75)} #oricine .head__sub,#exemple .head__sub{display:none!important} /* ---------- a shared card look: the desktop's white/fog cards at radius 16 ---------- */ #top .wd2-card,#de-ce .cards3>.card,#de-ce .stat,#beneficii .xben,#pentru-cine .bt-card,#comparatie .xcmp__row:not(.xcmp__row--h),#niciodata .never>li{background:#fff!important;border:1px solid rgba(22,33,10,.10)!important;border-radius:16px!important;box-shadow:none!important;padding:12px!important;color:#111;min-width:0;min-height:0!important;height:auto!important;transform:none!important;opacity:1!important} #de-ce .cards3>.card,#de-ce .stat,#pentru-cine .bt-card,#comparatie .xcmp__row:not(.xcmp__row--h),#niciodata .never>li{background:#f1f4ec!important} /* ---------- the carousels (touch swipe only; one card per view, ~12px of the next one peeking) ---------- */ #top .band .wd2-track{display:flex!important;flex-wrap:nowrap!important;flex-direction:row!important;align-items:stretch!important;gap:8px!important;grid-template-columns:none!important; overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-width:none; margin:0 -10px!important;padding:2px 10px 4px!important;scroll-padding:0 10px;height:auto!important;max-width:none!important;width:auto!important;transform:none!important;outline:none} #top .band .wd2-track::-webkit-scrollbar{display:none} #top .band .wd2-track>.wd2-slide{flex:0 0 calc(100% - 10px)!important;width:auto!important;max-width:none!important;min-width:0!important;margin:0!important;scroll-snap-align:start;scroll-snap-stop:always;box-sizing:border-box;position:relative} #top .wd2-track.ws-peek>.wd2-slide{animation:ws-peek 1.1s cubic-bezier(.45,0,.25,1) 1 both!important} #top .wd2-nav{margin:2px 0 0} #top .wd2-nav .ws-row{min-height:20px} #top .band--forest .ws-dot i{background:rgba(241,244,236,.32)} #top .band--forest .ws-dot.is-on i{background:#E0F41C;box-shadow:none} #top .band--forest p.ws-hint{color:#f1f4ec} #top .band--forest .ws-count{color:rgba(241,244,236,.7)} /* the reviews carousel: a counter past 7 cards instead of dots */ #top .ws-car.ws-many .ws-dots{display:none} #top .ws-car:not(.ws-many) .ws-count{display:none} @media (prefers-reduced-motion:reduce){#top .wd2-track.ws-peek>.wd2-slide{animation:none!important}} /* ---------- hero: copy + the clip's poster in a rounded frame + the rating card ---------- */ #top .hero .stage{display:block!important;position:relative!important;margin:16px 0 0!important;width:auto!important;height:auto!important;transform:none!important;max-width:none!important;padding:0!important} #top .hero .stage .fw{position:relative!important;display:block!important;width:auto!important;height:auto!important;transform:none!important;margin:0!important;padding:0!important;aspect-ratio:auto!important} #top .hero .stage .chip,#top .hero .stage .toasts,#top .hero .stage .hero-rc{display:none!important} #top .hero .frame{position:relative!important;inset:auto!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9;margin:0!important;border-radius:16px!important;overflow:hidden;transform:none!important;box-shadow:0 8px 20px rgba(14,15,12,.14)!important;border:0!important;padding:0!important;background:#16210a} #top .hero .frame::before,#top .hero .frame::after{display:none!important} #top .hero .frame img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover;display:block!important;opacity:1!important;transform:none!important;border-radius:0!important} #top .hero .under{display:block!important;position:static!important;width:auto!important;margin:8px 0 0!important;transform:none!important;padding:0!important} #top .hero .spark{position:relative!important;inset:auto!important;width:auto!important;max-width:none!important;margin:0!important;padding:10px 12px!important;border-radius:16px!important;transform:none!important;background:#fff!important;border:1px solid rgba(22,33,10,.10)!important;box-shadow:none!important;overflow:hidden} #top .hero .spark .eyebrow{font-size:11px!important;margin:0!important} #top .hero .spark__num{font-size:28px!important;line-height:1.1!important;display:flex;align-items:baseline;gap:6px} #top .hero .spark__num small{font-size:12px!important} #top .hero .spark svg{display:block;width:100%!important;height:34px!important;margin:4px 0!important} #top .hero .spark .rc__src{font-size:11px!important;line-height:1.3!important;color:rgba(17,17,17,.6)} /* ---------- 01 / De ce contează: 3 reasons and the 6 figures, both swipe ---------- */ #de-ce .cards3>.card .eyebrow{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:13px;background:#16210a;color:#E0F41C!important;font-size:11px!important;font-weight:700;margin:0 0 8px!important} #de-ce .cards3>.card h3{font-size:15px!important;margin:0!important} #de-ce .head~.head{margin-top:22px!important} #de-ce .stat{display:flex!important;flex-direction:column;gap:4px;min-height:0!important;height:auto!important} #de-ce .stat__n{font-size:34px!important;line-height:1!important;font-weight:800;letter-spacing:-.03em;color:#16210a;margin:0!important} #de-ce .stat--hi{background:#16210a!important;border-color:#16210a!important} #de-ce .stat--hi .stat__n{color:#E0F41C} #de-ce .stat--hi p{color:#f1f4ec!important} #de-ce .stat p{max-width:none!important;align-self:stretch;font-size:13px!important;line-height:1.35!important;margin:0!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} #de-ce .stat__bar{display:block!important;height:4px!important;border-radius:2px;margin-top:auto!important;width:100%!important;position:relative!important} #de-ce .stats>.stat:first-child>p{font-size:0!important;line-height:0!important;display:block!important;-webkit-line-clamp:none} #de-ce .stats>.stat:first-child>p::after{content:"citesc recenziile afacerilor înainte să aleagă.";display:block;letter-spacing:normal;font-size:13px;line-height:1.35} html:lang(en) #de-ce .stats>.stat:first-child>p::after{content:"read business reviews before they choose."} #de-ce .source{display:none!important} /* ---------- 02 / Cum te ajută: the 6 benefits swipe ---------- */ #beneficii .xben{display:flex!important;flex-direction:column;gap:6px} #beneficii .xic{align-self:flex-start;align-items:center;justify-content:center;display:inline-flex!important;width:30px!important;height:30px!important;border-radius:10px!important;flex:none} #beneficii .xic svg{width:16px!important;height:16px!important} #beneficii .xtag{align-self:flex-start;font-size:10px!important;padding:3px 7px!important;border-radius:999px} #beneficii .xben h3{margin:0!important} #beneficii .xben p{font-size:13px!important;line-height:1.38!important;margin:0!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden} #beneficii .source{display:none!important} #beneficii .xgrid3>.xben:nth-child(2)>p{font-size:0!important;line-height:0!important;display:block!important;-webkit-line-clamp:none} #beneficii .xgrid3>.xben:nth-child(2)>p::after{content:"Google spune că recenziile pozitive și răspunsurile utile te ajută să ieși în evidență.";display:block;font-size:13px;line-height:1.38;letter-spacing:normal} html:lang(en) #beneficii .xgrid3>.xben:nth-child(2)>p::after{content:"Google says positive reviews and helpful replies help a business stand out."} /* ---------- 03 / Pentru cine e: two slow chip rows, the line, 3 universal cards (swipe), the dark "for you if" box ---------- */ #pentru-cine .bt-wrap{margin:4px 0 0!important;display:block!important;opacity:1!important;transform:none!important} #pentru-cine .bt-row{margin:0 -10px 6px!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)} #top #pentru-cine .bt-row--l .bt-track{animation:bt-l 150s linear infinite!important} #top #pentru-cine .bt-row--r .bt-track{animation:bt-r 170s linear infinite!important} #pentru-cine .bt-chip{font-size:12px!important;line-height:1.2!important;padding:6px 10px 6px 6px!important;gap:6px!important;margin-right:6px!important;border-radius:999px!important;white-space:nowrap} #pentru-cine .bt-ic{width:20px!important;height:20px!important;flex:0 0 20px!important} #pentru-cine .bt-ic svg{width:12px!important;height:12px!important} #pentru-cine .bt-more{font-size:12px!important;margin:2px 0 0!important;text-align:center} #pentru-cine .bt-line{font-size:16px!important;line-height:1.25!important;font-weight:700;letter-spacing:-.01em;margin:14px 0 12px!important;text-align:left} #pentru-cine .bt-line span{display:inline!important} #pentru-cine .bt-uni{margin-top:0!important} #pentru-cine .bt-card{display:flex!important;flex-direction:column;gap:6px} #pentru-cine .bt-card .xic{width:30px!important;height:30px!important;border-radius:10px!important;flex:none!important;align-self:flex-start;display:inline-flex!important;align-items:center;justify-content:center} #pentru-cine .bt-card .xic svg{width:16px!important;height:16px!important} #pentru-cine .bt-card h3{margin:0!important} #pentru-cine .bt-card p{font-size:13px!important;line-height:1.38!important;margin:0!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden} #pentru-cine .xfit{display:block!important;margin-top:14px!important;padding:14px 12px!important;border-radius:16px!important;transform:none!important} #pentru-cine .xfit__h{font-size:15px!important;margin:0 0 8px!important} #pentru-cine .xfit__list{display:block!important;margin:0!important;padding:0!important} #pentru-cine .xfit__list li{font-size:13px!important;line-height:1.35!important;margin:0 0 6px!important;padding:7px 9px!important;border-radius:12px!important;display:flex;gap:6px;align-items:flex-start} #pentru-cine .xfit__list li svg{flex:0 0 13px;width:13px;height:13px;margin-top:2px} #pentru-cine .xfit .textlink{justify-content:flex-start;margin-top:4px} #pentru-cine .xfit .textlink span{font-size:13px!important} @media (prefers-reduced-motion:reduce){ #top #pentru-cine .bt-row .bt-track{animation:none!important;width:auto!important} #pentru-cine .bt-row--r,#pentru-cine .bt-dup,#pentru-cine .bt-row--l .bt-chip:nth-child(n+9){display:none!important} #pentru-cine .bt-row{margin:0!important;-webkit-mask-image:none;mask-image:none} #pentru-cine .bt-set{flex-wrap:wrap!important;row-gap:6px;justify-content:flex-start!important} #pentru-cine .bt-chip{font-size:11px!important;padding:4px 8px 4px 4px!important;gap:4px!important} #pentru-cine .bt-ic{width:16px!important;height:16px!important;flex-basis:16px!important} } /* ---------- 05 / Înainte și după: swipe from "without a reply" to "with Stelar" ---------- */ #top #inainte-dupa .xba.wd2-track{align-items:flex-start!important} #inainte-dupa .xba__col{display:flex!important;flex-direction:column;gap:6px;opacity:1!important;transform:none!important} #inainte-dupa .xba__lbl{align-self:flex-start;font-size:11px!important;padding:4px 9px!important;border-radius:999px;margin:0!important} #inainte-dupa .xba .rc{padding:11px!important;border-radius:16px!important;margin:0!important;height:auto!important;flex:0 0 auto} #inainte-dupa .rc__text{font-size:13px!important;line-height:1.38!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;margin-top:6px!important} #inainte-dupa .reply__lbl{font-size:10px!important} #inainte-dupa .reply__txt{font-size:12.5px!important;line-height:1.38!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden} #inainte-dupa .posted{font-size:11px!important;line-height:1.3!important;margin-top:6px!important} #inainte-dupa .xba__read{font-size:12.5px!important;line-height:1.38!important;margin:0!important;color:rgba(17,17,17,.7)} #inainte-dupa .xrules{display:block!important;margin-top:14px!important;padding:12px!important;border-radius:16px!important;transform:none!important} #inainte-dupa .xrules__h{font-size:14px!important;margin:0 0 8px!important} #inainte-dupa .xrules ol{display:block!important;margin:0!important;padding:0!important} #inainte-dupa .xrules li{display:flex!important;align-items:center;gap:8px;font-size:13px!important;line-height:1.3!important;margin:0 0 6px!important;padding:0!important} #inainte-dupa .xrules li b{flex:0 0 22px;width:22px;height:22px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;font-size:11px} /* ---------- 06 / Singur sau cu Stelar: one comparison row per card, swipe ---------- */ #comparatie .xcmp{display:flex;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important} #comparatie .xcmp__row--h{display:none!important} #comparatie .xcmp__row:not(.xcmp__row--h){display:flex!important;flex-direction:column;gap:6px;grid-template-columns:none!important} #comparatie .xcmp__k{text-transform:none!important;letter-spacing:-.005em!important;font-size:14px!important;line-height:1.25!important;font-weight:700;padding:0!important;margin:0 0 2px!important;color:#111!important;background:none!important;border:0!important} #comparatie .xcmp__c{display:block!important;font-size:13px!important;line-height:1.35!important;padding:8px 9px!important;border-radius:12px!important;border:0!important;text-align:left!important;min-height:0!important} #comparatie .xcmp__c::before{display:block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px} #comparatie .xcmp__c--me{background:#fff!important;color:rgba(17,17,17,.75)!important} #comparatie .xcmp__c--me::before{content:"Singur";color:rgba(17,17,17,.5)} #comparatie .xcmp__c--us{background:#16210a!important;color:#f1f4ec!important} #comparatie .xcmp__c--us::before{content:"Cu Stelar";color:#E0F41C} html:lang(en) #comparatie .xcmp__c--me::before{content:"On your own"} html:lang(en) #comparatie .xcmp__c--us::before{content:"With Stelar"} #comparatie .xcmp__c svg{display:none!important} #comparatie .xcmp__cta{display:block!important;margin-top:12px!important;text-align:left} #comparatie .xcmp__cta>span{display:block;font-size:12px!important;line-height:1.35!important;margin-top:6px;color:rgba(17,17,17,.65)} /* ---------- 07 / Raportul lunar: what is included + the 3 report cards (PDF, video, themes), swipe ---------- */ #raport .xrep{display:block!important} #raport .xrep__inc{display:block!important;margin:0!important;padding:0!important} #raport .xrep__inc li{display:flex!important;gap:7px;align-items:flex-start;font-size:13px!important;line-height:1.35!important;margin:0 0 7px!important;padding:0!important} #raport .xrep__inc li svg{flex:0 0 14px;width:14px;height:14px;margin-top:2px} #raport .xrep__inc li>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} #raport .xrep__note{margin:4px 0 12px!important} #raport .xtag{font-size:10px!important;padding:3px 8px!important} #raport .rpf{margin:0!important} #top #raport .rpf__stage.wd2-track{height:auto!important;padding-bottom:6px!important} #top #raport .rpf__stage.wd2-track>.rpf-c{flex:0 0 262px!important;width:262px!important;height:430px!important;zoom:.64;order:0!important;box-shadow:0 6px 16px rgba(14,15,12,.12)!important;scroll-snap-align:start} #raport .rpf__cap{display:none!important} /* ---------- 08 / Prețuri: the three plans swipe; the monthly / annual toggle stays ---------- */ #top #preturi .prices.wd2-track{padding-top:4px!important} #top #preturi .prices.wd2-track>.price{padding:14px 12px!important;border-radius:16px!important;display:flex!important;flex-direction:column} #preturi .amount b{font-size:30px!important} #preturi .feats li{font-size:13px!important;line-height:1.35!important} #preturi .price .btn{margin-top:auto!important} #preturi .cap{font-size:13px!important} #preturi .bill{font-size:12px!important} /* ---------- 09 / Ce nu facem niciodată: three short rows ---------- */ #niciodata .never-wrap{display:block!important} #niciodata .never{display:block!important;margin:0!important;padding:0!important} #niciodata .never>li{display:grid!important;grid-template-columns:22px 1fr;column-gap:8px;row-gap:2px;margin:0 0 8px!important;align-items:start} #niciodata .never .x{grid-row:1/3;width:22px!important;height:22px!important;border-radius:11px!important;display:inline-flex!important;align-items:center;justify-content:center;flex:none} #niciodata .never .x svg{width:11px!important;height:11px!important} #niciodata .never>li>span:not(.x){font-size:14px!important;line-height:1.3!important;font-weight:600} #niciodata .never>li>small{font-size:12px!important;line-height:1.3!important;color:rgba(17,17,17,.6);display:block} /* ---------- FAQ: accordion rows as cards ---------- */ #intrebari details{border-radius:14px!important;margin:0 0 6px!important} #intrebari details summary{font-size:14px!important;line-height:1.3!important} #intrebari details p{font-size:13px!important;line-height:1.42!important} /* ---------- footer: the link columns come back, compact ---------- */ .foot2 .f2cols{display:block!important;margin:16px 0 0!important} .foot2 .f2col{margin:0 0 10px!important;opacity:1!important;transform:none!important} .foot2 .f2h{font-size:11px!important;letter-spacing:.06em;text-transform:uppercase;margin:0 0 2px!important;opacity:.65} .foot2 .f2col ul{display:flex!important;flex-wrap:wrap;gap:0 12px;margin:0!important;padding:0!important} .foot2 .f2col li{margin:0!important} .foot2 .f2col a{display:inline-flex!important;align-items:center;min-height:32px;font-size:13px!important;line-height:1.2!important} .foot2 .spill{display:inline-flex!important;margin-top:10px;font-size:12px!important} .foot2 .totop{display:inline-flex!important;align-items:center;gap:4px;min-height:44px;font-size:13px} .foot2 .f2mid{justify-content:space-between!important;align-items:center} /* ---------- fv-: the film, poster + lime play button, tap to play ---------- */ #top .fv-frame{border-radius:16px!important;aspect-ratio:21/9;box-shadow:0 8px 20px rgba(14,15,12,.14)!important} #top .fv-play{display:none!important} #top .fv-play{width:44px!important;height:44px!important;margin:-22px 0 0 -22px!important;box-shadow:0 6px 14px rgba(14,15,12,.35),0 0 0 5px rgba(224,244,28,.25)!important} #top .fv-play svg{width:18px!important;height:18px!important;margin-left:3px!important} /* the address link repeats the footer's Contact link and names a city: off on the Watch */ .foot2 .f2legal a[href^="mailto"]{display:none!important} } /* ---------- ab-: Despre Stelar (#despre) and the footer "Scrie-ne" button, condensed for the Watch ---------- */ @media (max-width:240px){ #despre .ab-grid{display:block!important} #despre .ab-grid .head{position:static!important} #despre .ab-list{display:block!important;padding:10px!important;border-radius:16px!important;margin:0!important;background:#f1f4ec!important} #despre .ab-list li{display:grid!important;grid-template-columns:22px minmax(0,1fr)!important;column-gap:8px!important;margin:0 0 10px!important;align-items:start} #despre .ab-list li:last-child{margin-bottom:0!important} #despre .ab-ic{width:22px!important;height:22px!important} #despre .ab-ic svg{width:12px!important;height:12px!important} #despre .ab-tx{font-size:12px!important;line-height:1.35!important;color:rgba(17,17,17,.62);padding-top:0} #despre .ab-tx b{font-size:14px!important;line-height:1.28!important;margin:0 0 2px!important} .foot2 .ab-write{margin-top:12px!important} } /* ---------- wv-: every clip plays on the watch (Nov 9, Levi 17:07-17:08). Hero clip in its 16:9 frame; slider = playing clip on top, review card below (never over the clip) ---------- */ @media (max-width:240px){ #top #sl{height:auto!important;aspect-ratio:auto!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 6px;overflow:visible!important;background:none!important;border-radius:0!important;box-shadow:none!important} #top #sl::after{display:none!important} #top #sl .sl__slides{position:relative!important;inset:auto!important;flex:0 0 100%;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0e0f0c;isolation:isolate;touch-action:pan-y;box-shadow:0 6px 16px rgba(14,15,12,.14)} #top #sl .sl__slides::after{content:"";position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,0));z-index:3;pointer-events:none} #top #sl .sl__media{inset:0!important;transform:none!important;background-image:none!important;will-change:auto} #top #sl .sl__media>.wa-anim{animation:none!important} #top #sl .sl__bars{position:absolute!important;left:8px!important;right:8px!important;top:6px!important;z-index:4} #top #sl .sl__card{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;order:2;flex:0 0 100%;width:100%!important;box-sizing:border-box;margin:0!important;background:#16210a!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;box-shadow:0 6px 16px rgba(14,15,12,.14)!important;text-shadow:none!important;z-index:1} #top #sl .sl__card .rc__text{color:#f1f4ec} #top #sl .sl__card .reply{background:rgba(224,244,28,.10)!important} #top #sl .sl__card .reply__lbl{color:#e0f41c!important} #top #sl .sl__card .reply__txt{height:2.6em} #top #sl .sl__rate{position:relative!important;left:auto!important;top:auto!important;order:3;margin-right:auto;background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid rgba(22,33,10,.12)!important} #top #sl .sl__rate b{color:#111!important} #top #sl .sl__rate b .rstars .off svg{fill:rgba(22,33,10,.2)!important} #top #sl .sl__nav{position:relative!important;top:auto!important;right:auto!important;order:4;display:flex!important} #top #sl .sl__btn{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:1px solid rgba(22,33,10,.14)!important} #top #sl .sl__btn svg{stroke:#111!important} } /* ---------- wa- v2: watchOS plays no