/* ============================================================
   Clout public site — brand layer on top of Bootstrap 5.3
   Layout/grid/components come from Bootstrap; this file only
   provides brand colours, fonts and the bespoke visuals.
   No global reset / no body rules (Bootstrap reboot handles that).
   All classes are namespaced `clout-` to avoid collisions.
   ============================================================ */

:root {
    --c-brand:    #bc0000;
    --c-brand-dk: #9a0000;
    --c-brand-tnt:#fde8e8;
    --c-brand-lt: #fff5f5;
    --c-dark:     #111827;
    --c-body:     #374151;
    --c-muted:    #6b7280;
    --c-border:   #e5e7eb;
    --c-bg:       #f9fafb;
    --c-gold:     #f59e0b;
    --f-display:  'Plus Jakarta Sans', sans-serif;
    --f-body:     'Inter', sans-serif;
}

html { scroll-behavior: smooth; }

/* Typography scoped to public pages only (body.clout-public) */
.clout-public { font-family: var(--f-body); color: var(--c-body); }
.clout-public h1, .clout-public h2, .clout-public h3,
.clout-public .clout-display { font-family: var(--f-display); }

/* === BRAND BUTTONS === */
.btn-clout {
    background: var(--c-brand);
    color: #fff;
    font-weight: 700;
    border: 1.5px solid var(--c-brand);
}
.btn-clout:hover, .btn-clout:focus { background: var(--c-brand-dk); border-color: var(--c-brand-dk); color: #fff; }
.btn-clout-ghost {
    color: var(--c-body);
    font-weight: 600;
    border: 1.5px solid var(--c-border);
    background: #fff;
}
.btn-clout-ghost:hover { border-color: var(--c-brand); color: var(--c-brand); }
.btn-clout-white { background: #fff; color: var(--c-brand); font-weight: 700; border: none; transition: transform .15s; }
.btn-clout-white:hover, .btn-clout-white:focus { background: #fff; color: var(--c-brand); transform: translateY(-2px); }

/* === NAV === */
.clout-nav {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--c-border);
}
.clout-nav .navbar-brand img { height: 40px; width: auto; }
.clout-nav .nav-link { font-size: .875rem; font-weight: 500; color: var(--c-body); }
.clout-nav .nav-link:hover { color: var(--c-brand); }
.clout-nav .navbar-toggler:focus { box-shadow: none; }

/* Mobile nav (below the lg expand breakpoint) — solid panel, big tap targets */
@media (max-width: 991.98px) {
    .clout-nav .navbar-collapse {
        background: #fff;
        border-top: 1px solid var(--c-border);
        margin-top: .5rem;
        padding: .5rem 0 0;
        box-shadow: 0 14px 24px rgba(0,0,0,.07);
    }
    .clout-nav .navbar-nav { width: 100%; gap: 0; }
    .clout-nav .navbar-collapse .nav-link {
        display: block;
        width: 100%;
        padding: .75rem .25rem;
        font-size: 1rem;
        text-align: center;
        border-bottom: 1px solid var(--c-border);
    }
    .clout-nav .navbar-collapse .btn {
        display: block;
        width: 100%;
        margin: 0;
        padding: .7rem 1rem;
    }
    /* Auth group: button centred on its own line, icon dropped to the next line */
    .clout-nav__actions {
        flex-direction: column;
        align-items: center;
        gap: .5rem;
    }
    .clout-nav__actions .btn { width: auto; }
    /* Centre the login/logout icon (it's a full-width .nav-link otherwise) */
    .clout-nav__actions .clout-auth-icon { width: auto; justify-content: center; border-bottom: none; }
}

/* === HERO === */
.clout-eyebrow {
    display: inline-flex; align-items: center;
    background: var(--c-brand-lt); color: var(--c-brand);
    font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; padding: .4rem .875rem; border-radius: 999px;
}
.clout-h1 {
    font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800;
    color: var(--c-dark); line-height: 1.15; letter-spacing: -.03em;
}
.clout-h1 .accent { color: var(--c-brand); }
.clout-hero__sub { font-size: 1.05rem; color: var(--c-muted); line-height: 1.75; max-width: 500px; }
.clout-hero__note { font-size: .78rem; color: var(--c-muted); }

/* Hero mockup card */
.clout-hw { position: relative; }
.clout-hw::before {
    content: ''; position: absolute; bottom: -40px; left: -30px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--c-brand-tnt) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}
.clout-hw__inner { position: relative; z-index: 1; }
.clout-hw__notif {
    position: absolute; top: -14px; right: -18px; z-index: 2;
    background: var(--c-brand); color: #fff; font-size: .7rem; font-weight: 700;
    padding: .45rem .875rem; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(188,0,0,.3); white-space: nowrap;
}
.clout-hw__card {
    background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
    width: 320px; max-width: 100%;
}
.clout-hw__title { font-family: var(--f-display); font-size: .82rem; font-weight: 700; color: var(--c-dark); }
.clout-hw__badge { background: #d1fae5; color: #065f46; font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; }
.clout-hw__num { font-family: var(--f-display); font-size: 2.75rem; font-weight: 800; color: var(--c-dark); line-height: 1; }
.clout-hw__stars { color: var(--c-gold); font-size: .9rem; letter-spacing: .05em; }
.clout-hw__count { font-size: .72rem; color: var(--c-muted); }
.clout-hw__review { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 8px; padding: .625rem .75rem; }
.clout-hw__name { font-size: .72rem; font-weight: 600; color: var(--c-dark); }
.clout-hw__rstars { font-size: .6rem; color: var(--c-gold); }
.clout-hw__text { font-size: .68rem; color: var(--c-muted); line-height: 1.45; }
.clout-hw__tag { font-size: .65rem; color: #d97706; font-weight: 600; }

/* === TRUST STRIP === */
.clout-trust { background: var(--c-bg); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.clout-trust__label { font-size: .78rem; font-weight: 500; color: var(--c-muted); }
.clout-trust__item { font-size: .82rem; font-weight: 600; color: var(--c-body); }

/* === SECTIONS === */
.clout-sec { padding: 5rem 0; }
.clout-eyebrow-text { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-brand); }
.clout-h2 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); font-weight: 800; color: var(--c-dark); line-height: 1.2; letter-spacing: -.025em; }
.clout-lead { font-size: 1rem; color: var(--c-muted); line-height: 1.7; }

/* Problems (dark) */
.clout-sec--dark { background: var(--c-dark); }
.clout-sec--dark .clout-h2 { color: #fff; }
.clout-prob { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 1.75rem; height: 100%; }
.clout-prob__icon { font-size: 2rem; line-height: 1; }
.clout-prob__h3 { font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.35; }
.clout-prob__p { font-size: .85rem; color: rgba(255,255,255,0.5); line-height: 1.65; }

/* How it works */
.clout-step__num { width: 56px; height: 56px; background: var(--c-brand); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 1.25rem; font-weight: 800; }
.clout-step__h3 { font-size: 1.05rem; font-weight: 700; color: var(--c-dark); }
.clout-step__p { font-size: .875rem; color: var(--c-muted); line-height: 1.65; }

/* Features */
.clout-sec--features { background: var(--c-bg); }
.clout-feat { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 1.625rem; height: 100%; transition: box-shadow .2s, border-color .2s; }
.clout-feat:hover { box-shadow: 0 8px 24px rgba(0,0,0,.06); border-color: var(--c-brand-tnt); }
.clout-feat__icon { width: 44px; height: 44px; background: var(--c-brand-lt); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.clout-feat__icon img { max-width: 28px; max-height: 28px; width: auto; height: auto; object-fit: contain; }
.clout-feat__h3 { font-size: .975rem; font-weight: 700; color: var(--c-dark); }
.clout-feat__p { font-size: .84rem; color: var(--c-muted); line-height: 1.65; }

/* Pricing */
.clout-pricing-card { background: #fff; border: 2px solid var(--c-brand); border-radius: 12px; padding: 2.5rem; max-width: 480px; }
.clout-pricing__badge { background: var(--c-brand); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .3rem 1.125rem; border-radius: 999px; }
.clout-pricing__dollar { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; color: var(--c-brand); }
.clout-pricing__num { font-family: var(--f-display); font-size: 3.5rem; font-weight: 800; color: var(--c-dark); letter-spacing: -.03em; line-height: 1; }
.clout-pricing__period { font-size: 1rem; color: var(--c-muted); }
.clout-pricing__sub { font-size: .82rem; color: var(--c-muted); }
.clout-pricing__includes { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
.clout-pricing__list { list-style: none; margin: 0; padding: 0; }
.clout-pricing__list li { display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; color: var(--c-body); }
.clout-pricing__check { color: var(--c-brand); font-weight: 700; flex-shrink: 0; }
.clout-pricing__fn { font-size: .75rem; color: var(--c-muted); }

/* Testimonials */
.clout-sec--social { background: var(--c-bg); }
.clout-testi { background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 1.625rem; height: 100%; display: flex; flex-direction: column; }
.clout-testi__stars { color: var(--c-gold); font-size: .875rem; letter-spacing: .05em; }
.clout-testi__quote { font-size: .9rem; color: var(--c-body); line-height: 1.65; font-style: italic; flex: 1; }
.clout-testi__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--c-brand-tnt); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 700; font-size: .875rem; color: var(--c-brand); flex-shrink: 0; }
.clout-testi__name { font-family: var(--f-display); font-size: .85rem; font-weight: 700; color: var(--c-dark); }
.clout-testi__biz { font-size: .75rem; color: var(--c-muted); }

/* FAQ — Bootstrap accordion, brand tweaks */
.clout-faq .accordion-button { font-family: var(--f-display); font-weight: 600; color: var(--c-dark); }
.clout-faq .accordion-button:not(.collapsed) { background: var(--c-bg); color: var(--c-dark); box-shadow: none; }
.clout-faq .accordion-button:focus { box-shadow: none; border-color: var(--c-border); }
.clout-faq .accordion-body { font-size: .875rem; color: var(--c-muted); line-height: 1.75; background: var(--c-bg); }

/* Final CTA */
.clout-final { background: var(--c-brand); padding: 7rem 0; position: relative; overflow: hidden; }
.clout-final::before {
    content: 'CLOUT'; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--f-display); font-size: clamp(10rem, 25vw, 22rem);
    font-weight: 800; letter-spacing: -.04em; color: rgba(255,255,255,0.07);
    pointer-events: none; user-select: none; white-space: nowrap; line-height: 1;
}
.clout-final__inner { position: relative; z-index: 1; }
.clout-final__h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; color: #fff; letter-spacing: -.035em; line-height: 1.1; }
.clout-final__p { font-size: 1.05rem; color: rgba(255,255,255,0.78); max-width: 460px; line-height: 1.7; }
.clout-final__sub { color: rgba(255,255,255,0.6); font-size: .8rem; }

/* === FOOTER === */
.clout-footer { background: #0d1117; color: rgba(255,255,255,0.55); padding: 3.5rem 0 2rem; }
.clout-footer__logo img { height: 36px; width: auto; }
.clout-footer__tagline { font-size: .85rem; line-height: 1.6; max-width: 220px; }
.clout-footer__legal { font-size: .7rem; color: rgba(255,255,255,0.3); line-height: 1.6; }
.clout-footer__col-title { font-family: var(--f-display); font-size: .72rem; font-weight: 700; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: .08em; }
.clout-footer__links { list-style: none; margin: 0; padding: 0; }
.clout-footer__links li { margin-bottom: .5rem; }
.clout-footer__links a { font-size: .84rem; color: rgba(255,255,255,0.5); text-decoration: none; }
.clout-footer__links a:hover { color: rgba(255,255,255,0.9); text-decoration: none; }
.clout-footer__bottom { border-top: 1px solid rgba(255,255,255,0.08); font-size: .75rem; }
.clout-footer__bottom a { color: rgba(255,255,255,0.4); text-decoration: none; }
.clout-footer__bottom a:hover { color: rgba(255,255,255,0.8); text-decoration: none; }


/* ============================================================
   Marketing pages — About / How It Works / Pricing
   Ported from clout-new/main.css. Un-prefixed classes (.sec,
   .page-hero, .btn--*, .faq__*) — no overlap with the .clout-*
   homepage layer above. Global reset / body / nav / footer /
   homepage-hero rules deliberately NOT imported (Bootstrap +
   the header/footer handle those).
   ============================================================ */

:root { --c-white:#ffffff; --r-sm:8px; --r-md:12px; }

/* Page hero (inner pages) */
.page-hero { padding: 5rem 5% 3.5rem; max-width: 760px; margin: 0 auto; text-align: center; }
.page-hero__h1 { font-family: var(--f-display); font-size: clamp(1.9rem, 3.5vw, 2.75rem); font-weight: 800; color: var(--c-dark); line-height: 1.15; letter-spacing: -0.03em; margin: 0.75rem 0 1.25rem; }
.page-hero__sub { font-size: 1.05rem; color: var(--c-muted); line-height: 1.75; max-width: 580px; margin: 0 auto; }

/* Buttons */
.btn--primary { display: inline-block; background: var(--c-brand); color: var(--c-white); padding: 0.875rem 1.75rem; border-radius: var(--r-sm); font-weight: 700; font-size: 0.95rem; font-family: var(--f-body); transition: background 0.15s, transform 0.1s; white-space: nowrap; }
.btn--primary:hover { background: var(--c-brand-dk); transform: translateY(-1px); color: var(--c-white); }
.btn--white { display: inline-block; background: var(--c-white); color: var(--c-brand); padding: 1rem 2.25rem; border-radius: var(--r-sm); font-weight: 700; font-size: 1.05rem; font-family: var(--f-body); transition: transform 0.15s; }
.btn--white:hover { transform: translateY(-2px); color: var(--c-brand); }
.btn--white-outline { display: inline-block; background: transparent; color: var(--c-white); padding: 0.875rem 1.75rem; border-radius: var(--r-sm); font-weight: 600; font-size: 1rem; font-family: var(--f-body); border: 2px solid rgba(255,255,255,0.6); transition: border-color 0.15s; }
.btn--white-outline:hover { border-color: var(--c-white); color: var(--c-white); }
.text-link { color: var(--c-brand); font-weight: 600; font-size: 0.9rem; transition: opacity 0.15s; }
.text-link:hover { opacity: 0.75; }

/* Shared sections */
.sec { padding: 5rem 5%; }
.sec--alt { background: var(--c-bg); }
.sec__inner { max-width: 1100px; margin: 0 auto; }
.sec__inner--narrow { max-width: 600px; margin: 0 auto; text-align: center; }
.sec__inner--prose { max-width: 760px; margin: 0 auto; }
.sec__eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-brand); margin-bottom: 0.6rem; display: block; }
.sec__h2 { font-family: var(--f-display); font-size: clamp(1.75rem, 2.8vw, 2.4rem); font-weight: 800; color: var(--c-dark); line-height: 1.2; letter-spacing: -0.025em; margin-bottom: 0.75rem; }
.sec__lead { font-size: 1rem; color: var(--c-muted); line-height: 1.7; }
.body-text { font-size: 0.975rem; color: var(--c-body); line-height: 1.8; margin-bottom: 1.25rem; }
.body-text--small { font-size: 0.82rem; color: var(--c-muted); line-height: 1.7; margin-top: 0.75rem; }

/* Step detail (How It Works) */
.step-detail { display: grid; grid-template-columns: 72px 1fr; gap: 2rem; align-items: flex-start; }
.step-detail__num { width: 56px; height: 56px; background: var(--c-brand); color: var(--c-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 1.25rem; font-weight: 800; flex-shrink: 0; margin-top: 0.25rem; }

/* Pricing card */
.pricing__card { background: var(--c-white); border: 2px solid var(--c-brand); border-radius: var(--r-md); padding: 2.5rem; max-width: 480px; margin: 3rem auto 0; position: relative; }
.pricing__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--c-brand); color: var(--c-white); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.3rem 1.125rem; border-radius: 999px; white-space: nowrap; font-family: var(--f-body); }
.pricing__amount { display: flex; align-items: flex-end; gap: 0.2rem; margin: 0.75rem 0 0.25rem; }
.pricing__dollar { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; color: var(--c-brand); line-height: 1; align-self: flex-start; padding-top: 0.6rem; }
.pricing__num { font-family: var(--f-display); font-size: 3.5rem; font-weight: 800; color: var(--c-dark); letter-spacing: -0.03em; line-height: 1; }
.pricing__period { font-size: 1rem; color: var(--c-muted); align-self: flex-end; padding-bottom: 0.3rem; }
.pricing__sub { font-size: 0.82rem; color: var(--c-muted); margin-bottom: 1.5rem; }
.pricing__divider { height: 1px; background: var(--c-border); margin: 1.5rem 0; }
.pricing__includes-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); margin-bottom: 0.875rem; }
.pricing__list { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; margin-bottom: 2rem; padding: 0; }
.pricing__list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; color: var(--c-body); }
.pricing__check { color: var(--c-brand); font-weight: 700; flex-shrink: 0; line-height: 1.6; }
.pricing__cta-btn { display: block; width: 100%; text-align: center; background: var(--c-brand); color: var(--c-white); padding: 1rem; border-radius: var(--r-sm); font-weight: 700; font-size: 1rem; font-family: var(--f-body); transition: background 0.15s; }
.pricing__cta-btn:hover { background: var(--c-brand-dk); color: var(--c-white); }
.pricing__footnotes { margin-top: 1.125rem; display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.pricing__fn { font-size: 0.75rem; color: var(--c-muted); display: flex; align-items: center; gap: 0.3rem; }

/* FAQ accordion */
.faq__list { margin-top: 3rem; border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden; }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__item:last-child { border-bottom: none; }
.faq__btn { all: unset; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.25rem 1.5rem; cursor: pointer; font-family: var(--f-display); font-size: 0.95rem; font-weight: 600; color: var(--c-dark); box-sizing: border-box; text-align: left; }
.faq__btn:hover { background: var(--c-bg); }
.faq__chevron { color: var(--c-brand); font-size: 0.9rem; flex-shrink: 0; transition: transform 0.2s; }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq__answer-inner { padding: 0.25rem 1.5rem 1.25rem; font-size: 0.875rem; color: var(--c-muted); line-height: 1.75; background: var(--c-bg); }
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }
.faq__item.is-open .faq__answer { max-height: 500px; }

