/* ==========================================================================
   assets/css/home.css — the homepage (index.php)

   Black and red hero under a black header, warm cream page below.
   Colour has a job, and only one:
     night / red     the hero: black sky, red accents and search button
     brand  orange   actions on the page: buttons, links, focus
     cream           the page, surfaces and borders
     danger red      scams: amounts lost, risk badges, "report" actions
     safe   green    verified businesses and good reviews
     star   amber    ratings
     ink    brown    text

   Sections:
     1 Tokens & base      6 Section headings    11 Businesses
     2 Layout & utilities 7 Buttons & links     12 Check-before-you-pay panel
     3 Header offset      8 Review/owner slider 13 How it works (walkthrough) · Tips · CTA
     4 Hero & search      9 Report cards        14 Trust notice
     5 Stats             10 Reviews (moving)    15 Floating search · to-top
                                                16 Motion & accessibility
   ========================================================================== */

/* 1 ── Tokens & base ─────────────────────────────────────────────────────── */
:root {
    /* v1/v2 names kept: the shared header and footer read --brand-* */
    --brand-orange: #ea580c;
    --brand-orange-600: #c2410c;
    --brand-red: #dc2626;
    --brand-dark: #1c1917;

    --brand: #ea580c;
    --brand-strong: #c2410c;
    --brand-soft: #fff7ed;
    --brand-line: #fed7aa;

    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --danger-line: #fecaca;
    --safe: #059669;
    --safe-soft: #ecfdf5;
    --safe-line: #a7f3d0;
    --warn: #b45309;
    --warn-soft: #fffbeb;
    --star: #f59e0b;

    --ink: #1c1917;
    --ink-2: #44403c;
    --ink-3: #6b6560;
    --ink-4: #a8a29e;

    /* black and red hero; a very light cream page; white cards and sections */
    --night: #050507;                     /* the hero and the header above it */
    --hero-cream: #fff4e6;                /* the homepage hero and the header above it */
    --red: #ef4444;                       /* hero accents */
    --deep-0: #7c2d12;
    --deep: #9a3412;
    --deep-2: #c2410c;
    --cream-2: #fff7ed;
    --cream-3: #fed7aa;

    --bg: #fffcf8;
    --surface: #ffffff;
    --surface-soft: #ffffff;
    --surface-2: #f5f5f4;
    --line: #ebe8e4;
    --line-soft: #f3f1ee;

    --shadow-1: 0 1px 2px rgba(28, 25, 23, .05);
    --shadow-2: 0 1px 2px rgba(28, 25, 23, .04), 0 8px 24px -12px rgba(28, 25, 23, .14);
    --shadow-3: 0 2px 4px rgba(28, 25, 23, .04), 0 18px 40px -18px rgba(28, 25, 23, .22);
    --ring: 0 0 0 4px rgba(234, 88, 12, .16);

    --r-sm: 10px;
    --r-md: 12px;
    --r-lg: 14px;
    --r-xl: 16px;

    --ease: cubic-bezier(.2, .8, .2, 1);
    /* Plus Jakarta Sans for Latin letters and numbers, Noto Sans Bengali for Bangla */
    --font-body: 'Plus Jakarta Sans', 'Noto Sans Bengali', system-ui, sans-serif;
    --font-display: var(--font-body);
    --font-latin: var(--font-body);

    --shell: 1180px;
    --gutter: clamp(16px, 3.2vw, 28px);
    --band: clamp(40px, 5.5vw, 72px);
    --header-h: 58px;
    --dock-lift: 0px;
}
@media (min-width: 640px) { :root { --header-h: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body.cs-home {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}
.cs-home img { max-width: 100%; }
.cs-home a { color: inherit; }
.cs-home button, .cs-home input { font: inherit; }
::selection { background: rgba(234, 88, 12, .16); color: var(--brand-strong); }
.cs-home :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* 2 ── Layout & utilities ────────────────────────────────────────────────── */
.cs-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.cs-band { padding-block: var(--band); }
.cs-band + .cs-band { padding-top: 0; }
.cs-band--white {
    background: var(--surface-soft);
    border-block: 1px solid var(--line-soft);
    padding-top: var(--band) !important;
}
.cs-band--white + .cs-band { padding-top: var(--band); }
/* Sections below the first screen are laid out and painted only when they
   come near it: the long page opens faster and scrolls lighter. "auto" keeps
   each section's real height once it has been seen. */
#cs-main > section:not(:first-child), .cs-trust, .sf { content-visibility: auto; contain-intrinsic-size: auto var(--ch, 500px); }
/* each section's usual content height (without its padding), so the page is
   about the right length — and links to a section land right — before the
   sections below have been drawn */
#posts-section { --ch: 1097px; }
[aria-labelledby="cs-wanted-title"] { --ch: 412px; }
.cs-rv-section { --ch: 912px; }
[aria-labelledby="cs-platforms-title"] { --ch: 344px; }
[aria-labelledby="cs-paycheck-title"] { --ch: 314px; }
.cs-how { --ch: 2440px; }
#safety-tips { --ch: 784px; }
[aria-labelledby="cs-community-title"] { --ch: 669px; }
[aria-labelledby="cs-final-title"] { --ch: 180px; }
.cs-trust { --ch: 220px; }
.sf { --ch: 1389px; }
@media (min-width: 700px) {
    #posts-section { --ch: 1037px; }
    .cs-rv-section { --ch: 856px; }
    .cs-how { --ch: 3040px; }
    [aria-labelledby="cs-paycheck-title"] { --ch: 347px; }
    #safety-tips { --ch: 444px; }
    [aria-labelledby="cs-community-title"] { --ch: 558px; }
    [aria-labelledby="cs-final-title"] { --ch: 210px; }
    .cs-trust { --ch: 126px; }
    .sf { --ch: 1187px; }
}
@media (min-width: 1000px) {
    #posts-section { --ch: 700px; }
    .cs-how { --ch: 2308px; }
    [aria-labelledby="cs-wanted-title"] { --ch: 505px; }
    .cs-rv-section { --ch: 869px; }
    [aria-labelledby="cs-platforms-title"] { --ch: 282px; }
    [aria-labelledby="cs-paycheck-title"] { --ch: 404px; }
    #safety-tips { --ch: 260px; }
    [aria-labelledby="cs-community-title"] { --ch: 352px; }
    [aria-labelledby="cs-final-title"] { --ch: 249px; }
    .cs-trust { --ch: 120px; }
    .sf { --ch: 664px; }
}
.cs-sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }
.cs-only-wide { display: none; }
@media (min-width: 640px) { .cs-only-wide { display: inline; } .cs-only-narrow { display: none; } }
.cs-num, .lat { font-family: var(--font-latin); font-variant-numeric: tabular-nums; }
.hide-scrollbar { scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }

/* 3 ── Header: black over the hero, solid cream once it scrolls away ───── */
.cs-home #cs-header.is-solid { box-shadow: 0 1px 0 var(--line-soft); }

/* 4 ── Hero & search ─────────────────────────────────────────────────────── */
/* Black, with one soft red glow rising from below and a thin red light on
   the curve into the cream page. The header above is the same black. */
.cs-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - var(--header-h));
    background: linear-gradient(180deg, var(--hero-cream) 0%, #fffaf4 58%, var(--bg) 100%);
    color: var(--ink);
    text-align: center;
    overflow: hidden;
}

/* Warm light on cream: a peach glow behind the headline, a soft rose one
   low on the right, and a faint dot grid that fades out. The glow breathes
   very slowly (opacity only); paused off screen, still for reduced motion. */
.cs-hero-fx { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.cs-hero-fx::before {                              /* faint dot grid, fading downwards */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(194, 65, 12, .14) 1px, transparent 1.3px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 22%, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse 75% 60% at 50% 22%, #000 0%, transparent 72%);
}
.cs-glow {                                         /* peach light behind the headline */
    position: absolute;
    left: 50%;
    top: -18%;
    width: min(1100px, 150vw);
    height: min(640px, 110vw);
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(253, 186, 116, .55), rgba(254, 215, 170, .28) 55%, transparent);
    animation: cs-glow-breathe 8s ease-in-out infinite alternate;
}
@keyframes cs-glow-breathe {
    from { opacity: .75; }
    to   { opacity: 1; }
}
.cs-horizon {                                      /* a soft rose glow, low right */
    position: absolute;
    right: -22%;
    bottom: -10%;
    width: min(900px, 120vw);
    height: min(700px, 110vw);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(251, 146, 60, .12), transparent);
}
.cs-hero.is-idle .cs-hero-fx * { animation-play-state: paused; }
.cs-hero.is-idle .cs-hero-label i::after { animation-play-state: paused; }

