@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    src: url('font/poppins/poppins-latin-100.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 100;
    src: url('font/poppins/poppins-latin-100italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    src: url('font/poppins/poppins-latin-200.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 200;
    src: url('../fonts/poppins-latin-200italic.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/poppins-latin-300.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 300;
    src: url('font/poppins/poppins-latin-300italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-latin-400.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    src: url('font/poppins/poppins-latin-400italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins-latin-500.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 500;
    src: url('font/poppins/poppins-latin-500italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-latin-600.woff2') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 600;
    src: url('font/poppins/poppins-latin-600italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('font/poppins/poppins-latin-700.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    src: url('font/poppins/poppins-latin-700italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url('font/poppins/poppins-latin-800.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 800;
    src: url('font/poppins/poppins-latin-800italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    src: url('font/poppins/poppins-latin-900.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 900;
    src: url('font/poppins/poppins-latin-900italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100;
    src: url('font/noto/noto-sans-latin-100.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 100;
    src: url('font/noto/noto-sans-latin-100italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 200;
    src: url('font/noto/noto-sans-latin-200.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 200;
    src: url('font/noto/noto-sans-latin-200italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 300;
    src: url('font/noto/noto-sans-latin-300.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 300;
    src: url('font/noto/noto-sans-latin-300italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: url('font/noto/noto-sans-latin-400.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 400;
    src: url('font/noto/noto-sans-latin-400italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    src: url('font/noto/noto-sans-latin-500.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 500;
    src: url('font/noto/noto-sans-latin-500italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 600;
    src: url('font/noto/noto-sans-latin-600.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 600;
    src: url('font/noto/noto-sans-latin-600italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    src: url('font/noto/noto-sans-latin-700.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 700;
    src: url('font/noto/noto-sans-latin-700italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 800;
    src: url('font/noto/noto-sans-latin-800.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 800;
    src: url('font/noto/noto-sans-latin-800italic.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 900;
    src: url('font/noto/noto-sans-latin-900.woff2?v=1.0.0') format('woff2')
}

@font-face {
    font-display: swap;
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 900;
    src: url('font/noto/noto-sans-latin-900italic.woff2?v=1.0.0') format('woff2')
}

:root {
    --primary-color: #0b6467;
    --header-height: 65px
}

*,
::before,
::after {
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    box-sizing: border-box
}

::before,
::after {
    vertical-align: inherit
}

html,
[data-menu],
[data-profile],
.geo-scroller,
body noscript {
    overscroll-behavior-y: none
}

html {
    color: #122227;
    -ms-overflow-style: scrollbar;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: 'Poppins', 'system-ui', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    height: auto;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    word-break: normal;
    overflow-wrap: break-word;
    scroll-padding-top: 60px
}

[data-route="root"] {
    scroll-padding-top: 35px
}

:root .fw-100 {
    font-weight: 100
}

:root .fw-200 {
    font-weight: 200
}

:root .fw-300 {
    font-weight: 300
}

body,
:root .fw-400 {
    font-weight: 400
}

.hgroup h1 {
    font-size: 3rem
}

h1,
.h1 {
    font-size: 2rem
}

h2,
.h2 {
    font-size: 1.5rem
}

h3,
.h3,
[data-route="root"] .faq h4 {
    font-size: 1.17rem
}

h4,
.h4 {
    font-size: 1.1rem
}

footer .h4 {
    font-size: .875rem
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
:root .fw-500 {
    font-weight: 500
}

:root .fw-600 {
    font-weight: 600
}

:root .fw-700 {
    font-weight: 700
}

:root .fw-800 {
    font-weight: 800
}

:root .fw-900 {
    font-weight: 900
}

h1 strong {
    font-weight: inherit
}

html,
body {
    min-height: 100%
}

body {
    background-color: #f9f9f9
}

article,
aside,
button,
footer,
header,
details,
main,
nav,
search,
section,
picture,
dialog,
.hgroup,
[data-menu],
video,
iframe,
figure,
figcaption,
form,
output {
    display: block
}

button,
input {
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none
}

time,
small {
    display: inline
}

.font-small {
    font-size: 14px
}

h1,
h2,
h3,
h4,
h5,
h6,
caption {
    margin-bottom: 20px;
    padding-top: 30px;
    margin-top: 0
}

h1 {
    margin-top: 80px;
    line-height: 1.2
}

.cover-cta-login a {
    display: inline-block
}

.hgroup h1 {
    padding-top: 0
}

p {
    margin-bottom: 16px
}

nav ul,
nav ol,
nav li {
    list-style-type: none;
    list-style: none
}

main ol,
main ul {
    margin-bottom: 16px;
    padding-inline-start: 30px
}

main ol ol,
main ul ul {
    margin-bottom: 4px;
    margin-top: 4px
}

small {
    font-size: inherit
}

dfn,
abbr,
cite,
address,
output,
fieldset,
button,
input {
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit
}

a,
button,
summary,
[data-backdrop] {
    cursor: pointer
}

summary {
    display: list-item
}

svg:not([fill]):not(.flag) {
    fill: currentColor
}

html:not([data-route="faq"]) main header:first-of-type,
.cta-bottom-container,
[data-route="root"] .faq summary {
    text-wrap: balance
}

.geo-list,
.header,
svg:not(:root),
[data-button="close-menu"],
[data-button="open-menu"] {
    overflow: hidden
}

img,
video {
    height: auto;
    pointer-events: none
}

img,
video,
iframe,
button,
dialog,
input,
fieldset {
    border-radius: 0;
    border: 0;
    border: 0 none
}

video,
iframe {
    resize: none
}

input,
button,
img,
svg,
video,
iframe[data-profile] {
    vertical-align: middle;
    max-width: 100%
}

input,
button {
    overflow: visible
}

input,
button {
    color: inherit
}

a {
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    color: inherit
}

[data-route="root"] .cta-button,
.footer a {
    text-decoration: none
}

.cta-button:hover,
.cta-button:focus,
.footer a:hover,
.footer a:focus {
    text-decoration: underline
}

[data-route="terms"] main a,
[data-route="privacy"] main a {
    color: revert
}

[data-route="terms"] main,
[data-route="privacy"] main {
    max-width: 60em
}

::-moz-focus-inner {
    border-style: none
}

em {
    font-style: normal
}

.text-animation-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

:root:not([lang="ja-JP"]):not([lang="ko-KR"]):not([lang^="zh-"]):not([lang="th-TH"]) .base-text {
    margin-inline-end: .25em
}

.text-animation-words-container {
    display: grid
}

.text-animation-word {
    margin: 0;
    grid-area: 1 / 1 / -1 / -1;
    will-change: opacity, transform;
    animation: fadeInOut 18s infinite both
}

.text-animation-word:nth-child(1) {
    animation-delay: -0s
}

.text-animation-word:nth-child(2) {
    animation-delay: -3s
}

.text-animation-word:nth-child(3) {
    animation-delay: -6s
}

.text-animation-word:nth-child(4) {
    animation-delay: -9s
}

.text-animation-word:nth-child(5) {
    animation-delay: -12s
}

.text-animation-word:nth-child(6) {
    animation-delay: -15s
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(20%)
    }

    2% {
        opacity: 1;
        transform: translateY(0%)
    }

    15% {
        opacity: 1;
        transform: translateY(0%)
    }

    18% {
        opacity: 0;
        transform: translateY(-40%)
    }

    100% {
        opacity: 0;
        transform: translateY(-40%)
    }
}

.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

[data-route="about"] body main header {
    min-height: unset
}

.geo-list .geo-scroller.search-result-empty::before {
    content: "(·.·)";
    text-align: center;
    font-size: 3rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    opacity: .2;
    background-color: #ebebeb
}

@media(min-width:1024px) {
    #pwa-install-container p:not(.h4) {
        padding-bottom: 0
    }

    .panel-book-grid {
        display: grid;
        grid-template-columns: auto auto auto;
        gap: 2rem
    }

    [data-route="faq"] header .cover-visual,
    [data-route="about"] header .cover-visual {
        height: calc(80% + 3rem)
    }

    .geo-icon {
        max-height: 27px
    }

    .geo-icon {
        color: #fff
    }
}

.about-intro-section {
    padding-top: 3rem;
    padding-bottom: 3rem
}

.cta-inserted {
    margin-top: -2rem;
    padding-bottom: 2rem;
    margin-bottom: -5rem;
    z-index: 2
}

.cta-inserted .cta a {
    display: inline-block;
    padding-inline-start: 1.5rem;
    padding-inline-end: .75rem;
    font-size: 1.25rem;
    background-color: #1f8082;
    font-weight: 500
}

.cta-inserted svg {
    margin-inline-start: .5rem
}

[dir="rtl"] .cta-inserted svg {
    transform: rotate(180deg)
}

[data-route="about"] h1~h2,
.about-intro-display h2~h3 {
    padding-top: 10px
}

[data-route="about"] header .cta a {
    background-color: #fff;
    color: var(--primary-color);
    text-align: center;
    font-weight: 600
}

[data-route="about"] header .cta {
    margin-top: 1.5rem
}

.about-intro-display svg {
    margin-inline: 1rem
}

.about-intro-pollrouter-logo,
.about-intro-partner-logos {
    text-align: center;
    display: block;
    margin: 0 auto;
    float: none
}

.about-intro-partner-logos svg {
    margin: 1rem
}

.about-intro-partner-logos svg:last-of-type {
    margin-top: 2rem
}

.trusted-surveys a {
    text-decoration: none
}

a,
input,
label,
button,
summary,
[data-backdrop],
iframe[data-profile] {
    touch-action: manipulation
}

.line-break::before {
    content: '';
    display: flow-root
}

header .brand {
    line-height: var(--header-height);
    position: fixed
}

.cover {
    background-color: var(--primary-color);
    color: #fff;
    position: relative
}

[dir="rtl"] .brand {
    left: 0
}

[dir="rtl"] .cta-button-list :first-child {
    order: 1
}

hr {
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    color: inherit;
    height: 0;
    overflow: visible;
    margin: 1rem 0
}

[data-route="root"] .header:not(.header-effect)>a,
[data-route="root"] .header:not(.header-effect)>button,
[data-route="root"] .header:not(.header-effect) .cta-button-list>a,
[data-route="about"] .header:not(.header-effect)>a,
[data-route="about"] .header:not(.header-effect)>button,
[data-route="about"] .header:not(.header-effect) .cta-button-list>a,
[data-route="faq"] .header:not(.header-effect)>a,
[data-route="faq"] .header:not(.header-effect)>button,
[data-route="faq"] .header:not(.header-effect) .cta-button-list>a {
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.2))
}

.header a,
[data-menu] a {
    text-decoration: none
}

[data-menu] ul {
    padding-top: 3rem
}

[lang^="en"] .cover-text h1,
[lang^="en"][data-route="about"] h1,
[lang^="en"] #supported-panels h3,
[lang^="en"][data-route="about"] h2,
[lang^="en"] .cta-inserted {
    text-transform: capitalize
}

[data-button="open-menu"] {
    color: #fff
}

[data-button="open-menu"] {
    position: fixed;
    margin-right: 20px;
    width: 38px;
    z-index: 30;
    right: 0;
    top: 0
}

.brand,
.geo-btn {
    z-index: 29
}

[data-button="close-menu"] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 60
}

[data-button="close-menu"] svg {
    width: 22px;
    height: 22px
}

[data-menu] {
    background-color: var(--primary-color);
    color: #fff;
    z-index: 50;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    top: 0;
    left: 100%;
    bottom: 0;
    height: 100%;
    width: 275px;
    max-width: 85%;
    min-width: 50px;
    box-shadow: 5px 0 5px 3px #323232;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transition: -webkit-transform 225ms cubic-bezier(0, 0, .2, 1);
    transition: transform 225ms cubic-bezier(0, 0, .2, 1);
    transition: transform 225ms cubic-bezier(0, 0, .2, 1), -webkit-transform 225ms cubic-bezier(0, 0, .2, 1);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-size: 1rem
}

[data-menu][aria-hidden="true"],
[data-menu][hidden] {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

[data-menu] a,
[data-button="close-menu"] {
    color: inherit;
    padding: 10px 20px;
    display: block
}

body noscript {
    display: none
}

[data-menu]::-webkit-scrollbar {
    display: none
}

[data-menu],
[data-scroll] [data-backdrop],
#consent-dialog {
    position: fixed
}

[data-backdrop] {
    visibility: hidden;
    height: 0;
    width: 0
}

[data-scroll] [data-backdrop] {
    transition: background-color 150ms
}

[data-scroll] [data-backdrop] {
    visibility: visible;
    z-index: 15
}

[data-scroll="none"] [data-backdrop] {
    background-color: rgba(0, 0, 0, 0.2)
}

[data-scroll] [data-backdrop] {
    contain: content;
    max-height: 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important
}

[hidden],
#consent-dialog:not([open]) {
    display: none !important
}

[data-consent-mode="true"] #consent-dialog {
    z-index: 10;
    bottom: 0;
    top: auto;
    margin: 0 auto 1.25rem auto;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14), 0 10px 10px rgb(0 0 0 / 16%);
    padding: 1rem 2rem;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 20px;
    max-width: 90%;
    overscroll-behavior: contain;
    background-color: #f9f9f9;
    overflow: hidden
}

#consent-dialog::backdrop {
    animation-name: backdrop-background;
    animation-duration: 900ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    background-color: rgba(0, 0, 0, 0.1)
}

#consent-dialog table {
    padding-top: .5rem
}

#consent-dialog details {
    padding: 0 .25rem
}

#consent-dialog td {
    white-space: nowrap
}

#consent-dialog tbody tr:nth-child(odd) {
    background-color: #eee
}

.consent-list {
    padding-inline-start: 1.5rem;
    font-size: .9rem
}

.consent-list p {
    margin-bottom: .25rem
}

.sticky-cookie-notice {
    position: sticky;
    top: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e6e6e6;
    z-index: 2;
    max-height: 50vh
}

#consent-dialog summary {
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: relative;
    padding-inline-start: 2rem
}

#consent-dialog .cookies-description p {
    padding-top: .5rem
}

.dialog-actions {
    display: flex;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .9rem;
    background-color: #f9f9f9
}

.dialog-actions button {
    padding: .5rem 1rem;
    margin-inline: .5rem;
    border-radius: 50px;
    font-weight: 500;
    text-wrap-style: balance
}

#accept-cookies {
    background-color: var(--primary-color);
    color: #fff;
    width: 55%
}

#reject-cookies {
    border: 3px solid var(--primary-color);
    width: 45%;
    color: var(--primary-color)
}

.cookies-description {
    display: flex;
    justify-items: center;
    align-items: center
}

#consent-dialog .cookies-description svg {
    fill: var(--primary-color)
}

.cookies-description p {
    padding-inline-start: 1rem
}

.consent-scroller {
    overflow: auto;
    overscroll-behavior: contain;
    max-height: 50vh
}

input,
button,
video,
[data-backdrop],
[data-frame],
iframe[data-profile] {
    background-color: rgba(0, 0, 0, 0);
    background-color: transparent
}

[data-frame],
iframe[data-profile] {
    line-height: 0
}

.geo-scroller ::selection,
.cta ::selection,
svg::selection,
img::selection,
iframe::selection,
[data-menu] ::selection,
[data-button] ::selection,
summary::selection {
    text-shadow: none;
    background-color: rgba(0, 0, 0, 0);
    background-color: transparent
}

[data-route="panel"] [data-frame],
[data-route="account"] [data-frame] {
    z-index: 2;
    padding-top: var(--header-height)
}

.geo-btn {
    min-width: 38px;
    max-height: var(--header-height);
    height: var(--header-height);
    overflow: hidden;
    top: 0;
    right: 0;
    position: fixed;
    font-size: 14px;
    margin-right: 70px
}

.geo-btn,
[data-button="open-menu"] {
    line-height: 1
}

.geo-btn .flag,
.geo-btn .geo-icon {
    height: auto;
    width: 33px
}

:has(.geo-btn[aria-expanded="true"]) [data-frame] iframe {
    pointer-events: none
}

.geo-list {
    contain: layout;
    position: fixed;
    z-index: 5;
    background-color: #f9f9f9;
    height: 100%;
    height: calc(100% - var(--header-height));
    max-height: 100%;
    max-height: calc(100% - var(--header-height));
    right: 0;
    top: var(--header-height)
}

.geo-scroller {
    overflow-y: auto;
    height: 100%
}

#consent-dialog details[open] .consent-scroller {
    background-color: #f9f9f9;
    background: linear-gradient(#f9f9f9 30%, rgba(249, 249, 249, 0)) center top, linear-gradient(rgba(249, 249, 249, 0), #f9f9f9 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)) center bottom;
    background-repeat: no-repeat;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll
}

.geo-scroller {
    background: linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) center top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)) center bottom;
    background-repeat: no-repeat;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll
}