/* Final CTA */
.sec--final { background: var(--c-brand); padding: 7rem 5%; text-align: center; position: relative; overflow: hidden; }
.sec--final::before { content: 'CLOUT'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--f-display); font-size: clamp(10rem, 25vw, 22rem); font-weight: 800; letter-spacing: -0.04em; color: rgba(255,255,255,0.07); pointer-events: none; user-select: none; white-space: nowrap; line-height: 1; }
.final__inner { position: relative; z-index: 1; }
.final__h2 { font-family: var(--f-display); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; color: var(--c-white); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 1rem; }
.final__p { font-size: 1.05rem; color: rgba(255,255,255,0.78); max-width: 460px; margin: 0 auto 2.25rem; line-height: 1.7; }
.final__sub { color: rgba(255,255,255,0.6); font-size: 0.8rem; margin-top: 1rem; }

/* Inner-page components */
.col-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.content-col { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 1.625rem; }
.content-col h3 { font-family: var(--f-display); font-size: 1.05rem; font-weight: 700; color: var(--c-dark); margin-bottom: 0.75rem; }
.content-col p { font-size: 0.875rem; color: var(--c-muted); line-height: 1.65; }
.callout { background: var(--c-brand-lt); border-left: 4px solid var(--c-brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 1.125rem 1.5rem; margin: 1.5rem 0; font-size: 0.9rem; color: var(--c-body); line-height: 1.7; }
.content-list { list-style: none; margin: 1.25rem 0; padding: 0; }
.content-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--c-body); line-height: 1.6; }
.content-list li:last-child { margin-bottom: 0; }
.content-list li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--c-brand); font-weight: 700; line-height: 1.6; }
.sms-bubble { background: #e9f5e1; border-radius: var(--r-md) var(--r-md) var(--r-md) 4px; padding: 1rem 1.25rem; margin: 1.5rem 0; position: relative; }
.sms-bubble__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-muted); margin-bottom: 0.4rem; }
.sms-bubble__text { font-size: 0.9rem; color: var(--c-dark); line-height: 1.6; }
.flow-diagram { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 2rem 2rem 1.5rem; margin: 2rem 0; text-align: center; }
.flow-diagram__row { display: flex; justify-content: center; }
.flow-diagram__arrow { text-align: center; color: var(--c-muted); font-size: 1.25rem; line-height: 1; padding: 0.375rem 0; }
.flow-diagram__split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 0; }
.flow-split__branch { display: flex; flex-direction: column; align-items: center; }
.flow-node { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 0.625rem 1rem; font-size: 0.82rem; font-weight: 500; color: var(--c-body); max-width: 220px; }
.flow-node--start { background: var(--c-brand-lt); border-color: var(--c-brand-tnt); font-weight: 600; }
.flow-node--happy { background: #d1fae5; border-color: #a7f3d0; color: #065f46; font-weight: 600; }
.flow-node--unhappy { background: #fee2e2; border-color: #fca5a5; color: #991b1b; font-weight: 600; }
.flow-node--good { background: #d1fae5; border-color: #a7f3d0; font-size: 0.78rem; }
.flow-node--private { background: var(--c-brand-lt); border-color: var(--c-brand-tnt); font-size: 0.78rem; }
.pricing-loc-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
.pricing-loc-table th, .pricing-loc-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--c-border); }
.pricing-loc-table th { font-family: var(--f-display); font-weight: 700; color: var(--c-dark); background: var(--c-bg); }
.team-photo { width: 100%; border-radius: var(--r-md); margin: 1.5rem 0; }

/* Responsive (inner pages) */
@media (max-width: 960px) {
    .col-grid-3 { grid-template-columns: 1fr; gap: 1rem; }
    .step-detail { grid-template-columns: 1fr; gap: 1rem; }
    .flow-diagram__split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .sec { padding: 3.5rem 5%; }
    .sec--final { padding: 5rem 5%; }
}

/* ── Contact page ──────────────────────────────────────────────
   Bottom section reuses .sec--final (Clout-colour background). The
   .final__* helpers already render white, but force white on any
   arbitrary WYSIWYG content the client adds there too. */
.contact-cta .final__inner { max-width: 640px; margin-left: auto; margin-right: auto; }
.contact-cta .final__inner h1,
.contact-cta .final__inner h2,
.contact-cta .final__inner h3,
.contact-cta .final__inner h4,
.contact-cta .final__inner p,
.contact-cta .final__inner li,
.contact-cta .final__inner strong,
.contact-cta .final__inner em { color: #fff; }
.contact-cta .final__inner a:not(.btn) { color: #fff; text-decoration: underline; }

/* <small> inside a heading renders clearly smaller and a touch lighter —
   lets editors add e.g. "<small>PLUS GST /month</small>" within an h2/h3/h4. */
h2 small, h3 small, h4 small,
.clout-h2 small, .sec__h2 small, .final__h2 small {
    font-size: 0.55em;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}

/* <small> inside a button renders smaller (e.g. "Start for $99 <small>PLUS GST /month</small>"). */
.btn small { font-size: 0.7em; font-weight: 600; opacity: 0.9; }