/*!
 * SmartFlutter — consumer loyalty identity
 *
 * Replaces the earlier "dark glass" layer, which was forked from the PerkMedia
 * Group system. That was the wrong call: SmartFlutter is a consumer reward
 * product, not a B2B adtech holding company, and dressing it in the parent's
 * dark corporate palette made the two properties look like the same company
 * twice.
 *
 * This identity is deliberately the opposite build:
 *   - light warm cream canvas instead of near-black
 *   - large friendly radii (26px) instead of tight corporate corners
 *   - soft warm shadows instead of glass and hairline borders
 *   - amber/pink reward accents alongside the brand orange
 *   - Plus Jakarta Sans instead of Space Grotesk
 *
 * Markup is untouched, so the h1, the 13 FAQs, the JSON-LD graph and the word
 * count are exactly as they were.
 */

/* ── tokens ─────────────────────────────────────────────── */
:root {
    --cream: #fff8f3;
    --cream-2: #fff1e8;
    --paper: #ffffff;
    --ink: #1a1210;
    --ink-2: #3d2f2a;
    --muted: #7a655d;
    --muted-2: #a08d85;
    --line: #f0e2d9;
    --line-2: #e5d3c7;

    --orange: #ff5a1f;
    --orange-deep: #e8440c;
    --amber: #ffb020;
    --pink: #ff2d78;

    --warm: linear-gradient(135deg, #ff7a3d 0%, #ff5a1f 52%, #ff2d78 100%);
    --warm-soft: linear-gradient(135deg, #fff1e8 0%, #ffe6f0 100%);

    --r-lg: 26px;
    --r-md: 18px;
    --r-sm: 14px;
    --maxw: 1160px;

    --shadow-sm: 0 4px 14px -4px rgba(26, 18, 16, 0.08);
    --shadow: 0 18px 44px -16px rgba(255, 90, 31, 0.22), 0 4px 14px -6px rgba(26, 18, 16, 0.06);
    --shadow-lg: 0 30px 70px -24px rgba(255, 90, 31, 0.32);
}

/* ── base ────────────────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body,
body.policy-page {
    background: var(--cream);
    color: var(--ink);
    font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: -0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 720px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(720px 420px at 18% -6%, rgba(255, 176, 32, 0.20), transparent 66%),
        radial-gradient(680px 400px at 86% 2%, rgba(255, 45, 120, 0.13), transparent 64%);
}

main, header, footer, section { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

p { color: var(--muted); }
a { color: var(--orange-deep); }
a:hover { color: var(--orange); }
::selection { background: rgba(255, 90, 31, 0.18); color: var(--ink); }

/* ── drop the old hero photograph ────────────────────────── */
.backstretch,
.maskWrapper,
.simple-image-mask { display: none !important; }

/* ── navigation: a floating white pill ───────────────────── */
header.visible-lg {
    position: fixed;
    top: 14px; left: 0; right: 0;
    z-index: 900;
    padding: 0;
    background: none;
    border: none;
}

header.visible-lg .container-fluid,
header.visible-lg .navbar-fixed-top {
    position: static !important;
    background: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid var(--line) !important;
    border-radius: 999px !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 10px 22px !important;
    max-width: var(--maxw) !important;
    margin: 0 auto !important;
}

header.visible-lg .row { display: flex; align-items: center; }

.navbar-brand { display: block; float: none; height: auto; padding: 0; }
.navbar-brand img { width: auto !important; height: 46px !important; filter: none; opacity: 1; }

.navbar-nav {
    float: none !important;
    padding-right: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin: 0;
    flex-wrap: nowrap;
}

.navbar-nav > li { float: none; margin: 0; }

.navbar-nav > li > a {
    color: var(--ink-2) !important;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 9px 13px !important;
    white-space: nowrap;
    border: none !important;
    border-radius: 999px;
    transition: color .18s ease, background .18s ease;
}

.navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
    color: var(--orange-deep) !important;
    background: var(--cream-2) !important;
}

/* ── hero ────────────────────────────────────────────────── */
#intro {
    padding: 148px 0 84px !important;
    text-align: center;
    overflow: visible;
}