.geo-list .flag {
    height: auto;
    width: 40px;
    border-radius: 2px;
    margin-inline-end: 14px;
    vertical-align: top
}

img.flag {
    box-shadow: 1px 1px 1px #d0d0d0
}

.geo-btn .flag,
.geo-list .flag {
    border-radius: 2px;
    box-shadow: 0 1px 2px #00000038
}

[data-region] {
    font-size: .9rem;
    color: inherit;
    width: 100%;
    text-align: left;
    text-align: start;
    padding: 8px 20px;
    white-space: nowrap;
    overflow: clip;
    contain: strict
}

[data-region] {
    display: flex
}

.geo-list [data-region] a {
    display: flex
}

.geo-list [data-region] .flag {
    align-self: center;
    min-width: 25px;
    contain: strict
}

.geo-list [data-region] .geo-item {
    display: flex;
    flex-direction: column;
    align-self: center;
    pointer-events: none
}

.geo-list [data-region] .geo-item small {
    padding-top: 4px;
    font-size: 12px
}

.geo-list:not([data-prompt]) {
    padding-top: 65px
}

.geo-list-nav {
    margin-top: -65px;
    padding: 0
}

.geo-list:not([data-prompt]) .geo-list-nav {
    display: block;
    max-height: var(--header-height);
    height: var(--header-height);
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px
}

