.ugc-landing { font-family: var(--pl-font); }
/* white hero: the logo splash PNG is the stage, three phones sit where they were in the 1422x1315 design */
.ugc-hero { background: #fff; padding: calc(61px + 12px) 0 24px; position: relative; overflow: hidden; }
.ugc-stage { position: relative; width: min(calc(100% - 32px), 1000px, calc((100vh - 97px) * 1.0814)); min-width: 560px; aspect-ratio: 1422 / 1315; margin: 0 auto; --ugc-stage-bg: url('https://cdn2.chilli.ee/files/chilli-cloud/0bd9dab415f44c039c96e3cc8a33f684.png'); background: var(--ugc-stage-bg) center / 100% 100% no-repeat; container-type: inline-size; }
/* the same PNG again above the phones, so logo tiles overlap the phone edges as in the design; the faint Chilli mark behind the center screen is cut out */
.ugc-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--ugc-stage-bg) center / 100% 100% no-repeat; clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 53.8% 51.4%, 61.2% 51.4%, 61.2% 57%, 53.8% 57%, 53.8% 51.4%); }
.ugc-phone { position: absolute; box-sizing: border-box; aspect-ratio: 458 / 981; background: #000; border: .6cqw solid #2a2e36; border-radius: 3.6cqw; box-shadow: 0 24px 60px rgba(0,0,0,.28); overflow: hidden; }
.ugc-phone--center { left: 33.9%; top: 16.9%; width: 32.2%; z-index: 2; }
.ugc-phone--left, .ugc-phone--right { top: 26.6%; width: 23.9%; border-width: .45cqw; border-radius: 2.7cqw; z-index: 1; }
.ugc-phone--left { left: 11.4%; }
.ugc-phone--right { left: 64.7%; }
.ugc-phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* no native iOS play badge; the page shows its own on phones (.is-idle) */
.ugc-phone video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.ugc-phone video::-webkit-media-controls { display: none !important; }
.ugc-phone-empty { display: grid; place-items: center; height: 100%; color: #8e95a1; padding: 20px; text-align: center; }
.ugc-phone-ov { position: absolute; left: 14px; right: 14px; top: 16px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.ugc-phone-ov b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ugc-phone-ov b img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; object-fit: cover; }
.ugc-phone-sub { display: block; font-size: 12px; color: #ddd; margin-top: 4px; }
.ugc-phone--left .ugc-phone-ov, .ugc-phone--right .ugc-phone-ov { left: 10px; right: 10px; top: 12px; }
.ugc-phone--left .ugc-phone-ov b, .ugc-phone--right .ugc-phone-ov b { font-size: 12px; }
.ugc-phone--left .ugc-phone-ov b img, .ugc-phone--right .ugc-phone-ov b img { width: 24px; height: 24px; }
.ugc-phone--left .ugc-phone-sub, .ugc-phone--right .ugc-phone-sub { font-size: 11px; }
/* phones: the mobile splash (799x1315, same height as the desktop 1422x1315 one) with only the center phone, centered and at the same pixel size; the side phones are hidden */
@media (max-width: 700px) {
  .ugc-stage { min-width: 0; --ugc-stage-bg: url('https://cdn2.chilli.ee/files/chilli-cloud/ba0036fad69746edb59efa6bde58c30d.png'); aspect-ratio: 799 / 1315; width: 100vw; margin-left: calc(50% - 50vw); }
  .ugc-stage::after { clip-path: none; }
  .ugc-phone--center { left: 21.34%; width: 57.32%; border-width: 1.07cqw; border-radius: 6.4cqw; }
  .ugc-phone--left, .ugc-phone--right { display: none; }
}
.ugc-sound { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 12px 22px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; font-weight: 800; letter-spacing: .02em; color: #fff; background-color: #18ae00; background-image: linear-gradient(135deg, #18ae00 0%, #4cd964 100%); box-shadow: 0 10px 28px rgba(0,0,0,.35); cursor: pointer; z-index: 1; }
.ugc-sound:hover { background-image: linear-gradient(135deg, #159400 0%, #3fc456 100%); }
.ugc-sound[hidden] { display: none; }
.ugc-sound svg { width: 22px; height: 22px; }
@media (max-width: 700px) { .ugc-sound { font-size: 13px; padding: 9px 14px; gap: 6px; } .ugc-sound svg { width: 18px; height: 18px; } }
.ugc-mute { position: absolute; right: 12px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.55); cursor: pointer; z-index: 1; }
.ugc-mute[hidden] { display: none; }
.ugc-mute svg { width: 22px; height: 22px; }
.ugc-mute .ugc-mute-on, .ugc-mute[aria-pressed="false"] .ugc-mute-off { display: none; }
.ugc-mute[aria-pressed="false"] .ugc-mute-on { display: block; }
@media (max-width: 700px) { .ugc-mute { width: 36px; height: 36px; right: 8px; bottom: 10px; } .ugc-mute svg { width: 18px; height: 18px; } }
/* white hero: no bar behind the menu until the page scrolls, like the other partner pages */
.partner-header:not(.partner-header--scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; }
.ugc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ugc-step { text-align: center; background: #fff; border: 1px solid var(--pl-border); border-radius: var(--pl-radius); padding: 22px; box-shadow: var(--pl-shadow); }
.ugc-step-n { width: 36px; height: 36px; border-radius: 50%; background: var(--pl-chilli); color: #fff; display: grid; place-items: center; font-weight: 800; margin: 0 auto 14px; }
.ugc-step h3 { font-size: 18px; margin: 0 0 6px; } .ugc-step p { color: var(--pl-muted); font-size: 14px; margin: 0; }
.pl-stats.ugc-stats3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .pl-stats.ugc-stats3 { grid-template-columns: repeat(3, 1fr); } }
.ugc-wall { overflow: hidden; position: relative; margin-top: 8px; }
.ugc-wall-track { display: flex; gap: 14px; width: max-content; animation: ugc-wall var(--ugc-wall-dur, 40s) linear infinite; }
@keyframes ugc-wall { to { transform: translateX(-50%); } }
.ugc-wcard { width: 230px; background: #fff; border: 1px solid var(--pl-border); border-radius: var(--pl-radius); overflow: hidden; text-decoration: none; color: inherit; }
.ugc-wcard img { width: 100%; height: 140px; object-fit: cover; display: block; }
.ugc-wcard div { padding: 10px 12px; }
.ugc-wcard b { display: block; font-size: 13px; line-height: 1.3; height: 34px; overflow: hidden; }
.ugc-wcard span { display: block; font-size: 12px; color: var(--pl-muted); }
.ugc-wcard em { font-style: normal; font-size: 12px; color: var(--pl-chilli-dark); font-weight: 700; }
.ugc-who { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.ugc-who .pl-section-head { margin-bottom: 0; }
@media (min-width: 861px) { .ugc-who .pl-section-head { text-align: left; margin: 0; } }
.ugc-who ul { margin: 0; color: var(--pl-muted); gap: 14px; }
.ugc-who li strong { color: var(--pl-text, #0f1114); font-weight: 700; }
.ugc-who .pl-section-head p + p { margin-top: 10px; }
.ugc-form { background: #fff; border: 1px solid var(--pl-border); border-radius: 18px; padding: 28px; box-shadow: var(--pl-shadow); max-width: 760px; margin: 0 auto; }
.ugc-form h2 { font-size: 26px; margin: 0 0 6px; }
.ugc-form-sub { color: var(--pl-muted); margin: 0 0 6px; }
.ugc-form-flash { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.ugc-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
.ugc-col { display: grid; grid-template-columns: minmax(0, 1fr); }
.ugc-fld { display: grid; gap: 5px; margin-top: 12px; }
.ugc-fld > span:first-child { font-size: 13px; font-weight: 600; }
.ugc-fld input, .ugc-fld textarea { width: 100%; border: 1px solid #cfd3da; border-radius: 10px; padding: 11px 12px; font: inherit; background: #fff; box-sizing: border-box; }
.ugc-fld input:focus, .ugc-fld textarea:focus { outline: 2px solid var(--pl-chilli); outline-offset: 1px; border-color: var(--pl-chilli); }
.ugc-fld.is-err input { border-color: #dc2626; }
.ugc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ugc-form-actions { margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ugc-form-actions small { color: var(--pl-muted); max-width: 46ch; }
.ugc-link { border: 0; background: none; padding: 0; color: var(--pl-chilli-dark); font-weight: 600; text-decoration: underline; cursor: pointer; font: inherit; }
.ugc-thanks { text-align: center; padding: 30px 10px; }
.ugc-thanks-ico { width: 64px; height: 64px; border-radius: 50%; background: #ecfdf5; color: #047857; display: grid; place-items: center; margin: 0 auto 14px; font-size: 28px; }
.ugc-thanks p { color: var(--pl-muted); max-width: 52ch; margin: 8px auto 18px; }
/* terms modal: gradient header, numbered cards, the refund term as the highlight, content tips on a soft gradient */
.ugc-terms { width: min(780px, calc(100vw - 24px)); max-height: min(90vh, 960px); border: 0; border-radius: 24px; padding: 0; overflow: auto; background: #fff; box-shadow: 0 30px 90px rgba(15, 23, 42, .35); overscroll-behavior: contain; }
.ugc-terms::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.ugc-terms-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; color: #fff; background: linear-gradient(135deg, #129000 0%, #18ae00 45%, #4cd964 100%); }
.ugc-terms-head h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.ugc-terms-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .2); cursor: pointer; }
.ugc-terms-x:hover { background: rgba(255, 255, 255, .32); }
.ugc-terms-x svg { width: 20px; height: 20px; }
.ugc-terms-body { color: #334155; font-size: 14.5px; line-height: 1.55; padding: 22px 24px 8px; }
.ugc-terms-body h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #0f1114; line-height: 1.3; }
.ugc-terms-body p { margin: 0; }
.ugc-tcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ugc-tcard { background: #fff; border: 1px solid #e6ebe4; border-radius: 18px; padding: 16px 18px 18px; box-shadow: 0 2px 10px rgba(15, 23, 42, .04); }
.ugc-tcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ugc-tcard-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, #18ae00, #4cd964); }
.ugc-tcard-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #18ae00; background: #effaeb; }
.ugc-tcard-ico svg { width: 22px; height: 22px; }
.ugc-tcard--money { grid-column: 1 / -1; border: 0; color: #eaffdf; background: radial-gradient(120% 140% at 100% 0%, #4cd964 0%, rgba(76, 217, 100, 0) 55%), linear-gradient(135deg, #0f1f0c 0%, #1b3d12 60%, #18ae00 140%); box-shadow: 0 12px 30px rgba(24, 174, 0, .22); padding: 20px 22px 22px; }
.ugc-tcard--money h4 { color: #fff; font-size: 19px; }
.ugc-tcard--money .ugc-tcard-n { background: #fff; color: #129000; }
.ugc-tcard--money .ugc-tcard-ico { color: #fff; background: rgba(255, 255, 255, .16); }
.ugc-tcard-note { margin-top: 12px !important; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 13.5px; color: #d6f5c8; }
.ugc-tgood { margin-top: 18px; border-radius: 20px; padding: 20px; background: linear-gradient(135deg, #f1fbec 0%, #e9f7ff 100%); border: 1px solid #dcefd3; }
.ugc-tgood h4 { font-size: 19px; }
.ugc-tgood-intro { color: #475569; }
.ugc-tgood-grid { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ugc-tgood-grid li { position: relative; background: #fff; border-radius: 14px; padding: 14px 14px 14px 46px; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); }
.ugc-tgood-grid li::before { content: ""; position: absolute; left: 14px; top: 15px; width: 22px; height: 22px; border-radius: 50%; background: #18ae00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ugc-tgood-grid strong { display: block; color: #0f1114; margin-bottom: 2px; }
.ugc-tgood-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ugc-tgood-grid span { font-size: 13.5px; color: #475569; }
.ugc-tgood-outro { margin-top: 14px !important; padding: 18px 22px; border-radius: 16px; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.5; color: #fff; background: radial-gradient(90% 160% at 0% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(135deg, #129000 0%, #18ae00 45%, #4cd964 100%); box-shadow: 0 10px 24px rgba(24, 174, 0, .22); }
.ugc-terms-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 14px 24px 18px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 40%); }
.ugc-terms-foot .pl-btn--primary { padding: 12px 26px; }
@media (max-width: 640px) { .ugc-tcards, .ugc-tgood-grid { grid-template-columns: 1fr; } .ugc-terms-head { padding: 18px; } .ugc-terms-head h3 { font-size: 19px; } .ugc-terms-body { padding: 16px 16px 4px; } .ugc-terms-foot { padding: 12px 16px 16px; } }
/* green check bullets (Chilli Plus green) */
.ugc-check { list-style: none; padding: 0; display: grid; }
.ugc-check li { position: relative; padding-left: 32px; }
.ugc-check li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: #51ab24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
/* social channel inputs: round brand icon, the fixed start of the address in grey, only the handle is typed */
.ugc-net-in { display: flex; align-items: center; border: 1px solid #cfd3da; border-radius: 10px; background: #fff; padding-left: 10px; cursor: text; }
.ugc-net-in:focus-within { outline: 2px solid var(--pl-chilli); outline-offset: 1px; border-color: var(--pl-chilli); }
.ugc-net { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.ugc-net-pre { flex: none; margin-left: 10px; color: #8a909a; white-space: nowrap; -webkit-user-select: none; user-select: none; }
.ugc-fld .ugc-net-in input { flex: 1 1 0; width: 0; min-width: 0; border: 0; border-radius: 0 10px 10px 0; padding: 11px 12px 11px 0; background: transparent; font-weight: 600; }
.ugc-fld .ugc-net-in input:focus { outline: 0; }
.ugc-fld .ugc-net-in input::placeholder { font-weight: 400; color: #b3b8c0; }
.ugc-fld.is-err .ugc-net-in { border-color: #dc2626; }
.ugc-fld.is-err input:focus, .ugc-fld.is-err .ugc-net-in:focus-within { border-color: #dc2626; outline-color: #dc2626; }
.ugc-fld.is-ok .ugc-net-in::after { content: ""; flex: none; width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; background: #18ae00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ugc-net-hint { margin: 10px 0 0; font-size: 13px; color: var(--pl-muted); }
.ugc-net svg { width: 17px; height: 17px; display: block; }
.ugc-net--tiktok { background: #000; }
.ugc-net--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.ugc-net--facebook { background: #1877f2; }
.ugc-net--youtube { background: #ff0000; }
.ugc-fld-err { color: #dc2626; font-size: 13px; font-style: normal; }
@media (max-width: 860px) { .ugc-who, .ugc-steps { grid-template-columns: 1fr; } .ugc-grid2 { grid-template-columns: minmax(0, 1fr); } }
/* narrow phones: smaller fixed part leaves room for the handle; the input stays 16px so iOS does not zoom */
@media (max-width: 480px) { .ugc-net-pre { font-size: 14px; margin-left: 8px; } }
@media (prefers-reduced-motion: reduce) { .ugc-wall-track { animation: none; } }
/* form CTA 25% larger than .pl-btn; colours come from .pl-btn--primary */
.ugc-form .pl-btn--primary { padding: 15px 25px; font-size: 1.1875rem; }
.ugc-form .pl-btn--primary[disabled] { opacity: .6; cursor: progress; }
.ugc-form-flash[hidden] { display: none; }
/* thank-you page on its own, centred below the fixed header */
.ugc-landing--done { display: grid; align-items: center; min-height: 72vh; padding-top: 61px; }
/* phone: side videos wait on their first frame with a play badge; a paused center shows it too */
@media (max-width: 767.98px) {
  .ugc-phone { cursor: pointer; }
  .ugc-phone.is-idle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(0, 0, 0, .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 24px no-repeat; pointer-events: none; }
  /* the side phones stick out of the screen: badge on their visible half */
  .ugc-phone--left.is-idle::after { left: 72%; }
  .ugc-phone--right.is-idle::after { left: 28%; }
}
/* partner logos: checkerboard of colour tiles and airy logos, positions per grid width from the controller */
#partner-logod .pl-logo-cell { order: var(--o4); }
@media (min-width: 640px) { #partner-logod .pl-logo-cell { order: var(--o5); } }
@media (min-width: 992px) { #partner-logod .pl-logo-cell { order: var(--o10); } }