/* ==========================================================================
   Boutique theme — Phase 1: tokens, typography, base elements
   Layered on top of style.css. Loaded last so it wins on equal specificity.
   ========================================================================== */

:root {
    /* Surfaces */
    --bq-ivory: #f7f8f3;
    /* page background */
    --bq-cream: #ffffff;
    /* cards, raised surfaces */
    --bq-sand: #eef1e4;
    --bq-blush: #eef3df;
    /* tinted panels, icon chips */
    --bq-line: #dde2d0;
    /* hairline borders */

    /* Ink */
    --bq-ink: #1b2036;
    /* headings, primary text — matches logo navy */
    --bq-ink-soft: #5b6172;
    /* body copy, captions */

    /* Structure */
    --bq-navy: #1b2036;
    /* dark bands, primary buttons */
    --bq-navy-soft: #2c3350;
    --bq-navy-hover: #12172b;

    /* Accent — the existing brand lime */
    --bq-lime: #a8df00;
    /* on dark backgrounds */
    --bq-lime-deep: #6f9412;
    /* on light backgrounds (contrast-safe) */

    /* Form */
    --bq-radius: 18px;
    --bq-radius-lg: 28px;
    --bq-shadow: 0 30px 60px -34px rgba(27, 32, 54, .4);
    --bq-shadow-sm: 0 16px 36px -24px rgba(27, 32, 54, .4);

    /* Type */
    --bq-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
    --bq-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Keep the legacy button tokens pointing at the same lime so any
       style.css rule we haven't reached yet stays on-brand. */
    --btn-primary-color: #a8df00;
    --btn-secondary-color: #c0ff0094;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    font-family: var(--bq-sans);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bq-ink);
    background-color: var(--bq-ivory);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
}

p {
    color: var(--bq-ink-soft);
    font-weight: 300;
}

strong,
b {
    font-weight: 600;
    color: var(--bq-ink);
}

::selection {
    background: var(--bq-lime);
    color: var(--bq-navy);
}

/* --------------------------------------------------------------------------
   Headings — Fraunces, light weight, tight leading.
   The concept leans on optical sizing and a low weight; Roboto's 800 must go.
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--bq-serif);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--bq-ink);
}

/* The italic lime accent word inside a heading: <h2>Fills <i>seats</i></h2> */
h1 i,
h2 i,
h3 i,
.lg-heading i,
.featured-title i {
    font-style: italic;
    color: var(--bq-lime-deep);
}

/* --------------------------------------------------------------------------
   Heading utility classes used across the public views.
   These carry hardcoded Roboto/800/px sizes in style.css — replaced with a
   fluid serif scale here. .block-title becomes the kicker in Phase 3.
   -------------------------------------------------------------------------- */

.lg-heading {
    font-family: var(--bq-serif);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
}

.featured-title {
    font-family: var(--bq-serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.01em;
}

.title-heading {
    font-family: var(--bq-serif);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.2;
}

.section-heading {
    font-family: var(--bq-serif);
    font-weight: 500;
    letter-spacing: -.01em;
}

/* Hero headings in the banner blocks */
.custom-banner-content h1,
.custom-banner-content h2,
.custom-banner-content h3 {
    font-family: var(--bq-serif);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
}

.custom-banner-content h2 {
    font-size: clamp(2.6rem, 5.2vw, 4.4rem);
}

.custom-banner-content h3 {
    font-size: clamp(2rem, 3.8vw, 3rem);
}

.custom-banner-content h6 {
    font-family: var(--bq-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--bq-lime-deep);
    line-height: 1.6;
}

.custom-banner-content p {
    font-family: var(--bq-sans);
    font-size: 1.08rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--bq-ink-soft);
}

/* style.css sets this one with !important, so match it. */
.custom-banner-content .reporting-banner-heading {
    font-family: var(--bq-serif);
    font-size: clamp(2.2rem, 4.4vw, 3.6rem) !important;
    font-weight: 500;
    line-height: 1.14 !important;
}

/* Home hero (.banner-content-box) and partners hero — same treatment,
   different class names in style.css. */
.banner-content-box h2,
.partners-banner-content h2 {
    font-family: var(--bq-serif);
    font-size: clamp(2.6rem, 5.2vw, 4.4rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
}

.banner-content-box h5,
.banner-content-box h6,
.partners-banner-content h6 {
    font-family: var(--bq-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--bq-lime-deep);
    line-height: 1.6;
}

.banner-content-box p,
.partners-banner-content p {
    font-family: var(--bq-sans);
    font-size: 1.08rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--bq-ink-soft);
}

/* ==========================================================================
   Phase 2 — global chrome: navbar, buttons, footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons

   Pages place "Request Demo" and "Request Pricing" side by side, both using
   .theme-primary-btn. The concept pairs a solid navy pill with an outline one,
   so the *second* button in any adjacent pair is demoted to the outline
   variant. Pure CSS — no markup edits across ~400 button instances.
   -------------------------------------------------------------------------- */

.theme-primary-btn,
.theme-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--bq-sans);
    font-size: .86rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.2;
    padding: .95rem 1.9rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    transition: .3s ease;
    white-space: nowrap;
}

/* Solid navy — the primary action */
.theme-primary-btn {
    background-color: var(--bq-navy);
    border-color: var(--bq-navy);
    color: var(--bq-cream);
}

.theme-primary-btn:hover {
    background-color: var(--bq-navy-hover);
    border-color: var(--bq-navy-hover);
    color: var(--bq-cream);
    transform: translateY(-2px);
    box-shadow: var(--bq-shadow-sm);
}

/* Outline — the secondary action, incl. the 2nd of any side-by-side pair */
.theme-secondary-btn,
.theme-primary-btn + .theme-primary-btn {
    background-color: transparent;
    border-color: var(--bq-navy);
    color: var(--bq-navy);
}

.theme-secondary-btn:hover,
.theme-primary-btn + .theme-primary-btn:hover {
    background-color: var(--bq-navy);
    border-color: var(--bq-navy);
    color: var(--bq-cream);
    transform: translateY(-2px);
    box-shadow: var(--bq-shadow-sm);
}

/* On the navy band / dark surfaces the lime pill takes over */
.bq-on-dark .theme-primary-btn {
    background-color: var(--bq-lime);
    border-color: var(--bq-lime);
    color: var(--bq-navy);
}

.bq-on-dark .theme-primary-btn:hover {
    box-shadow: 0 16px 34px -16px rgba(168, 223, 0, .7);
}

/* --------------------------------------------------------------------------
   Navbar

   style.css floats this as an absolutely-positioned rounded pill overlaying
   the hero. The concept wants a full-width sticky bar. Re-anchoring it into
   normal flow is enough — the component already sits at the top of <body>.
   -------------------------------------------------------------------------- */

/* `overflow-x: hidden` on html/body silently kills `position: sticky`.
   `clip` gives the same overflow containment without creating a scroll box. */