.geo-scroller {
    margin-top: 0;
    overflow-x: hidden
}

.geo-list-nav {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    overflow: hidden;
    padding: 0
}

#loc-title {
    width: 100%;
    display: block;
    background-color: white;
    z-index: 90;
    position: relative
}

input#geo-search {
    width: 100%;
    height: 100%;
    display: block;
    padding: 1rem 4.5rem;
    padding-inline-end: 1rem;
    background-color: white;
    color: black;
    border: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='22px' viewBox='0 -960 960 960' width='22px' fill='%23757575'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E");
    background-position: 1.65rem;
    outline: 0
}

input#geo-search:focus {
    outline-width: 0
}

.geo-list-nav-button {
    border-radius: 2px
}

#menu[data-menu][aria-hidden="true"],
.geo-btn[aria-expanded="false"]~.geo-list:not([data-prompt]) .geo-list-nav,
.geo-btn[aria-expanded="false"]~.geo-list:not([data-prompt]) li {
    content-visibility: hidden
}

@media(min-width:1025px) {
    section[aria-labelledby="trusted-surveys"] {
        padding-top: 3rem;
        padding-bottom: 3rem
    }

    #consent-dialog td {
        white-space: nowrap
    }

    search.geo-list:not([data-prompt]) {
        width: 350px
    }

    :has(input#geo-search:not(:placeholder-shown)) .geo-list:not([data-prompt]) {
        height: min-content;
        padding-bottom: 0
    }

    search#geo-list,
    .geo-list:not([data-prompt]) .geo-scroller {
        max-height: calc(80vh - 65px)
    }

    .geo-list:not([data-prompt]) .geo-scroller {
        height: min-content
    }

    .geo-list-nav-button {
        display: none
    }
}

@media(min-width:1025px) and (min-height:600px) {
    :has(input#geo-search:not(:placeholder-shown)) .geo-list:not([data-prompt]) {
        height: min-content;
        padding-bottom: 0
    }
}

svg,
[data-pointer="none"] {
    pointer-events: none
}

[data-route="panel"],
[data-route="account"] {
    -ms-overflow-style: none;
    scrollbar-width: none
}

[data-button="open-menu"] {
    height: var(--header-height)
}

.brand {
    line-height: 45px
}

.header {
    background-color: var(--primary-color);
    position: fixed;
    height: var(--header-height);
    width: 100%;
    top: 0;
    left: 0;
    z-index: 15;
    box-shadow: 0 0 12px rgba(0, 0, 0, .5)
}

.brand {
    padding: 0 15px;
    color: inherit
}

.cta {
    display: block
}

.cta-bottom-container {
    padding: 2rem 0
}

#rewards .cta-bottom-container {
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.25))
}

.cta a,
.cta-bottom a,
.cta-bottom-pretext {
    font-size: 1.4em;
    font-weight: 600
}

.cta-bottom-pretext {
    font-weight: 500
}

[data-route="root"] #rewards .cta-bottom,
[data-route="root"] #rewards .cta-bottom-pretext {
    font-weight: inherit
}

[data-route="root"] #rewards .cta-bottom-container {
    font-weight: 300
}

[data-route="root"] #rewards .cta-bottom a {
    font-weight: 400
}

.cover .cta a {
    background-color: #fff;
    color: var(--primary-color);
    font-size: 1.5rem
}

[lang="en"] .cover .cta a {
    font-size: 1.4rem
}

[lang="en"] .cover-rewards {
    transform: scale(.94)
}

.cover .cta {
    padding-bottom: 1rem;
    padding-top: 1rem
}

#rewards .cover-visual {
    filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, 0.2));
    opacity: .6
}

.cta a,
.cta-bottom a {
    display: inline-block;
    border-radius: 2em;
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    max-width: 100%;
    padding: .6rem 2rem;
    text-shadow: none;
    text-decoration: none
}

.cta-inserted .cta a {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12)
}

.cta-bottom a {
    border: 0;
    background-color: transparent;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    padding: 10px 25px;
    display: inline-block;
    border-radius: 6px;
    text-align: center;
    box-shadow: none;
    margin-bottom: .5em;
    margin: 0;
    padding: 0
}

.trusted-surveys small {
    font-size: 13px
}

.trusted-surveys {
    line-height: 1.2
}

.trusted-brands {
    opacity: .6;
    padding-bottom: 6rem
}

.trusted-logos {
    padding-top: 1.2rem
}

.trusted-logos svg {
    margin-inline: .75rem;
    height: auto
}

.trusted-logos svg:first-of-type {
    margin-top: -15px;
    width: 110px
}

.trusted-logos svg:last-of-type {
    width: 80px
}

[lang="en-IN"] .indian-rupee,
svg .currency-icon {
    font-family: 'Noto Sans', Arial, 'system-ui', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif
}

svg.reward-money .currency-icon {
    fill: #fff
}

svg.reward-money .currency-icon:not([font-size]) {
    font-size: 160px
}

:root[dir="rtl"] #how-it-works .currency-icon {
    direction: ltr
}

[lang|=ja],
[lang|=ko] {
    text-underline-position: under right
}

[lang|=zh] {
    text-underline-position: under left
}

.footer nav {
    padding-bottom: 1.75rem
}

.footer nav ul {
    list-style: none
}

.footer nav li,
#pwa-install-container p {
    padding: .3rem 0
}

#pwa-install-container {
    padding-top: 30px;
    padding-bottom: 30px
}

#pwa-install-container p {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 10px
}

#pwa-install-container p.h4 {
    padding-bottom: 5px
}

footer .mb-15 {
    margin-bottom: 15px
}

[data-route="faq"] .faq .pwa-install,
[data-route="faq"] .locale-btn {
    display: inline;
    color: var(--primary-color);
    text-decoration: underline;
    vertical-align: bottom
}

.cover {
    overflow: hidden
}

header .cover-visual svg {
    min-width: calc(100% + 50px)
}

.cover-visual {
    position: absolute;
    max-width: 62.5rem;
    height: calc(100% + 4rem);
    top: 0;
    right: 0;
    opacity: .825;
    filter: drop-shadow(3px 4px 4px rgba(0, 0, 0, 0.3));
    mix-blend-mode: multiply;
    max-height: 100%;
    max-width: 100%
}

.cover-visual rect {
    fill: transparent
}

[data-route="root"] #rewards {
    position: relative
}

[data-route="root"] #rewards .cover-visual,
[dir="rtl"][data-route="faq"] header .cover-visual,
[dir="rtl"][data-route="about"] header .cover-visual {
    right: auto;
    left: 0
}

[data-route="root"] #rewards .cover-visual svg,
[dir="rtl"][data-route="faq"] header .cover-visual svg,
[dir="rtl"][data-route="about"] header .cover-visual svg {
    transform: scaleX(-1)
}

#loc-title {
    width: 100%;
    height: 100%
}

[data-region] {
    min-height: 50px
}

@media(max-width:320px) {
    .cover-text .hgroup h1 {
        font-size: 32px
    }
}

#consent-dialog .cookies-description svg {
    height: auto;
    min-width: 36px
}

[data-route="terms"] .header,
[data-route="privacy"] .header,
[data-route="contact"] .header,
[data-route="panel-book"] .header {
    background-color: #fbfbfbf0
}

[data-route="terms"] .header:not(.header-effect),
[data-route="privacy"] .header:not(.header-effect),
[data-route="contact"] .header:not(.header-effect),
[data-route="panel-book"] .header:not(.header-effect) {
    box-shadow: none
}

[data-route="terms"] [data-button="open-menu"],
[data-route="privacy"] [data-button="open-menu"],
[data-route="contact"] [data-button="open-menu"],
[data-route="panel-book"] [data-button="open-menu"],
[data-route="terms"] .cta-button-list a,
[data-route="privacy"] .cta-button-list a,
[data-route="contact"] .cta-button-list a,
[data-route="panel-book"] .cta-button-list a,
[data-route="terms"] .geo-btn svg,
[data-route="privacy"] .geo-btn svg,
[data-route="contact"] .geo-btn svg,
[data-route="panel-book"] .geo-btn svg {
    color: var(--primary-color)
}