#intro .container { max-width: var(--maxw); }
.carouselWrapper, .owl-carousel { position: relative; }
.introItem { padding: 0 0 8px !important; }

#intro .introItem i,
#intro .introItem .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin-bottom: 30px;
    font-size: 31px !important;
    color: #fff !important;
    background: var(--warm);
    border-radius: 24px;
    box-shadow: 0 20px 40px -14px rgba(255, 90, 31, 0.55), inset 0 2px 0 rgba(255,255,255,.32);
    transform: rotate(-4deg);
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

#intro .introItem:hover i { transform: rotate(0deg) scale(1.05); }

#intro .introItem h1,
#intro .introItem h2 {
    font-size: clamp(38px, 6vw, 76px) !important;
    font-weight: 800 !important;
    line-height: 1.03 !important;
    letter-spacing: -0.045em !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    color: var(--ink) !important;
}

#intro .introItem h1 small,
#intro .introItem h2 small {
    display: block;
    font-size: 0.54em;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: var(--warm);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--orange);
    margin-top: 4px;
}

#intro .subWhite {
    display: inline-block;
    color: var(--ink-2) !important;
    background: var(--paper);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: -0.005em !important;
    border: 1px solid var(--line) !important;
    border-radius: 999px;
    padding: 10px 20px !important;
    box-shadow: var(--shadow-sm);
}

.owl-theme .owl-controls { margin-top: 30px !important; }
.owl-theme .owl-controls .owl-dots .owl-dot span { background: var(--line-2) !important; width: 8px; height: 8px; }
.owl-theme .owl-controls .owl-dots .owl-dot.active span {
    background: var(--orange) !important;
    width: 22px;
    border-radius: 99px;
}

/* ── sections ────────────────────────────────────────────── */
section { padding: 84px 0; background: none !important; }
section .container { max-width: var(--maxw); }

#about, #services, #models, #who, #charts, #faq,
#rewarded-games, #rewarded-surveys, #numbers, #albuquerque, #contact,
.lane-section, .numbers-section, .local-section {
    background: transparent !important;
    padding: 78px 0 !important;
}

/* alternate a warm band so the page has rhythm without hard edges */
#services, #who, #rewarded-surveys, #albuquerque {
    background: var(--cream-2) !important;
    border-radius: 40px;
    margin: 0 16px;
}

/* ── headings ────────────────────────────────────────────── */
.sectionTitle h2 {
    font-size: clamp(29px, 3.5vw, 45px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.06 !important;
    margin: 0 0 12px !important;
    color: var(--ink) !important;
}

.sectionTitle h2 small {
    display: block;
    font-size: 0.52em;
    font-weight: 800;
    color: var(--orange);
    letter-spacing: -0.02em;
    margin-bottom: 2px;
}

.sectionTitleIcon,
.sectionTitle i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 20px !important;
    font-size: 23px !important;
    color: #fff !important;
    background: var(--warm) !important;
    border: none !important;
    border-radius: 19px !important;
    box-shadow: 0 16px 34px -14px rgba(255, 90, 31, 0.55);
    transform: rotate(-3deg);
}

.sectionTitle .sub,
.sectionTitle span.sub,
.heading .sub {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--muted) !important;
    display: block;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.6 !important;
    margin-top: 8px !important;
    padding: 0 !important;
    text-transform: none !important;
}

.intro-text {
    color: var(--muted) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    margin-top: 10px;
}

.intro-text hr {
    border: none !important;
    border-top: 2px dashed var(--line-2) !important;
    margin: 24px auto 0 !important;
    max-width: 120px;
}

#separator, .separator { background: none !important; border: none !important; padding: 40px 0 !important; }

.separator h2, .separator h3 {
    font-size: clamp(22px, 2.8vw, 32px) !important;
    letter-spacing: -0.035em !important;
    margin: 0 !important;
}

.separator h2 small, .separator h3 small {
    display: block;
    font-size: 0.58em;
    font-weight: 700;
    color: var(--orange);
    margin-bottom: 4px;
}

/* ── cards: soft white, warm shadow, generous radius ─────── */
.serviceItem,
.contactItem,
.aboutItem,
#who .item,
#about .item,
.item {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    padding: 32px 28px !important;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
    height: 100%;
    position: relative;
    transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s ease, border-color .26s ease;
}