html,
body {
    overflow-x: clip;
}

.navbar.custom-navbar {
    position: sticky;
    top: 0;
    left: auto;
    transform: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--bq-line);
    background-color: rgba(247, 248, 243, .86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 60;
}

.custom-navbar .container-fluid {
    width: min(1180px, 90%);
    margin-inline: auto;
    padding-left: 0;
    padding-right: 0;
    min-height: 84px;
}

.custom-navbar .navbar-brand {
    max-width: none;
    width: auto;
    padding: 0;
}

.custom-navbar .navbar-brand img {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.custom-navbar .nav-link {
    font-family: var(--bq-sans);
    font-size: .86rem;
    font-weight: 500;
    color: var(--bq-ink-soft);
    transition: color .25s ease;
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link:focus,
.custom-navbar .nav-item.show > .nav-link {
    color: var(--bq-navy);
}

.custom-navbar .navbar-toggler {
    border: 1px solid var(--bq-line);
    border-radius: 10px;
    padding: .45rem .6rem;
}

/* Header CTA — style.css paints the <li> lime; move the pill onto the link */
.custom-navbar .nav-btn-box {
    background-color: transparent;
    padding: 0;
    margin-left: 1.5rem;
    border-radius: 999px;
}

.custom-navbar .nav-btn-box .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background-color: var(--bq-navy);
    color: var(--bq-cream);
    border-radius: 999px;
    padding: .8rem 1.6rem;
    transition: .3s ease;
}

.custom-navbar .nav-btn-box .nav-link:hover {
    background-color: var(--bq-navy-hover);
    color: var(--bq-cream);
    transform: translateY(-2px);
    box-shadow: var(--bq-shadow-sm);
}

/* Dropdowns + mega menu (base rules live in an inline <style> in header.blade) */
.custom-navbar .dropdown-menu {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: 14px;
    box-shadow: var(--bq-shadow-sm);
    padding: 10px 0;
}

.custom-navbar .mega-menu {
    background: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    box-shadow: var(--bq-shadow);
}

.custom-navbar .mega-menu-left {
    border-right-color: var(--bq-line);
}

.custom-navbar .mega-menu-left h5 {
    font-family: var(--bq-serif);
    font-weight: 500;
    color: var(--bq-ink);
}

.custom-navbar .mega-menu-heading {
    font-family: var(--bq-sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--bq-lime-deep);
}

.custom-navbar .mega-menu-item {
    font-family: var(--bq-sans);
    font-weight: 400;
    color: var(--bq-ink-soft);
}

.custom-navbar .mega-menu-item:hover {
    color: var(--bq-lime-deep);
}

.dektop-dropdown li a,
.sub-list ul li a {
    font-family: var(--bq-sans);
    font-size: .82rem;
    font-weight: 400;
    color: var(--bq-ink-soft);
}

.dektop-dropdown li a:hover {
    color: var(--bq-lime-deep);
}

.dektop-dropdown li:nth-child(1) a {
    font-family: var(--bq-sans);
    font-size: .82rem;
    font-weight: 600;
    color: var(--bq-ink);
}

.sub-list {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: 14px;
    box-shadow: var(--bq-shadow-sm);
}

/* The hero band no longer has to reserve space for a floating navbar */
.custom-header {
    padding-top: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer-sec {
    position: relative;
    margin-top: 100px;
    padding: 76px 0 34px;
}

/* Full-bleed cream band behind the (width-constrained) footer container */
.footer-sec::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background-color: var(--bq-cream);
    border-top: 1px solid var(--bq-line);
    z-index: -1;
}

.left-footer-logo img {
    object-fit: contain;
    object-position: left center;
}

.footer-para-content {
    padding: 32px 0;
}

.bld-para {
    font-family: var(--bq-sans);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--bq-ink);
}

.footer-para {
    font-family: var(--bq-sans);
    font-size: .9rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--bq-ink-soft);
    max-width: 28rem;
}

.footer-links-header h4 {
    font-family: var(--bq-sans);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bq-lime-deep);
    margin-bottom: 1rem;
}

.footer-links-wrapper ul li a {
    font-family: var(--bq-sans);
    font-size: .92rem;
    font-weight: 300;
    line-height: 2;
    color: var(--bq-ink-soft);
    transition: color .25s ease;
}

.footer-links-wrapper ul li a:hover {
    color: var(--bq-navy);
}

.social-apps {
    gap: .6rem;
}

/* Social icons: the source PNGs are mixed — Facebook / Instagram are full
   colour brand tiles, X / YouTube are glyphs. style.css greyscales them, which
   is why they read as dull black. Show natural brand colour, uniform size. */
.footer-logos {
    gap: .8rem;
    align-items: center;
}

.social-logo {
    display: grid;
    place-items: center;
    cursor: pointer;
}

.social-logo > img,
.social-logo img {
    width: auto;
    height: 26px;
    object-fit: contain;
    filter: none;
    opacity: .9;
    transition: opacity .25s ease, transform .25s ease;
}

.social-logo:hover img {
    opacity: 1;
    transform: translateY(-2px);
}

/* style.css builds this rule with a gradient border-image — flatten it */
.knonnect-hr-line {
    border: 0;
    border-top: 1px solid var(--bq-line);
    border-image: none;
    opacity: 1;
    margin-top: 46px;
    margin-bottom: 0;
}

.btm-footer-line p {
    font-family: var(--bq-sans);
    font-size: .82rem;
    font-weight: 300;
    color: var(--bq-ink-soft);
    padding-top: 26px;
    margin-bottom: 0;
}

/* ==========================================================================
   Phase 3 — shared section primitives

   Re-skins the three page skeletons (51 features/, 11 industry/, 10 compare/)
   plus the shared components, purely by restyling class names they already
   share. No markup is touched, so no page can lose content.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Measure — the concept centres on a 1180px boutique column
   -------------------------------------------------------------------------- */

.custom-container {
    width: min(1180px, 90%);
}

/* --------------------------------------------------------------------------
   Page heroes

   style.css paints these with bg-banner.png (a pink/purple gradient) which
   fights the ivory palette. Replaced with ivory + the concept's radial lime glow.
   -------------------------------------------------------------------------- */

.why-konnected-banner,
.custom-header,
.loyalty-banner {
    background-image: none;
    background-color: var(--bq-ivory);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    overflow: hidden;
}

.why-konnected-banner::before,
.custom-header::before,
.loyalty-banner::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 120%;
    background: radial-gradient(closest-side, rgba(168, 223, 0, .16), transparent);
    pointer-events: none;
    z-index: 0;
}

.why-konnected-banner > *,
.custom-header > *,
.loyalty-banner > * {
    position: relative;
    z-index: 1;
}

/* The compare heroes ship the old gradient as a real <img> backdrop */
.loyalty-bg-banner {
    display: none;
}