.cs-hero-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 860px;
    padding-block: clamp(32px, 7vh, 80px) clamp(22px, 4vh, 36px);
}
.cs-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: clamp(16px, 2.6vh, 22px);
    padding: 6px 14px 6px 11px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--brand-line);
    color: var(--brand-strong);
    font: 700 12px/1.2 var(--font-latin);
    letter-spacing: .02em;
    box-shadow: 0 6px 18px -12px rgba(194, 65, 12, .45);
}
.cs-hero-label i {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand);
}
.cs-hero-label i::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--brand);
    animation: cs-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes cs-ping { 70%, 100% { transform: scale(2.4); opacity: 0; } }

.cs-hero h1 {
    margin: 0 0 clamp(12px, 2vh, 16px);
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 54px);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.01em;
    color: var(--ink);
    text-wrap: balance;
}
.cs-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #ea580c 0%, #dc2626 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.cs-hero-sub {
    max-width: 52ch;
    margin: 0 auto clamp(20px, 3.2vh, 30px);
    font-size: clamp(14.5px, 1.6vw, 17px);
    line-height: 1.75;
    color: var(--ink-3);
    text-wrap: pretty;
}

/* The search: a white field on a soft white ring with a warm shadow */
.cs-search-wrap {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
    padding: 6px;
    border: 1px solid var(--brand-line);
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 24px 50px -28px rgba(154, 52, 18, .45), 0 2px 6px -2px rgba(154, 52, 18, .08);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cs-search-wrap:focus-within {
    border-color: #fdba74;
    background: #fff;
    box-shadow: 0 0 0 5px rgba(234, 88, 12, .14), 0 24px 50px -28px rgba(154, 52, 18, .5);
}
.cs-search-wrap form { position: relative; margin: 0; }
.cs-search-input {
    display: block;
    width: 100%;
    min-height: 62px;
    padding: 18px 172px 18px 54px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font-size: 16px;                         /* 16px: no iOS zoom on focus */
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--line-soft);
    transition: border-color .2s ease, background-color .2s ease;
}
.cs-search-input::placeholder { color: var(--ink-4); font-weight: 500; }
.cs-search-input:focus { outline: none; border-color: transparent; }
.cs-search-icon {
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    color: var(--brand);
    pointer-events: none;
}
.cs-search-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    bottom: 7px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 22px -10px rgba(194, 65, 12, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: filter .2s ease, transform .15s ease;
}
.cs-search-btn:hover { filter: brightness(1.06) saturate(1.05); }
.cs-search-btn:active { transform: scale(.97); }
.cs-search-btn svg { transition: transform .2s var(--ease); }
.cs-search-btn:hover svg { transform: translateX(2px); }
.cs-search-kbd { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
    .cs-search-input { padding-right: 212px; }
    .cs-search-kbd {
        position: absolute;
        right: 178px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        height: 24px;
        padding: 0 7px;
        border: 1px solid var(--line);
        border-bottom-width: 2px;
        border-radius: 7px;
        background: var(--bg);
        color: var(--ink-3);
        font: 700 12px/1 var(--font-latin);
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .cs-search-wrap:focus-within .cs-search-kbd,
    .cs-search-input:not(:placeholder-shown) ~ .cs-search-kbd { opacity: 0; }
}
@media (max-width: 480px) {
    .cs-search-wrap { padding: 5px; border-radius: 16px; }
    .cs-search-input { min-height: 56px; padding: 15px 96px 15px 46px; border-radius: 13px; font-size: 16px; }
    .cs-search-icon { left: 15px; }
    .cs-search-icon svg { width: 20px; height: 20px; }
    .cs-search-btn { top: 6px; right: 6px; bottom: 6px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; }
}

.cs-hero-quick {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(14px, 2.4vh, 20px);
}
.cs-hero-quick-label { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.cs-hero-quick a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .85);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    touch-action: manipulation;
    box-shadow: var(--shadow-1);
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.cs-hero-quick a:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); }
@media (max-width: 639px) {
    .cs-hero-quick {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: calc(100% + var(--gutter) * 2);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
                mask-image: linear-gradient(90deg, #000 88%, transparent);
    }
    .cs-hero-quick::-webkit-scrollbar { display: none; }
}

/* 5 ── Stats ─────────────────────────────────────────────────────────────── */
.cs-stats-bar { padding-bottom: clamp(24px, 5vh, 48px); }
@media (max-width: 1023px) { .cs-stats-bar { padding-bottom: 60px; } }   /* room for the language chip */
.cs-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 1000px;
    margin-inline: auto;
}
@media (min-width: 720px) { .cs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.cs-stat-card {
    --tone: var(--brand);
    --tone-soft: var(--brand-soft);
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 12px;
    row-gap: 1px;
    align-items: center;
    padding: 14px 16px 14px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease);
}
.cs-stat-card::before {                            /* a thin tone line on top */
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tone), transparent 85%);
    opacity: .85;
}
.cs-stat-card--danger { --tone: #dc2626; --tone-soft: #fef2f2; }   /* reports */
.cs-stat-card--loss   { --tone: #be123c; --tone-soft: #fff1f2; }   /* reported loss */
.cs-stat-card--search { --tone: #2563eb; --tone-soft: #eff6ff; }   /* searches */
.cs-stat-card--star   { --tone: #d97706; --tone-soft: #fffbeb; }   /* reviews */
.cs-stat-card--safe   { --tone: #059669; --tone-soft: #ecfdf5; }   /* verified businesses */
.cs-stat-card--brand  { --tone: #ea580c; --tone-soft: #fff7ed; }   /* best brands */
.cs-stat-card:hover { border-color: color-mix(in srgb, var(--tone) 35%, var(--line)); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.cs-stat-card-icon {
    grid-row: 1 / span 3;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--tone-soft);
    color: var(--tone);
}
.cs-stat-card-icon svg { width: 21px; height: 21px; }
.cs-stat-card-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-stat-card-value {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.3vw, 26px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cs-stat-card-value small { font-size: .62em; font-weight: 700; color: var(--ink-2); margin-left: 1px; }
.cs-stat-card-note {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tone);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-stat-card-foot { position: absolute; top: 12px; right: 12px; color: var(--ink-4); transition: color .2s ease, transform .2s var(--ease); }
.cs-stat-card-foot svg { display: block; width: 14px; height: 14px; }
.cs-stat-card:hover .cs-stat-card-foot { color: var(--tone); transform: translateX(2px); }
@media (max-width: 560px) {
    .cs-stat-card { padding: 12px 10px 11px; column-gap: 9px; }
    .cs-stat-card-icon { width: 34px; height: 34px; border-radius: 10px; grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
    .cs-stat-card-icon svg { width: 16px; height: 16px; }
    .cs-stat-card-value { font-size: 18px; }
    .cs-stat-card-label { font-size: 11px; }
    .cs-stat-card-note { grid-column: 1 / -1; font-size: 10.5px; margin-top: 4px; }
    .cs-stat-card-foot { display: none; }
}

/* 6 ── Section headings ──────────────────────────────────────────────────── */
.cs-head { margin-bottom: clamp(18px, 2.6vw, 26px); }
.cs-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cs-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(21px, 2.6vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
}
.cs-section-sub { max-width: 62ch; margin: 6px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.cs-pulse { position: relative; display: inline-flex; width: 10px; height: 10px; flex: none; color: var(--danger); }
.cs-pulse i { position: absolute; inset: 0; border-radius: 50%; background: currentColor; }
.cs-ping { animation: cs-ping 2s cubic-bezier(0, 0, .2, 1) infinite; }
.cs-pulse.is-idle .cs-ping { animation-play-state: paused; }

/* 7 ── Buttons & links ───────────────────────────────────────────────────── */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.cs-btn svg { width: 17px; height: 17px; flex: none; }
.cs-btn:active { transform: scale(.98); }
.cs-btn--primary { background: var(--brand); color: #fff; box-shadow: 0 8px 18px -10px rgba(234, 88, 12, .9); }
.cs-btn--primary:hover { background: var(--brand-strong); }
.cs-btn--report { background: #FF4500; color: #fff; box-shadow: 0 8px 18px -10px rgba(255, 69, 0, .9); }
.cs-btn--report:hover { background: #e63e00; }
.cs-btn--outline { background: var(--surface); border-color: var(--line); color: var(--ink); }
.cs-btn--outline:hover { border-color: var(--brand-line); color: var(--brand-strong); background: var(--brand-soft); }
.cs-btn--light { background: #fff; color: var(--brand-strong); }
.cs-btn--light:hover { background: var(--brand-soft); }

.cs-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: var(--surface);
    color: var(--brand-strong);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    touch-action: manipulation;
    transition: border-color .2s ease, background-color .2s ease;
}
.cs-link svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.cs-link:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.cs-link:hover svg { transform: translateX(3px); }

/* 8 ── Review prompt / owner registration slider ─────────────────────────── */
.cs-cta-slider { position: relative; }
.cs-cta-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.cs-cta-track::-webkit-scrollbar { display: none; }
.cs-cta-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.cs-cta-slide > * { height: 100%; }
.cs-review-prompt,
.cs-register {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}
.cs-review-prompt-icon,
.cs-register-icon {
    width: 52px;
    height: 52px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
.cs-review-prompt-icon { background: var(--warn-soft); color: var(--star); }
.cs-register-icon { background: var(--safe-soft); color: var(--safe); }
.cs-review-prompt-icon svg, .cs-register-icon svg { width: 26px; height: 26px; }
.cs-review-prompt-copy, .cs-register-copy { flex: 1; min-width: 0; }
.cs-review-prompt h2, .cs-register-title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: clamp(17px, 2.1vw, 21px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink);
}
.cs-review-prompt p { margin: 0; max-width: 60ch; font-size: 14px; line-height: 1.65; color: var(--ink-3); }
.cs-register-eyebrow { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 700; color: var(--safe); }
.cs-review-prompt-action, .cs-register-action { flex: none; }
@media (max-width: 640px) {
    .cs-review-prompt, .cs-register { flex-wrap: wrap; gap: 14px; }
    .cs-review-prompt-action, .cs-register-action { width: 100%; }
}
.cs-cta-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.cs-cta-dots button {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: #d6d3d1;
    cursor: pointer;
    transition: width .3s var(--ease), background-color .2s ease;
}
.cs-cta-dots button::after { content: ''; position: absolute; inset: -12px -6px; }   /* 32px tap area */
.cs-cta-dots button.is-on { width: 26px; background: var(--brand); }

/* 9 ── Report cards ──────────────────────────────────────────────────────── */
.cs-report-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .cs-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }

.cs-card {
    position: relative;
    display: flex;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
/* a thin orange line grows along the top edge on hover */
.cs-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    height: 3px;
    background: linear-gradient(90deg, #fb923c, var(--brand), var(--deep-2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
    pointer-events: none;
}
.cs-card:hover { border-color: #fdba74; box-shadow: 0 2px 4px rgba(28, 25, 23, .04), 0 22px 44px -22px rgba(234, 88, 12, .42); transform: translateY(-3px); }
.cs-card:hover::after { transform: scaleX(1); }
.cs-card:focus-within { border-color: var(--brand-line); }

.cs-card-media {
    position: relative;
    flex: none;
    width: clamp(108px, 30%, 176px);
    background: linear-gradient(145deg, #f7f7f6 0%, #efeeec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.cs-card:hover .cs-card-media img { transform: scale(1.04); }
.cs-card-ph {
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .75);
    box-shadow: 0 6px 16px -8px rgba(154, 52, 18, .45), inset 0 0 0 1px rgba(255, 255, 255, .9);
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
}
.cs-card-ph svg { width: 28px; height: 28px; }
.cs-card-ph--pdf { color: var(--danger); }
.cs-card-views {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 99px;
    background: rgba(43, 26, 13, .7);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.cs-card-views svg { width: 12px; height: 12px; color: #fdba74; }
.cs-card-badge {
    /* the admin badge: a tag on the card's top-right corner */
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 24px);
    padding: 5px 12px 5px 10px;
    border-radius: 0 calc(var(--r-lg) - 1px) 0 12px;
    background: var(--danger);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 6px 14px -8px rgba(220, 38, 38, .8);
    pointer-events: none;                        /* clicks reach the card link */
}
.cs-card-badge svg { width: 12px; height: 12px; flex: none; }
.cs-card-badge--warn { background: #d97706; box-shadow: 0 6px 14px -8px rgba(217, 119, 6, .8); }
.cs-card-badge--dark { background: var(--ink-2); box-shadow: 0 6px 14px -8px rgba(28, 25, 23, .7); }
/* a badged card starts its text below the tag */
.cs-card--badged:not(.cs-card--rail) .cs-card-top { margin-top: 20px; }
.cs-extreme > .cs-card .cs-card-badge { border-top-right-radius: 0; }

.cs-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 12px; }
.cs-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-card-type {
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-card-amount {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 10px;
    border: 1px solid var(--danger-line);
    border-radius: 99px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}
.cs-card-amount svg { width: 11px; height: 11px; }
.cs-card-title {
    margin: 2px 0 0;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-card-link { text-decoration: none; }
.cs-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }   /* whole card clickable */
.cs-card:hover .cs-card-link { color: var(--brand-strong); }
.cs-card-link:focus-visible { outline: none; }
.cs-card-link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-lg); }
.cs-card-pay { display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.cs-pay {
    --c: var(--ink-4);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-2);
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.cs-pay::before { content: ''; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--c); }
.cs-pay code { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.cs-pay--bkash  { --c: #e2136e; }
.cs-pay--nagad  { --c: #f6921e; }
.cs-pay--rocket { --c: #8c3494; }
.cs-pay--bank   { --c: #2563eb; }
.cs-pay-more { flex: none; align-self: center; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.cs-card-text {
    flex: 1;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cs-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    padding-top: 11px;
    border-top: 1px dashed var(--line);
}
.cs-card-time {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.cs-card-time svg { width: 15px; height: 15px; flex: none; color: var(--ink-4); }
.cs-card-more {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px 5px 14px;
    border: 1px solid var(--brand-line);
    border-radius: 99px;
    background: #fff;
    color: var(--brand-strong);
    font-size: 13px;
    font-weight: 700;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.cs-card-more svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.cs-card:hover .cs-card-more { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 8px 16px -8px rgba(234, 88, 12, .8); }
.cs-card:hover .cs-card-more svg { transform: translateX(3px); }
@media (min-width: 900px) { .cs-card-text { -webkit-line-clamp: 3; } }
@media (max-width: 420px) {
    .cs-card-body { padding: 12px 12px 10px; }
    .cs-card-title { font-size: 15px; }
    .cs-card-text { font-size: 13px; }
}

/* A name reported several times: a red strip on top of the card */
.cs-extreme {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--danger-line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s var(--ease);
}
.cs-extreme:hover { box-shadow: 0 2px 4px rgba(28, 25, 23, .04), 0 18px 40px -20px rgba(220, 38, 38, .45); transform: translateY(-2px); }
.cs-extreme > .cs-card { flex: 1; border: 0; border-radius: 0; box-shadow: none; transform: none; }
.post-extreme-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--danger-soft);
    border-bottom: 1px solid var(--danger-line);
    color: #b91c1c;
    font-size: 12.5px;
    font-weight: 700;
}
.post-extreme-tag svg { width: 15px; height: 15px; flex: none; }

/* Rail variant (most viewed): picture on top, fixed width */
.cs-card--rail { flex: 0 0 auto; flex-direction: column; width: min(78vw, 290px); }
.cs-card--rail .cs-card-media { width: 100%; height: 132px; }
.cs-card--rail .cs-card-text { -webkit-line-clamp: 2; }
.cs-card--rail .cs-card-body { padding: 12px 14px 12px; }

.cs-empty {
    grid-column: 1 / -1;
    padding: 48px 24px;
    border: 1.5px dashed #d6d3d1;
    border-radius: var(--r-lg);
    background: var(--surface);
    text-align: center;
}
.cs-empty h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; font-weight: 700; }
.cs-empty p { max-width: 40ch; margin: 0 auto 18px; font-size: 14px; color: var(--ink-3); }

.cs-more-row { margin-top: 20px; text-align: center; }
.cs-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    padding: 12px 28px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: var(--surface);
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.cs-load-more svg { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.cs-load-more:hover { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-strong); }
.cs-load-more:hover svg { transform: translateY(2px); }
.cs-load-more[disabled] { opacity: .6; cursor: progress; }
.cs-load-status { margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.cs-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: -4px;
    border: 2.5px solid var(--brand-line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: cs-spin .8s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }

/* Horizontal rails */
.cs-rail {
    display: flex;
    gap: 14px;                                   /* the auto-scroll steps by card width + 14 */
    margin-inline: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 16px;
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}
.cs-rail > * { scroll-snap-align: start; }
/* rank badge — the most-viewed rail is ordered by views */
#most-wanted-container { counter-reset: cs-rank; }
#most-wanted-container > .cs-card { counter-increment: cs-rank; }
#most-wanted-container > .cs-card::before {
    content: '#' counter(cs-rank, bengali);
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    min-width: 28px;
    height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    background: rgba(28, 25, 23, .78);
    color: #fff;
    font: 800 12px/1 var(--font-display);
}
#most-wanted-container > .cs-card:nth-child(-n+3)::before { background: var(--brand); }

/* 10 ── Community reviews: three rows, each gliding opposite to the last ──*/
.cs-rv-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 14px 6px 10px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: var(--surface);
    color: var(--ink-2);
    font-size: 12.5px;
    font-weight: 600;
}
.cs-rv-summary b { color: var(--ink); font: 800 15px/1 var(--font-latin); }
.cs-rv-rows {
    display: grid;
    gap: 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.cs-rv-row { overflow-x: auto; padding: 8px 0 12px; scrollbar-width: none; }
.cs-rv-row::-webkit-scrollbar { display: none; }
/* the rows move once assets/js/home.js has repeated the cards for a seamless loop
   (without it they simply scroll sideways) */
.cs-rv-track { display: flex; width: max-content; }
.cs-rv-rows.is-loop .cs-rv-row { overflow: hidden; }
.cs-rv-rows.is-loop .cs-rv-track { animation: cs-rv-left var(--cs-rv-dur, 60s) linear infinite; will-change: transform; }
.cs-rv-rows.is-loop .cs-rv-row--ltr .cs-rv-track { animation-name: cs-rv-right; }
.cs-rv-rows:hover .cs-rv-track,
.cs-rv-rows:focus-within .cs-rv-track,
.cs-rv-rows.is-idle .cs-rv-track { animation-play-state: paused; }
@keyframes cs-rv-left  { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(-50%, 0, 0); } }
@keyframes cs-rv-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.cs-rv-card {
    position: relative;
    flex: 0 0 auto;
    width: 320px;
    margin-right: 14px;                          /* margin, not gap: keeps the half-width loop exact */
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 16px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    color: inherit;
    text-align: left;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cs-rv-card:hover, .cs-rv-card:focus-visible { border-color: #d6d3d1; box-shadow: var(--shadow-2); }
.cs-rv-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cs-rv-logo {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: 15px;
    font-weight: 800;
}
.cs-rv-logo img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 3px; object-fit: contain; background: #fff; }
.cs-rv-co { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cs-rv-co b { font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-rv-co small { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
.cs-rv-rate {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px 4px 7px;
    border-radius: 99px;
    font: 800 12.5px/1 var(--font-latin);
}
/* the stars: the star tiles used on every page (.cs-st, assets/css/polish.css) */
.cs-rv-card .cs-st { flex: none; }
.cs-rv-card--good .cs-rv-rate { background: var(--safe-soft); color: #047857; }
.cs-rv-card--mid  .cs-rv-rate { background: var(--warn-soft); color: var(--warn); }
.cs-rv-card--bad  .cs-rv-rate { background: var(--danger-soft); color: #b91c1c; }
.cs-rv-text {
    height: 4.95em;                               /* exactly three lines, so every card is equal */
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cs-rv-foot { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.cs-rv-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-rv-tag { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.cs-rv-card--good .cs-rv-tag { background: var(--safe-soft); color: #047857; }
.cs-rv-card--bad  .cs-rv-tag { background: var(--danger-soft); color: #b91c1c; }
.cs-avatar {
    position: relative;
    width: 26px;
    height: 26px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.cs-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The reviewer sits at the top of the card, the business at the bottom */
.cs-rv-head .cs-avatar { width: 38px; height: 38px; font-size: 15px; }
.cs-rv-foot .cs-rv-logo { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
.cs-rv-foot .cs-rv-logo img { padding: 2px; }
.cs-rv-summary .cs-st { flex: none; }
@media (max-width: 639px) {
    .cs-rv-card { width: 276px; margin-right: 12px; padding: 14px 14px 12px; }
    .cs-rv-text { font-size: 13.5px; }
}

/* While the reviews fill the screen the whole page turns a warm sunny yellow
   (html.cs-green — the mood's original name — set by assets/js/walkthrough.js): background, header and
   browser chrome; the sections around fade back so the moving rows lead. */
.cs-rv-section { position: relative; isolation: isolate; overflow: hidden; min-height: min(100vh, 900px); min-height: min(100svh, 900px);
    display: flex; flex-direction: column; justify-content: center; transition: background-color .7s ease, border-color .7s ease; }
.cs-rv-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
/* soft radial gradients — no blur filter, which would repaint every frame while they drift */
.cs-rv-fx i { position: absolute; border-radius: 50%; }
.cs-rv-fx i:first-child { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: -10vw; top: -12vw; background: radial-gradient(closest-side, rgba(250, 204, 21, .42), transparent); }
.cs-rv-fx i:nth-child(2) { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: -8vw; bottom: -14vw; background: radial-gradient(closest-side, rgba(251, 191, 36, .3), transparent); }
.cs-rv-fx i:nth-child(3) { width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; left: 38%; top: 30%; background: radial-gradient(closest-side, rgba(253, 224, 71, .34), transparent); }
.cs-rv-fx b { position: absolute; right: 4vw; top: 9vh; font: 900 clamp(160px, 22vw, 320px)/1 Georgia, serif; color: rgba(161, 98, 7, .09); }
/* the glows drift slowly while the page is green */
@keyframes cs-glow-a { 50% { transform: translate(4vw, 3vw) scale(1.1); } }
@keyframes cs-glow-b { 50% { transform: translate(-5vw, -3vw) scale(1.12); } }
html.cs-green .cs-rv-fx i { will-change: transform; }
html.cs-green .cs-rv-fx i:first-child { animation: cs-glow-a 14s ease-in-out infinite; }
html.cs-green .cs-rv-fx i:nth-child(2) { animation: cs-glow-b 17s ease-in-out infinite; }
html.cs-green .cs-rv-fx i:nth-child(3) { animation: cs-glow-a 20s ease-in-out infinite reverse; }
html.cs-green body.cs-home { background: #fef6c7; }
/* sunny yellow: pale lemon at the top, golden in the middle, a warm cream at the end */
html.cs-green .cs-rv-section { background: linear-gradient(165deg, #fffbe0 0%, #fef3b4 32%, #fde98a 64%, #fff6cf 100%); border-color: transparent; }
html.cs-green .cs-rv-fx { opacity: 1; }
html.cs-green #cs-main > .cs-band:not(.cs-rv-section), html.cs-green .cs-hero, html.cs-green .cs-trust, html.cs-green .sf { opacity: .35; }
html.cs-green #cs-header { background: rgba(255, 249, 219, .9) !important; border-bottom-color: rgba(161, 98, 7, .14) !important; box-shadow: none !important; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
html.cs-green #cs-header .csh-nav { background: rgba(255, 255, 255, .7); border-color: rgba(161, 98, 7, .16); }
html.cs-green #cs-header .csh-nav a { color: #5c3d06; }
html.cs-green #cs-header .csh-nav a:hover, html.cs-green #cs-header .csh-nav a.on { background: #fef9c3; color: #854d0e; }
html.cs-green #cs-header .csh-icon, html.cs-green #cs-header .csh-ghost { background: rgba(255, 255, 255, .8); border-color: rgba(161, 98, 7, .18); color: #5c3d06; }
/* the cards: white, lifted, with a green edge */
.cs-rv-card, .cs-rv-summary { transition: border-color .5s ease, box-shadow .5s ease, background-color .5s ease, transform .3s var(--ease); }
html.cs-green .cs-rv-card { background: #fff; border-color: #f6e39a; box-shadow: 0 18px 36px -24px rgba(133, 77, 14, .42); }
html.cs-green .cs-rv-card:hover, html.cs-green .cs-rv-card:focus-visible { transform: translateY(-4px); border-color: #f2c94c; box-shadow: 0 26px 44px -22px rgba(161, 98, 7, .42); }
html.cs-green .cs-rv-foot { border-top-color: #fbf1cc; }
html.cs-green .cs-rv-foot .cs-rv-logo { background: #fef9c3; border-color: #f6e39a; color: #a16207; }
html.cs-green .cs-rv-summary { background: #fff; border-color: #f6e39a; }
html.cs-green .cs-rv-section .cs-section-title { color: #713f12; }
html.cs-green .cs-rv-section .cs-section-sub { color: #7c5a12; }
html.cs-green .cs-rv-section .cs-link { color: #a16207; }
html.cs-green .cs-rv-head .cs-avatar { background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; box-shadow: 0 6px 14px -8px rgba(161, 98, 7, .7); }
@media (prefers-reduced-motion: reduce) {
    .cs-rv-section, .cs-rv-fx, .cs-rv-card, #cs-header { transition: none; }
    html.cs-green .cs-rv-fx i { animation: none; }
    .cs-biz-track { animation: none; }
    .cs-biz-strip { overflow-x: auto; }
}

/* Popular & reviewed businesses: a strip of small logos that moves slowly
   (index.php $cs_biz_strip). At the top of the reviews section it shares the
   green; with no reviews it is a section of its own. Hover or focus pauses it. */
.cs-biz--in { position: relative; padding-bottom: 30px; }
.cs-biz-strip { overflow: hidden; padding: 6px 0 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cs-biz-track { display: flex; width: max-content; animation: cs-biz-move var(--biz-dur, 40s) linear infinite; }
.cs-biz-strip:hover .cs-biz-track, .cs-biz-strip:focus-within .cs-biz-track,
.cs-biz-strip.is-idle .cs-biz-track { animation-play-state: paused; }   /* is-idle: off screen (home.js) */
@keyframes cs-biz-move { to { transform: translateX(-50%); } }
.cs-biz-chip { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; padding: 5px 12px 5px 5px; border-radius: 999px;
    background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; white-space: nowrap;
    font-size: 13px; font-weight: 700; box-shadow: 0 8px 18px -14px rgba(28, 25, 23, .35); transition: border-color .2s ease, transform .2s ease; }
.cs-biz-chip:hover, .cs-biz-chip:focus-visible { border-color: #86d9a8; transform: translateY(-2px); }
.cs-biz-logo { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #fbbf24, #d97706); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.cs-biz-logo img { position: absolute; inset: 1px; width: 26px; height: 26px; border-radius: 50%; object-fit: contain; background: #fff; }
.cs-biz-ok { font-style: normal; color: #16a34a; font-weight: 800; }
.cs-biz-rate { display: inline-flex; flex: none; }
.cs-biz-rate .cs-sts { font-size: 11.5px; }
html.cs-green .cs-biz-chip { border-color: #f6e39a; box-shadow: 0 10px 22px -16px rgba(133, 77, 14, .45); }
html.cs-green .cs-biz .cs-section-title { color: #713f12; }
html.cs-green .cs-biz .cs-section-sub { color: #7c5a12; }
html.cs-green .cs-biz .cs-link { color: #a16207; }

/* 11 ── Businesses ───────────────────────────────────────────────────────── */
.cs-company-card {
    position: relative;
    flex: 0 0 148px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    text-align: center;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease);
}
.cs-company-card:hover { border-color: #d6d3d1; box-shadow: var(--shadow-2); transform: translateY(-2px); }
.cs-company-logo {
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.cs-company-logo img { width: 36px; height: 36px; object-fit: contain; }
.cs-company-logo.is-letter { background: var(--brand-soft); color: var(--brand-strong); font: 800 20px/1 var(--font-display); }
.cs-company-name {
    min-height: 2.8em;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cs-company-rating { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: var(--warn-soft); font-size: 12px; }
.cs-company-rating svg { width: 12px; height: 12px; color: var(--star); }
.cs-company-rating b { font-weight: 700; color: var(--ink); }
.cs-company-rating span { font-size: 11px; color: var(--ink-3); }
.cs-verified-tick {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
    padding: 2px 8px;
    border: 1px solid var(--safe-line);
    border-radius: 99px;
    background: var(--safe-soft);
    color: #047857;
    font-size: 11px;
    font-weight: 700;
}
.cs-verified-tick svg { width: 10px; height: 10px; }

/* 12 ── Check before you pay: the page's one strong colour panel ─────────── */
.cs-paycheck {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(30px, 5vw, 56px) clamp(20px, 5vw, 56px);
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, #f97316 0%, #ea580c 55%, #c2410c 100%);
    color: #fff;
    text-align: center;
    box-shadow: 0 24px 50px -28px rgba(194, 65, 12, .8);
}
.cs-paycheck::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.2px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%);
}
.cs-paycheck-shield {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
}
.cs-paycheck-shield svg { width: 28px; height: 28px; }
.cs-paycheck h2 {
    max-width: 22ch;
    margin: 0 auto 12px;
    font-family: var(--font-display);
    font-size: clamp(22px, 3.2vw, 34px);
    font-weight: 800;
    line-height: 1.32;
    text-wrap: balance;
}
.cs-paycheck p {
    max-width: 58ch;
    margin: 0 auto 24px;
    font-size: clamp(14px, 1.5vw, 15.5px);
    line-height: 1.8;
    color: rgba(255, 255, 255, .9);
    text-wrap: pretty;
}

/* 13 ── How it works · Safety tips · Final CTA ──────────────────────────── */
/* How it works: three steps, each a still screenshot in a phone or browser
   frame with its explanation beside it. While the section fills the screen
   the whole page turns dark (html.cs-night, set by assets/js/walkthrough.js). */

/* the page's "night": background, header and the neighbouring sections */
body.cs-home { transition: background-color .7s ease; }
html.cs-night body.cs-home { background: #07060a; }
#cs-main > .cs-band, .cs-hero, .cs-trust, .sf { transition: opacity .7s ease; }
html.cs-night #cs-main > .cs-band, html.cs-night .cs-hero, html.cs-night .cs-trust, html.cs-night .sf { opacity: .12; }
html.cs-night #cs-header { background: rgba(8, 7, 10, .78) !important; border-bottom-color: rgba(255, 255, 255, .07) !important; box-shadow: none !important; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
#cs-header, #cs-header .csh-word, #cs-header .csh-nav, #cs-header .csh-nav a, #cs-header .csh-icon, #cs-header .csh-ghost { transition: background-color .6s ease, color .6s ease, border-color .6s ease; }
html.cs-night #cs-header .csh-word { color: #fff; }
html.cs-night #cs-header .csh-nav { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
html.cs-night #cs-header .csh-nav a { color: #d6d3d1; }
html.cs-night #cs-header .csh-nav a:hover, html.cs-night #cs-header .csh-nav a.on { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
html.cs-night #cs-header .csh-icon, html.cs-night #cs-header .csh-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #e7e5e4; }

/* the section: dark, three steps down the page */
.cs-how { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 9vw, 120px) 0 clamp(56px, 8vw, 104px); background: #07060a; color: #fff; }
.cs-how-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cs-how-fx i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.cs-how-fx i:first-child { width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; right: -16vw; top: -12vw; background: radial-gradient(closest-side, rgba(255, 69, 0, .45), transparent); }
.cs-how-fx i:last-child { width: 50vw; height: 50vw; max-width: 700px; max-height: 700px; left: -16vw; bottom: -10vw; background: radial-gradient(closest-side, rgba(220, 38, 38, .3), transparent); }
.cs-how::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px); background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%); }

.cs-how-head { max-width: 660px; margin: 0 auto clamp(44px, 7vw, 88px); text-align: center; }
.cs-how-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fdba74; font-size: 12.5px; font-weight: 700; }
.cs-how-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #FF4500; box-shadow: 0 0 0 4px rgba(255, 69, 0, .2); }
.cs-how-head h2 { margin: 16px 0 10px; font: 800 clamp(28px, 4.4vw, 46px)/1.15 var(--font-display); letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.cs-how-head p { margin: 0; color: #a8a29e; font-size: clamp(15px, 1.6vw, 17.5px); }

/* the steps; on wide screens a line runs down the middle through numbered dots */
.cs-how-steps { position: relative; display: grid; gap: clamp(64px, 10vw, 128px); margin: 0; padding: 0; list-style: none; }
.cs-how-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: center; }
.cs-how-copy, .cs-how-shot { min-width: 0; }
.cs-how-copy { max-width: 480px; }
.cs-how-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 99px; background: rgba(255, 69, 0, .12); border: 1px solid rgba(255, 69, 0, .32); color: #fdba74; font-size: 13px; font-weight: 700; }
.cs-how-badge svg { width: 16px; height: 16px; flex: none; color: #fb923c; }
.cs-how-copy h3 { margin: 18px 0 12px; font: 800 clamp(24px, 3.2vw, 36px)/1.22 var(--font-display); letter-spacing: -.015em; color: #fff; text-wrap: balance; }
.cs-how-copy p { margin: 0; color: #d6d3d1; font-size: clamp(15px, 1.5vw, 16.5px); line-height: 1.85; text-wrap: pretty; }
.cs-how-copy ul { display: grid; gap: 11px; margin: 22px 0 0; padding: 0; list-style: none; }
.cs-how-copy li { display: flex; align-items: center; gap: 11px; color: #f5f5f4; font-size: 15px; font-weight: 600; }
.cs-how-copy li i { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(16, 185, 129, .15); color: #34d399; }
.cs-how-copy li svg { width: 13px; height: 13px; }
.cs-how-dot { display: none; }
@media (min-width: 900px) {
    .cs-how-steps::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
        background: linear-gradient(transparent, rgba(255, 255, 255, .13) 10%, rgba(255, 255, 255, .13) 90%, transparent); }
    .cs-how-step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(72px, 9vw, 128px); }
    .cs-how-copy { justify-self: end; }
    .cs-how-step--flip .cs-how-copy { order: 2; justify-self: start; }
    .cs-how-dot { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
        background: #141217; border: 1px solid rgba(255, 255, 255, .16); color: #a8a29e; font: 800 14px/1 var(--font-display);
        transition: background-color .6s ease, color .6s ease, box-shadow .6s ease, border-color .6s ease; }
    .cs-how-step.is-in .cs-how-dot { background: linear-gradient(135deg, #FF4500, #f97316); border-color: transparent; color: #fff; box-shadow: 0 0 0 6px rgba(255, 69, 0, .16), 0 12px 30px -8px rgba(255, 69, 0, .8); }
}

/* the screenshot, with small notes floating beside it */
.cs-how-shot { position: relative; justify-self: center; width: 100%; display: flex; justify-content: center; padding: 26px 0; }
.hw-phone { width: min(282px, 76vw); padding: 8px; border-radius: 46px; background: linear-gradient(145deg, #4c4c55, #16161a 40%, #2c2c32);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 90px -30px rgba(0, 0, 0, .95), 0 24px 60px -28px rgba(255, 69, 0, .55); }
.hw-phone .hw-scr { height: 570px; border-radius: 38px; }
.hw-browser { width: min(580px, 100%); border-radius: 12px; overflow: hidden; background: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -40px rgba(0, 0, 0, .9), 0 24px 60px -30px rgba(255, 69, 0, .5); }
.hw-browser-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: linear-gradient(180deg, #1f1e23, #17161a); }
.hw-dots { display: flex; gap: 6px; }
.hw-dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.hw-dots i:nth-child(2) { background: #febc2e; } .hw-dots i:nth-child(3) { background: #28c840; }
.hw-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .07); color: #a8a29e; font: 600 11.5px/1.2 var(--font-latin); text-align: center; }
.hw-scr { position: relative; overflow: hidden; background: #fffcf8; color: var(--ink); text-align: left; }

/* inside the screens */
.hw-bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 24px; font: 700 13px/1 var(--font-latin); }
.hw-island { position: absolute; left: 50%; top: 8px; width: 88px; height: 25px; margin-left: -44px; border-radius: 99px; background: #0a0a0c; }
.hw-bar span { display: flex; gap: 4px; }
.hw-bar span i { width: 16px; height: 9px; border-radius: 3px; background: var(--ink); }
.hw-bar span i:first-child { width: 12px; opacity: .8; }
.hw-head { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; background: #fff; border-bottom: 1px solid #f3efe9; }
.hw-logo { width: 22px; height: 22px; flex: none; border-radius: 7px; background: linear-gradient(135deg, #FF4500, #f97316); }
.hw-head > b { font: 800 14.5px/1 var(--font-latin); letter-spacing: -.03em; }
.hw-head > b em { font-style: normal; color: #FF4500; }
.hw-cta { margin-left: auto; padding: 6px 11px; border-radius: 99px; background: #FF4500; color: #fff; font-size: 11px; font-weight: 700; }
.hw-pad { padding: 14px 16px 18px; }
.hw-h { margin: 0 0 4px; font: 800 17px/1.3 var(--font-display); }
.hw-q { margin: 11px 0 6px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; }
.hw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hw-chips span { padding: 6px 11px; border-radius: 99px; border: 1.5px solid #ebe8e4; background: #fff; color: var(--ink-2); font-size: 11.5px; font-weight: 600; }
.hw-chips .is-on { border-color: #dc2626; background: #fff5f5; color: #b91c1c; }
.hw-input { padding: 9px 12px; border-radius: 12px; border: 1.5px solid #ebe8e4; background: #fff; font-size: 13px; font-weight: 700; }
.hw-input--b { color: #dc2626; }
.hw-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hw-ev { display: flex; gap: 6px; }
.hw-ev i { width: 52px; height: 42px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
    background: linear-gradient(#fff, #fff) 12% 26% / 58% 13% no-repeat, linear-gradient(#ffedd5, #ffedd5) 88% 62% / 46% 13% no-repeat, linear-gradient(#fff, #fff) 12% 88% / 38% 10% no-repeat, linear-gradient(160deg, #e0f2fe, #f1f5f9); }
.hw-ev i:nth-child(2) { background-color: transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(#dcfce7, #dcfce7), linear-gradient(#fff, #fff), linear-gradient(160deg, #ecfccb, #f7fee7); }
.hw-ev i:nth-child(3) { background-image: linear-gradient(#fff, #fff), linear-gradient(#fee2e2, #fee2e2), linear-gradient(#fff, #fff), linear-gradient(160deg, #fef3c7, #fff7ed); }
.hw-ev span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; border: 1.5px dashed #fdba74; color: #ea580c; font-weight: 800; }
.hw-btn { margin-top: 16px; padding: 12px; border-radius: 12px; background: #FF4500; color: #fff; text-align: center; font-size: 13.5px; font-weight: 800; box-shadow: 0 14px 28px -14px rgba(255, 69, 0, .9); }
.hw-btn--ghost { margin-top: 12px; background: #fff; border: 1.5px solid #fed7aa; color: #c2410c; box-shadow: none; }

.hw-search { display: flex; align-items: center; gap: 8px; width: 58%; margin-left: auto; padding: 7px 12px; border-radius: 10px; border: 1.5px solid #FF4500; box-shadow: 0 0 0 3px rgba(255, 69, 0, .12); background: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.hw-search svg { width: 14px; height: 14px; flex: none; color: var(--ink-4); }
.hw-scr--wide .hw-pad { padding: 16px 18px 20px; }
.hw-found { margin: 0 0 10px; color: var(--ink-3); font-size: 12.5px; }
.hw-found b { color: var(--ink); }
.hw-alert { padding: 10px 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 12.5px; line-height: 1.5; }
.hw-alert b { margin-right: 6px; }
.hw-res { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid #f1ece6; box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .35); }
.hw-res--dim { opacity: .55; }
.hw-av { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #fff7ed; color: #c2410c; font: normal 800 15px/1 var(--font-display); }
.hw-av--lg { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; }
.hw-res-main { flex: 1; min-width: 0; }
.hw-res-main b, .hw-prof b { display: block; font-size: 14px; font-weight: 700; }
.hw-res-main small, .hw-prof small { display: block; overflow: hidden; color: var(--ink-3); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.hw-res-loss { text-align: right; }
.hw-res-loss b { display: block; color: #dc2626; font: 800 15px/1.2 var(--font-latin); }
.hw-res-loss small { color: var(--ink-4); font-size: 11px; }

.hw-prof { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.hw-risk { display: inline-block; margin-top: 12px; padding: 5px 11px; border-radius: 99px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 11.5px; font-weight: 800; }
.hw-nums { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; margin-top: 12px; }
.hw-nums span { padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #f1ece6; }
.hw-nums b { display: block; color: #dc2626; font: 800 18px/1.2 var(--font-latin); }
.hw-nums small { color: var(--ink-3); font-size: 11px; }
.hw-quote { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid #fb923c; border-radius: 0 12px 12px 0; background: #fff; color: var(--ink-2); font-size: 12.5px; line-height: 1.65; }
.hw-safe { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 12px; background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1px solid #a7f3d0; }
.hw-safe-ico { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #059669; color: #fff; }
.hw-safe-ico svg { width: 20px; height: 20px; }
.hw-safe-ico .cs-lottie { position: absolute; inset: -6px; }
.hw-safe-ico.has-lottie { background: none; }
.hw-safe-ico.has-lottie > svg { display: none; }
.hw-safe b { display: block; color: #047857; font-size: 14px; font-weight: 800; }
.hw-safe small { display: block; color: #065f46; font-size: 12px; }

.hw-call { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 12px; background: rgba(255, 255, 255, .97); color: var(--ink);
    font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .5); }
.hw-call--a { top: 16%; left: 0; }
.hw-call--b { bottom: 14%; right: 0; }
.cs-how-shot--wide .hw-call--a { top: 4px; left: auto; right: 6%; }
.hw-call-ico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff7ed; color: #c2410c; font-style: normal; font-size: 13px; font-weight: 800; }
.hw-call-ico svg { width: 14px; height: 14px; }
.hw-call-ico--ok { background: #d1fae5; color: #047857; }
.hw-call-ico--warn { background: #fee2e2; color: #dc2626; }
@media (min-width: 560px) {
    .hw-call--a { left: calc(50% - 230px); }
    .hw-call--b { right: calc(50% - 230px); }
}

/* Phones: the screenshots shrink to fit a phone screen. zoom scales the whole
   mock-up (frame, text and spacing together), so it looks exactly like the
   desktop one, only smaller; the steps sit closer together. */
@media (max-width: 640px) {
    .cs-how-head { margin-bottom: 40px; }
    .cs-how-head p { font-size: 14.5px; }
    .cs-how-steps { gap: 60px; }
    .cs-how-step { gap: 14px; }
    .cs-how-badge { padding: 6px 12px 6px 9px; font-size: 12.5px; }
    .cs-how-copy h3 { margin: 14px 0 8px; font-size: 23px; }
    .cs-how-copy p { font-size: 14.5px; line-height: 1.75; }
    .cs-how-copy ul { gap: 9px; margin-top: 16px; }
    .cs-how-copy li { gap: 10px; font-size: 14px; }
    .cs-how-copy li i { width: 22px; height: 22px; }
    .cs-how-shot { padding: 16px 0 8px; }
    .hw-phone { width: 282px; zoom: .74; }
    .hw-browser { width: 440px; zoom: .8; }
    .hw-call { gap: 6px; padding: 6px 11px 6px 6px; border-radius: 10px; font-size: 11.5px; }
    .hw-call-ico { width: 22px; height: 22px; font-size: 11px; }
    .hw-call-ico svg { width: 12px; height: 12px; }
    .hw-call--a { top: 12%; }
    .hw-call--b { bottom: 12%; }
    .cs-how-shot--wide .hw-call--a { top: -2px; right: 2%; }
}
@media (max-width: 400px) {
    .hw-phone { zoom: .7; }
    .hw-browser { zoom: .72; }
}

/* arriving: assets/js/walkthrough.js arms the section (so it shows fully
   without JS) and marks each step as it is scrolled to */
.cs-how.is-armed .cs-how-copy, .cs-how.is-armed .cs-how-shot > div, .cs-how.is-armed .hw-call { transition: opacity .8s ease, transform .9s var(--ease); }
.cs-how.is-armed .cs-how-step:not(.is-in) .cs-how-copy { opacity: 0; transform: translateY(26px); }
.cs-how.is-armed .cs-how-step:not(.is-in) .cs-how-shot > div { opacity: 0; transform: translateX(56px) rotate(2deg); }
.cs-how.is-armed .cs-how-step--flip:not(.is-in) .cs-how-shot > div { transform: translateX(-56px) rotate(-2deg); }
.cs-how.is-armed .cs-how-step:not(.is-in) .hw-call { opacity: 0; transform: translateY(12px) scale(.85); }
.cs-how.is-armed .cs-how-step.is-in .cs-how-shot > div { transition-delay: .12s; }
.cs-how.is-armed .cs-how-step.is-in .hw-call--a { transition-delay: .55s; }
.cs-how.is-armed .cs-how-step.is-in .hw-call--b { transition-delay: .75s; }
@media (max-width: 899px) {
    .cs-how.is-armed .cs-how-step:not(.is-in) .cs-how-shot > div,
    .cs-how.is-armed .cs-how-step--flip:not(.is-in) .cs-how-shot > div { transform: translateY(40px); }
}

.cs-how-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(56px, 8vw, 96px); }
.cs-how-btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 24px; border-radius: 12px; border: 1px solid transparent; font: 700 15px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: transform .2s ease, background-color .2s ease; }
.cs-how-btn svg { width: 18px; height: 18px; }
.cs-how-btn--main { background: #FF4500; color: #fff; box-shadow: 0 16px 34px -14px rgba(255, 69, 0, .9); }
.cs-how-btn--main:hover { transform: translateY(-2px); }
.cs-how-btn--ghost { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); color: #fff !important; }
.cs-how-btn--ghost:hover { background: rgba(255, 255, 255, .1); }

@media (prefers-reduced-motion: reduce) {
    body.cs-home, #cs-main > .cs-band, #cs-header { transition: none; }
}

/* a Lottie animation fills its box; the static icon stays until it has drawn */
.cs-lottie { display: block; width: 100%; height: 100%; }
.cs-lottie svg { display: block; }
.cs-paycheck-shield { position: relative; }
.cs-paycheck-shield .cs-lottie { position: absolute; inset: -4px; }
.cs-paycheck-shield.has-lottie > svg { display: none; }


/* Community: the Facebook group as the main call, the other channels beside it */
.cs-community { display: grid; gap: 14px; }
@media (min-width: 880px) { .cs-community { grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: stretch; } }
.cs-fbgroup {
    position: relative; overflow: hidden; isolation: isolate; display: block;
    padding: clamp(22px, 4vw, 34px); border-radius: var(--r-xl); color: #fff; text-decoration: none;
    background: linear-gradient(135deg, #1877f2 0%, #0d63d8 60%, #0a4fb3 100%);
    box-shadow: 0 24px 50px -28px rgba(24, 119, 242, .85);
    transition: transform .2s var(--ease), box-shadow .2s ease;
}
.cs-fbgroup::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.2px); background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 80% 80% at 100% 0%, #000, transparent 70%);
}
.cs-fbgroup:hover { transform: translateY(-2px); box-shadow: 0 30px 56px -28px rgba(24, 119, 242, .95); }
.cs-fbgroup-ico { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 12px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); }
.cs-fbgroup-tag { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.cs-fbgroup h2 { color: #fff; margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.3; }
.cs-fbgroup p { max-width: 46ch; margin: 0 0 20px; font-size: 14.5px; line-height: 1.75; color: #dbeafe; }
.cs-fbgroup-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 11px; background: #fff; color: #1877f2; font-size: 15px; font-weight: 800; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5); }
.cs-fbgroup:hover .cs-fbgroup-btn { background: #eff6ff; }
.cs-channels { display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1); }
.cs-channels-h { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.cs-channel { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; transition: border-color .2s ease, background-color .2s ease; }
.cs-channel:hover { border-color: var(--line); background: #fafaf9; }
.cs-channel-ico { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--ch); background: color-mix(in srgb, var(--ch) 10%, #fff); }
.cs-channel-txt { flex: 1; min-width: 0; }
.cs-channel-txt b { display: block; font-size: 14.5px; font-weight: 700; }
.cs-channel-txt small { display: block; font-size: 12px; color: var(--ink-3); font-family: var(--font-latin); }
.cs-channel-go { width: 16px; height: 16px; color: var(--ink-4); transition: transform .2s ease, color .2s ease; }
.cs-channel:hover .cs-channel-go { transform: translateX(2px); color: var(--ch); }
@media (min-width: 560px) and (max-width: 879px) { .cs-channels { grid-template-columns: 1fr 1fr; } .cs-channels-h { grid-column: 1 / -1; } }

.cs-tips { display: grid; gap: 12px; }
@media (min-width: 640px) { .cs-tips { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1000px) { .cs-tips { grid-template-columns: repeat(4, 1fr); } }
.cs-tip {
    --tip: var(--brand);
    --tip-soft: var(--brand-soft);
    padding: 20px 18px 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cs-tip:nth-child(2) { --tip: #dc2626; --tip-soft: #fef2f2; }
.cs-tip:nth-child(3) { --tip: #059669; --tip-soft: #ecfdf5; }
.cs-tip:nth-child(4) { --tip: #d97706; --tip-soft: #fffbeb; }
.cs-tip:hover { border-color: #d6d3d1; box-shadow: var(--shadow-2); }
.cs-tip-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--tip-soft);
    color: var(--tip);
}
.cs-tip-icon svg { width: 20px; height: 20px; }
.cs-tip h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.4; }
.cs-tip p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }

.cs-final {
    padding: clamp(28px, 5vw, 52px) clamp(18px, 4vw, 44px);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    background: var(--surface);
    box-shadow: var(--shadow-2);
    text-align: center;
}
.cs-final h2 {
    max-width: 28ch;
    margin: 0 auto 22px;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.9vw, 30px);
    font-weight: 700;
    line-height: 1.42;
    text-wrap: balance;
}
.cs-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 560px) {
    .cs-cta-row { flex-wrap: nowrap; gap: 8px; }
    .cs-cta-row .cs-btn { flex: 1; min-width: 0; padding: 10px 8px; font-size: 13px; }
}

/* 14 ── Trust notice (dismissible, see assets/js/prefs.js) ──────────────── */
.cs-trust { padding-bottom: var(--band); }
.cs-trust-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid var(--safe-line);
    border-radius: var(--r-lg);
    background: var(--safe-soft);
    padding-right: 56px;                         /* room for the close button (prefs.js) */
}
.cs-trust-icon {
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--safe-line);
    border-radius: 12px;
    background: #fff;
    color: var(--safe);
}
.cs-trust-icon svg { width: 22px; height: 22px; }
.cs-trust h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: 17px; font-weight: 700; color: #064e3b; }
.cs-trust p { margin: 0; font-size: 13.5px; line-height: 1.75; color: #065f46; }
@media (max-width: 560px) { .cs-trust-card { flex-direction: column; gap: 12px; padding: 18px 16px; } }

/* 15 ── Floating search (built by home.js) · back to top ───────────────── */
.cs-float-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
            backdrop-filter: saturate(1.6) blur(14px);
    box-shadow: 0 8px 24px -12px rgba(28, 25, 23, .25);
    transform: translateY(-110%);
    transition: transform .28s var(--ease);
}
.cs-float-bar.is-open { transform: none; }
.cs-float-inner { max-width: 860px; margin: 0 auto; }
.cs-float-row { display: flex; align-items: center; gap: 8px; }
.cs-float-field { position: relative; flex: 1; }
.cs-float-field > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-4); pointer-events: none; }
.cs-float-input {
    width: 100%;
    padding: 11px 96px 11px 40px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.cs-float-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
/* ✕ to clear the text, just left of the search button; only while there is text */
.cs-float-clear {
    position: absolute;
    top: 50%;
    right: 92px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ink-3);
    cursor: pointer;
}
.cs-float-field.has-text .cs-float-clear { display: flex; }
.cs-float-field.has-text .cs-float-input { padding-right: 128px; }
.cs-float-go {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.cs-float-go:hover { background: var(--brand-strong); }
.cs-float-sug {
    display: none;
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-3);
    animation: cs-drop .25s var(--ease);
}
.cs-float-sug.is-open { display: block; }
.cs-float-sug-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px 7px;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg);
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 700;
}
.cs-float-sug-head svg { width: 12px; height: 12px; }
.cs-float-sug ul { max-height: 300px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; }
.cs-sug {
    --tone: var(--brand);
    --tone-soft: var(--brand-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 9px 12px;
    border-radius: 11px;
    color: inherit;
    text-decoration: none;
    transition: background-color .12s ease;
}
.cs-sug:hover, .cs-sug:focus-visible { background: var(--tone-soft); outline: none; }
.cs-sug-icon { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--tone-soft); font-size: 15px; }
/* businesses: their own logo (first letter if none) */
.cs-sug-icon.is-logo{position:relative;overflow:hidden;background:#fff;border:1px solid #ede7e1;color:#9a3412}.cs-sug-icon.is-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3px;background:#fff}.cs-sug-icon.is-logo .cs-logo-letter{font:800 15px/1 'Plus Jakarta Sans','Noto Sans Bengali',sans-serif}
.cs-sug-copy { flex: 1; min-width: 0; }
.cs-sug-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-sug-meta { display: block; margin-top: 1px; font-size: 11.5px; color: var(--ink-4); }
.cs-sug > svg { width: 13px; height: 13px; flex: none; color: var(--tone); }
.cs-sug-empty { padding: 16px; text-align: center; font-size: 13.5px; color: var(--ink-3); }
.cs-sug-empty a { color: var(--brand-strong); font-weight: 700; text-decoration: none; }
@keyframes cs-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cs-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(28, 25, 23, .4);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}
.cs-search-overlay.is-open { opacity: 1; pointer-events: auto; }
/* while the floating search is open, the page under it holds still */
html.cs-searching body { overflow: hidden; }
html.cs-searching #cs-header { transform: translateY(-100%); opacity: 0; transition: transform .28s ease, opacity .28s ease; }
html.cs-searching .cs-hero-inner,
html.cs-searching .cs-stats-bar { opacity: .15; transition: opacity .28s ease; }

/* Reading progress */
.cs-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    height: 3px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* Back to top, ringed by how far down the page you are */
.cs-totop {
    position: fixed;
    right: 22px;
    bottom: calc(22px + var(--dock-lift));
    z-index: 9000;
    width: 48px;
    height: 48px;
    display: none;
    padding: 3px;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(var(--brand) calc(var(--p, 0) * 100%), var(--line) 0);
    box-shadow: var(--shadow-2);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .35s var(--ease), bottom .3s var(--ease);
}
.cs-totop span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--ink); }
.cs-totop svg { width: 18px; height: 18px; }
.cs-totop.is-on { opacity: 1; pointer-events: auto; transform: none; }
.cs-totop:hover span { color: var(--brand-strong); }
@media (min-width: 768px) { .cs-totop { display: block; } }

/* 16 ── Motion & accessibility ───────────────────────────────────────────── */
/* Content below the first screen rises in once; applied only by home.js */
.cs-reveal { opacity: 0; transform: translateY(16px); }
.cs-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }

/* Page-load entrance for the hero */
.cs-hero-inner > *, .cs-stats > * { animation: cs-rise .7s var(--ease) backwards; }
.cs-hero-inner > :nth-child(2) { animation-delay: .06s; }
.cs-hero-inner > :nth-child(3) { animation-delay: .12s; }
.cs-hero-inner > :nth-child(4) { animation-delay: .18s; }
.cs-hero-inner > :nth-child(5) { animation-delay: .24s; }
.cs-stats > :nth-child(1) { animation-delay: .3s; }
.cs-stats > :nth-child(2) { animation-delay: .35s; }
.cs-stats > :nth-child(3) { animation-delay: .4s; }
.cs-stats > :nth-child(4) { animation-delay: .45s; }
@keyframes cs-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* The headline is the page's largest text: it rises but never starts invisible,
   so the browser counts it as shown on the first frame (faster LCP). */
.cs-hero-inner > h1 { animation-name: cs-rise-in-place; }
@keyframes cs-rise-in-place { from { transform: translateY(12px); } to { transform: none; } }

@media (hover: none) {
    .cs-card:hover, .cs-stat-card:hover, .cs-company-card:hover, .cs-extreme:hover { transform: none; }
    .cs-card:active, .cs-company-card:active, .cs-stat-card:active, .cs-rv-card:active { transform: scale(.985); transition-duration: .1s; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .cs-reveal { opacity: 1; transform: none; }
    .cs-cta-track { scroll-behavior: auto; }
    .cs-rv-rows { -webkit-mask-image: none; mask-image: none; }
    .cs-rv-row { overflow-x: auto; scroll-snap-type: x mandatory; }
    .cs-rv-rows .cs-rv-track { animation: none; transform: none; }
    .cs-rv-card { scroll-snap-align: start; }
    .cs-rv-card[aria-hidden="true"] { display: none; }
}

@media print {
    .cs-totop, .cs-progress, .cs-float-bar, .cs-search-overlay { display: none !important; }
    .cs-hero { min-height: 0; background: none; color: var(--ink); }
    .cs-hero::after, .cs-hero-quick { display: none; }
    .cs-hero h1, .cs-hero-sub { color: var(--ink); text-shadow: none; }
}