.serviceItem:hover,
.contactItem:hover,
.aboutItem:hover,
#who .item:hover,
#about .item:hover,
.item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: #ffd9c4 !important;
}

.serviceIcon,
.contactIcon,
#about .icon,
#who .icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: var(--warm-soft);
    border: none;
    border-radius: 19px;
    transition: background .24s ease, transform .24s ease;
}

#services .serviceIcon { margin-left: 0; }

.serviceItem:hover .serviceIcon,
.contactItem:hover .contactIcon,
.aboutItem:hover .icon {
    background: var(--warm);
    transform: rotate(-5deg) scale(1.06);
}

.serviceIcon i,
.contactIcon i,
#about .icon > i,
#who .icon > i {
    color: var(--orange) !important;
    font-size: 23px !important;
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: color .24s ease;
}

.serviceItem:hover .serviceIcon i,
.contactItem:hover .contactIcon i,
.aboutItem:hover .icon > i { color: #fff !important; }

/* the theme parks a class-less <i> before the real icon. :empty cannot be
   used here - an icon <i> has no children either, so :empty hides them all. */
.serviceIcon i:not([class*="fa-"]),
.contactIcon i:not([class*="fa-"]),
.aboutItem .icon i:not([class*="fa-"]) { display: none !important; }

.serviceInfo h4,
.contactInfo h4,
.aboutItem h4,
#about .item h4,
#who .item h4,
.item h3,
.item h4 {
    color: var(--ink) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.3 !important;
    margin: 0 0 10px !important;
    text-transform: none !important;
}

.serviceInfo h4 small,
.contactInfo h4 small,
.aboutItem h4 small,
#about .item h4 small,
.item h3 small,
.item h4 small {
    display: block;
    color: var(--orange) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    margin-top: 5px;
    text-transform: none !important;
}

.serviceInfo p,
.contactInfo p,
.aboutItem p,
#about .info p,
#about .item p,
#who .item p,
.item p {
    color: var(--muted) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

.contactInfo a { color: var(--orange-deep) !important; font-weight: 700; text-decoration: none; }
.contactInfo a:hover { color: var(--orange) !important; }

.biggerIcon {
    background: var(--warm) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: var(--orange) !important;
    font-size: 42px !important;
    margin-bottom: 14px;
    display: inline-block !important;
}

.servicesWrapper .separator { border: none !important; margin: 30px 0 !important; padding: 0 !important; }

/* ── numbers ─────────────────────────────────────────────── */
#charts { border: none !important; }

#charts .number {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: clamp(40px, 4.8vw, 62px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.05em !important;
    background: var(--warm);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    line-height: 1;
    margin-bottom: 10px;
}

#charts i,
#charts .timer i {
    color: var(--orange) !important;
    font-size: 28px !important;
    background: none !important;
    border: none !important;
    width: auto !important; height: auto !important;
    box-shadow: none !important;
    margin-bottom: 14px !important;
    display: inline-block !important;
}

.chartText {
    color: var(--muted-2) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    margin-top: 6px;
}

.timer .textWrapper { padding: 10px 0 4px; }

/* ── prose ───────────────────────────────────────────────── */
.definition {
    color: var(--muted) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
}
.definition strong { color: var(--ink); font-weight: 800; }

.lead-answer {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-left: 4px solid var(--orange) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-sm);
    color: var(--ink-2) !important;
    font-size: 17.5px !important;
    line-height: 1.75 !important;
    padding: 26px 28px !important;
    margin-bottom: 24px !important;
}