[data-route="terms"] .geo-btn svg,
[data-route="privacy"] .geo-btn svg,
[data-route="contact"] .geo-btn svg,
[data-route="panel-book"] .geo-btn svg {
    fill: currentColor
}

[data-route="terms"] .header .brand-name g:first-of-type,
[data-route="privacy"] .header .brand-name g:first-of-type,
[data-route="contact"] .header .brand-name g:first-of-type,
[data-route="panel-book"] .header .brand-name g:first-of-type {
    color: #085f618f
}

[data-route="terms"] .header .brand-name g:last-of-type,
[data-route="privacy"] .header .brand-name g:last-of-type,
[data-route="contact"] .header .brand-name g:last-of-type,
[data-route="panel-book"] .header .brand-name g:last-of-type {
    color: var(--primary-color)
}

@media(min-width:769px) {
    .geo-list:not([data-prompt])[aria-hidden="true"] {
        display: none
    }

    .geo-list:not([data-prompt]):not([aria-hidden="true"]) {
        display: block
    }

    #consent-dialog .cookies-description svg {
        min-width: 40px
    }
}

@media(max-width:768px) {
    html:not([data-route="root"]) header .cover-visual {
        max-width: 600px;
        width: 600px
    }

    .consent-scroller {
        padding-top: 1rem
    }

    #consent-dialog table {
        padding-bottom: 2rem
    }

    #consent-dialog details:open summary {
        box-shadow: 0 8px 4px -2px #00000008
    }

    [data-menu] ul {
        padding-top: 4.5rem
    }

    [data-button="close-menu"] {
        padding: 15px 25px;
        margin-top: .5rem
    }

    ol.cover-steps {
        padding-left: 0;
        padding-right: 0
    }

    [data-menu] li {
        border-bottom: 1px solid #09575a5c
    }

    [data-menu] li:last-of-type {
        border: 0
    }

    [data-consent-mode="true"] #consent-dialog {
        margin: 0 auto 1rem auto;
        padding: 1rem;
        padding-top: 0;
        padding-bottom: 0
    }

    #consent-dialog .cookies-description p {
        padding-top: 1rem
    }

    .sticky-cookie-notice {
        padding-top: 0;
        padding-bottom: .5rem
    }

    .dialog-actions {
        padding-top: .5rem;
        flex-direction: column
    }

    .dialog-actions button {
        padding: .75rem .5rem;
        margin: 0;
        border-radius: 10px;
        font-size: .8rem
    }

    .dialog-actions #accept-cookies,
    .dialog-actions #reject-cookies {
        width: 100%
    }

    .dialog-actions #reject-cookies {
        margin-top: .25rem;
        padding: .5rem
    }

    #reject-cookies {
        border: 2px solid var(--primary-color)
    }

    .dialog-actions {
        justify-content: center
    }

    .geo-list:not([data-prompt]) {
        transform: translateX(0);
        transition: 275ms cubic-bezier(0, 0, .2, 1), -webkit-transform 275ms cubic-bezier(0, 0, .2, 1);
        transition-behavior: allow-discrete;
        z-index: 31
    }

    .geo-list:not([data-prompt])[aria-hidden="true"] {
        transform: translateX(100%);
        transition-behavior: allow-discrete
    }

    [data-route="faq"] main header:first-of-type {
        text-wrap: balance
    }

    .geo-scroller .order-top::after {
        inset-inline-end: 1.5rem
    }

    .cover-subtext {
        margin-bottom: .5rem
    }

    .cta-bottom {
        display: block;
        text-align: center
    }

    .pwa-laptop {
        display: none
    }
}

@media(max-width:430px) {
    .cta a {
        display: block
    }

    .cta-bottom a {
        text-align: center
    }

    html[data-route="root"] header .cover-visual {
        max-height: 60%
    }
}

.footer {
    position: relative;
    background-color: #f9f9f9;
    color: #122227;
    padding-top: 1rem;
    font-size: 14px;
    line-height: 1.3
}

.footer .cover-visual {
    opacity: .1;
    mix-blend-mode: hard-light
}

.footer .h4 {
    margin-bottom: 1rem;
    font-weight: 500;
    padding-top: 30px
}

.copyright svg {
    vertical-align: text-bottom
}

.social-media a {
    display: inline-block;
    margin: 0 .5rem
}

.social-media li {
    display: inline-block
}

.copyright {
    line-height: 2
}

.copyright small {
    margin-bottom: 15px;
    display: inline-block
}

.footnote {
    font-size: .75rem;
    opacity: .75;
    font-style: italic;
    padding-inline: .25rem;
    line-height: 1.4
}

.footnote::before {
    content: "*"
}

.footnote.trademark-note {
    margin-top: -2rem
}

.footnote.trademark-note::before {
    content: "™";
    font-size: 1rem;
    line-height: 0;
    padding-inline-end: .1rem
}

.highlighted-section {
    background-color: #085f6108;
    padding: 1rem 2rem;
    border-radius: 20px;
    padding-top: 0;
    margin-top: 4rem;
    margin-bottom: 2rem
}

.highlighted-section p {
    padding: .5rem 0 1rem 0;
    font-size: 1.1rem
}

[data-route="privacy"] blockquote,
[data-route="terms"] blockquote {
    background-color: #f5f5f5;
    padding: 1.5rem;
    font-weight: 300
}

[data-route="privacy"] main>.row>.column>p:first-of-type,
[data-route="terms"] main>.row>.column>p:first-of-type {
    padding-inline-start: 1rem;
    font-size: 1.1rem;
    font-weight: 300
}

.faq .faq-answer {
    padding: 0 1rem
}

.faq ol,
.faq ul {
    padding: 0;
    padding-inline-start: 1rem
}

[data-route="root"] .faq h4,
[data-route="faq"] .faq h3 {
    padding: .25rem 0;
    margin: 0;
    font-weight: 400
}

[data-route="root"] .faq h4 {
    font-weight: 500
}

[data-route="faq"] h2 {
    display: flex;
    align-items: center
}

[data-route="faq"] .row.faq {
    margin: 0 auto;
    max-width: 60em
}

[data-route="root"] .faq h3 {
    color: var(--primary-color);
    font-size: 1.5rem
}

[data-route="faq"] main header p {
    font-size: 1.25rem;
    font-weight: 300
}

[data-route="about"] main header p:first-of-type {
    font-size: 1.25rem
}

[data-route="about"] main header h2 {
    font-size: 1.65rem
}

section[aria-labelledby="trusted-surveys"] :first-child {
    order: 2
}

section[aria-labelledby="trusted-surveys"] :last-child {
    order: 1
}

.faq h2 svg {
    vertical-align: bottom;
    fill: var(--primary-color);
    margin-inline-end: .5rem;
    width: 40px;
    height: 40px;
    background-color: #085f6121;
    border-radius: 50%;
    border: 4px solid transparent
}

.faq summary {
    font-size: 1.1rem;
    border-radius: 4px;
    padding: .75rem .5rem
}

.faq details {
    border-bottom: 1px solid #ebebeb
}

.faq a,
.about-general a:not(.cta>a),
.about-intro-display a,
#consent-dialog a,
.panel-book a {
    color: var(--primary-color)
}

.faq summary::marker,
#consent-dialog summary::marker {
    display: none;
    content: ''
}

.faq details summary::after,
#consent-dialog summary::after {
    position: absolute;
    transform: rotate(0deg);
    bottom: 0;
    content: '';
    height: 0;
    position: absolute;
    inset-inline-end: 0;
    top: calc(50% - 1rem);
    transition: transform .2s ease-in-out;
    transform-origin: center center;
    width: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%233e4042'%3E%3Cpath d='M24 24H0V0h24v24z' fill='none' opacity='.87'/%3E%3Cpath d='M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z'/%3E%3C/svg%3E");
    background-size: 2rem 2rem;
    display: block;
    width: 2rem;
    height: 2rem
}

#consent-dialog summary::after {
    inset-inline-end: auto;
    inset-inline-start: -.5rem
}

.faq summary {
    position: relative;
    padding-inline-end: 3rem
}

.faq details[open] summary::after,
#consent-dialog details[open] summary::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

[data-route="faq"] main header,
[data-route="about"] main header {
    position: relative;
    min-height: 400px;
    background-color: var(--primary-color);
    color: #fff;
    padding-bottom: 4rem
}

[data-route="faq"] main header h1 {
    padding-top: 3.5rem
}

::details-content {
    transition: all .4s ease, content-visibility .4s allow-discrete;
    height: 0;
    overflow: clip
}

@supports(interpolate-size:allow-keywords) {
    :root {
        interpolate-size: allow-keywords
    }

    [open]::details-content {
        height: auto;
        padding-bottom: .5em
    }
}