/* Hero artwork — cream mat + soft shadow, as in the concept */
.reportig-banner-img img,
.loyalty-banner-img img,
.home-banner-img img {
    border-radius: 26px;
    border: 6px solid var(--bq-cream);
    box-shadow: var(--bq-shadow);
}

.loyalty-banner-box h6 {
    font-family: var(--bq-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--bq-lime-deep);
}

.loyalty-banner-box h1 {
    font-family: var(--bq-serif);
    font-size: clamp(2.4rem, 4.6vw, 3.8rem);
    font-weight: 500;
    line-height: 1.12;
}

/* --------------------------------------------------------------------------
   Section headings

   .block-title is a 24px bold Roboto heading in style.css; the concept uses it
   as a small uppercase lime kicker sitting above the serif headline.
   -------------------------------------------------------------------------- */

.block-title {
    font-family: var(--bq-sans);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--bq-lime-deep);
    margin-bottom: .9rem;
}

.Products-header-text {
    max-width: 46rem;
    padding: 90px 20px 44px;
}

.Products-header-text p,
.produts-featured-content p {
    font-family: var(--bq-sans);
    font-size: 1.02rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--bq-ink-soft);
}

.loyalty-3-header h2 {
    font-family: var(--bq-serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 500;
    line-height: 1.15;
}

.loyalty-3-header p {
    font-family: var(--bq-sans);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--bq-ink-soft);
}

.konnect-content-box-heading,
.one-stop-header h3 {
    font-family: var(--bq-serif);
    font-size: clamp(2rem, 3.8vw, 3rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
}

.empower-block {
    max-width: 46rem;
    margin: 80px auto 40px;
}

/* --------------------------------------------------------------------------
   The zig-zag rhythm

   .solution-tailored-sec is a padded card with innovation-bg.png behind it.
   The concept has no card here — just alternating text/image columns with air.
   -------------------------------------------------------------------------- */

.solution-tailored-sec {
    background-image: none;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 80px;
}

/* Section imagery — the concept's .zimg treatment */
.featured-img-box img,
.loyalty-card-img img,
.loyalty-3-header-img img {
    border-radius: 22px;
    border: 5px solid var(--bq-cream);
    box-shadow: var(--bq-shadow);
}

/* --------------------------------------------------------------------------
   Cards — .loyalty-card, .empower-card, .loyalty-3-card
   -------------------------------------------------------------------------- */

.loyalty-card,
.empower-card,
.loyalty-3-card {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    padding: 30px;
    transition: transform .3s ease, box-shadow .3s ease;
}

/* .featured-content-box / .konnect-content-box are flex columns with
   align-items:flex-start, which shrink-wraps their cards. Make cards fill. */
.featured-content-box,
.konnect-content-box {
    align-items: stretch;
}

.loyalty-card,
.loyalty-3-card {
    width: 100%;
}

.loyalty-card:hover,
.empower-card:hover,
.loyalty-3-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--bq-shadow-sm);
}

.loyalty-card h6,
.loyalty-3-card h6,
.loyalty-3-card h3,
.empower-card-heading {
    font-family: var(--bq-serif);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: .5rem;
    color: var(--bq-ink);
}

.loyalty-card p,
.loyalty-3-card p,
.empower-card p {
    font-family: var(--bq-sans);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--bq-ink-soft);
    margin-bottom: 0;
}

/* Alternating card tints, minus the old mint/teal */
.card-bg-1 {
    background-color: var(--bq-cream);
}

.card-bg-2,
.loyalty-bg-1,
.loyalty-bg-2,
.loyalty-bg-3,
.loyalty-bg-4 {
    background-color: var(--bq-blush);
}

/* Bulleted lists inside cards → the concept's lime chevron */
.loyalty-card ul,
.loyalty-3-card ul,
.empower-card ul {
    list-style: none;
    padding-left: 0;
    margin-top: .8rem;
    margin-bottom: 0;
}

.loyalty-card ul li,
.loyalty-3-card ul li,
.empower-card ul li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: .45rem;
    font-family: var(--bq-sans);
    font-size: .92rem;
    font-weight: 300;
    color: var(--bq-ink-soft);
}

.loyalty-card ul li::before,
.loyalty-3-card ul li::before,
.empower-card ul li::before {
    content: "\203A";
    position: absolute;
    left: 0;
    color: var(--bq-lime-deep);
    font-weight: 600;
}

.konnect-content-box ul li {
    font-family: var(--bq-sans);
    font-weight: 300;
    color: var(--bq-ink-soft);
}

/* Numbered "getting started" lists */
.custom-container ol li {
    font-family: var(--bq-sans);
    font-weight: 300;
    color: var(--bq-ink-soft);
    margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   Comparison tables → the concept's KPI card
   -------------------------------------------------------------------------- */

.table-responsive {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    overflow: hidden;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    margin-bottom: 0;
    font-family: var(--bq-sans);
    font-size: .95rem;
}

.table > thead > tr > th {
    font-family: var(--bq-serif);
    font-size: .98rem;
    font-weight: 600;
    text-align: left;
    background-color: var(--bq-navy);
    color: var(--bq-cream);
    box-shadow: none;
    border: 0;
    padding: 18px 22px;
}

.table > tbody > tr > td {
    background-color: transparent;
    box-shadow: none;
    border-top: 0;
    border-bottom: 1px solid var(--bq-line);
    padding: 15px 22px;
    color: var(--bq-ink-soft);
    font-weight: 300;
    vertical-align: top;
}

.table > tbody > tr > td:first-child {
    color: var(--bq-ink);
    font-weight: 400;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

.table > tbody > tr:hover > td {
    background-color: var(--bq-blush);
}

.smart-features-sec {
    padding: 30px 0;
}

/* --------------------------------------------------------------------------
   Accordions (the FAQ block on every page, plus in-page accordions)
   -------------------------------------------------------------------------- */

.accordion-box {
    border-bottom: 1px solid var(--bq-line);
    border-radius: 0;
}

.accordion-bg,
.accrodion-header-bg {
    background-image: none;
    background-color: transparent;
    border-radius: 0;
}

.accrodion-header {
    padding: 24px 4px;
    cursor: pointer;
    gap: 1.2rem;
}

.accrodion-header h5 {
    font-family: var(--bq-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--bq-ink);
    margin-bottom: 0;
}

.accrodion-header span.fa {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--bq-line);
    border-radius: 50%;
    color: var(--bq-navy);
    font-size: .8rem;
    transition: .3s ease;
}

.accordion-box:hover .accrodion-header span.fa {
    border-color: var(--bq-navy);
}

/* Open state — script.js swaps fa-angle-down → fa-angle-up */
.accrodion-header span.fa-angle-up {
    background-color: var(--bq-navy);
    border-color: var(--bq-navy);
    color: var(--bq-lime);
}

.accordion-content {
    padding: 0 4px 26px;
    font-family: var(--bq-sans);
    font-weight: 300;
    color: var(--bq-ink-soft);
}

.accordion-content p,
.accordion-content li {
    color: var(--bq-ink-soft);
    font-weight: 300;
}

.custom-accordion {
    padding: 0;
}

/* --------------------------------------------------------------------------
   Testimonials

   style.css builds this as a dark image-backed panel with the portrait pinned
   outside the box. Recomposed as the concept's centered cream card: a quote
   mark, a large italic serif quote, then a circular avatar with author,
   designation and lime stars stacked beneath. Every field is kept.

   DOM order inside .testimonial-container is:
     .testimonial-box   → quote-mark <img> + quote <p>
     .porson-box        → .person-img (avatar) + .rating-star-box (name / role / stars)
   -------------------------------------------------------------------------- */

.testimonial-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
    width: min(720px, 90%);
    margin: 48px auto;
    padding: 44px 48px;
    background-image: none;
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius-lg);
    box-shadow: var(--bq-shadow-sm);
}