.local-nap {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-sm);
    color: var(--muted) !important;
    padding: 24px 26px !important;
    line-height: 1.85;
}
.local-nap strong { color: var(--ink); }
.local-nap a { color: var(--orange-deep) !important; font-weight: 700; text-decoration: none; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { margin-top: 24px; }

.faq-item {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.faq-item[open] { border-color: #ffd9c4 !important; box-shadow: var(--shadow); }
.faq-item:hover { border-color: #ffd9c4 !important; }

.faq-item summary {
    color: var(--ink) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    padding: 19px 56px 19px 22px !important;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: "+";
    position: absolute;
    right: 20px; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 500;
    color: #fff;
    background: var(--warm);
    border-radius: 50%;
    line-height: 1;
    transition: transform .2s ease;
}

.faq-item[open] summary::after { content: "–"; transform: translateY(-50%) rotate(180deg); }

.faq-item p {
    color: var(--muted) !important;
    font-size: 15.5px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    padding: 0 22px 22px !important;
}

/* ── buttons ─────────────────────────────────────────────── */
.btn, .btn-default, a.btn, .btn-default-white, a.btn-default-white {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--warm) !important;
    border: none !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    padding: 15px 30px !important;
    box-shadow: 0 14px 30px -10px rgba(255, 90, 31, 0.55);
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease, filter .16s ease;
    text-decoration: none !important;
}

.btn:hover, .btn-default:hover, a.btn:hover,
.btn-default-white:hover, a.btn-default-white:hover {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.04);
    box-shadow: var(--shadow-lg);
    color: #fff !important;
}

.btn:active, a.btn:active { transform: translateY(0) scale(0.98); }

/* ── forms ───────────────────────────────────────────────── */
.form-control {
    background: var(--paper) !important;
    border: 1.5px solid var(--line-2) !important;
    border-radius: var(--r-sm) !important;
    color: var(--ink) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 15px !important;
    box-shadow: none !important;
    height: auto !important;
    padding: 14px 16px !important;
}

.form-control::placeholder { color: var(--muted-2) !important; }

.form-control:focus {
    border-color: var(--orange) !important;
    box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.13) !important;
    outline: none;
}

.input-group-addon {
    background: var(--cream-2) !important;
    border: 1.5px solid var(--line-2) !important;
    border-right: none !important;
    border-radius: var(--r-sm) 0 0 var(--r-sm) !important;
}
.input-group-addon i { color: var(--orange) !important; }

/* ── tables ──────────────────────────────────────────────── */
.tableWrapper {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.model-table { background: transparent !important; margin: 0 !important; }
.model-table thead th {
    background: var(--cream-2) !important;
    border: none !important;
    border-bottom: 1px solid var(--line-2) !important;
    color: var(--muted) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    padding: 15px 20px !important;
}
.model-table tbody td {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--muted) !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    padding: 19px 20px !important;
    vertical-align: top;
}
.model-table tbody tr:last-child td { border-bottom: none !important; }
.model-table tbody tr:hover td { background: var(--cream) !important; }
.model-table td strong { color: var(--ink) !important; font-weight: 800; }
.model-table td span { color: var(--muted-2) !important; font-size: 13px; }

/* ── footer: a dark anchor under a light page ────────────── */
footer {
    background: var(--ink) !important;
    border: none !important;
    border-radius: 40px 40px 0 0;
    padding: 56px 0 40px !important;
    margin-top: 34px;
}

footer img {
    height: 30px !important;
    width: auto !important;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

footer p {
    color: rgba(255, 255, 255, 0.5) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 13.5px !important;
    line-height: 2 !important;
    margin: 0;
}

footer p a {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: color .18s ease;
}

footer p a:hover, footer p a span:hover { color: var(--amber) !important; }
footer p a span { text-transform: none !important; letter-spacing: 0 !important; }

/* ── content pages ───────────────────────────────────────── */
.policy-hero {
    background: var(--cream-2) !important;
    padding: 148px 0 54px !important;
    border: none !important;
    border-radius: 0 0 40px 40px;
    text-align: center;
}

.policy-hero h1 {
    font-size: clamp(32px, 4.2vw, 54px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.05 !important;
    margin: 0 0 14px !important;
}

.policy-meta { color: var(--muted-2) !important; font-size: 15px !important; }
.policy-content { padding: 56px 0 84px !important; background: none !important; }
.policy-document { max-width: 780px; margin: 0 auto; }

.policy-document h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: var(--ink) !important;
    margin: 40px 0 12px !important;
    padding: 0 !important;
    border: none !important;
}
.policy-document h2:first-of-type { margin-top: 0 !important; }
.policy-document p, .policy-document li, .policy-document address {
    color: var(--muted) !important;
    font-size: 16.5px !important;
    line-height: 1.8 !important;
}
.policy-document a {
    color: var(--orange-deep) !important;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(255, 90, 31, 0.3);
}
.policy-document a:hover { border-bottom-color: var(--orange); }
.policy-document strong { color: var(--ink); }

.article-card {
    background: var(--paper) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    padding: 26px 28px !important;
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease;
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.article-card h2 { border: none !important; padding: 0 !important; margin: 0 0 10px !important; }
.article-card h2 a { color: var(--ink) !important; text-decoration: none; font-size: 19px; }
.article-card h2 a:hover { color: var(--orange) !important; }
.article-card p { color: var(--muted) !important; font-size: 15px !important; }
.article-card-meta a { color: var(--orange-deep) !important; font-weight: 800; text-decoration: none; }

.article-cta {
    background: var(--warm-soft) !important;
    border: 1px solid #ffd9c4 !important;
    border-radius: var(--r-lg) !important;
    padding: 28px 30px !important;
    margin: 42px 0 34px !important;
}
.article-cta h2 { border: none !important; margin: 0 0 10px !important; padding: 0 !important; font-size: 22px !important; }

.related-list { list-style: none; margin: 16px 0 0; padding: 0; }
.related-list li {
    border-bottom: 1px solid var(--line) !important;
    color: var(--muted-2) !important;
    font-size: 15px !important;
    padding: 14px 0 !important;
}
.related-list a { color: var(--ink) !important; font-weight: 700; text-decoration: none; }
.related-list a:hover { color: var(--orange) !important; }

/* ── mobile menu ─────────────────────────────────────────── */
.sm-nav { background: rgba(255, 248, 243, 0.96) !important; backdrop-filter: blur(16px); }
.sm-nav-toggler, .nav-toggler { color: var(--ink) !important; }

.menu.slide-menu-left {
    background: var(--paper) !important;
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 40px -20px rgba(26, 18, 16, 0.2);
}
.menu.slide-menu-left ul { padding: 26px 22px; }
.menu.slide-menu-left li { border: none !important; }
.menu.slide-menu-left li a {
    color: var(--ink-2) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    padding: 13px 6px !important;
    display: block;
}
.menu.slide-menu-left li a:hover,
.menu.slide-menu-left li.active a { color: var(--orange) !important; }
.menu.slide-menu-left img { height: 32px; width: auto; margin-bottom: 18px; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
    header.visible-lg { display: none !important; }
    #intro { padding: 112px 0 66px !important; }
    section, #about, #services, #models, #who, #charts, #faq,
    #rewarded-games, #rewarded-surveys, #numbers, #albuquerque, #contact,
    .lane-section, .numbers-section, .local-section { padding: 54px 0 !important; }
    #services, #who, #rewarded-surveys, #albuquerque { margin: 0 10px; border-radius: 28px; }
    .policy-hero { padding: 106px 0 38px !important; border-radius: 0 0 28px 28px; }
    .policy-content { padding: 40px 0 60px !important; }
    .serviceItem, .contactItem, .aboutItem, .item { padding: 26px 22px !important; border-radius: 22px !important; }
    footer { border-radius: 28px 28px 0 0; }
    .policy-document h2 { font-size: 22px !important; }
    .policy-document p, .policy-document li { font-size: 15.5px !important; }
}

@media (max-width: 767px) {
    #intro .introItem h1, #intro .introItem h2 { font-size: clamp(31px, 8.8vw, 44px) !important; }
    #intro .introItem i, #intro .introItem .fa { width: 66px; height: 66px; font-size: 26px !important; }
    #intro .subWhite { font-size: 12.5px !important; padding: 9px 15px !important; }
    .sectionTitle h2 { font-size: clamp(25px, 6.8vw, 33px) !important; }
    #charts .number { font-size: 42px !important; }
    body { font-size: 15.5px; }
    .btn, a.btn { width: 100%; padding: 15px 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── simplified header: one lead-generation CTA ──────────────
   The nav was 10 anchor links, which is a menu rather than a decision. It is
   now 5 links plus a single primary action. JustDice runs a 5-item nav for
   comparison, and their whole homepage has one obvious next step. */

.navbar-nav > li.nav-cta-item {
    margin-left: 8px !important;
}

.navbar-nav > li > a.nav-cta,
a.nav-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--warm) !important;
    color: #fff !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    padding: 10px 20px !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 20px -8px rgba(255, 90, 31, 0.6);
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease, filter .16s ease;
}

.navbar-nav > li > a.nav-cta:hover,
a.nav-cta:hover {
    background: var(--warm) !important;
    color: #fff !important;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 12px 26px -8px rgba(255, 90, 31, 0.75);
    filter: brightness(1.04);
}

/* ── hero call to action ─────────────────────────────────── */
.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 34px;
}

.hero-cta .btn-hero-primary,
.hero-cta .btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -0.01em;
    padding: 16px 34px;
    border-radius: 999px;
    text-decoration: none !important;
    transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease, background .16s ease, filter .16s ease;
}

.hero-cta .btn-hero-primary {
    background: var(--warm) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 18px 38px -12px rgba(255, 90, 31, 0.62), inset 0 2px 0 rgba(255,255,255,.28) !important;
}

.hero-cta .btn-hero-primary:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.05);
    box-shadow: var(--shadow-lg) !important;
    color: #fff !important;
}