@supports not (interpolate-size:allow-keywords) {
    [open]::details-content {
        height: 150px;
        overflow-y: scroll
    }
}

[data-prompt] .geo-scroller::before {
    display: block;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 400
}

[data-prompt] .geo-list-nav {
    display: none
}

.consent-scroller table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: .875rem
}

.consent-scroller th {
    font-weight: 600
}

caption {
    font-size: 1.1em;
    caption-side: top;
    caption-side: inline-start;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: -18px
}

th,
td,
caption {
    text-align: left;
    text-align: start
}

th,
td {
    padding: .2rem 20px
}

#consent-dialog th {
    white-space: nowrap
}

#consent-dialog tr td:last-child {
    min-width: 350px;
    max-width: 500px
}

#consent-dialog tr {
    border-bottom: 1px solid #ececec
}

code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

[data-route="root"] #rewards {
    background-color: var(--primary-color);
    color: #fff;
    padding-top: 4rem;
    padding-bottom: 4rem
}

[data-route="root"] section.faq {
    padding-top: 4rem
}

[data-route="root"] .faq ol li {
    margin-bottom: .5rem
}

.faq details:last-of-type {
    margin-bottom: 1.5rem
}

.reward-options {
    padding-bottom: 3rem;
    text-align: center;
    display: grid;
    row-gap: 10px;
    column-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))
}

.reward-options svg,
.reward-options img {
    aspect-ratio: 2;
    object-fit: contain;
    width: 120px;
    height: auto;
    max-height: 100px;
    padding: .5rem;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 20px #00000042
}

.reward-options img:nth-of-type(41) {
    display: none
}

[data-route="root"] #rewards .cta-bottom a {
    color: #fff;
    background-color: transparent
}

.feature-icons-list {
    list-style: none;
    padding-inline: 0;
    margin: 0;
    margin-inline-start: -.25rem
}

.feature-icons-list li {
    margin-bottom: 1rem;
    display: flex;
    justify-items: center;
    align-items: center;
    padding: .25rem;
    border-radius: 6px
}

svg.feature-icon {
    border-radius: 100%;
    margin-inline-end: .2rem;
    height: 35px;
    width: 35px;
    min-height: 35px;
    min-width: 35px;
    border: 3px solid transparent;
    fill: #318485;
    background-color: #31848533
}

.feature-icons-list li>span {
    margin-inline-start: 1rem
}

html:not([data-route="terms"]):not([data-route="privacy"]):not([data-route="account"]):not([data-route="panel"]):not([data-route="panel-book"]) main {
    background-color: #fdfdfd
}

.opacity-high {
    opacity: .65
}

.opacity-low {
    opacity: .2
}

#how-it-works {
    padding: 2rem 0 7rem 0
}

.faq h2,
#how-it-works h2,
#supported-panels h3 {
    font-size: 20px
}

#how-it-works h3 {
    font-size: 22px;
    font-weight: 400
}

#how-it-works svg {
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / .2))
}

.cover-rewards {
    contain: content;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none
}

.cover-rewards svg {
    filter: drop-shadow(2px 10px 8px #00000045);
    contain: strict
}

#how-it-works figcaption {
    font-size: 1.1rem;
    padding-inline: 1.5rem
}

#how-it-works section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    position: relative
}

#how-it-works figure svg {
    position: absolute;
    top: -5rem
}

#how-it-works section:nth-child(1) figure svg {
    inset-inline-start: calc(50% - 50px)
}

#how-it-works section:nth-child(2) figure svg {
    inset-inline-start: calc(50% - 74px)
}

#how-it-works section:nth-child(3) figure svg {
    inset-inline-start: calc(50% - 60px);
    background-color: #0b64670f;
    border-radius: 20em;
    overflow: visible
}

#how-it-works h2 {
    padding-top: 2rem;
    padding-bottom: 8rem;
    font-size: 1.5rem;
    color: var(--primary-color)
}

[data-route="root"] .faq {
    padding-top: 1rem
}

.footer svg.pollrouter-logo {
    margin-top: -1rem;
    margin-bottom: -1rem
}

.cover p:not(.cta):not(.font-small) {
    font-size: 18px
}

.cover-text .font-small {
    font-size: 13px
}

.cover .cover-subtext {
    font-size: 1.375rem;
    padding: 0
}

.cover-subtext strong {
    font-weight: inherit
}

@media(max-width:320px) {
    .hgroup h1 {
        font-size: 42px
    }

    .hgroup h2 {
        font-size: 18px
    }
}

@media(min-width:321px) and (max-width:480px) {
    .hgroup h1 {
        font-size: 38px
    }

    [data-route="root"][lang="fil-PH"] h1 {
        font-size: 28px
    }

    .cover-list-label {
        font-size: .9rem
    }
}

@media(min-width:481px) {
    .hgroup h1 {
        font-size: 48px
    }

    [data-route="root"][lang="fil-PH"] h1,
    [data-route="about"] h1 {
        font-size: 36px
    }
}

@media(max-width:767px) {
    #how-it-works .how-it-works-cards .column:not(:last-of-type) {
        padding-bottom: 10rem
    }

    .panel-preview {
        order: -1;
        padding-bottom: 40px
    }

    #how-it-works section:nth-child(2) figure svg {
        transform: scaleX(-1)
    }

    .consent-button--wrapper {
        display: block
    }

    footer {
        background-color: #f8f8f8;
        font-size: 12px
    }

    .footer small {
        display: block
    }

    .copyright {
        display: flex !important;
        flex-direction: column
    }

    .copyright small:first-child {
        order: 2
    }

    .copyright small:last-child {
        order: 1;
        margin: 15px auto
    }

    html[dir="rtl"] header .cover-visual {
        right: auto;
        left: 0
    }
}

@media(min-width:768px) {
    html[data-route="about"]:root header .cover-visual {
        max-width: 420px;
        width: 420px
    }

    html[data-route="about"][dir="rtl"] header .cover-visual,
    html[data-route="faq"][dir="rtl"] header .cover-visual {
        max-width: 360px;
        width: 360px
    }

    .pwa-mobile {
        display: none
    }

    .hgroup h1 {
        margin-top: 80px
    }

    [data-button="open-menu"] {
        margin-right: 15px
    }

    [data-button="open-menu"]:hover svg {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    [data-button="close-menu"]:hover svg {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }

    .geo-btn .flag,
    [data-button="open-menu"] svg,
    [data-button="close-menu"] svg {
        transition: transform 175ms ease
    }

    [data-button="consent-close"]:hover svg {
        -webkit-transform: scale(.75);
        transform: scale(.75)
    }

    [data-button="consent-close"] svg {
        transition: transform 125ms ease
    }

    .consent-button--wrapper {
        display: none;
        background-color: #fff;
        padding: 0 0 30px
    }

    dialog button svg {
        min-width: 24px;
        min-height: 24px
    }

    .cta a,
    .cta-bottom a {
        transition: transform .15s ease;
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }

    .cta a:hover,
    .cta a:focus {
        -webkit-transform: scale(1.045) perspective(1px) translateZ(0);
        transform: scale(1.045) perspective(1px) translateZ(0)
    }
}

h2#account {
    margin-top: -30px
}

.geo-list:not([data-prompt]) [data-region] {
    padding-inline-end: 2.5rem;
    height: 60px
}

@media(max-width:1024px) {
    .geo-list[data-prompt] .geo-scroller {
        padding-bottom: 60px
    }

    .geo-list[data-prompt] [data-region] {
        min-height: 60px
    }

    .panel-book-img {
        text-align: center
    }

    #how-it-works figcaption {
        max-width: 30em;
        margin: 0 auto
    }

    [data-scroll="none"],
    [data-scroll="none"] body,
    [data-sm-scroll="none"],
    [data-sm-scroll="none"] body {
        overflow-y: hidden
    }

    .about-intro-pollrouter-logo,
    .about-intro-partner-logos {
        margin: 2rem 0
    }

    .panel-book-img img {
        max-width: 250px;
        margin-top: 15px
    }

    #how-it-works {
        padding-bottom: 0
    }

    #how-it-works .how-it-works-cards .column {
        padding-top: 2rem;
        padding-bottom: 8rem
    }

    .footer {
        text-align: center
    }

    #pwa-install {
        margin: 0 auto
    }

    .trusted-brands {
        padding-top: 1rem;
        padding-bottom: 5rem
    }

    .cover .cta a {
        font-size: 1.2rem
    }

    .hgroup h1 {
        font-size: 36px
    }

    .geo-list {
        width: 100%;
        height: 100%;
        background-color: #f8f8f8
    }

    .geo-scroller {
        background-color: #f9f9f9
    }

    html:not([data-route="root"]) h1 {
        margin-top: 50px
    }

    .trusted-surveys svg {
        vertical-align: text-top
    }

    .geo-list:not([data-prompt]) .geo-list-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        color: #fff;
        position: relative;
        z-index: 1
    }

    .geo-list:not([data-prompt]) .geo-list-nav button {
        margin-right: 1.4em;
        border-radius: 100%;
        background-color: var(--primary-color);
        width: 30px;
        min-width: 30px;
        max-width: 30px;
        height: auto;
        line-height: 1
    }

    .geo-list:not([data-prompt]) .geo-list-nav button svg {
        width: 20px;
        min-width: 20px;
        height: 30px
    }

    .geo-list:not([data-prompt]) {
        top: 0;
        max-height: 100%
    }

    .geo-btn[aria-expanded="true"]~.geo-list:not([data-prompt]) {
        z-index: 90
    }

    [dir="rtl"] .geo-list .geo-list-nav {
        flex-direction: row-reverse
    }

    .reward-options {
        grid-template-columns: repeat(auto-fit, minmax(66px, 1fr))
    }

    .geo-scroller.search-result-empty::before {
        top: 20%;
        left: 50%;
        transform: translate(-50%, -20%);
        position: absolute;
        background-color: transparent;
        padding: 0
    }
}