.testimonial-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-left: 0;
    gap: 1.2rem;
}

/* Prefixed with .testimonial-container to outrank `.bq-home img`
   (same specificity, but that rule appears later in the file). */
.testimonial-container .testimonial-box img {
    width: 40px;
    max-width: 40px;
    height: auto;
    opacity: .4;
}

.testimonial-box p {
    font-family: var(--bq-serif);
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.45;
    color: var(--bq-ink);
    margin: 0;
}

.porson-box {
    position: static;
    flex: none;
    width: auto;
    max-width: none;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    margin-top: .4rem;
}

/* Circular avatar — object-fit:cover crops any aspect ratio to a clean disc */
.person-img {
    width: 64px;
    height: 64px;
    max-width: 64px;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--bq-line);
    flex: none;
}

.testimonial-container .person-img img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    display: block;
}

.rating-star-box {
    position: static;
    background: transparent;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    width: auto;
}

.rating-star-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}

.rating-star-content h6 {
    font-family: var(--bq-serif);
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--bq-ink);
    margin: 0;
}

.rating-star-content p {
    font-family: var(--bq-sans);
    font-size: .85rem;
    font-weight: 300;
    line-height: 1.4;
    color: var(--bq-ink-soft);
    margin: 0;
}

.rating-star {
    display: flex;
    flex: none;
    gap: 3px;
    white-space: nowrap;
    color: var(--bq-lime-deep);
}

.rating-star span.fa {
    color: var(--bq-lime-deep);
    font-size: .82rem;
}

@media (max-width: 880px) {
    .testimonial-container {
        padding: 40px 28px;
    }
}

/* --------------------------------------------------------------------------
   Latest posts
   -------------------------------------------------------------------------- */

.latest-news-sec {
    background-color: var(--bq-blush);
    border-radius: var(--bq-radius-lg);
    padding: 56px;
}

/* ==========================================================================
   Phase 4 — home page

   The home page already carries every section the concept has, in the concept's
   order (Who We Are → Konnected App → Quick Summary → Who This Is For → Use
   Cases → Problems → How It Works → Platform Pillars → KPIs → Why Switch →
   Proof). Most of it is built from the primitives already restyled in Phase 3,
   so this phase only covers the home-specific classes. Still CSS-only.
   ========================================================================== */

/* Logo strip */
.home-carousel-box {
    padding: 56px 0 72px;
}

.home-logo-carousel .item img {
    filter: grayscale(1);
    opacity: .5;
    transition: filter .3s ease, opacity .3s ease;
}

.home-logo-carousel .item img:hover {
    filter: none;
    opacity: 1;
}

/* The hero's decorative scroll cue */
.scroll-btn {
    opacity: .5;
}

/* --------------------------------------------------------------------------
   "Innovating entertainment and charity bingo" — tabbed section

   style.css paints this with innovation-bg.png (a lavender wash) and floats
   the tabs in a white drop-shadowed pill.
   -------------------------------------------------------------------------- */

.innovation-entertainment-sec,
.enhance-engagement-sec {
    background-image: none;
    background-color: transparent;
    border-radius: 0;
    padding: 50px 0;
}

.featured-header {
    max-width: 46rem;
}

.innovation-nav {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: 999px;
    box-shadow: var(--bq-shadow-sm);
    padding: 8px;
    margin-top: 40px;
}

.nav-primary-btn {
    font-family: var(--bq-sans);
    font-size: .86rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--bq-ink-soft);
    padding: .8rem 1.6rem;
    border-radius: 999px;
    transition: .3s ease;
}

.nav-primary-btn:hover {
    color: var(--bq-navy);
}

.nav-primary-btn.active {
    background-color: var(--bq-navy);
    color: var(--bq-cream);
}

.engagement-container {
    padding-left: 0;
}

/* --------------------------------------------------------------------------
   "Use Cases That Boost Excitement" — image slider

   The captions are white-on-photo. My Phase 1 base rules (h1–h6 → ink,
   p → ink-soft) overrode that and made them dark-on-dark. Restore, and add a
   scrim so the text holds up against any photo.
   -------------------------------------------------------------------------- */

.boost-slider .item {
    border-radius: var(--bq-radius);
    overflow: hidden;
}

.boost-slider .item img {
    border-radius: var(--bq-radius);
    filter: brightness(.62);
}

.boost-slider .item::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(27, 32, 54, .85), transparent);
    border-radius: 0 0 var(--bq-radius) var(--bq-radius);
    pointer-events: none;
}

.slider-content {
    z-index: 2;
    padding: 22px;
}

.slider-content h6 {
    font-family: var(--bq-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    margin-bottom: .35rem;
}

.slider-content p {
    font-family: var(--bq-sans);
    font-size: .9rem;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
}

/* Slider arrows — match the boutique card language */
.boost-slider .owl-nav button,
.boost-slider .owl-nav button:hover,
.boost-slider .owl-nav button:focus {
    background: var(--bq-cream) !important;
    border: 1px solid var(--bq-line) !important;
    border-radius: 50% !important;
    box-shadow: var(--bq-shadow-sm);
    color: var(--bq-navy) !important;
}

.boost-slider .owl-nav button span {
    background: transparent !important;
    color: var(--bq-navy);
}

/* ==========================================================================
   Phase 5 — remaining bespoke pages/*

   products, reporting, marketing, partners, about, contact, request-demo,
   blog, gallery and the legal pages. An automated audit of computed styles
   found only a handful of surfaces still carrying the old palette; those are
   the classes below.
   ========================================================================== */

/* Contact page card (was #EEFFFD mint) */
.featured-card {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    padding: 30px;
}

.featured-card h6 {
    font-family: var(--bq-serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--bq-ink);
}

/* Numbered chips on the "empower" cards (were purple / red) */
.circle-bg-1 {
    background-color: var(--bq-lime);
}

.circle-bg-2 {
    background-color: var(--bq-lime-deep);
}

.circle-bg-3 {
    background-color: var(--bq-navy);
}

/* --------------------------------------------------------------------------
   Legal pages — the side tab rail (was #E4FFFC teal)
   -------------------------------------------------------------------------- */

.policy-tabs {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    overflow: hidden;
}

.tab {
    font-family: var(--bq-sans);
    font-size: .92rem;
    font-weight: 400;
    color: var(--bq-ink-soft);
    transition: color .25s ease;
}

.tab:hover {
    color: var(--bq-navy);
}

.tab span.active {
    color: var(--bq-navy);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1.5px solid var(--bq-lime);
    padding-bottom: 2px;
}

.policy-main-content p,
.policy-main-content li {
    font-family: var(--bq-sans);
    font-weight: 300;
    line-height: 1.8;
    color: var(--bq-ink-soft);
}

/* --------------------------------------------------------------------------
   Blog / latest-posts cards
   -------------------------------------------------------------------------- */

.news-card {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    overflow: hidden;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--bq-shadow-sm);
}