/* the secondary action must NOT inherit the .btn gradient. The base .btn rule
   is !important, so this has to be too - without it the "See pricing models"
   button rendered as a second orange pill with dark text on it. */
.hero-cta .btn-hero-ghost {
    background: var(--paper) !important;
    background-image: none !important;
    border: 1.5px solid var(--line-2) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow-sm) !important;
}

.hero-cta .btn-hero-ghost:hover {
    border-color: #ffd0b8 !important;
    background: var(--cream-2) !important;
    background-image: none !important;
    transform: translateY(-2px);
    color: var(--ink) !important;
    box-shadow: var(--shadow-sm) !important;
}

.hero-cta .btn-hero-primary:active,
.hero-cta .btn-hero-ghost:active { transform: translateY(0) scale(.985); }

.hero-trust {
    margin: 4px 0 0 !important;
    color: var(--muted-2) !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
}

/* the mobile menu's CTA needs to read as a button, not a list row */
.menu.slide-menu-left li a.mobile-cta {
    margin-top: 10px;
    background: var(--warm) !important;
    color: #fff !important;
    text-align: center;
    border-radius: 999px !important;
    padding: 14px 20px !important;
    font-weight: 800 !important;
    box-shadow: 0 10px 24px -10px rgba(255, 90, 31, 0.6);
}