.cta-button-list {
    display: none
}

.geo-list[data-prompt] .geo-list-nav {
    display: block;
    margin-top: 0
}

.geo-list[data-prompt] .geo-list-nav-button {
    display: none
}

.geo-list[data-prompt] .geo-scroller {
    padding-top: 0
}

@media(min-width:1025px) {
    [data-consent-mode="true"] #consent-dialog {
        max-width: 43%
    }

    [data-consent-mode="true"] #consent-dialog {
        right: 2rem;
        left: auto
    }

    #how-it-works section {
        padding-top: 3.5rem
    }

    #how-it-works .how-it-works-cards {
        display: flex
    }

    #how-it-works h3 {
        padding-top: 0
    }

    #how-it-works section:nth-child(1) {
        border-start-start-radius: 5px;
        border-end-start-radius: 5px
    }

    #how-it-works section:nth-child(3) {
        border-start-end-radius: 5px;
        border-end-end-radius: 5px
    }

    .cover-cta-login {
        display: none
    }

    .cta-button-list {
        display: flex;
        right: 0
    }

    .cta-button {
        padding: 20px 14px;
        color: #fff;
        text-decoration: none
    }

    .cta-button-list {
        margin-right: 112px;
        position: fixed
    }

    [data-route="about"]:not([data-pwa-mode="true"]) .header .cta-button-register span,
    [data-route="faq"]:not([data-pwa-mode="true"]) .header .cta-button-register span,
    :root[data-pwa-mode="true"][data-route="about"] .header .cta-button-login span,
    :root[data-pwa-mode="true"][data-route="faq"] .header .cta-button-login span {
        background-color: #fff;
        color: var(--primary-color);
        padding: .25rem 1rem;
        border-radius: 2em
    }

    [data-route="terms"]:not([data-pwa-mode="true"]) .cta-button-register,
    [data-route="privacy"]:not([data-pwa-mode="true"]) .cta-button-register,
    [data-route="contact"]:not([data-pwa-mode="true"]) .cta-button-register,
    [data-route="panel-book"]:not([data-pwa-mode="true"]) .cta-button-register,
    [data-route="terms"]:not([data-pwa-mode="true"]) .cta-button-register:focus,
    [data-route="privacy"]:not([data-pwa-mode="true"]) .cta-button-register:focus,
    [data-route="contact"]:not([data-pwa-mode="true"]) .cta-button-register:focus,
    [data-route="panel-book"]:not([data-pwa-mode="true"]) .cta-button-register:focus [data-route="terms"]:not([data-pwa-mode="true"]) .cta-button-register:hover,
    [data-route="privacy"]:not([data-pwa-mode="true"]) .cta-button-register:hover,
    [data-route="contact"]:not([data-pwa-mode="true"]) .cta-button-register:hover,
    [data-route="panel-book"]:not([data-pwa-mode="true"]) .cta-button-register:hover,
    :root[data-pwa-mode="true"][data-route="terms"] .cta-button-login,
    :root[data-pwa-mode="true"][data-route="privacy"] .cta-button-login,
    :root[data-pwa-mode="true"][data-route="contact"] .cta-button-login,
    :root[data-pwa-mode="true"][data-route="panel-book"] .cta-button-login,
    :root[data-pwa-mode="true"][data-route="terms"] .cta-button-login:focus,
    :root[data-pwa-mode="true"][data-route="privacy"] .cta-button-login:focus,
    :root[data-pwa-mode="true"][data-route="contact"] .cta-button-login:focus,
    :root[data-pwa-mode="true"][data-route="panel-book"] .cta-button-login:focus :root[data-pwa-mode="true"][data-route="terms"] .cta-button-login:hover,
    :root[data-pwa-mode="true"][data-route="privacy"] .cta-button-login:hover,
    :root[data-pwa-mode="true"][data-route="contact"] .cta-button-login:hover,
    :root[data-pwa-mode="true"][data-route="panel-book"] .cta-button-login:hover {
        text-decoration: none
    }

    [data-route="terms"]:not([data-pwa-mode="true"]) .cta-button-register span,
    [data-route="privacy"]:not([data-pwa-mode="true"]) .cta-button-register span,
    [data-route="contact"]:not([data-pwa-mode="true"]) .cta-button-register span,
    [data-route="panel-book"]:not([data-pwa-mode="true"]) .cta-button-register span,
    :root[data-pwa-mode="true"][data-route="terms"] .header .cta-button-login span,
    :root[data-pwa-mode="true"][data-route="privacy"] .header .cta-button-login span,
    :root[data-pwa-mode="true"][data-route="contact"] .header .cta-button-login span,
    :root[data-pwa-mode="true"][data-route="panel-book"] .header .cta-button-login span {
        background-color: var(--primary-color);
        color: #fff;
        padding: .25rem 1rem;
        border-radius: 2em
    }

    [data-route="panel"] .cta-button-list,
    [data-route="account"] .cta-button-list {
        display: none
    }

    .hgroup h1 {
        margin-top: 120px
    }

    .panel-preview img {
        margin-top: -60px
    }

    [data-button="open-menu"] {
        width: 45px
    }

    .geo-list,
    [data-route="panel"] [data-frame],
    [data-route="account"] [data-frame] {
        padding-top: var(--header-height)
    }

    .geo-list li:not(.order-top):hover {
        background-color: #eeeded69
    }

    [data-menu] li:hover a:not([aria-current]) {
        background-color: #064f514f
    }

    [data-menu] li:hover a::before {
        position: absolute;
        inset-inline-start: -58px;
        top: 0;
        padding: .5rem 1rem .1rem 1rem
    }

    [data-menu] li a {
        contain: none
    }

    .menu-icon-1:hover a::before {
        content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 -960 960 960' width='28px' fill='%23e3e3e3'%3E%3Cpath d='M260-361v-40H160v-80h200v-80H200q-17 0-28.5-11.5T160-601v-160q0-17 11.5-28.5T200-801h60v-40h80v40h100v80H240v80h160q17 0 28.5 11.5T440-601v160q0 17-11.5 28.5T400-401h-60v40h-80Zm298 240L388-291l56-56 114 114 226-226 56 56-282 282Z'/%3E%3C/svg%3E")
    }

    .menu-icon-2:hover a::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 -960 960 960' width='28px' fill='%23fafafa'%3E%3Cpath d='M480-120v-80h280v-560H480v-80h280q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H480Zm-80-160-55-58 102-102H120v-80h327L345-622l55-58 200 200-200 200Z'/%3E%3C/svg%3E")
    }

    .menu-icon-3:hover a::before {
        content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 -960 960 960' width='28px' fill='%23e3e3e3'%3E%3Cpath d='M720-400v-120H600v-80h120v-120h80v120h120v80H800v120h-80Zm-360-80q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 137 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z'/%3E%3C/svg%3E")
    }

    .menu-icon-4:hover a::before {
        content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 -960 960 960' width='28px' fill='%23e3e3e3'%3E%3Cpath d='M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E")
    }

    .menu-icon-5:hover a::before {
        content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 -960 960 960' width='28px' fill='%23e3e3e3'%3E%3Cpath d='M360-80v-529q-91-24-145.5-100.5T160-880h80q0 83 53.5 141.5T430-680h100q30 0 56 11t47 32l181 181-56 56-158-158v478h-80v-240h-80v240h-80Zm120-640q-33 0-56.5-23.5T400-800q0-33 23.5-56.5T480-880q33 0 56.5 23.5T560-800q0 33-23.5 56.5T480-720Z'/%3E%3C/svg%3E")
    }

    .menu-icon-6:hover a::before {
        content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 -960 960 960' width='28px' fill='%23e3e3e3'%3E%3Cpath d='M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E")
    }

    .menu-icon-7:hover a::before {
        content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 -960 960 960' width='28px' fill='%23e3e3e3'%3E%3Cpath d='M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z'/%3E%3C/svg%3E")
    }

    .menu-icon-8:hover a::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 -960 960 960' width='28px' fill='%23e3e3e3'%3E%3Cpath d='M240-400h320v-80H240v80Zm0-120h480v-80H240v80Zm0-120h480v-80H240v80ZM80-80v-720q0-33 23.5-56.5T160-880h640q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H240L80-80Zm126-240h594v-480H160v525l46-45Zm-46 0v-480 480Z'/%3E%3C/svg%3E")
    }

    [dir="rtl"] .menu-icon-2:hover a::before,
    [dir="rtl"][lang^="ar-"] .menu-icon-4:hover a::before,
    [dir="rtl"][lang="ur-pk"] .menu-icon-4:hover a::before {
        transform: scaleX(-1)
    }

    .header,
    .geo-btn,
    [data-button="open-menu"] {
        height: var(--header-height);
        max-height: var(--header-height)
    }

    .geo-btn:hover svg {
        will-change: transform
    }

    .geo-btn svg {
        transition: all 200ms;
        pointer-events: revert
    }

    .geo-btn[aria-expanded="true"] svg {
        transform: rotate(180deg)
    }

    .brand {
        line-height: var(--header-height);
        max-height: var(--header-height)
    }

    [data-button="open-menu"] svg {
        height: 45px
    }

    [data-region] {
        transition: transform 125ms;
        contain: content
    }

    [data-menu] a {
        transition: transform 250ms;
        contain: content
    }

    [data-prompt].geo-list>* {
        text-align: center
    }

    [data-prompt].geo-list {
        margin-top: 15px !important;
        padding-bottom: 75px;
        padding-top: 0
    }

    .geo-list:not([data-prompt]) .geo-scroller {
        border-radius: 2px
    }

    .geo-scroller li:hover [data-region],
    .geo-scroller li:focus [data-region] {
        transform: translateX(15px)
    }

    [dir="rtl"] .geo-scroller li:hover [data-region],
    [dir="rtl"].geo-scroller li:focus [data-region] {
        transform: translateX(-15px)
    }

    [data-menu] li:hover a,
    [data-menu] li:focus a {
        transform: translateX(60px)
    }

    [dir="rtl"] [data-menu] li:hover a,
    [dir="rtl"] [data-menu] li:focus a {
        transform: translateX(-60px)
    }

    .geo-list {
        overflow: visible
    }

    .geo-list::after {
        display: block;
        content: "";
        top: 0;
        right: 0;
        position: absolute;
        margin-right: 9px;
        margin-inline-start: 9px;
        margin-top: -8px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 8px solid #f2f2f2
    }

    .geo-list:not([data-prompt]) {
        width: 300px;
        width: max-content;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14), 0 10px 10px rgb(0 0 0 / 16%);
        height: 80%;
        padding-bottom: 36px;
        top: 55px;
        margin-right: 70px;
        border-radius: 2px
    }

    [data-prompt].geo-list::after {
        display: none
    }

    .geo-scroller {
        height: calc(100% + 45px);
        scrollbar-width: thin;
        clip-path: inset(0 round 2px)
    }

    .geo-list[data-prompt] {
        width: 100%;
        box-shadow: none;
        max-width: 800px;
        left: 0;
        margin: 0 auto
    }

    .geo-list[data-prompt] .geo-scroller {
        height: 100%
    }

    [data-prompt] .geo-scroller::before {
        font-size: 24px;
        padding: 20px
    }
}