.news-card-img {
    overflow: hidden;
}

.news-card-img img {
    transition: transform .5s ease;
}

.news-card:hover .news-card-img img {
    transform: scale(1.05);
}

.news-card-body {
    padding: 24px;
}

.news-card-body small {
    font-family: var(--bq-sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bq-lime-deep) !important;
}

.news-title {
    font-family: var(--bq-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--bq-ink);
    margin: .4rem 0 .5rem;
}

.news-date {
    font-family: var(--bq-sans);
    font-size: .82rem;
    font-weight: 300;
    color: var(--bq-ink-soft);
    margin-bottom: 0;
}

.latest-news-header {
    margin-bottom: 2.5rem;
}

/* --------------------------------------------------------------------------
   Forms — contact, request-demo, partners
   -------------------------------------------------------------------------- */

.form-box {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius-lg);
    box-shadow: var(--bq-shadow-sm);
}

.form-control,
.form-box input,
.form-select,
textarea.form-control {
    font-family: var(--bq-sans);
    font-size: .95rem;
    font-weight: 300;
    color: var(--bq-ink);
    background-color: var(--bq-ivory);
    border: 1px solid var(--bq-line);
    border-radius: 12px;
    padding: .8rem 1rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.form-control:focus,
.form-box input:focus,
.form-select:focus {
    background-color: var(--bq-cream);
    border-color: var(--bq-lime-deep);
    box-shadow: 0 0 0 3px rgba(168, 223, 0, .18);
    outline: none;
}

.form-control::placeholder {
    color: var(--bq-ink-soft);
    opacity: .6;
}

.form-label,
label {
    font-family: var(--bq-sans);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--bq-ink);
}

.contact-sm-box p,
.contact-sm-box p span {
    font-family: var(--bq-sans);
    font-weight: 300;
    color: var(--bq-ink-soft);
}

/* --------------------------------------------------------------------------
   Free-trial / pricing callout blocks
   -------------------------------------------------------------------------- */

.free-trial-block {
    background-color: var(--bq-blush);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius-lg);
}

.free-trial-block-1 p,
.free-trial-block-2 p {
    font-family: var(--bq-sans);
    color: var(--bq-ink-soft);
}

.free-trial-block-2 h6 {
    font-family: var(--bq-serif);
    font-weight: 500;
    color: var(--bq-ink);
}

.free-trial-block-1 .red-line {
    background-color: var(--bq-lime-deep);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

#pagination li a {
    font-family: var(--bq-sans);
    font-size: .88rem;
    font-weight: 400;
    color: var(--bq-ink-soft);
    border: 1px solid var(--bq-line);
    border-radius: 10px;
    margin: 0 3px;
    padding: 8px 14px;
    transition: .25s ease;
}

#pagination li a:hover,
#pagination li.active a {
    background-color: var(--bq-navy);
    border-color: var(--bq-navy);
    color: var(--bq-cream);
}

/* ==========================================================================
   Phase 7 — home page structural rebuild (concept-3-boutique)

   home.blade.php was rewritten to the concept's real section layout. All of
   these rules are scoped under .bq-home so they can't leak into other pages.
   ========================================================================== */

.bq-home {
    background: var(--bq-ivory);
    color: var(--bq-ink);
}

/* Images must never exceed their box, or their intrinsic width inflates
   grid `1fr` tracks (min-content) and overflows on small screens. */
.bq-home img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* A grid item defaults to min-width:auto, so a wide image or long word forces
   its track wider than the viewport. min-width:0 lets tracks shrink. */
.bq-home .bq-hero-grid > *,
.bq-home .bq-zig > *,
.bq-home .bq-appbanner > *,
.bq-home .bq-softgrid > *,
.bq-home .bq-aud > *,
.bq-home .bq-ucards > *,
.bq-home .bq-stepgrid > *,
.bq-home .bq-pgrid > *,
.bq-home .bq-why > *,
.bq-home .bq-plans > * {
    min-width: 0;
}

.bq-home .wrap {
    width: min(1180px, 90%);
    margin-inline: auto;
}

.bq-home .bq-kicker {
    display: inline-block;
    font-family: var(--bq-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--bq-lime-deep);
}

.bq-home .bq-h1,
.bq-home .bq-h2,
.bq-home .bq-h3 {
    font-family: var(--bq-serif);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--bq-ink);
}

.bq-home .bq-h1 {
    font-size: clamp(2.6rem, 5.2vw, 4.4rem);
    margin: 1.4rem 0;
}

.bq-home .bq-h2 {
    font-size: clamp(2rem, 3.8vw, 3rem);
    margin: 1rem 0;
}

.bq-home .bq-h3 {
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}

.bq-home .bq-h1 i,
.bq-home .bq-h2 i,
.bq-home .bq-h3 i {
    font-style: italic;
    color: var(--bq-lime-deep);
}

.bq-home .bq-blk {
    padding: 100px 0;
}

.bq-home .bq-pt0 {
    padding-top: 0;
}

.bq-home .bq-head {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto 56px;
}

.bq-home .bq-head p {
    color: var(--bq-ink-soft);
    font-weight: 300;
}

.bq-home .bq-cta {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.bq-home .bq-cta.bq-center {
    justify-content: center;
}

/* Button helpers used inside home only ------------------------------------ */
.bq-home .bq-lime-btn,
.bq-home .bq-line-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--bq-sans);
    font-size: .86rem;
    font-weight: 500;
    letter-spacing: .02em;
    padding: .95rem 1.9rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    transition: .3s ease;
    white-space: nowrap;
}

.bq-home .bq-lime-btn {
    background: var(--bq-lime);
    color: var(--bq-navy);
}

.bq-home .bq-lime-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -16px rgba(168, 223, 0, .7);
}

.bq-home .bq-line-btn {
    border-color: var(--bq-navy);
    color: var(--bq-navy);
}

.bq-home .bq-line-btn.bq-line-light {
    border-color: rgba(247, 248, 243, .5);
    color: var(--bq-cream);
}