.menu.slide-menu-left li a.mobile-cta:hover { color: #fff !important; }

@media (min-width: 640px) {
    .hero-cta { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 12px; }
    .hero-cta .hero-trust { flex-basis: 100%; margin-top: 8px !important; }
}

@media (max-width: 767px) {
    .hero-cta { margin-top: 26px; }
    .hero-cta .btn-hero-primary,
    .hero-cta .btn-hero-ghost { width: 100%; max-width: 340px; padding: 15px 26px; }
    .hero-trust { font-size: 12px !important; text-align: center; }
}

/* ── brand lockup ────────────────────────────────────────────
   The supplied logo.png carries a WHITE wordmark, which is invisible on the
   light cream canvas - so the header only ever showed a small mark. The mark
   is now cropped out on its own and the wordmark is real text, which is sharp
   at any DPI and picks up the brand font. The footer keeps the original file
   because that surface is dark. */

.navbar-brand {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    text-decoration: none !important;
}

.navbar-brand .brand-mark,
.mobile-brand .brand-mark {
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    filter: none !important;
    opacity: 1 !important;
    display: block;
}

.navbar-brand .brand-text {
    color: var(--ink) !important;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    white-space: nowrap;
}

.navbar-brand:hover .brand-text { color: var(--ink) !important; }

/* mobile drawer lockup */
.menu.slide-menu-left li.mobile-brand {
    display: flex !important;
    align-items: center;
    gap: 9px;
    padding: 0 6px 18px !important;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
}

.menu.slide-menu-left li.mobile-brand .brand-mark {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
}

.menu.slide-menu-left li.mobile-brand .brand-text {
    color: var(--ink);
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.035em;
}

@media (max-width: 767px) {
    .navbar-brand .brand-text { font-size: 17px; }
    .navbar-brand .brand-mark { width: 26px !important; height: 26px !important; }
}