@media(min-width:1440px) {
    [data-menu] {
        min-width: 300px
    }
}

:root .fw-normal {
    font-weight: normal
}

@media(min-width:1440px) and (min-height:1000px) {
    .hgroup h1 {
        margin-top: 200px
    }
}

.container,
.container-fluid,
body,
table {
    width: 100%;
    margin-right: auto;
    margin-left: auto
}

.row,
.row-dynamic {
    position: relative
}

.row::after,
.row-dynamic::after {
    content: "";
    display: block;
    clear: both
}

@supports(display:flow-root) {

    .row,
    .row-dynamic {
        display: flow-root
    }

    .row::after,
    .row-dynamic::after {
        content: initial !important;
        clear: initial !important;
        display: initial !important
    }
}

.row,
.row-dynamic,
.column,
.column-fill {
    width: 100%
}

.column,
.column-fill,
.column-auto {
    float: left;
    float: inline-start;
    min-height: 1px;
    padding-right: 20px;
    padding-left: 20px
}

.column-auto {
    width: auto
}

.sm-1 {
    width: 8.333333%
}

.sm-2 {
    width: 16.666667%
}

.sm-3 {
    width: 25%
}

.sm-4 {
    width: 33.333333%
}

.sm-5 {
    width: 41.666667%
}

.sm-6 {
    width: 50%
}

.sm-7 {
    width: 58.333333%
}

.sm-8 {
    width: 66.666667%
}

.sm-9 {
    width: 75%
}

.sm-10 {
    width: 83.333333%
}

.sm-11 {
    width: 91.666667%
}

.sm-12 {
    width: 100%
}

.offset-sm-0 {
    margin-left: auto;
    margin-inline-start: auto
}

.offset-sm-1 {
    margin-inline-start: 8.333333%
}

.offset-sm-2 {
    margin-inline-start: 16.666667%
}

.offset-sm-3 {
    margin-inline-start: 25%
}

.offset-sm-4 {
    margin-inline-start: 33.333333%
}

.offset-sm-5 {
    margin-inline-start: 41.666667%
}

.offset-sm-6 {
    margin-inline-start: 50%
}

.offset-sm-7 {
    margin-inline-start: 58.333333%
}

.offset-sm-8 {
    margin-inline-start: 66.666667%
}

.offset-sm-9 {
    margin-inline-start: 75%
}

.offset-sm-10 {
    margin-inline-start: 83.333333%
}

.offset-sm-11 {
    margin-inline-start: 91.666667%
}

@media(min-width:576px) {

    .container,
    table {
        max-width: 540px
    }
}

@media(min-width:768px) {

    .container,
    table {
        max-width: 720px
    }

    .center-md,
    .text-center-md {
        text-align: center
    }

    .center-md {
        display: block;
        margin: 0 auto;
        float: none
    }

    .md-1 {
        width: 8.333333%
    }

    .md-2 {
        width: 16.666667%
    }

    .md-3 {
        width: 25%
    }

    .md-4 {
        width: 33.333333%
    }

    .md-5 {
        width: 41.666667%
    }

    .md-6 {
        width: 50%
    }

    .md-7 {
        width: 58.333333%
    }

    .md-8 {
        width: 66.666667%
    }

    .md-9 {
        width: 75%
    }

    .md-10 {
        width: 83.333333%
    }

    .md-11 {
        width: 91.666667%
    }

    .md-12 {
        width: 100%
    }

    .offset-md-0 {
        margin-left: auto;
        margin-inline-start: auto
    }

    .offset-md-1 {
        margin-inline-start: 8.333333%
    }

    .offset-md-2 {
        margin-inline-start: 16.666667%
    }

    .offset-md-3 {
        margin-inline-start: 25%
    }

    .offset-md-4 {
        margin-inline-start: 33.333333%
    }

    .offset-md-5 {
        margin-inline-start: 41.666667%
    }

    .offset-md-6 {
        margin-inline-start: 50%
    }

    .offset-md-7 {
        margin-inline-start: 58.333333%
    }

    .offset-md-8 {
        margin-inline-start: 66.666667%
    }

    .offset-md-9 {
        margin-inline-start: 75%
    }

    .offset-md-10 {
        margin-inline-start: 83.333333%
    }

    .offset-md-11 {
        margin-inline-start: 91.666667%
    }
}

@media(min-width:992px) {
    .about-intro-display {
        display: flex;
        align-items: center
    }

    .about-intro-partner-logos {
        white-space: nowrap
    }

    #how-it-works {
        padding-top: 1rem;
        padding-bottom: 8rem
    }

    #how-it-works section.column {
        background-color: unset;
        padding-bottom: 1rem
    }

    .row-dynamic {
        all: unset;
        all: revert
    }

    .container,
    table {
        max-width: 960px
    }

    .center-lg,
    .text-center-lg {
        text-align: center
    }

    .center-lg {
        display: block;
        margin: 0 auto;
        float: none
    }

    .lg-1 {
        width: 8.333333%
    }

    .lg-2 {
        width: 16.666667%
    }

    .lg-3 {
        width: 25%
    }

    .lg-4 {
        width: 33.333333%
    }

    .lg-5 {
        width: 41.666667%
    }

    .lg-6 {
        width: 50%
    }

    .lg-7 {
        width: 58.333333%
    }

    .lg-8 {
        width: 66.666667%
    }

    .lg-9 {
        width: 75%
    }

    .lg-10 {
        width: 83.333333%
    }

    .lg-11 {
        width: 91.666667%
    }

    .lg-12 {
        width: 100%
    }

    .offset-lg-0 {
        margin-left: auto;
        margin-inline-start: auto
    }

    .offset-lg-1 {
        margin-inline-start: 8.333333%
    }

    .offset-lg-2 {
        margin-inline-start: 16.666667%
    }

    .offset-lg-3 {
        margin-inline-start: 25%
    }

    .offset-lg-4 {
        margin-inline-start: 33.333333%
    }

    .offset-lg-5 {
        margin-inline-start: 41.666667%
    }

    .offset-lg-6 {
        margin-inline-start: 50%
    }

    .offset-lg-7 {
        margin-inline-start: 58.333333%
    }

    .offset-lg-8 {
        margin-inline-start: 66.666667%
    }

    .offset-lg-9 {
        margin-inline-start: 75%
    }

    .offset-lg-10 {
        margin-inline-start: 83.333333%
    }

    .offset-lg-11 {
        margin-inline-start: 91.666667%
    }
}