.bq-home .bq-line-btn.bq-line-light:hover {
    background: var(--bq-cream);
    color: var(--bq-navy);
}

/* --------------------------------------------------------------------------
   1 · Hero
   -------------------------------------------------------------------------- */

.bq-home .bq-hero {
    position: relative;
    overflow: hidden;
}

.bq-home .bq-hero::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 120%;
    background: radial-gradient(closest-side, rgba(168, 223, 0, .16), transparent);
    z-index: 0;
}

.bq-home .bq-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
    padding: 72px 0 70px;
    position: relative;
    z-index: 1;
}

.bq-home .bq-lead {
    color: var(--bq-ink-soft);
    font-size: 1.08rem;
    font-weight: 300;
    max-width: 34rem;
}

.bq-home .bq-hero-art {
    position: relative;
}

.bq-home .bq-hero-main {
    border-radius: 26px;
    overflow: hidden;
    box-shadow: var(--bq-shadow);
    border: 6px solid var(--bq-cream);
}

.bq-home .bq-chip {
    position: absolute;
    background: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: 16px;
    padding: .8rem 1.1rem;
    box-shadow: var(--bq-shadow-sm);
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--bq-sans);
    font-size: .84rem;
    font-weight: 500;
    color: var(--bq-ink);
}

.bq-home .bq-chip-ic {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--bq-blush);
    display: grid;
    place-items: center;
    font-size: 1rem;
}

.bq-home .bq-chip-1 {
    top: 8%;
    left: -26px;
}

.bq-home .bq-chip-2 {
    bottom: 9%;
    right: -22px;
}

/* --------------------------------------------------------------------------
   2 · Trusted
   -------------------------------------------------------------------------- */

.bq-home .bq-trusted {
    padding: 42px 0;
    border-top: 1px solid var(--bq-line);
    border-bottom: 1px solid var(--bq-line);
    background: var(--bq-cream);
}

.bq-home .bq-trusted-lbl {
    text-align: center;
    font-family: var(--bq-sans);
    font-size: .72rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--bq-ink-soft);
    margin-bottom: 1.6rem;
}

.bq-home .home-logo-carousel .item img {
    filter: grayscale(1);
    opacity: .5;
    transition: filter .3s ease, opacity .3s ease;
}

.bq-home .home-logo-carousel .item img:hover {
    filter: none;
    opacity: 1;
}

/* --------------------------------------------------------------------------
   3 · Zig-zag
   -------------------------------------------------------------------------- */

.bq-home .bq-zig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}

.bq-home .bq-zig:last-child {
    margin-bottom: 0;
}

.bq-home .bq-rev .bq-ztext {
    order: 2;
}

.bq-home .bq-zimg {
    border-radius: 22px;
    overflow: hidden;
    box-shadow: var(--bq-shadow);
    border: 5px solid var(--bq-cream);
}

.bq-home .bq-zimg img {
    width: 100%;
    display: block;
}

.bq-home .bq-znum {
    font-family: var(--bq-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--bq-lime-deep);
}

.bq-home .bq-ztext h3 {
    margin: .5rem 0 .8rem;
}

.bq-home .bq-ztext p {
    color: var(--bq-ink-soft);
    font-weight: 300;
    max-width: 34rem;
}

/* --------------------------------------------------------------------------
   4 · App banner
   -------------------------------------------------------------------------- */

.bq-home .bq-appbanner {
    background: var(--bq-blush);
    border-radius: var(--bq-radius-lg);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    padding: 50px;
    overflow: hidden;
}

.bq-home .bq-aimg {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--bq-shadow);
    border: 5px solid var(--bq-cream);
}

.bq-home .bq-appbanner h2 {
    margin: .8rem 0 1rem;
}

.bq-home .bq-appbanner p {
    color: var(--bq-ink-soft);
    font-weight: 300;
    margin-bottom: 1.6rem;
}

/* --------------------------------------------------------------------------
   5 · Soft numbered grid
   -------------------------------------------------------------------------- */

.bq-home .bq-softgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.bq-home .bq-soft {
    background: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    padding: 32px;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    transition: transform .3s ease, box-shadow .3s ease;
}

.bq-home .bq-soft:hover {
    transform: translateY(-5px);
    box-shadow: var(--bq-shadow-sm);
}

.bq-home .bq-soft .bq-n {
    font-family: var(--bq-serif);
    font-style: italic;
    font-size: 1.7rem;
    color: var(--bq-lime-deep);
    line-height: 1;
    flex: none;
}

.bq-home .bq-soft p {
    margin: 0;
    font-weight: 400;
    color: var(--bq-ink);
}

.bq-home .bq-soft.bq-full {
    grid-column: 1 / -1;
    background: var(--bq-navy);
    border-color: var(--bq-navy);
}

.bq-home .bq-soft.bq-full p {
    color: var(--bq-cream);
}

.bq-home .bq-soft.bq-full .bq-n {
    color: var(--bq-lime);
}

/* --------------------------------------------------------------------------
   6 · Audience icon cards
   -------------------------------------------------------------------------- */

.bq-home .bq-aud {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.bq-home .bq-aud .bq-c {
    background: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    padding: 30px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.bq-home .bq-aud .bq-c:hover {
    transform: translateY(-6px);
    box-shadow: var(--bq-shadow-sm);
}

.bq-home .bq-aud .bq-ic {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--bq-blush);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.bq-home .bq-aud h4 {
    font-family: var(--bq-serif);
    font-weight: 500;
    font-size: 1.3rem;
    margin-bottom: .4rem;
}

.bq-home .bq-aud p {
    color: var(--bq-ink-soft);
    font-size: .9rem;
    font-weight: 300;
    margin: 0;
}

/* --------------------------------------------------------------------------
   7 · Use-case image cards
   -------------------------------------------------------------------------- */

.bq-home .bq-ucards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.bq-home .bq-uc {
    background: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.bq-home .bq-uc:hover {
    transform: translateY(-6px);
    box-shadow: var(--bq-shadow-sm);
}

.bq-home .bq-uimg {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.bq-home .bq-uimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.bq-home .bq-uc:hover .bq-uimg img {
    transform: scale(1.06);
}

.bq-home .bq-ubody {
    padding: 22px;
}

.bq-home .bq-un {
    font-family: var(--bq-sans);
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bq-lime-deep);
}

.bq-home .bq-ubody h4 {
    font-family: var(--bq-serif);
    font-weight: 500;
    font-size: 1.25rem;
    margin-top: .3rem;
}

/* --------------------------------------------------------------------------
   8 · Problems accordion (native <details>, no JS)
   -------------------------------------------------------------------------- */

.bq-home .bq-acc {
    max-width: 820px;
    margin: 0 auto;
}

.bq-home .bq-ai {
    border-bottom: 1px solid var(--bq-line);
}

.bq-home .bq-ai summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 26px 4px;
    font-family: var(--bq-serif);
    font-size: 1.3rem;
    color: var(--bq-ink);
}

.bq-home .bq-ai summary::-webkit-details-marker {
    display: none;
}

.bq-home .bq-ai summary .bq-qn {
    font-style: italic;
    color: var(--bq-lime-deep);
    font-size: 1rem;
    min-width: 2ch;
}

.bq-home .bq-ai summary .bq-pm {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--bq-line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--bq-navy);
    transition: .3s ease;
    flex: none;
    font-family: var(--bq-sans);
    font-size: 1rem;
}

.bq-home .bq-ai[open] summary .bq-pm {
    transform: rotate(45deg);
    background: var(--bq-navy);
    color: var(--bq-lime);
    border-color: var(--bq-navy);
}

.bq-home .bq-abody {
    padding: 0 4px 26px calc(2ch + 1.2rem);
    color: var(--bq-ink-soft);
    font-weight: 300;
}

.bq-home .bq-inline-cta {
    text-align: center;
    background: var(--bq-blush);
    border-radius: var(--bq-radius-lg);
    padding: 48px;
    margin-top: 44px;
}

.bq-home .bq-inline-lbl {
    font-family: var(--bq-serif);
    font-style: italic;
    font-size: 1.4rem;
    margin-bottom: 1.4rem;
    color: var(--bq-navy);
}

/* --------------------------------------------------------------------------
   9 · Steps
   -------------------------------------------------------------------------- */

.bq-home .bq-stepgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.bq-home .bq-stp {
    background: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    padding: 36px;
}

.bq-home .bq-sn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bq-navy);
    color: var(--bq-lime);
    display: grid;
    place-items: center;
    font-family: var(--bq-serif);
    font-style: italic;
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
}

.bq-home .bq-stp h3 {
    font-size: 1.4rem;
    margin-bottom: .7rem;
}

.bq-home .bq-stp p {
    color: var(--bq-ink-soft);
    font-weight: 300;
    font-size: .95rem;
    margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   10 · Pillars navy band
   -------------------------------------------------------------------------- */

.bq-home .bq-pband {
    background: var(--bq-navy);
    color: var(--bq-cream);
    border-radius: 32px;
    padding: 78px 56px;
}

.bq-home .bq-pband .bq-head h2 {
    color: var(--bq-cream);
}

.bq-home .bq-pband .bq-head h2 i {
    color: var(--bq-lime);
}

.bq-home .bq-pband .bq-head p {
    color: rgba(247, 248, 243, .7);
}

.bq-home .bq-pband .bq-kicker {
    color: var(--bq-lime);
}

.bq-home .bq-pgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bq-home .bq-pcard {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--bq-radius);
    padding: 30px;
    transition: background .3s ease, transform .3s ease;
}

.bq-home .bq-pcard:hover {
    background: rgba(255, 255, 255, .08);
    transform: translateY(-5px);
}

.bq-home .bq-pn {
    font-family: var(--bq-serif);
    font-style: italic;
    font-size: 1.6rem;
    color: var(--bq-lime);
}

.bq-home .bq-pcard h3 {
    font-family: var(--bq-serif);
    font-weight: 500;
    font-size: 1.3rem;
    margin: .3rem 0 .6rem;
    color: var(--bq-cream);
}

.bq-home .bq-intro {
    color: rgba(247, 248, 243, .7);
    font-weight: 300;
    font-size: .9rem;
    margin-bottom: .8rem;
}

.bq-home .bq-plbl {
    font-family: var(--bq-sans);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bq-lime);
    margin: .8rem 0 .4rem;
}

.bq-home .bq-pcard ul {
    list-style: none;
    display: grid;
    gap: .4rem;
    margin: 0 0 .5rem;
    padding: 0;
}

.bq-home .bq-pcard li {
    position: relative;
    padding-left: 1.2rem;
    color: rgba(247, 248, 243, .8);
    font-weight: 300;
    font-size: .88rem;
}

.bq-home .bq-pcard li::before {
    content: "\203A";
    position: absolute;
    left: 0;
    color: var(--bq-lime);
}

.bq-home .bq-out {
    margin-top: .8rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .88rem;
    color: rgba(247, 248, 243, .85);
    font-weight: 300;
}

.bq-home .bq-out b {
    color: var(--bq-lime);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   12 · Why switch 2x2
   -------------------------------------------------------------------------- */

.bq-home .bq-why {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.bq-home .bq-w {
    background: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    padding: 34px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.bq-home .bq-w:hover {
    transform: translateY(-5px);
    box-shadow: var(--bq-shadow-sm);
}

.bq-home .bq-w h4 {
    font-family: var(--bq-serif);
    font-weight: 500;
    font-size: 1.35rem;
    margin-bottom: .5rem;
}

.bq-home .bq-bar {
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: var(--bq-lime);
    margin-bottom: 1rem;
}

.bq-home .bq-w p {
    color: var(--bq-ink-soft);
    font-weight: 300;
    font-size: .95rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   13 · Proof
   -------------------------------------------------------------------------- */

.bq-home .bq-proof {
    background: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius-lg);
    padding: 48px;
    border-left: 5px solid var(--bq-lime);
}

.bq-home .bq-proof p {
    color: var(--bq-ink-soft);
    font-weight: 300;
    margin-bottom: 1rem;
}

.bq-home .bq-plbl-dark {
    font-family: var(--bq-sans);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bq-lime-deep);
    margin: .6rem 0 1rem;
}

.bq-home .bq-proof ul {
    list-style: none;
    display: grid;
    gap: .6rem;
    margin-bottom: 1.8rem;
    padding: 0;
}

.bq-home .bq-proof li {
    position: relative;
    padding-left: 1.7rem;
    font-weight: 300;
    color: var(--bq-ink-soft);
}

.bq-home .bq-proof li::before {
    content: "\2726";
    position: absolute;
    left: 0;
    color: var(--bq-lime-deep);
}

/* --------------------------------------------------------------------------
   14 · Pricing plans
   -------------------------------------------------------------------------- */

.bq-home .bq-plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.bq-home .bq-plan {
    background: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius-lg);
    padding: 40px;
    position: relative;
}

.bq-home .bq-plan.bq-feature {
    background: var(--bq-navy);
    color: var(--bq-cream);
    border-color: var(--bq-navy);
}

.bq-home .bq-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    font-family: var(--bq-sans);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bq-lime-deep);
    font-weight: 600;
}

.bq-home .bq-plan.bq-feature .bq-badge {
    color: var(--bq-lime);
}

.bq-home .bq-plan h3 {
    font-family: var(--bq-serif);
    font-weight: 500;
    font-size: 1.7rem;
    margin-bottom: .4rem;
}

.bq-home .bq-plan.bq-feature h3 {
    color: var(--bq-cream);
}