@media(min-width:1200px) {

    .container,
    table {
        max-width: 1140px
    }
}

.center,
.text-center,
.cover-text {
    text-align: center
}

.center {
    display: block;
    margin: 0 auto;
    float: none
}

html:not([data-geo]) [data-profile] {
    visibility: hidden
}

.geo-scroller {
    display: flex;
    flex-direction: column;
    reading-flow: flex-visual
}

.order-top {
    order: -2;
    position: relative;
    cursor: pointer;
    background-color: #f2f2f2
}

.order-top a[aria-current] {
    background-color: unset
}

.geo-list:not([data-prompt]) .order-top>* {
    pointer-events: none
}

.order-top::after {
    position: absolute;
    inset-inline-end: 1rem;
    top: calc(50% - 14px);
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='28px' viewBox='0 -960 960 960' width='28px' fill='%23a4a4a4'%3E%3Cpath d='m382-354 339-339q12-12 28-12t28 12q12 12 12 28.5T777-636L410-268q-12 12-28 12t-28-12L182-440q-12-12-11.5-28.5T183-497q12-12 28.5-12t28.5 12l142 143Z'/%3E%3C/svg%3E")
}

.order-top-related {
    order: -1
}

#menu [aria-current="page"] {
    background-color: #064f51
}

html:not([data-route="root"]) header .cover-visual {
    max-width: 450px
}

@media(min-width:1025px) {
    html:not([data-route="root"]) header .cover-visual {
        max-width: 480px;
        width: 480px
    }

    [data-route="root"] [data-hidden] {
        visibility: hidden
    }

    html:root[data-route="about"]:not([dir="rtl"]) header .cover-visual {
        left: 0;
        right: auto
    }

    html:root[data-route="about"]:not([dir="rtl"]) header .cover-visual svg {
        transform: scaleX(-1) !important
    }
}

[data-route="panel"] [data-hidden] .header,
[data-route="account"] [data-hidden] .header {
    visibility: hidden
}

#privacy-ccpa {
    display: none
}

[lang="en-US"] #privacy-ccpa {
    display: block
}

#menu li:first-of-type a {
    padding-inline-end: 50px
}

#supported-panels ul {
    font-size: .9rem;
    padding: 0
}

#supported-panels li {
    padding: .5rem .25rem;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

#supported-panels li a {
    text-decoration: none
}

#surveys-asia~ul,
#surveys-africa~ul,
#surveys-europe~ul,
#surveys-north-america~ul,
#surveys-south-america~ul {
    column-count: 2
}

#supported-panels img.flag {
    border-radius: 2px;
    margin-inline-end: .25rem
}

html:not([data-route="account"]):not([data-route="panel"]) main {
    padding-bottom: 2rem
}

.header {
    background-color: color-mix(in srgb, var(--primary-color), transparent 4%)
}

[data-route="root"] .header,
[data-route="faq"] .header,
[data-route="about"] .header {
    transition: background-color 120ms linear
}

[data-route="root"] .header:not(.header-effect),
[data-route="faq"] .header:not(.header-effect),
[data-route="about"] .header:not(.header-effect) {
    background: 0;
    box-shadow: none
}

[data-route="root"] .header-effect,
[data-route="faq"] .header-effect,
[data-route="about"] .header-effect {
    background-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--primary-color), transparent 4%)
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg)
    }

    80% {
        transform: rotate(0deg)
    }

    85% {
        transform: rotate(5deg)
    }

    95% {
        transform: rotate(-5deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

.wiggle-animation {
    animation: wiggle 2.5s infinite;
    will-change: transform
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(-15px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes grow-left {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

@keyframes backdrop-background {
    0% {
        background-color: rgba(0, 0, 0, 0.0)
    }

    85.0% {
        background-color: rgba(0, 0, 0, 0.05)
    }

    100.0% {
        background-color: rgba(0, 0, 0, 0.1)
    }
}

@media(prefers-reduced-motion:no-preference) {

    [data-route="root"] [data-animations] .hgroup h1,
    [data-animations] .header>a,
    [data-animations] .header .cta-button-list>a,
    [data-animations] .header>button,
    [data-route="root"] [data-animations] .cover .cover-cta-login,
    [data-route="root"] [data-animations] .cover .trusted-surveys,
    [data-route="root"] [data-animations] .cover .trusted-logos,
    [data-route="root"] [data-animations] .cover .cover-visual,
    [data-route="root"] [data-animations] .cover .cover-subtext,
    [data-route="faq"] [data-animations] .header>a,
    [data-route="faq"] [data-animations] .header>button,
    [data-route="faq"] [data-animations] main header:first-of-type>.container,
    [data-route="faq"] [data-animations] main header:first-of-type>.cover-visual,
    [data-route="about"] [data-animations] .header>a,
    [data-route="about"] [data-animations] .header>button,
    [data-route="about"] [data-animations] main header:first-of-type>.container,
    [data-route="about"] [data-animations] main header:first-of-type>.cover-visual,
    [data-route="about"] [data-animations] main header:first-of-type h2,
    [data-consent-mode="true"] [data-animations] #consent-dialog,
    [data-route="panel-book"] [data-animations] .panel-book header>*,
    .cover-steps-container {
        opacity: 0;
        will-change: opacity, transform;
        animation: fade-in-right ease .4s forwards
    }

    [data-route="root"] [data-animations] .cover .cta {
        transform: scaleX(0);
        transform-origin: left;
        animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s forwards;
        animation-delay: .3s
    }

    [data-route="root"] [data-animations] .hgroup h1,
    [data-route="root"] [data-animations] .cover .trusted-logos,
    [data-route="root"] [data-animations] .cover .cover-visual,
    [data-route="root"] [data-animations] .cover .cover-cta-login,
    [data-route="root"] [data-animations] .cover .cover-subtext,
    [data-route="about"] [data-animations] main header:first-of-type h2,
    [data-consent-mode="true"] [data-animations] #consent-dialog,
    .cover-steps-container {
        animation-delay: .8s
    }

    :root[data-route="panel-book"] [data-animations] .panel-book header>.panel-book-img {
        animation-delay: .7s
    }
}

#pwa-install {
    display: flex;
    align-items: center;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.12);
    padding: .25rem .75rem;
    background-color: #0f575ad9;
    color: #fff;
    border-radius: 2rem;
    margin-bottom: 1rem
}

#pwa-install svg {
    padding-inline-end: .25rem;
    margin-inline-end: .25rem
}

.faq-search-container {
    padding: 2rem
}

.faq-search-container output {
    margin-top: 2rem
}

#faq-search {
    width: 100%;
    max-width: 400px;
    padding: .5rem 1.5rem;
    font-size: 1rem;
    border: 1px solid #e4e4e4;
    border-radius: 2em;
    background-color: #fff
}

#faq-search,
[data-route="contact"] input:not([type="file"]),
[data-route="contact"] textarea,
[data-route="contact"] select {
    transition: border-color .2s ease, box-shadow .2s ease
}

#faq-search:focus,
[data-route="contact"] #contact-form input:not([type="file"]):focus,
[data-route="contact"] #contact-form textarea:focus,
[data-route="contact"] #contact-form select:focus {
    outline: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    border-color: transparent
}

[data-route="faq"] input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 1.33rem;
    width: 1.33rem;
    cursor: pointer;
    background: no-repeat center/100% url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%230b6467" fill="none" stroke-width="3"><path d="M6 6l12 12M18 6L6 18"/></svg>')
}

.panel-book .highlighted-row,
.panel-book .highlighted-row.striped {
    background-color: #e6ebee
}

@media(max-width:350px), (max-height:500px) {

    #consent-dialog,
    .dialog-actions button {
        font-size: .7rem
    }
}

@media(max-width:350px) {
    .header .brand svg {
        width: 100px
    }
}