.bq-home .bq-plan > p {
    color: var(--bq-ink-soft);
    font-weight: 300;
    margin-bottom: 1.4rem;
}

.bq-home .bq-plan.bq-feature > p {
    color: rgba(247, 248, 243, .75);
}

.bq-home .bq-plan ul {
    list-style: none;
    display: grid;
    gap: .7rem;
    margin-bottom: 1.8rem;
    padding: 0;
}

.bq-home .bq-plan li {
    position: relative;
    padding-left: 1.6rem;
    font-size: .95rem;
    font-weight: 300;
    color: var(--bq-ink-soft);
}

.bq-home .bq-plan.bq-feature li {
    color: rgba(247, 248, 243, .85);
}

.bq-home .bq-plan li::before {
    content: "\2726";
    position: absolute;
    left: 0;
    color: var(--bq-lime-deep);
}

.bq-home .bq-plan.bq-feature li::before {
    color: var(--bq-lime);
}

.bq-home .bq-plan-end {
    font-style: italic;
    font-family: var(--bq-serif);
    color: var(--bq-ink-soft);
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   16 · Closing
   -------------------------------------------------------------------------- */

.bq-home .bq-closing {
    background: linear-gradient(160deg, var(--bq-sand), var(--bq-blush));
    border-radius: 32px;
    text-align: center;
    padding: 90px 40px;
    position: relative;
    overflow: hidden;
}

.bq-home .bq-closing::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -5%;
    width: 40%;
    height: 140%;
    background: radial-gradient(closest-side, rgba(168, 223, 0, .25), transparent);
}

.bq-home .bq-closing h2 {
    max-width: 20ch;
    margin: 1rem auto;
    position: relative;
}

.bq-home .bq-closing p {
    color: var(--bq-ink-soft);
    font-weight: 300;
    max-width: 36rem;
    margin: 0 auto 2.4rem;
    position: relative;
}

.bq-home .bq-closing .bq-cta {
    position: relative;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .bq-home .bq-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .bq-home .bq-lead {
        margin-inline: auto;
    }
    .bq-home .bq-hero .bq-cta {
        justify-content: center;
    }
    .bq-home .bq-hero-art {
        margin-top: 2rem;
    }
    .bq-home .bq-chip {
        display: none;
    }
}

@media (max-width: 980px) {
    .bq-home .bq-pband {
        padding: 50px 24px;
    }
    .bq-home .bq-pgrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    .bq-home .bq-zig {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 56px;
    }
    .bq-home .bq-rev .bq-ztext {
        order: 0;
    }
    .bq-home .bq-aud,
    .bq-home .bq-ucards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 880px) {
    .bq-home .bq-appbanner {
        grid-template-columns: 1fr;
        padding: 34px;
        gap: 28px;
    }
    .bq-home .bq-stepgrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .bq-home .bq-blk {
        padding: 64px 0;
    }
    .bq-home .bq-softgrid,
    .bq-home .bq-why,
    .bq-home .bq-plans {
        grid-template-columns: 1fr;
    }
    .bq-home .bq-aud,
    .bq-home .bq-ucards {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Phase 8b — product-menu pages (products, marketing, reporting, bingo,
   reverse-raffle)

   These pages carry page-unique classes that Phases 3/5 didn't reach, so they
   kept style.css's Roboto/800 headings and bare-text "cards". Bring them onto
   the boutique system: serif headings, Inter body, cream cards.
   ========================================================================== */

/* --- Headings → serif ---------------------------------------------------- */
.product-sm-box h3,
.loyalty-sm-title,
.benifits-lg-card h6,
.benifits-sm-card h6,
.bingo-header,
.marketing-box h2,
.marketing-box h3,
.marketing-central-text h2,
.reward-sec h2,
.reward-sec h3 {
    font-family: var(--bq-serif) !important;
    font-weight: 500 !important;
    letter-spacing: -.01em;
    color: var(--bq-ink);
    line-height: 1.15;
}

.product-sm-box h3 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;
}

.loyalty-sm-title {
    font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
}

/* The big stat number ("5K") → serif with the lime accent */
.product-sm-block .rating-box-1 h3 {
    font-family: var(--bq-serif) !important;
    font-weight: 500 !important;
    font-style: italic;
    color: var(--bq-lime-deep);
}

/* --- Body copy → Inter --------------------------------------------------- */
.Market-better-content p,
.product-sm-block .rating-box-2 p,
.featured-sm-box p,
.marketing-banner-box p,
.marketing-central-text p,
.marketing-list li,
.benifits-lg-card p,
.benifits-sm-card p,
.bingo-content,
.bingo-content p {
    font-family: var(--bq-sans) !important;
    font-weight: 300;
    color: var(--bq-ink-soft);
}

.lime-text {
    color: var(--bq-lime-deep) !important;
}

/* --- Benefit cards → cream cards ----------------------------------------- */
/* .benifits-sec has a background image; flatten it. */
.benifits-sec {
    background-image: none !important;
    background-color: transparent !important;
    padding: 0;
}

.benifits-sec-box {
    gap: 18px;
}

.benifits-lg-card,
.benifits-sm-card {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    padding: 28px !important;
    transition: transform .3s ease, box-shadow .3s ease;
}

/* padding:7px + width% came from style.css; keep the width math, add gutter */
.benifits-lg-card {
    width: calc(50% - 9px);
}

.benifits-sm-card {
    width: calc(33.33% - 12px);
}

.benifits-lg-card:hover,
.benifits-sm-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--bq-shadow-sm);
}

.benifits-lg-card h6,
.benifits-sm-card h6 {
    font-size: 1.2rem !important;
    margin-bottom: .5rem;
}

@media (max-width: 760px) {
    .benifits-lg-card,
    .benifits-sm-card {
        width: 100%;
    }
}

/* --- Stat block ("5K" + copy) → cream card ------------------------------- */
.product-sm-block {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    padding: 28px;
    gap: 1.2rem;
    height: 100%;
    transition: transform .3s ease, box-shadow .3s ease;
}

.product-sm-block:hover {
    transform: translateY(-5px);
    box-shadow: var(--bq-shadow-sm);
}

/* --- Marketing feature/list blocks -------------------------------------- */
.marketing-box,
.featured-sm-box,
.reward-sec .marketing-box {
    background-color: var(--bq-cream);
    border: 1px solid var(--bq-line);
    border-radius: var(--bq-radius);
    padding: 28px;
}

.marketing-list {
    list-style: none;
    padding-left: 0;
}

.marketing-list li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: .5rem;
}

.marketing-list li::before {
    content: "\203A";
    position: absolute;
    left: 0;
    color: var(--bq-lime-deep);
    font-weight: 600;
}

/* Decorative radial glows behind the products hero → soften to lime */
.left-bg,
.right-bg {
    background: radial-gradient(50% 100% at 50% 0%, rgba(168, 223, 0, .22) 0%, rgba(168, 223, 0, 0) 100%) !important;
}