:root {
    --ink: #0B0C0F;
    --ink-soft: #3D4148;
    --muted: #6B7280;
    --paper: #FFFFFF;
    --paper-alt: #F5F2EC;
    --line: #DDD8CC;
    --line-dark: rgba(255, 255, 255, 0.16);
    --navy: #003B31;
    --navy-hover: #005245;
    --navy-deep: #002821;
    --blue-accent: #00B388;
    --blue-glow: #00D8A1;
    --green: #1E9E5A;
    --green-bright: #22C55E;
    --teal: #00B388;
    --teal-soft: rgba(0, 179, 136, 0.09);
    --teal-line: rgba(0, 179, 136, 0.25);
    --amber: #D98A1F;
    --amber-soft: rgba(217, 138, 31, 0.1);
    --amber-line: rgba(217, 138, 31, 0.28);
    --coral: #D6362E;
    --coral-soft: rgba(214, 54, 46, 0.08);
    --maxw: 1200px;
}

* {
    box-sizing: border-box;
}

.article-content ul {
    list-style: disc;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    font-size: 16px;
}

h1,
h2,
h3,
h4 {
    font-family: 'Manrope', sans-serif;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.15;
}

.mono {
    font-family: 'IBM Plex Mono', monospace;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 32px;
}

@media(max-width:640px) {
    .wrap {
        padding: 0 20px;
    }
}

section {
    padding: 100px 0;
}

@media(max-width:720px) {
    section {
        padding: 60px 0;
    }
}


/* Rough grain texture overlay (Aircall-style) */

.grain {
    position: relative;
}

.grain::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .55;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.grain-light::after {
    opacity: .35;
    mix-blend-mode: multiply;
}

.grain>* {
    position: relative;
    z-index: 2;
}


/* Aircall-style soft pastel aurora wash (blue → lavender → pink → cream) */

.shade-aurora {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #CFE3F2 0%, #D8DAF0 28%, #DCC9E6 52%, #EBD1D8 74%, #F5EFE3 100%);
}

.shade-aurora-alt {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #E7EFD9 0%, #D4E4E0 32%, #D0D9EC 60%, #E4D7E8 82%, #F5F0E6 100%);
}

.shade-aurora-warm {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, #F5EFE3 0%, #EED6C6 30%, #E5C6D2 58%, #D6C9E4 82%, #CBD8EC 100%);
}

.shade-aurora::before,
.shade-aurora-alt::before,
.shade-aurora-warm::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(600px 300px at 15% 10%, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(500px 260px at 90% 90%, rgba(255, 255, 255, .35), transparent 60%);
}

.shade-aurora>*,
.shade-aurora-alt>*,
.shade-aurora-warm>* {
    position: relative;
    z-index: 2;
}

.eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--navy);
    font-weight: 700;
}

.eyebrow.light {
    color: #7FCBB4;
}


/* ===== BUTTONS — sharp edges ===== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14.5px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .18s ease;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.btn-primary {
    background: var(--navy);
    color: #fff;
}

.btn-primary:hover {
    background: var(--navy-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(0, 59, 49, 0.5);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-call {
    background: linear-gradient(135deg, #22C55E, #0FA968);
    color: #fff;
    box-shadow: none;
}

.btn-call:hover {
    background: linear-gradient(135deg, #28D866, #12BC73);
    box-shadow: none;
    transform: translateY(-1px);
}

.btn-call:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-light {
    background: #fff;
    color: var(--navy);
    border-color: #fff;
}

.btn-light:hover {
    background: var(--paper-alt);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.25);
}

.btn-light:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-ghost {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}

.btn-ghost:hover {
    border-color: var(--ink);
    background: var(--paper-alt);
}

.btn-ghost:active {
    background: var(--line);
}

.btn-outline-light {
    background: transparent;
    border-color: var(--line-dark);
    color: #fff;
}

.btn-outline-light:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.btn-outline-light:active {
    background: rgba(255, 255, 255, 0.16);
}

.btn-sm {
    padding: 10px 20px;
    font-size: 13.5px;
}

.btn-block {
    width: 100%;
}


/* ===== ANNOUNCEMENT BAR ===== */


/* min-height reserves the injected announcement's box so loading the
     partial causes no layout shift. Keep in sync with the text length. */

.announce {
    background: linear-gradient(90deg, var(--teal), #007A5E);
    color: #fff;
    text-align: center;
    padding: 9px 16px;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
    min-height: 37px;
}

@media(max-width:620px) {
    .announce {
        min-height: 56px;
    }
}

.announce a {
    color: #CFF5E7;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ===== HEADER =====
     NOTE: these rules are scoped to #site-header / .nav-* on purpose. A bare
     `header{}` selector also hits nested landmarks such as
     <header class="post-header"> inside a blog article, which used to make
     article titles sticky. Same story for #site-footer vs .post-footer. */

#site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    min-height: 74px;
}

.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 74px;
    gap: 20px;
}

.nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-mark {
    height: 26px;
    width: auto;
    max-width: none;
}

.nav-main {
    display: flex;
    align-items: center;
    min-width: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
}

.nav-links a:hover {
    color: var(--ink);
}

.nav-drop {
    position: relative;
}

.nav-drop-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-drop-caret {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.nav-drop-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px;
    min-width: 190px;
    box-shadow: 0 20px 40px -20px rgba(0, 59, 49, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}


/* Scoped to desktop: these are higher-specificity than the mobile overrides
     below, so unscoped they would drag the accordion off-screen. */

.social-row a {
    transition: all 0.4s;
    border-radius: 4px;
}

.social-row a:hover svg {
    fill: #fff;
}

@media(min-width:1025px) {
    .nav-drop:hover .nav-drop-menu,
    .nav-drop:focus-within .nav-drop-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

.nav-drop-menu a {
    display: block;
    padding: 10px 12px;
    font-size: 13.5px;
    border-radius: 6px;
}

.nav-drop-menu a:hover {
    background: var(--paper-alt);
    color: var(--ink);
}


/* Wide, grouped dropdown (Solutions: by workflow / by industry). */


/* Solutions menu: the workflow column carries the longest label
     ("Payment & Renewal Reminders"), so it gets ~57% of the width and the
     industry column ~43%. Wide enough for one-line labels without making the
     whole menu oversized, and no hard <br> in the markup. */

.nav-drop-menu-wide {
    min-width: 512px;
    display: grid;
    grid-template-columns: 1.32fr 1fr;
    gap: 6px 22px;
    padding: 18px;
}

.nav-drop-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nav-drop-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted);
    margin: 2px 0 8px 12px;
}

.nav-drop-menu-wide a {
    white-space: nowrap;
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-login {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
    padding: 10px 12px;
    white-space: nowrap;
}

.nav-login:hover {
    color: var(--navy);
}


/* Hamburger — 44px tap target, animates into an X while the drawer is open */

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

@media(hover:hover) {
    .nav-toggle:hover {
        background: var(--paper-alt);
    }
}

.nav-toggle-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
}

.nav-toggle-bars span {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .25s ease, opacity .18s ease, top .25s ease;
}

.nav-toggle-bars span:nth-child(1) {
    top: 0;
}

.nav-toggle-bars span:nth-child(2) {
    top: 7px;
}

.nav-toggle-bars span:nth-child(3) {
    top: 14px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
}


/* Drawer-only blocks: hidden on desktop, revealed inside the mobile panel */

.nav-drawer-foot {
    display: none;
}


/* Backdrop behind the mobile drawer. Anchored to the header (top:100%) rather
     than the viewport so it dims the page *below* the bar and never greys out
     the logo row or the announcement strip. Height stays 0 while closed so it
     never adds phantom scroll height; while open the body is scroll-locked,
     so 100dvh costs nothing. */

.nav-backdrop {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0;
    background: rgba(0, 20, 15, 0.42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
    z-index: 0;
    pointer-events: none;
}

.nav-backdrop.open {
    height: 100vh;
    height: 100dvh;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Phase 2B: the top level was reduced from 7 items to 5 (Platform, Solutions,
     Resellers, Pricing, Resources), so the Phase 2A compression hacks - reduced
     font size and a hidden secondary CTA - are no longer needed and were
     removed. Only a gentle gap reduction remains just above the mobile
     breakpoint. Font size stays at the normal 14px at every width. */

@media(min-width:1025px) and (max-width:1180px) {
    .nav-links {
        gap: 22px;
    }
    .nav-row {
        gap: 14px;
    }
    .nav-cta {
        gap: 8px;
    }
}

@media(max-width:1024px) {
    .nav-row {
        position: relative;
        z-index: 2;
        background: transparent;
    }
    .nav-toggle {
        display: flex;
    }
    .nav-login {
        display: none;
    }
    /* The drawer is anchored to the header itself (top:100%), so it always sits
       flush under the bar whether or not the announcement strip is on screen. */
    .nav-main {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1;
        display: block;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 26px 44px -26px rgba(0, 59, 49, 0.45);
        max-height: calc(100vh - 74px);
        max-height: calc(100dvh - 74px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 6px 20px 24px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .24s ease, transform .24s ease, visibility .24s;
    }
    .nav-main.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .nav-links {
        display: block;
        gap: 0;
    }
    .nav-links>li {
        border-bottom: 1px solid var(--line);
    }
    .nav-links>li>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 2px;
        font-size: 16px;
        color: var(--ink);
    }
    .nav-links>li>a:active {
        color: var(--navy);
    }
    .nav-links a.active {
        color: var(--navy);
    }
    .nav-links a.active::after {
        display: none;
    }
    /* Resources → accordion */
    .nav-drop-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        min-width: 0;
        overflow: hidden;
        max-height: 0;
        transition: max-height .26s ease;
    }
    .nav-drop.open .nav-drop-menu {
        max-height: 260px;
    }
    /* Grouped Solutions menu: stack the groups and allow for its extra rows. */
    .nav-drop-menu-wide {
        display: block;
        min-width: 0;
        padding: 0;
    }
    .nav-drop.open .nav-drop-menu-wide {
        max-height: 760px;
    }
    .nav-drop-menu-wide .nav-drop-group {
        display: block;
    }
    .nav-drop-label {
        margin: 14px 0 4px 16px;
    }
    .nav-drop-menu-wide a {
        white-space: normal;
    }
    .nav-drop.open .nav-drop-caret {
        transform: rotate(180deg);
    }
    .nav-drop-menu a {
        padding: 12px 2px 12px 16px;
        font-size: 14.5px;
        color: var(--muted);
        border-radius: 0;
    }
    .nav-drop-menu a:first-child {
        padding-top: 4px;
    }
    .nav-drop-menu a:last-child {
        padding-bottom: 18px;
    }
    .nav-drop-menu a:hover {
        background: transparent;
        color: var(--navy);
    }
    /* CTA block pinned at the bottom of the drawer */
    .nav-drawer-foot {
        display: block;
        padding-top: 22px;
    }
    .nav-drawer-foot .btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
    }
    .nav-drawer-foot .btn+.btn {
        margin-top: 10px;
    }
    .nav-drawer-foot .nav-drawer-login {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin-top: 10px;
        padding: 14px 20px;
        border: 1.5px solid var(--line);
        border-radius: 4px;
        font-size: 15px;
        font-weight: 600;
        color: var(--ink);
    }
    .nav-drawer-foot .nav-drawer-login:hover {
        border-color: var(--navy);
        color: var(--navy);
    }
    .nav-drawer-contact {
        margin-top: 18px;
        font-size: 13px;
        color: var(--muted);
        text-align: center;
    }
    .nav-drawer-contact a {
        color: var(--navy);
        font-weight: 600;
    }
    body.nav-open {
        overflow: hidden;
    }
}

@media(max-width:600px) {
    /* Below this the logo + CTA + burger stop fitting on one line */
    .nav-cta .btn {
        display: none;
    }
    .logo-mark {
        height: 24px;
    }
}


/* ===== HERO — dark navy/blue gradient reference ===== */

.hero {
    background: linear-gradient(160deg, #002821 0%, #003B31 55%, #001A44 100%);
    color: #fff;
    padding: 26px 0 0;
    position: relative;
    overflow: hidden;
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.hero::before {
    width: 620px;
    height: 620px;
    top: -12%;
    left: 2%;
    background: radial-gradient(circle, rgba(59, 107, 255, 0.55), transparent 60%);
    animation: heroDrift1 24s ease-in-out infinite alternate;
}

.hero::after {
    width: 560px;
    height: 560px;
    bottom: -16%;
    right: 2%;
    background: radial-gradient(circle, rgba(30, 79, 214, 0.4), transparent 60%);
    animation: heroDrift2 28s ease-in-out infinite alternate;
}

@keyframes heroDrift1 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(34px, 22px) scale(1.05);
    }
}

@keyframes heroDrift2 {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(-28px, -18px) scale(1.04);
    }
}


/* padding-top/bottom only — the shorthand used to zero out .wrap's horizontal
     padding, pinning every hero flush to the viewport edge below 1200px. */

.hero-inner {
    padding-top: 64px;
    padding-bottom: 90px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: start;
}

@media(max-width:960px) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media(max-width:720px) {
    .hero-inner {
        padding-top: 44px;
        padding-bottom: 60px;
    }
}

.hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line-dark);
    padding: 8px 14px;
    font-size: 12.5px;
    color: #D6DEEF;
    margin-bottom: 22px;
}

.hero h1 {
    font-size: clamp(36px, 5.4vw, 58px);
    line-height: 1.05;
    color: #fff;
    max-width: 600px;
}

.hero p.lead {
    font-size: 17px;
    color: #B9C4DC;
    max-width: 480px;
    margin: 20px 0 28px;
}

.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.hero-trust {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #B9C4DC;
    font-family: 'IBM Plex Mono', monospace;
}

.hero-trust span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-trust span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}


/* Try Mangal Live widget — light "AI voice agent" card, Aircall-inspired */

.live-card {
    position: relative;
    border-radius: 18px;
    background: #F5F2EC;
    border: 1px solid rgba(0, 59, 49, 0.08);
    box-shadow: 0 50px 120px -40px rgba(0, 8, 26, 0.55), 0 8px 22px -12px rgba(0, 59, 49, 0.25);
    overflow: hidden;
}

.live-card-inner {
    position: relative;
    padding: 26px 26px 22px;
    color: var(--ink);
}

.live-card-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 59, 49, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 22px;
    box-shadow: 0 6px 16px -10px rgba(0, 59, 49, 0.15);
}

.live-card-banner .banner-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.live-card-banner .banner-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #00B388, #007A5E);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.live-card-banner .banner-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.live-card-banner .banner-eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #5B7F72;
}

.live-card-banner .banner-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--navy);
    margin-top: 2px;
}

.agent-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #007A5E;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(0, 179, 136, 0.10);
    border: 1px solid rgba(0, 179, 136, 0.25);
    padding: 6px 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.agent-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00B388;
    box-shadow: 0 0 0 3px rgba(0, 179, 136, 0.20);
}


/* Below ~430px the title and the status pill fight for the same row and the
     product name breaks onto three lines — stack them instead. */

@media(max-width:430px) {
    .live-card-inner {
        padding: 20px 18px 18px;
    }
    .live-card-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }
    .live-card-banner .banner-title {
        font-size: 14.5px;
    }
}

.live-field {
    margin-bottom: 12px;
}

.live-field label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: #5B7F72;
    margin-bottom: 6px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.live-field input,
.live-field select {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: var(--ink);
    background: #fff;
    border: 1px solid rgba(0, 59, 49, 0.14);
    border-radius: 10px;
    padding: 13px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.live-field input::placeholder {
    color: #95A6A0;
}

.live-field input:focus,
.live-field select:focus {
    outline: none;
    border-color: #00B388;
    box-shadow: 0 0 0 4px rgba(0, 179, 136, 0.15);
}

.live-field select option {
    background: #fff;
    color: var(--ink);
}

.live-note {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: #7C8A85;
    text-align: center;
    margin-top: 12px;
    letter-spacing: .02em;
}

.live-panel {
    display: none;
}

.live-panel.show {
    display: block;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(214, 54, 46, .5);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(214, 54, 46, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(214, 54, 46, 0);
    }
}

.waveform {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 34px;
}

.waveform span {
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, #00D8A1, #007A5E);
    transform-origin: bottom;
    animation: wave 1s ease-in-out infinite;
}

@keyframes wave {
    0%,
    100% {
        transform: scaleY(.18);
    }
    50% {
        transform: scaleY(1);
    }
}

.live-transcript {
    font-size: 13.5px;
    color: var(--ink-soft);
    margin: 0;
    min-height: 36px;
    transition: opacity .3s ease;
}


/* ===== PHONE MOCK — light in-call state ===== */

.phone-mock {
    padding-top: 4px;
}

.phone-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    color: #5B7F72;
    letter-spacing: .08em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.phone-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D6362E;
    flex-shrink: 0;
    animation: pulse 1.4s infinite;
}

.phone-avatar-wrap {
    position: relative;
    width: 78px;
    height: 78px;
    margin: 0 auto 14px;
}

.phone-avatar-wrap::before,
.phone-avatar-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 179, 136, 0.45);
    animation: ring 2.2s ease-out infinite;
}

.phone-avatar-wrap::after {
    animation-delay: 1.1s;
}

@keyframes ring {
    0% {
        transform: scale(1);
        opacity: .8;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.phone-avatar {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00D8A1, #007A5E);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Manrope';
    font-weight: 800;
    font-size: 28px;
    box-shadow: 0 12px 28px -8px rgba(0, 122, 94, 0.55);
}

.phone-mock h4,
.phone-agent-name {
    text-align: center;
    font-family: 'Manrope';
    font-weight: 800;
    font-size: 19px;
    color: var(--navy);
}

.phone-mock .role {
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #5B7F72;
    margin-top: 6px;
}

.phone-mock .waveform {
    justify-content: center;
    margin: 22px 0;
    height: 34px;
}

.phone-transcript {
    background: #fff;
    border: 1px solid rgba(0, 59, 49, 0.12);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    min-height: 64px;
    display: flex;
    align-items: center;
    font-size: 13.5px;
    color: var(--ink-soft);
    transition: opacity .3s ease;
}

.phone-actions {
    display: flex;
    gap: 10px;
}

.phone-actions button {
    flex: 1;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 600;
    font-size: 14px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .18s ease;
    font-family: 'Inter', sans-serif;
}

.btn-mute {
    background: #fff;
    border-color: rgba(0, 59, 49, 0.16);
    color: var(--navy);
}

.btn-mute:hover {
    border-color: var(--navy);
}

.btn-mute.is-muted {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.btn-hangup {
    background: #D6362E;
    border-color: #D6362E;
    color: #fff;
}

.btn-hangup:hover {
    background: #B92B24;
    border-color: #B92B24;
}


/* ===== TRUST / TESTIMONIAL STRIP ===== */

.trust-strip {
    background: var(--paper-alt);
    padding: 80px 0;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}

.trust-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    align-items: stretch;
}

@media(max-width:860px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* Quote card */

.quote-card {
    background: var(--navy);
    border-radius: 14px;
    padding: 44px 40px;
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote-card::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 107, 255, 0.45), transparent 70%);
}

.quote-mark {
    width: 38px;
    height: 30px;
    color: #00D8A1;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.quote-text {
    font-size: 19px;
    color: #E4E9F4;
    line-height: 1.55;
    position: relative;
    z-index: 1;
    font-family: 'Manrope';
    font-weight: 500;
    letter-spacing: -.01em;
}

.quote-text strong {
    color: #fff;
}

.quote-person {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.quote-person .avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00D8A1, #00B388);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.quote-person .who {
    font-size: 13.5px;
    color: #B9C4DC;
    font-weight: 600;
}

.quote-person .who span {
    display: block;
    color: #fff;
    font-size: 14px;
}


/* Real Estate Workflow: dark anchor card reusing .quote-card as a
     workflow-demonstration card (not a testimonial). Generic child elements
     need the same z-index lift the .quote-* children already get. */

.quote-card>* {
    position: relative;
    z-index: 1;
}


/* Real Estate dark card typography (owner: headline treatment wasn't
     polished; card also carried much more text than the two right cards).
     Clear eyebrow -> headline -> body -> CTA hierarchy, an intentional
     two-line headline (hard <br> + max-width safety net), heavier weight,
     tighter leading, more air before the body, and a touch more card
     padding to balance against the lighter right column. */

.quote-card.re-main {
    justify-content: flex-start;
    padding: 48px 46px;
}

.quote-card.re-main .eyebrow {
    display: block;
    margin-bottom: 24px;
}

.quote-card.re-main h3 {
    color: #fff;
    font-family: 'Manrope';
    font-weight: 800;
    font-size: clamp(23px, 2.7vw, 30px);
    line-height: 1.22;
    letter-spacing: -.02em;
    margin: 0 0 22px;
    max-width: 22ch;
}

.quote-card.re-main p {
    color: #E4E9F4;
    font-size: 15.5px;
    line-height: 1.7;
    max-width: 46ch;
}

.re-main-cta {
    margin-top: 30px;
    font-size: 14px;
    font-weight: 700;
}

@media(max-width:640px) {
    .quote-card.re-main {
        padding: 36px 28px;
    }
    .quote-card.re-main h3 {
        margin-bottom: 18px;
    }
}


/* Let the Real Estate cards size to their own content instead of the dark
     card force-stretching the right column (which left the capture card with
     an awkward bottom gap once the headline grew). The dark anchor card
     being a little taller than the right stack is intentional asymmetry. */

#results .trust-grid {
    align-items: start;
}

.case-cta-light {
    color: #7FCBB4;
    font-weight: 700;
}

.case-cta-light:hover {
    text-decoration: underline;
}


/* Right column: industries + metric card */

.trust-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.trust-label {
    font-family: 'IBM Plex Mono';
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}

.industries-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px 26px;
    flex-grow: 1;
}

.trust-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.trust-logos span {
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 13.5px;
    color: var(--ink-soft);
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
}


/* Dual-border metric card — outer card border + inner accent pill border */

.metric-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px;
}

.metric-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.metric-figure {
    font-family: 'Manrope';
    font-size: 34px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
}

.metric-pill {
    font-family: 'IBM Plex Mono';
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--teal);
    background: var(--teal-soft);
    border: 1px solid var(--teal-line);
    border-radius: 999px;
    padding: 5px 12px;
}

.metric-card h3,
.metric-card h4 {
    font-size: 16.5px;
    margin-bottom: 8px;
}

.metric-card p {
    font-size: 14px;
    color: var(--muted);
}


/* ===== SECTION HEAD ===== */

.section-head {
    max-width: 640px;
    margin: 0 auto 60px;
    text-align: center;
}

.section-head h2 {
    font-size: clamp(28px, 3.6vw, 42px);
    margin-top: 14px;
}

.section-head p {
    color: var(--muted);
    font-size: 16.5px;
    margin-top: 14px;
}


/* Full-width section head (spans the same container as the header), with an inline CTA */

.section-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 0 56px;
    text-align: left;
}

.section-head-row .copy {
    max-width: 640px;
}

.section-head-row h2 {
    font-size: clamp(28px, 3.6vw, 42px);
    margin-top: 14px;
}

.section-head-row p {
    color: var(--muted);
    font-size: 16.5px;
    margin-top: 14px;
}

.section-head-row .btn {
    flex-shrink: 0;
}


/* ===== FEATURE ROWS ===== */


/* overflow:hidden contains the decorative ::before glow — on narrow screens it
     used to push the page ~50px wider than the viewport. */

.feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    margin-bottom: 96px;
    position: relative;
    overflow: hidden;
}

.feature-row .mockup-card {
    position: relative;
    z-index: 1;
}

.feature-row::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 79, 214, 0.14), transparent 70%);
    z-index: 0;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    pointer-events: none;
}

.feature-row.reverse::before {
    right: auto;
    left: 10%;
}

.feature-row:last-child {
    margin-bottom: 0;
}

.feature-row.reverse .feature-copy {
    order: 2;
}

@media(max-width:900px) {
    .feature-row,
    .feature-row.reverse .feature-copy {
        grid-template-columns: 1fr;
        order: 0;
    }
}

.feature-icon {
    width: 36px;
    height: 36px;
    color: var(--navy);
    margin-bottom: 20px;
}

.feature-copy h3 {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 12px;
}

.feature-copy p {
    color: var(--muted);
    font-size: 15.5px;
}

.mockup-card {
    background: var(--navy);
    border-radius: 4px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px -30px rgba(0, 59, 49, 0.5);
}

.mockup-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mockup-top span {
    font-family: 'IBM Plex Mono';
    font-size: 11px;
    color: #7FCBB4;
}

.mockup-new {
    background: #fff;
    color: var(--navy);
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
}

.mockup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.mockup-tile {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
}

.mockup-tile .k {
    font-family: 'IBM Plex Mono';
    font-size: 10.5px;
    color: #7FCBB4;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.mockup-tile .v {
    font-family: 'Manrope';
    font-size: 18px;
    color: #fff;
    margin-top: 6px;
    font-weight: 700;
}

.mockup-tile .bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 10px;
    overflow: hidden;
}

.mockup-tile .bar i {
    display: block;
    height: 100%;
    background: #00D8A1;
}

.mockup-foot {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    height: 44px;
}

.mockup-foot span {
    flex: 1;
    background: #00D8A1;
    opacity: .45;
}


/* ===== INTEGRATIONS BAND ===== */

.integrations-band {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.integrations-band .band-watermark {
    position: absolute;
    top: 50%;
    left: -10%;
    transform: translateY(-50%);
    width: 640px;
    height: 640px;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
}

@media(max-width:900px) {
    .integrations-band .band-watermark {
        width: 420px;
        height: 420px;
        left: -30%;
    }
}

.integrations-band .wrap {
    position: relative;
    z-index: 1;
}

.integrations-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}

.integrations-band h2 {
    color: #fff;
    font-size: clamp(26px, 3vw, 34px);
    margin-top: 12px;
}

.integrations-band p {
    margin-top: 20px;
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@media(max-width:900px) {
    .integration-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media(max-width:560px) {
    .integration-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.integration-tile {
    aspect-ratio: 1;
    background: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Manrope';
    font-weight: 600;
    font-size: 12.5px;
    color: #D6DEEF;
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    transition: background .18s ease;
}

.integration-tile:hover {
    background: #005245;
}

.integration-tile svg {
    width: 22px;
    height: 22px;
    color: #7FCBB4;
    flex-shrink: 0;
}


/* ===== DECORATIVE WATERMARK ICON ===== */

.watermark-icon {
    position: absolute;
    top: 50%;
    right: -40px;
    transform: translateY(-50%);
    width: 420px;
    height: 420px;
    color: var(--ink);
    opacity: .035;
    pointer-events: none;
    z-index: 0;
}

@media(max-width:900px) {
    .watermark-icon {
        width: 280px;
        height: 280px;
        right: -60px;
    }
}


/* ===== CAPABILITIES (icon list) ===== */

.cap-section-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    position: relative;
    z-index: 1;
}

@media(max-width:900px) {
    .cap-section-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.cap-section-grid h2 {
    font-size: clamp(28px, 3.4vw, 38px);
    margin-top: 14px;
}

.cap-section-grid>div:first-child p {
    color: var(--muted);
    font-size: 16px;
    margin-top: 14px;
    max-width: 340px;
}

.cap-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 36px;
}

@media(max-width:560px) {
    .cap-list {
        grid-template-columns: 1fr;
    }
}


/* 4-up variant (resources.html). Kept in CSS rather than an inline style so
     the breakpoints below can actually win. */

.cap-list-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 36px 28px;
}

@media(max-width:1024px) {
    .cap-list-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:560px) {
    .cap-list-4 {
        grid-template-columns: 1fr;
    }
}


/* 3-up variant (homepage Call Intelligence, compact outcome band). */

.cap-list-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
}

@media(max-width:860px) {
    .cap-list-3 {
        grid-template-columns: 1fr;
    }
}

.cap-item svg {
    width: 26px;
    height: 26px;
    color: var(--navy);
    margin-bottom: 14px;
}

.cap-item h3,
.cap-item h4 {
    font-size: 16px;
    margin-bottom: 8px;
}

.cap-item p {
    font-size: 14px;
    color: var(--muted);
}


/* Call Intelligence contrast (owner: supporting subtext was too light on
     the pale aurora gradient). Scoped to #call-intelligence only — global
     body text and every other .cap-item are untouched. The outcome-item
     descriptions used --muted (#6B7280, ~4:1 on the gradient — borderline
     AA); moved to --ink-soft (#3D4148, ~7.5:1 — clears AA/AAA) while staying
     clearly below the #0B0C0F heading/item-titles in the hierarchy. The
     supporting paragraph (.lead) is already #0B0C0F and untouched. */

#call-intelligence .cap-item p {
    color: var(--ink-soft);
}

#call-intelligence .intel-flow i {
    opacity: .8;
}


/* ===== TRY LIVE DEMO ===== */

.demo-card-top {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.demo-card-top img {
    max-width: 400px;
    margin: 0px auto;
}

.demo-card {
    background: var(--navy);
    color: #fff;
    padding: 64px 48px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

@media(max-width:720px) {
    .demo-card {
        padding: 40px 24px;
    }
}

.demo-card h2 {
    color: #fff;
    font-size: clamp(26px, 3.2vw, 36px);
    margin-top: 12px;
}

.demo-card p.lead {
    color: #B9C4DC;
    font-size: 16px;
    max-width: 480px;
    margin-top: 12px;
}

.demo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 40px;
}

@media(max-width:860px) {
    .demo-grid {
        grid-template-columns: 1fr;
    }
}

.usecase-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.usecase-tab {
    padding: 9px 16px;
    border: 1px solid var(--line-dark);
    background: transparent;
    color: #D6DEEF;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter';
    transition: .18s;
    border-radius: 4px;
}

.usecase-tab.active,
.usecase-tab:hover {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
}

.demo-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.demo-form input {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line-dark);
    padding: 14px 18px;
    color: #fff;
    font-size: 14.5px;
    font-family: 'Inter';
    border-radius: 4px;
}

.demo-form input::placeholder {
    color: #8A96B0;
}

.demo-form input:focus {
    outline: none;
    border-color: #fff;
}

.demo-form .btn {
    margin-top: 4px;
}

.demo-note {
    font-size: 12px;
    color: #8A96B0;
    font-family: 'IBM Plex Mono';
}

.demo-success {
    display: none;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--line-dark);
    padding: 16px;
    font-size: 13.5px;
    color: #E4E9F4;
    margin-top: 4px;
    border-radius: 4px;
}

.demo-success.show {
    display: block;
}


/* ===== INDUSTRIES — overlapping scroll stack, contained width ===== */

.industry-stack {
    position: relative;
    padding-bottom: 8px;
}

.industry-panel {
    position: sticky;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
    box-shadow: 0 -24px 44px -20px rgba(0, 59, 49, 0.16);
    margin-bottom: 24px;
}


/* Each panel sticks a little lower than the last, so ~64px of the previous
     panel stays visible ("peeking") above the one currently in view. */

.industry-panel:nth-of-type(1) {
    top: 90px;
}

.industry-panel:nth-of-type(2) {
    top: 122px;
}

.industry-panel:nth-of-type(3) {
    top: 154px;
}

.industry-panel:nth-of-type(4) {
    top: 186px;
}

.industry-panel:nth-of-type(5) {
    top: 218px;
}

.industry-panel:nth-of-type(6) {
    top: 250px;
}

@media(max-width:800px) {
    .industry-panel {
        grid-template-columns: 1fr;
        min-height: auto;
        position: relative !important;
        top: 0 !important;
    }
}

.industry-visual {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    background-size: cover;
    background-position: center;
}

.industry-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 59, 49, 0.55), rgba(0, 8, 26, 0.75));
    z-index: 1;
}

.industry-visual .tag {
    position: absolute;
    top: 24px;
    left: 24px;
    font-family: 'IBM Plex Mono';
    font-size: 11px;
    color: #7FCBB4;
    letter-spacing: .08em;
    text-transform: uppercase;
    z-index: 2;
}

.industry-visual .num {
    position: absolute;
    bottom: 20px;
    right: 24px;
    font-family: 'Manrope';
    font-size: 64px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.16);
    z-index: 2;
}

.industry-copy {
    padding: 56px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media(max-width:800px) {
    .industry-copy {
        padding: 36px 24px;
    }
}

.industry-copy h3 {
    font-size: 28px;
    margin-bottom: 14px;
}

.industry-copy p {
    color: var(--muted);
    font-size: 15.5px;
    margin-bottom: 20px;
    max-width: 440px;
}

.industry-copy ul {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.industry-copy ul li {
    font-size: 14px;
    color: var(--ink-soft);
    padding-left: 24px;
    position: relative;
}

.industry-copy ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 15px;
    height: 15px;
    background: var(--navy);
    clip-path: polygon(9% 43%, 26% 27%, 42% 55%, 76% 15%, 92% 30%, 44% 82%);
}


/* ===== CASE STUDIES ===== */


/* Ratio nudged 0.85/1.15 -> 0.9/1.1 (~45/55) for the Real Estate Workflow
     final-conversion pass - keeps the workflow visual dominant while giving
     the copy column a touch more breathing room (target: content 42-46%,
     visual 54-58%). */

.case-hero {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 52px;
    align-items: center;
    margin-bottom: 22px;
}

@media(max-width:900px) {
    .case-hero {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.case-hero .brand {
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 22px;
}

.case-hero .kicker {
    font-family: 'IBM Plex Mono';
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 16px 0 14px;
}

.case-hero .quote {
    font-size: 18px;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 52ch;
}

.case-hero .person {
    margin-top: 24px;
    font-size: 13.5px;
    color: var(--muted);
    font-weight: 600;
}

.case-hero .person span {
    color: var(--ink);
}

.case-media {
    aspect-ratio: 16/10;
    background: var(--navy);
    display: flex;
    align-items: flex-end;
    padding: 22px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}


/* Video slot placeholder. No play affordance until a real video exists. */

.case-media[data-video-slot] {
    background: linear-gradient(150deg, var(--navy) 0%, #062b44 100%);
    cursor: default;
}

.case-media[data-video-slot]::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 216, 161, 0.28), transparent 70%);
    pointer-events: none;
}

.case-media-badge {
    position: absolute;
    top: 22px;
    left: 22px;
    font-family: 'IBM Plex Mono';
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7FCBB4;
    border: 1px solid rgba(127, 203, 180, 0.45);
    border-radius: 999px;
    padding: 5px 12px;
}

.case-headline {
    font-family: 'Manrope';
    font-size: clamp(21px, 2.4vw, 27px);
    line-height: 1.28;
    margin: 4px 0 14px;
    color: var(--ink);
}

.case-cta {
    color: var(--navy);
    font-weight: 700;
}

.case-cta:hover {
    text-decoration: underline;
}

.case-media .label {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.case-small-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

@media(max-width:720px) {
    .case-small-grid {
        grid-template-columns: 1fr;
    }
}

.case-small {
    background: var(--navy);
    padding: 28px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    border-radius: 4px;
}

.case-small h3,
.case-small h4 {
    font-family: 'Manrope';
    font-size: 19px;
    color: #fff;
    margin-bottom: 8px;
}

.case-small p {
    font-size: 13.5px;
    color: #B9C4DC;
    margin-bottom: 14px;
}

.case-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.case-tags span {
    font-family: 'IBM Plex Mono';
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #7FCBB4;
    border: 1px solid var(--line-dark);
    padding: 4px 10px;
}


/* ===== STATS ROW — simple, no cards ===== */

.badge-band {
    text-align: center;
}

.badge-band h2 {
    font-size: clamp(26px, 3.2vw, 38px);
}

.stat-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 48px;
}

.stat-item {
    flex: 1 1 160px;
    padding: 0 32px;
    border-left: 1px solid var(--line);
}

.stat-item:first-child {
    border-left: none;
}

.stat-item .v {
    font-family: 'Manrope';
    font-size: 34px;
    font-weight: 700;
    color: var(--ink);
}

.stat-item .l {
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px;
}

@media(max-width:720px) {
    .stat-item {
        border-left: none;
        border-top: 1px solid var(--line);
        padding: 20px 12px 0;
        flex: 1 1 40%;
    }
}


/* ===== BLOG TEASER ===== */

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

@media(max-width:860px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

.blog-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0;
    display: block;
    transition: all .2s ease;
    overflow: hidden;
}

.blog-card:hover {
    border-color: var(--navy);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -18px rgba(0, 59, 49, 0.3);
}

.blog-card:hover .blog-thumb img {
    transform: scale(1.04);
}

.blog-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--paper-alt);
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    display: block;
}

.blog-body {
    padding: 24px 26px 26px;
}

.blog-body .blog-tag {
    margin-bottom: 14px;
}

.blog-tag {
    font-family: 'IBM Plex Mono';
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--navy);
    background: rgba(30, 79, 214, 0.08);
    border: 1px solid rgba(30, 79, 214, 0.2);
    border-radius: 999px;
    padding: 5px 12px;
    display: inline-block;
    margin-bottom: 16px;
}

.blog-card h3 {
    font-size: 18px;
    line-height: 1.32;
    margin-bottom: 10px;
}

.blog-card p {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 18px;
}

.blog-read {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
}


/* ===== REVIEWS — slider ===== */

.review-slider {
    position: relative;
}

.review-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0 -2px;
    padding: 2px;
}

.review-viewport::-webkit-scrollbar {
    display: none;
}

.review-track {
    display: flex;
    gap: 20px;
}

.review-slide {
    flex: 0 0 calc((100% - 40px)/3);
    scroll-snap-align: start;
    min-width: 0;
}

@media(max-width:860px) {
    .review-slide {
        flex: 0 0 86%;
    }
}

.review-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 36px;
}

.review-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    transition: .18s ease;
    flex-shrink: 0;
}

.review-arrow svg {
    width: 18px;
    height: 18px;
}

.review-arrow:hover {
    border-color: var(--navy);
    color: var(--navy);
    background: var(--paper-alt);
}

.review-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.review-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: all .18s ease;
}

.review-dot.active {
    background: var(--navy);
    width: 24px;
    border-radius: 4px;
}

.review-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.review-stars {
    display: flex;
    gap: 3px;
    color: #F2A93B;
    margin-bottom: 16px;
}

.review-stars svg {
    width: 16px;
    height: 16px;
}

.review-card p.review-text {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 20px;
}

.review-person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.review-person .name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.review-person .role {
    font-size: 12px;
    color: var(--muted);
}


/* ===== PRICING ===== */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 36px;
}

@media(max-width:900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

.price-card {
    background: var(--paper);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
}

.price-card.featured {
    background: var(--navy);
    color: #fff;
    position: relative;
}

.price-card.featured .price-note,
.price-card.featured .price-sub {
    color: #B9C4DC;
}

.price-card.featured h3 {
    color: #fff;
}

.price-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #F2B94A, #D98A1F);
    color: #3A2405;
    font-size: 11px;
    font-weight: 600;
    font-family: 'IBM Plex Mono';
    padding: 6px 14px;
    border-radius: 0 4px 0 4px;
}

.price-card h3 {
    font-size: 19px;
    font-weight: 700;
}

.price-sub {
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 6px;
}

.price-amount {
    font-family: 'Manrope';
    font-size: 40px;
    font-weight: 700;
    margin: 22px 0 2px;
}

.price-amount span {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
}

.price-card.featured .price-amount span {
    color: #B9C4DC;
}

.price-note {
    font-size: 12px;
    color: var(--muted);
    font-family: 'IBM Plex Mono';
    margin-bottom: 22px;
}

.price-feats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 14px;
    flex-grow: 1;
    margin-bottom: 26px;
}

.price-feats li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.price-feats li::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(30, 79, 214, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4FD6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

.price-card.featured .price-feats li::before {
    background: rgba(255, 255, 255, 0.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
}

.price-footnote {
    max-width: 840px;
    margin: 0 auto;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 24px;
    margin-top: 0;
}

.price-footnote strong {
    color: var(--ink);
}

.footnote-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media(max-width:720px) {
    .footnote-grid {
        grid-template-columns: 1fr;
    }
}

.footnote-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media(max-width:900px) {
    .footnote-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:640px) {
    .footnote-grid-3 {
        grid-template-columns: 1fr;
    }
}

.footnote-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 28px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.footnote-card .icon-pill {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(30, 79, 214, 0.08);
    border: 1px solid rgba(30, 79, 214, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footnote-card svg {
    width: 19px;
    height: 19px;
    color: var(--navy);
    flex-shrink: 0;
}

.footnote-card:nth-child(2) .icon-pill {
    background: var(--teal-soft);
    border-color: var(--teal-line);
}

.footnote-card:nth-child(2) svg {
    color: var(--teal);
}

.footnote-card h3,
.footnote-card h4 {
    font-size: 15px;
    margin-bottom: 6px;
}

.footnote-card p {
    font-size: 13.5px;
    color: var(--muted);
}

.footnote-card p strong {
    color: var(--ink);
}


/* ===== FAQ ===== */

.faq-item {
    border-top: 1px solid var(--line);
    padding: 22px 0;
    cursor: pointer;
}

.faq-item:last-child {
    border-bottom: 1px solid var(--line);
}

.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 16px;
    gap: 20px;
}


/* min-width:0 lets the question wrap instead of pushing the "+" past the
     container's right edge on narrow screens. */

.faq-q>span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.faq-q .plus {
    font-family: 'IBM Plex Mono';
    color: var(--navy);
    font-size: 20px;
    transition: transform .2s;
    flex-shrink: 0;
}

.faq-item.open .plus {
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    font-size: 14.5px;
    color: var(--muted);
}

.faq-item.open .faq-a {
    max-height: 220px;
    margin-top: 12px;
}


/* ===== FINAL CTA ===== */

.final-cta {
    background: radial-gradient(circle 500px at 90% 10%, rgba(59, 107, 255, 0.35), transparent 60%), radial-gradient(circle 500px at 5% 100%, rgba(30, 79, 214, 0.3), transparent 60%), linear-gradient(160deg, #002821, #003B31);
    padding: 72px 48px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

@media(max-width:720px) {
    .final-cta {
        padding: 48px 24px;
    }
}

.final-cta h2 {
    color: #fff;
    font-size: clamp(28px, 3.8vw, 44px);
}

.final-cta p {
    color: #B9C4DC;
    margin-top: 14px;
    font-size: 16px;
}

.final-cta .cta-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 32px;
    flex-wrap: wrap;
}


/* CTA -> footer gap. Second reduction pass (owner still saw too much
     whitespace after the first). The pure-whitespace pair (#contact
     padding-bottom + #site-footer margin-top) is trimmed harder than the
     footer's own padding-top, which carries the gradient border accent and
     content breathing room. Desktop combined: 64+56+60=180 -> 44+36+56=136
     (~-24%). Mobile: 40+36+40=116 -> 28+22+38=88 (~-24%, tighter still).
     Not glued — still a clear, compact transition. Scoped to #contact. */

#contact {
    padding-bottom: 44px;
}

@media(max-width:720px) {
    #contact {
        padding-bottom: 28px;
    }
}

.cta-wave-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    z-index: 0;
    pointer-events: none;
    opacity: .7;
    padding-bottom: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 100%);
    mask-image: linear-gradient(180deg, transparent, #000 35%, #000 100%);
}

.cta-wave-bg span {
    width: 4px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #5C82FF, rgba(59, 107, 255, 0.08));
    transform-origin: bottom;
    animation: wave 1.6s ease-in-out infinite;
}

.final-cta .cta-content {
    position: relative;
    z-index: 1;
}


/* ===== FOOTER — full nav restored ===== */


/* min-height reserves space for the async-injected partial (CLS guard). It is
     deliberately below the real rendered height so it never leaves dead space. */


/* Top spacing trimmed alongside #contact's bottom padding above (second
     pass). margin-top cut hardest (pure whitespace); padding-top only
     nudged (holds the gradient border accent + content air). */

#site-footer {
    background: linear-gradient(180deg, var(--paper-alt) 0%, #EFEADF 100%);
    color: var(--ink-soft);
    padding: 56px 0 26px;
    margin-top: 36px;
    border-top: 1px solid var(--line);
    position: relative;
    min-height: 400px;
}

@media(max-width:720px) {
    #site-footer {
        padding: 38px 0 22px;
        margin-top: 22px;
    }
}

#site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 179, 136, 0.4), transparent);
}


/* ==========================================================================
     FOOTER — Phase 2C redesign
     Phase 2B's six columns were logically complete but visually dense. Now a
     substantial brand area on the left and FOUR logical columns on the right,
     with industries demoted to a single row beneath rather than owning a column.
     ========================================================================== */

.footer-top {
    display: grid;
    grid-template-columns: 1fr 2.25fr;
    gap: 64px;
    padding-bottom: 40px;
}

.footer-brand-col {
    min-width: 0;
}

.footer-statement {
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 280px;
    margin-bottom: 20px;
}

.footer-cta {
    margin-bottom: 20px;
}

.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 26px;
}


/* Groups are <details open>: links are in the HTML and visible without JS,
     so they stay crawlable. footer.js only collapses them on small screens. */

.footer-group {
    min-width: 0;
}

.footer-group-title {
    list-style: none;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}

.footer-group-title::-webkit-details-marker {
    display: none;
}

.footer-chev {
    display: none;
}


/* Industries: one quiet row under the directory instead of a whole column. */

.footer-industries {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
}

.footer-industries-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.footer-industries-label:hover {
    color: var(--navy);
}

.footer-industries a {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-soft);
}

.footer-industries a:hover {
    color: var(--navy);
}


/* --------------------------------------------------------------------------
     Footer, tablet and below
     -------------------------------------------------------------------------- */

@media(max-width:1024px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .footer-cols {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px 18px;
    }
}


/* --------------------------------------------------------------------------
     Footer, mobile (<=767px): brand full width, then collapsible groups.
     <details>/<summary> gives native button semantics, keyboard operation and
     browser-managed expanded state with no JS and no ARIA to keep in sync.
     -------------------------------------------------------------------------- */

@media(max-width:767px) {
    .footer-top {
        gap: 8px;
        padding-bottom: 8px;
    }
    .footer-statement {
        max-width: none;
    }
    .footer-cols {
        display: block;
    }
    .footer-group {
        border-top: 1px solid var(--line);
    }
    .footer-group:last-of-type {
        border-bottom: 1px solid var(--line);
    }
    .footer-group-title {
        cursor: pointer;
        margin-bottom: 0;
        padding: 16px 2px;
        min-height: 52px;
        font-size: 13px;
        letter-spacing: .04em;
        color: var(--ink);
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        text-transform: none;
    }
    .footer-chev {
        display: block;
        width: 10px;
        height: 10px;
        flex-shrink: 0;
        border-right: 2px solid var(--muted);
        border-bottom: 2px solid var(--muted);
        transform: rotate(45deg);
        transition: transform .2s ease;
        margin-right: 4px;
    }
    .footer-group[open] .footer-chev {
        transform: rotate(-135deg);
    }
    .footer-group ul {
        padding: 0 0 14px;
        gap: 2px;
    }
    .footer-group li a {
        display: flex;
        align-items: center;
        padding: 11px 2px;
        min-height: 44px;
        font-size: 14px;
        line-height: 1.65;
    }
    .footer-industries {
        gap: 10px 16px;
        padding: 20px 0;
    }
    .footer-industries a {
        padding: 10px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        font-size: 14px;
        line-height: 1.65;
    }
}

.footer-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.footer-mark {
    width: 28px;
    height: 28px;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.footer-brand-row span {
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
}

.footer-col p,
.footer-brand-col p {
    font-size: 13.5px;
    color: var(--muted);
    max-width: 250px;
    margin-bottom: 20px;
}

.footer-col h5 {
    font-family: 'IBM Plex Mono';
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 16px;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col a,
.footer-group li a {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-soft);
}

.footer-group li a:hover {
    color: var(--navy);
}

.footer-group ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col a:hover {
    color: var(--navy);
}


/* Roomier tap targets on touch screens. The footer email measured 34px in
     the browser, under the ~44px target, so it is given real vertical padding. */

@media(max-width:767px) {
    .footer-col ul {
        gap: 2px;
    }
    .footer-col li a {
        display: inline-block;
        padding: 7px 0;
    }
    .footer-email a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 0;
        font-size: 15px;
    }
    .footer-legal a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 6px 0;
        font-size: 13.5px;
    }
    .footer-operator-link {
        min-height: 0;
    }
}


/* Two semantic groups: operator/copyright identity, and legal navigation.
     The inert "hindi | English" selector was removed - there is no Hindi site. */

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 16px 32px;
    font-size: 13px;
    color: var(--muted);
}

.footer-operator {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-copyright {
    font-size: 13px;
    color: var(--muted);
}

.footer-operator-note {
    font-size: 12.5px;
    color: var(--muted);
}

.footer-operator-link {
    color: var(--ink-soft);
    font-weight: 600;
    text-decoration: none;
}

.footer-operator-link:hover {
    color: var(--navy);
    text-decoration: underline;
}

.footer-operator-link:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
    border-radius: 2px;
    color: var(--navy);
}

.footer-legal {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
}

.footer-legal a {
    color: var(--ink-soft);
    font-size: 13px;
}

.footer-legal a:hover {
    color: var(--navy);
}

@media(max-width:720px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        text-align: left;
    }
    .footer-legal {
        gap: 14px;
    }
}

.social-row {
    display: flex;
    gap: 8px;
}

.social-row a {
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.social-row a:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.social-row a svg {
    width: 20px;
    fill: #807f7d;
}

.social-row a svg path {
    fill: #807f7d;
}

.social-row a:hover svg path {
    fill: #fff;
}


/* ===== BOOK A DEMO MODAL ===== */

.demo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 20, 15, 0.55);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}

.demo-modal-overlay.open {
    display: flex;
}

body.modal-open {
    overflow: hidden;
}

.demo-modal {
    background: #fff;
    width: 100%;
    max-width: 840px;
    border-radius: 14px;
    position: relative;
    box-shadow: 0 40px 90px -30px rgba(0, 20, 15, 0.45);
    max-height: 90vh;
    overflow-y: auto;
    animation: demoModalIn .22s ease;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
}

@keyframes demoModalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media(max-width:720px) {
    .demo-modal {
        grid-template-columns: 1fr;
        max-width: 460px;
    }
}


/* Left panel — contact details, testimonial, social links */

.demo-modal-aside {
    background: linear-gradient(160deg, #002821 0%, #003B31 70%, #00281F 100%);
    color: #fff;
    padding: 36px 32px;
    border-radius: 14px 0 0 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    position: relative;
    overflow: hidden;
}

@media(max-width:720px) {
    .demo-modal-aside {
        border-radius: 14px 14px 0 0;
    }
}

.demo-modal-aside::before {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 107, 255, 0.35), transparent 70%);
    pointer-events: none;
}

.demo-modal-aside h3,
.demo-modal-aside h4 {
    color: #fff;
    font-size: 19px;
    margin-top: 10px;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

.modal-contact-row {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 16px;
    position: relative;
    z-index: 1;
}

.modal-contact-row svg {
    width: 17px;
    height: 17px;
    color: #7FCBB4;
    flex-shrink: 0;
}

.modal-contact-row a {
    font-size: 13.5px;
    color: #E4E9F4;
    font-weight: 500;
}

.modal-contact-row a:hover {
    color: #fff;
    text-decoration: underline;
}

.modal-quote {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    padding: 22px 0;
}

.modal-quote svg {
    width: 26px;
    height: 20px;
    color: #00D8A1;
    margin-bottom: 10px;
}

.modal-quote p {
    font-size: 13.5px;
    color: #D6DEEF;
    line-height: 1.6;
    font-style: italic;
}

.modal-quote-person {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.modal-quote-person .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00D8A1, #00B388);
    color: #00281F;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.modal-quote-person .who {
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
}

.modal-quote-person .role {
    font-size: 11px;
    color: #9FB4E0;
}

.modal-next-steps .modal-next-title {
    font-size: 12px;
    font-family: 'IBM Plex Mono';
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7FCBB4;
    font-style: normal;
    margin-bottom: 10px;
}

.modal-next-steps ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal-next-steps li {
    font-size: 13px;
    color: #D6DEEF;
    line-height: 1.55;
    padding-left: 16px;
    position: relative;
}

.modal-next-steps li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00D8A1;
}

.modal-social-row {
    display: flex;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.modal-social-row a {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    transition: .18s ease;
}

.modal-social-row a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}


/* Right panel — the actual form */

.demo-modal-main {
    padding: 36px 32px;
}

@media(max-width:520px) {
    .demo-modal-main {
        padding: 28px 22px;
    }
}

@media(max-width:720px) {
    .demo-modal-aside {
        padding: 28px 24px;
    }
}

.demo-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-soft);
    transition: .18s ease;
    z-index: 2;
}

.demo-modal-close:hover {
    background: var(--paper-alt);
    color: var(--ink);
}

.demo-modal h3 {
    font-size: 23px;
    margin-top: 10px;
    line-height: 1.2;
}

.demo-modal p.sub {
    font-size: 14px;
    color: var(--muted);
    margin-top: 8px;
    margin-bottom: 26px;
}

.demo-modal .live-field {
    margin-bottom: 14px;
}

.demo-modal .live-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.demo-modal .live-field input,
.demo-modal .live-field select,
.demo-modal .live-field textarea {
    width: 100%;
    border: 1px solid var(--line);
    padding: 12px 14px;
    font-size: 14px;
    font-family: 'Inter';
    color: var(--ink);
    background: #fff;
    border-radius: 6px;
    resize: vertical;
}

.demo-modal .live-field input:focus,
.demo-modal .live-field select:focus,
.demo-modal .live-field textarea:focus {
    outline: none;
    border-color: var(--navy);
}

.demo-modal .live-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.demo-modal-note {
    font-size: 11.5px;
    color: var(--muted);
    font-family: 'IBM Plex Mono';
    margin-top: 14px;
    text-align: center;
}

.demo-modal-success {
    display: none;
    text-align: center;
    padding: 12px 0 4px;
}

.demo-modal-success.show {
    display: block;
}

.demo-modal-success .check {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--teal-soft);
    border: 1px solid var(--teal-line);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    color: var(--teal);
}

.demo-modal-success h3,
.demo-modal-success h4 {
    font-size: 19px;
    margin-bottom: 8px;
}

.demo-modal-success p {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 22px;
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.in {
    opacity: 1;
    transform: none;
}

 ::selection {
    background: var(--navy);
    color: #fff;
}

 :focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}


/* ===== ABOUT PAGE ===== */

.hero-simple .hero-inner {
    grid-template-columns: 1fr;
    max-width: 760px;
    padding-bottom: 70px;
}

.hero-simple .hero-ctas {
    margin-bottom: 8px;
}

.story-quote {
    font-family: 'Manrope';
    font-weight: 500;
    font-size: 20px;
    line-height: 1.55;
    letter-spacing: -.01em;
}

.placeholder-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'IBM Plex Mono';
    font-size: 11.5px;
    color: var(--amber);
    background: var(--amber-soft);
    border: 1px solid var(--amber-line);
    padding: 6px 12px;
    margin-bottom: 22px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media(max-width:860px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:520px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

.team-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px;
    text-align: center;
}

.team-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00D8A1, #007A5E);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope';
    font-weight: 800;
    font-size: 22px;
    margin: 0 auto 16px;
}

.team-card h3,
.team-card h4 {
    font-size: 15.5px;
    margin-bottom: 4px;
}

.team-card .role {
    font-family: 'IBM Plex Mono';
    font-size: 11px;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
}

.team-card p {
    font-size: 13px;
    color: var(--muted);
}

.timeline {
    position: relative;
    padding-left: 32px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--line);
}

.timeline-item {
    position: relative;
    padding-bottom: 36px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--navy);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--line);
}

.timeline-item .tl-date {
    font-family: 'IBM Plex Mono';
    font-size: 11.5px;
    color: var(--teal);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.timeline-item h3,
.timeline-item h4 {
    font-size: 17px;
    margin-bottom: 6px;
}

.timeline-item p {
    font-size: 14px;
    color: var(--muted);
    max-width: 520px;
}


/* ==================================================================
     MANGAL — PRODUCTION ADDITIONS (SEO / a11y / forms / blog / 404)
     ------------------------------------------------------------------
     Appended during the production hardening pass. The original design
     system is untouched — these rules add new features on top of it.
     ================================================================== */


/* Skip-to-content link */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--navy);
    color: #fff;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
    top: 0;
    color: #fff;
}


/* Active navigation item */

.nav-links a.active {
    color: var(--navy);
}

.nav-links a.active::after {
    content: "";
    display: block;
    height: 2px;
    width: 100%;
    background: var(--teal);
    border-radius: 2px;
    margin-top: 3px;
}

@media(max-width:940px) {
    .nav-links a.active::after {
        margin-top: 0;
    }
}


/* Honeypot field — never visible to real users */

.hp-field {
    position: absolute!important;
    left: -9999px!important;
    top: auto;
    width: 1px!important;
    height: 1px!important;
    opacity: 0!important;
    pointer-events: none!important;
}


/* Form field errors + submission status */

.field-error {
    font-size: 12px;
    color: #C0392B;
    margin-top: 5px;
    font-weight: 500;
}

.live-field input[aria-invalid="true"],
.live-field select[aria-invalid="true"],
.live-field textarea[aria-invalid="true"] {
    border-color: #C0392B;
    box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.12);
}

.form-status {
    font-size: 13.5px;
    line-height: 1.5;
    margin: 12px 0 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(0, 179, 136, 0.08);
    border: 1px solid rgba(0, 179, 136, 0.3);
    color: var(--ink);
}

.form-status[hidden] {
    display: none!important;
}

.form-status a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-status-error {
    background: rgba(192, 57, 43, 0.06);
    border-color: rgba(192, 57, 43, 0.3);
    color: #8B2A1E;
}


/* Cloudflare Turnstile host (widget injected by forms.js) */

.turnstile-host {
    margin: 4px 0 16px;
    min-height: 65px;
}

.turnstile-host iframe {
    max-width: 100%;
}


/* Footer contact line */

.footer-email {
    margin-bottom: 12px;
}

.footer-email a {
    font-size: 13.5px;
    color: var(--navy);
    font-weight: 600;
}


/* Blog article pages */

.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px;
    color: var(--muted);
    padding: 26px 0 0;
    font-family: 'IBM Plex Mono';
    letter-spacing: .02em;
}

.breadcrumbs a {
    color: var(--ink-soft);
}

.breadcrumbs a:hover {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.post-article {
    max-width: 780px;
    margin: 0 auto;
    padding-top: 34px;
}


/* Explicit resets: <header>/<footer> inside an article must not pick up any
     site-chrome behaviour (sticky, tall min-height, gradient background). */

.post-header {
    position: static;
    top: auto;
    z-index: auto;
    background: none;
    backdrop-filter: none;
    border: 0;
    min-height: 0;
    padding: 0;
    margin: 0 0 26px;
}

.post-header h1 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.18;
    margin: 16px 0 14px;
    letter-spacing: -0.02em;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    font-family: 'IBM Plex Mono';
}

.post-meta .post-author {
    color: var(--navy);
    font-weight: 600;
}

.post-featured {
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--line);
    display: block;
    margin-bottom: 34px;
}

.article-content {
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--ink-soft);
}

.article-content p {
    margin-bottom: 22px;
}

.article-content h2 {
    font-size: 24px;
    color: var(--ink);
    margin: 38px 0 14px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.article-content h3 {
    font-size: 19px;
    color: var(--ink);
    margin: 30px 0 12px;
}

.article-content ul,
.article-content ol {
    margin: 0 0 24px;
    padding-left: 22px;
}

.article-content li {
    margin-bottom: 9px;
}

.article-content blockquote {
    margin: 30px 0;
    padding: 18px 22px;
    border-left: 4px solid var(--teal);
    background: var(--paper-alt);
    border-radius: 0 10px 10px 0;
    font-size: 17px;
    color: var(--ink);
    font-style: italic;
}

.article-content a {
    color: var(--navy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-content .table-wrap {
    margin: 8px 0 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 14px 36px -28px rgba(0, 59, 49, 0.45);
}

.article-content table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.article-content thead th {
    background: linear-gradient(180deg, #003B31 0%, #00281F 100%);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.article-content thead th:first-child {
    background: linear-gradient(180deg, #00281F 0%, #001A16 100%);
    min-width: 132px;
}

.article-content tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    background: #fff;
}

.article-content tbody tr:last-child td {
    border-bottom: none;
}

.article-content tbody tr:nth-child(even) td {
    background: #F7FAF8;
}

.article-content tbody td:first-child {
    font-weight: 700;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: .01em;
    min-width: 132px;
    background: #fff;
    border-right: 1px solid var(--line);
}

.article-content tbody tr:nth-child(even) td:first-child {
    background: #F7FAF8;
}

.article-content table.compare-table thead th.is-highlight {
    background: linear-gradient(180deg, #00B388 0%, #007A5E 100%);
    color: #fff;
    box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.18);
}

.article-content table.compare-table tbody td.is-highlight {
    background: rgba(0, 179, 136, 0.08);
    color: var(--ink);
    font-weight: 600;
}

.article-content tbody tr:nth-child(even) td.is-highlight {
    background: rgba(0, 179, 136, 0.12);
}

.article-content table.compare-table .col-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.article-content table.compare-table .col-badge {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    padding: 2px 8px;
    line-height: 1.4;
}

@media(max-width:720px) {
    .article-content table {
        min-width: 560px;
        font-size: 13px;
    }
    .article-content thead th,
    .article-content tbody td {
        padding: 11px 12px;
    }
    .article-content thead th {
        white-space: normal;
    }
    .article-content thead th:first-child,
    .article-content tbody td:first-child {
        min-width: 104px;
    }
    /* Tell the reader the table pans sideways instead of leaving them guessing. */
    .article-content .table-wrap {
        position: relative;
    }
    .article-content .table-wrap::after {
        content: "Swipe to see more →";
        display: block;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 10.5px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
        padding: 8px 12px;
        border-top: 1px solid var(--line);
        background: var(--paper-alt);
        position: sticky;
        left: 0;
    }
}

.post-footer {
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    margin: 32px 0 0;
    padding: 18px 0 0;
    min-height: 0;
    position: static;
}

.post-footer::before {
    display: none;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.post-tags span {
    font-family: 'IBM Plex Mono';
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--paper-alt);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    line-height: 1.5;
}

.related-section {
    padding: 70px 0 0;
}

.post-nav {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-top: 46px;
}

.post-nav-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    padding: 12px 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    transition: .18s ease;
}

.post-nav-link:hover {
    border-color: var(--navy);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -14px rgba(0, 59, 49, 0.3);
}

@media(max-width:560px) {
    .post-nav {
        flex-direction: column;
    }
    .post-nav-link {
        text-align: center;
    }
}


/* 404 link cards */

a.footnote-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

a.footnote-card:hover {
    border-color: var(--navy);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -16px rgba(0, 59, 49, 0.25);
}

a.footnote-card h3,
a.footnote-card h4 {
    color: var(--ink);
}

.cs-section {
    padding: 100px 0;
}

.cs-section .section-head p {
    margin-top: 10px;
}


/* =========================================================
   1) AI vs HUMAN TABLE
   ========================================================= */

.cs-table-card {
    background: linear-gradient(180deg, #003B31 0%, #00564A 100%);
    border-radius: 20px;
    padding: 8px 0 0;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 59, 49, .25);
}

.cs-table {
    width: 100%;
    border-collapse: collapse;
}

.cs-table thead th {
    text-align: left;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
    font-weight: 600;
    padding: 20px 32px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.cs-table thead th:not(:first-child) {
    text-align: center;
    width: 110px;
}

.cs-table tbody td {
    padding: 18px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
}

.cs-table tbody tr:last-child td {
    border-bottom: none;
}

.cs-table tbody td:not(:first-child) {
    text-align: center;
}

.cs-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.cs-check svg {
    width: 16px;
    height: 16px;
    stroke: #3ddc97;
}

.cs-table-foot {
    padding: 22px 32px 26px;
    font-weight: 700;
    color: #fff;
    font-size: 1.02rem;
    background: #003b31;
    text-align: center;
}

@media (max-width:640px) {
    .cs-table thead th,
    .cs-table tbody td {
        padding: 14px 16px;
        font-size: .9rem;
    }
    .cs-table thead th:not(:first-child) {
        width: 64px;
    }
    .cs-table-foot {
        padding: 20px 16px 22px;
        font-size: .95rem;
    }
}


/* =========================================================
   2) DEPLOYMENT STEPS
   ========================================================= */

.cs-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
    margin-top: 56px;
}

.cs-step {
    padding: 28px 26px;
    border: 1px solid #E6E2D8;
    border-radius: 16px;
    background: #fff;
}

.cs-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #003B31;
    margin-bottom: 16px;
}

.cs-step-icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
}

.cs-step h3,
.cs-step h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0B1B17;
    margin: 0 0 8px;
}

.cs-step p {
    font-size: .94rem;
    line-height: 1.55;
    color: #5B6B67;
    margin: 0;
}

@media (max-width:900px) {
    .cs-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:640px) {
    .cs-steps {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 40px;
    }
}


/* =========================================================
   LEAD QUALIFICATION PAGE — additional styles
   Covers the 2 text-comparison tables that don't exist in the
   base template ("Captured during the conversation" and
   "Manual vs Mangal"). Reuses .wrap, .eyebrow, .section-head
   and the site's palette/font sizes so it matches the rest
   of the page.
   ========================================================= */

.lq-section {
    background: #d6d3ce;
}

.lq-section .section-head p {
    margin-top: 10px;
}

.lq-compare-card {
    background: #fff;
    border: 1px solid #E6E2D8;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .04);
}

.lq-compare-table {
    width: 100%;
    border-collapse: collapse;
}

.lq-compare-table thead th {
    text-align: left;
    font-family: 'IBM Plex Mono', monospace;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #5B6B67;
    font-weight: 600;
    background: #F7F5EF;
    padding: 18px 32px;
    border-bottom: 1px solid #E6E2D8;
}

.lq-compare-table tbody td {
    padding: 18px 32px;
    border-bottom: 1px solid #E6E2D8;
    color: #0B1B17;
    font-size: 1rem;
    line-height: 1.5;
    vertical-align: top;
}

.lq-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.lq-compare-table tbody td:first-child {
    color: #5B6B67;
    width: 36%;
}

.lq-compare-table tbody td:last-child {
    font-weight: 600;
}

.cs-step b {
    margin-top: 20px;
    display: block;
}

.cs-step ul {
    margin-left: 16px;
}

.cs-step ul li {
    list-style: disc;
    font-size: 15px;
}

@media (max-width:640px) {
    .lq-compare-table thead th,
    .lq-compare-table tbody td {
        padding: 14px 16px;
        font-size: .9rem;
    }
}


/* ==========================================================================
     PREMIUM PRODUCT SCREENSHOT STAGE  (Final launch patch, Part C)
     --------------------------------------------------------------------------
     Reusable presentation for REAL CallMangal product screenshots — one
     component, used everywhere a screenshot appears (homepage, /visual-
     builder, and future Call Intelligence / Telephony / MCP / Reseller
     Dashboard shots). Presentation only: never fabricates UI, never adds
     browser chrome that isn't actually in the screenshot, never blurs the
     foreground (redaction of sensitive data happens at the source asset,
     before it ever reaches this component).

     Structure:
       .shot-stage                 outer frame - padding, radius, dark ground
         .shot-stage-frame          16:10 (or 16:9 with -sm) layout box
           .shot-backdrop            decorative, aria-hidden: the SAME real
                                      image, enlarged + blurred, low opacity
           .shot-foreground          the SAME real image, sharp, ~82% width
         .shot-caption               plain text label (no fake window chrome)

     Both backdrop and foreground point at the identical asset URL, so the
     browser's HTTP cache serves the second one instantly - no duplicate
     download.

     To publish a real screenshot, replace the inner .shot-pending block
     with a .shot-backdrop + .shot-foreground pair (see visual-builder.html
     for the exact markup) using the real asset at:
       /assets/images/product/<name>.png
     ========================================================================== */

.shot-stage {
    position: relative;
    background: linear-gradient(150deg, var(--navy-deep) 0%, #053b30 100%);
    border-radius: 20px;
    padding: clamp(18px, 3.6vw, 34px);
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 59, 49, 0.5);
}

.shot-stage::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 216, 161, 0.16), transparent 70%);
    pointer-events: none;
}

.shot-stage-frame {
    position: relative;
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shot-stage-sm .shot-stage-frame {
    aspect-ratio: 16/9;
}

.shot-backdrop {
    position: absolute;
    inset: -14%;
    background-size: cover;
    background-position: center;
    filter: blur(32px) saturate(0.85);
    opacity: 0.5;
    transform: scale(1.08);
}

.shot-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, rgba(0, 40, 33, 0.55), rgba(0, 40, 33, 0.28));
}

.shot-foreground {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 26px 54px -20px rgba(0, 0, 0, 0.5);
    display: block;
}


/* When product-video.js swaps the screenshot for a real <video>, it keeps
     the .shot-foreground class so the framing/shadow/radius are identical.
     object-fit guards against a video whose intrinsic ratio differs from its
     width/height attrs; the dark backing matches the stage while metadata
     loads. */

video.shot-foreground {
    background: var(--navy-deep);
    object-fit: contain;
}

.shot-caption {
    margin-top: 14px;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.shot-pending {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 24px;
    color: #E4E9F4;
}

.shot-pending svg {
    width: 26px;
    height: 26px;
    color: #7FCBB4;
    opacity: .85;
}

.shot-pending b {
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
}

.shot-pending em {
    font-family: 'IBM Plex Mono', monospace;
    font-style: normal;
    font-size: 11px;
    color: #7E93B5;
}

@media(max-width:1024px) {
    .shot-foreground {
        width: 88%;
    }
}

@media(max-width:640px) {
    .shot-stage {
        padding: 14px;
        border-radius: 16px;
    }
    .shot-foreground {
        width: 96%;
        border-radius: 10px;
    }
    .shot-caption {
        font-size: 10.5px;
    }
}


/* ==========================================================================
     VISUAL BUILDER  (Phase 2A)
     ========================================================================== */


/* ==========================================================================
     VISUAL AGENT BUILDER  (Phase 2C.1 redesign)
     Four benefits instead of six, icons in their own fixed-size tile, and a
     calm light media frame so the reserved screenshot slot reads as secondary
     rather than dominating an unfinished-looking section.

     NOTE: the previous rule was `.builder-feature h4 svg`. Phase 2C promoted
     these headings h4 -> h3 for heading order, which silently killed that
     selector - the icons lost their sizing and rendered ~100px tall. Icons now
     live in .builder-feature-icon, independent of the heading level.
     ========================================================================== */

.builder-band {
    background: var(--paper-alt);
}

.builder-grid {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 56px;
    align-items: center;
}

@media(max-width:1024px) {
    .builder-grid {
        gap: 44px;
    }
}

@media(max-width:900px) {
    .builder-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.builder-copy {
    min-width: 0;
}


/* Capped so the intended two-line break holds on desktop instead of
     spilling the em dash onto a third line. */

.builder-copy h2 {
    font-size: clamp(25px, 2.55vw, 33px);
    margin-top: 14px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.builder-copy .lead {
    margin-top: 16px;
    font-size: 16px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 520px;
}

.builder-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 32px;
    margin-top: 40px;
}

@media(max-width:520px) {
    .builder-features {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.builder-feature {
    min-width: 0;
}

.builder-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    margin-bottom: 12px;
    background: var(--teal-soft);
    border: 1px solid var(--teal-line);
    color: var(--navy);
}

.builder-feature-icon svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.builder-feature h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    margin-bottom: 6px;
    color: var(--ink);
    line-height: 1.3;
}

.builder-feature p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.65;
}

.builder-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 40px;
}


/* Media frame: homepage's visual-builder screenshot now uses the shared
     .shot-stage system (see PREMIUM PRODUCT SCREENSHOT STAGE above) instead
     of its own .builder-shot-* rules - same component everywhere. */

.builder-media {
    min-width: 0;
}


/* Workflow chain (build -> test -> launch, and the node sequence) */

.flow-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
    margin-top: 16px;
}

.flow-step {
    flex: 1 1 190px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 20px 18px;
    position: relative;
}

.flow-step .n {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 8px;
    display: block;
}

.flow-step h3,
.flow-step h4 {
    font-family: 'Manrope', sans-serif;
    font-size: 15.5px;
    margin-bottom: 6px;
    color: var(--ink);
}

.flow-step p {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.6;
}


/* Compact CALL -> UNDERSTAND -> DETECT -> FILTER -> FOLLOW UP stepper.
     Decorative label chain, not a control — aria-hidden on the wrapper. */

.intel-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 24px 0 4px;
}

.intel-flow span {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--teal-soft);
    border: 1px solid var(--teal-line);
    border-radius: 6px;
    padding: 6px 11px;
}

.intel-flow i {
    font-style: normal;
    color: var(--muted);
    opacity: .55;
    font-size: 13px;
}


/* /industries — labelled problem/workflow/outcome/next-step blocks. */

.problem-flow {
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.problem-flow dt {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 3px;
}

.problem-flow dd {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.6;
}


/* /industries — jump nav to each industry section. */

.industry-jump {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.industry-jump a {
    display: inline-flex;
    align-items: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 11px 18px;
}

.industry-jump a:hover {
    border-color: var(--teal-line);
    background: var(--teal-soft);
}

@media(max-width:560px) {
    .industry-jump {
        gap: 8px;
    }
    .industry-jump a {
        padding: 10px 14px;
        font-size: 12px;
    }
}


/* /integrations, /telephony — clean text provider cards. No logos are
     sourced/licensed for these providers, so a plain, honest card is used
     instead of a logo wall. */

.provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.provider-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.provider-card .name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

.provider-card .tag {
    align-self: flex-start;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--teal);
    background: var(--teal-soft);
    border: 1px solid var(--teal-line);
    border-radius: 999px;
    padding: 4px 10px;
}

@media(max-width:560px) {
    .provider-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Alternating copy/screenshot rows on the deep-dive pages */

.shot-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 80px;
}

.shot-row:last-child {
    margin-bottom: 0;
}

.shot-row.reverse .shot-row-copy {
    order: 2;
}

@media(max-width:960px) {
    .shot-row {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 56px;
    }
    .shot-row.reverse .shot-row-copy {
        order: 0;
    }
}

.shot-row-copy h3 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(20px, 2.4vw, 27px);
    line-height: 1.25;
    margin: 12px 0 14px;
    color: var(--ink);
}

.shot-row-copy p {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.7;
}

.shot-row-copy ul {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    list-style: none;
    padding: 0;
}

.shot-row-copy li {
    font-size: 14px;
    color: var(--muted);
    padding-left: 20px;
    position: relative;
    line-height: 1.55;
}

.shot-row-copy li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--teal);
}


/* Reseller chain diagram */

.chain {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 520px;
    margin: 0 auto;
}

.chain-node {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 22px;
    text-align: center;
}

.chain-node.is-brand {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.chain-node.is-brand strong,
.chain-node.is-brand span {
    color: #fff;
}

.chain-node strong {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: var(--ink);
}

.chain-node span {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}

.chain-arrow {
    text-align: center;
    color: var(--teal);
    font-size: 17px;
    line-height: 1;
}


/* Ready for the real estate walkthrough video. Applied when the
     [data-video-slot] placeholder is replaced with a <video> or an embed;
     keeps the same 16:10 frame the placeholder occupies today. */

.case-media-video,
.case-media iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: cover;
}


/* ==========================================================================
     PHASE 2C — MOBILE POLISH
     Fixes found by real browser measurement (tools/visual-qa.py) rather than
     CSS review. Each block records the measured defect it fixes.
     ========================================================================== */


/* --------------------------------------------------------------------------
     1. Feature rows overflowed and were CLIPPED (not scrollable) on phones.
     Measured at 360px: .feature-row was 320px wide but its `1fr` column
     computed to 392px, because `1fr` is minmax(auto,1fr) and the auto minimum
     is the item's min-content — which .mockup-card's 3-up tile grid forced up
     to 392px. overflow:hidden then cut the copy off.
     min-width:0 lets the column actually shrink; the tile grid reflows.
     Affected: homepage and /use-cases at 360-390px.
     -------------------------------------------------------------------------- */

.feature-row>* {
    min-width: 0;
}

.feature-copy {
    min-width: 0;
}

@media(max-width:900px) {
    .feature-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        margin-bottom: 64px;
    }
    .feature-row .mockup-card {
        max-width: 100%;
    }
}

@media(max-width:560px) {
    .mockup-card {
        padding: 16px;
    }
    .mockup-grid {
        gap: 8px;
    }
    .mockup-tile {
        padding: 10px 8px;
    }
    .mockup-tile .v {
        font-size: 16px;
    }
    .feature-copy h3 {
        font-size: clamp(20px, 5.4vw, 26px);
    }
}


/* --------------------------------------------------------------------------
     2. "CallMangal in Short" was not mobile friendly.
     Measured at 390px: .stat-item used flex:1 1 40%, so the five items sized to
     their own content — widths came out 350 / 167 / 183 / 154 / 196px, columns
     never lined up, and the 34px values broke mid-phrase ("3 Call / Modes",
     "CRM + / WhatsApp"). Now an intentional, even 2-column grid with a value
     size that scales, so nothing wraps awkwardly.
     -------------------------------------------------------------------------- */

@media(max-width:720px) {
    .stat-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        margin-top: 36px;
        border-top: 1px solid var(--line);
    }
    .stat-item {
        border-left: none;
        border-top: none;
        border-bottom: 1px solid var(--line);
        padding: 20px 14px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        text-align: center;
    }
    /* Vertical rule between the two columns only. */
    .stat-item:nth-child(odd) {
        border-right: 1px solid var(--line);
    }
    /* An odd final item spans the full row instead of leaving a gap. */
    .stat-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        border-right: none;
    }
    .stat-item .v {
        font-size: clamp(18px, 5.2vw, 26px);
        line-height: 1.2;
    }
    .stat-item .l {
        font-size: 12.5px;
        margin-top: 8px;
        line-height: 1.5;
    }
}

@media(max-width:380px) {
    .stat-item {
        padding: 18px 10px;
    }
    .stat-item .v {
        font-size: clamp(17px, 5vw, 22px);
    }
}


/* --------------------------------------------------------------------------
     3. Copy that measured below a readable floor on mobile.
     .live-note was 11px and .demo-note / .price-note 12px. These are real
     sentences, not uppercase micro-labels, so they are raised rather than left
     small. Body copy is not reduced anywhere to make content fit.
     -------------------------------------------------------------------------- */

.live-note {
    font-size: 12.5px;
}

.demo-note {
    font-size: 13px;
}

.price-note {
    font-size: 13px;
}

@media(max-width:560px) {
    .live-note,
    .demo-note,
    .price-note {
        font-size: 13px;
    }
}


/* --------------------------------------------------------------------------
     4. Mobile dropdown links measured 39px tall — under the ~44px tap target.
     -------------------------------------------------------------------------- */

@media(max-width:1024px) {
    .nav-drop-menu a {
        padding: 14px 2px 14px 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .nav-drop-menu a:first-child {
        padding-top: 10px;
    }
    .nav-drop-menu a:last-child {
        padding-bottom: 16px;
    }
}


/* --------------------------------------------------------------------------
     5. CTA rows: on narrow screens let buttons go full width rather than
     shrink-wrap into an uneven two-up row. .btn has white-space:nowrap, so a
     long label would otherwise force horizontal overflow.
     -------------------------------------------------------------------------- */

@media(max-width:480px) {
    .hero-ctas,
    .cta-row,
    .final-cta .cta-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .hero-ctas .btn,
    .cta-row .btn,
    .final-cta .cta-row .btn {
        width: 100%;
    }
    .btn {
        white-space: normal;
    }
}


/* --------------------------------------------------------------------------
     6. Long headings on very small screens.
     -------------------------------------------------------------------------- */

@media(max-width:480px) {
    .hero h1 {
        font-size: clamp(28px, 8.2vw, 38px);
    }
    .hero p.lead {
        font-size: 16px;
    }
    .section-head h2,
    .badge-band h2 {
        font-size: clamp(23px, 6.4vw, 30px);
    }
}


/* ==========================================================================
     PHASE 2C — AFFILIATE PROGRAM
     ========================================================================== */

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: stretch;
}

@media(max-width:860px) {
    .compare-grid {
        grid-template-columns: 1fr;
    }
}

.compare-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.compare-card-alt {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.compare-tag {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--teal);
}

.compare-card-alt .compare-tag {
    color: #7FCBB4;
}

.compare-card h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    margin: 12px 0 8px;
    color: var(--ink);
}

.compare-card-alt h3 {
    color: #fff;
}

.compare-lead {
    font-size: 14.5px;
    color: var(--muted);
    margin-bottom: 20px;
}

.compare-card-alt .compare-lead {
    color: #B9C4DC;
}

.compare-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}

.compare-card li {
    position: relative;
    padding-left: 22px;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.55;
}

.compare-card-alt li {
    color: #D6DEEF;
}

.compare-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
}

.compare-card-alt li::before {
    background: #00D8A1;
}

.compare-card-alt .btn-ghost {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.compare-card-alt .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

.apply-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 34px 32px;
}

@media(max-width:560px) {
    .apply-card {
        padding: 24px 18px;
    }
}

.apply-card textarea {
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: var(--ink);
    background: #fff;
    border: 1px solid rgba(0, 59, 49, 0.14);
    border-radius: 10px;
    padding: 13px 14px;
    resize: vertical;
}

.apply-card textarea:focus {
    outline: 2px solid var(--navy);
    outline-offset: 1px;
}


/* Consent checkbox: real 44px target, label clickable, visible focus ring. */

.consent-field {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.consent-field input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 2px 0 0;
    accent-color: var(--navy);
    cursor: pointer;
}

.consent-field input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.consent-field label {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    cursor: pointer;
    font-weight: 400;
}

.terms-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.terms-list li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.terms-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--teal);
}


/* ==========================================================================
     PHASE 2C — ABOUT / COMPANY PAGE
     ========================================================================== */

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media(max-width:900px) {
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:560px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

.team-grid-core {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

@media(max-width:1100px) {
    .team-grid-core {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media(max-width:760px) {
    .team-grid-core {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:420px) {
    .team-grid-core {
        grid-template-columns: 1fr;
    }
}

.team-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.team-card-lead {
    padding: 30px 24px;
}


/* Avatar is an initials placeholder until a real headshot is supplied.
     Swap the .team-avatar div for:
       <img class="team-photo" src="/assets/images/team/<name>.jpg" alt="..." width="96" height="96"> */

.team-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--navy), #0A5344);
    color: #fff;
    margin-bottom: 16px;
}

.team-card-lead .team-avatar {
    width: 96px;
    height: 96px;
    font-size: 30px;
}

.team-photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 16px;
}

.team-card-lead .team-photo {
    width: 96px;
    height: 96px;
}

.team-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
}

.team-card-lead .team-name {
    font-size: 19px;
}

.team-role {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--teal);
    margin-top: 6px;
}

.team-desc {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 12px;
}

.team-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    min-height: 44px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    border-radius: 8px;
}

.team-link:hover {
    color: #0A66C2;
    background: var(--paper-alt);
}

.team-link:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.team-link svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.team-subhead {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 20px;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

@media(max-width:900px) {
    .story-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.story-grid p {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--ink-soft);
    margin-bottom: 18px;
}

.story-grid p:last-child {
    margin-bottom: 0;
}

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

@media(max-width:900px) {
    .pillar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:560px) {
    .pillar-grid {
        grid-template-columns: 1fr;
    }
}

.pillar {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px 24px;
    min-width: 0;
}

.pillar svg {
    width: 24px;
    height: 24px;
    color: var(--navy);
    margin-bottom: 14px;
}

.pillar h3,
.pillar h4 {
    font-family: 'Manrope', sans-serif;
    font-size: 16.5px;
    margin-bottom: 8px;
    color: var(--ink);
}

.pillar p {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.65;
}


/* Measured below the readable floor at 360-390px. */

.demo-modal-note {
    font-size: 12.5px;
}

.shot-pending em {
    font-size: 12px;
}


/* Visually hidden but available to screen readers and still focusable.
     Used for labels on inputs whose visible label is a placeholder. */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
     ABOUT — "How CallMangal got here"  (Phase 2C.1)
     Timeline left, original inline SVG right. The SVG stacks BELOW the text on
     mobile so the narrative is read first.
     ========================================================================== */

.milestones-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
}

@media(max-width:960px) {
    .milestones-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.milestones-copy {
    min-width: 0;
}

.milestones-visual {
    min-width: 0;
    display: flex;
    justify-content: center;
}

.journey-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
}

@media(max-width:960px) {
    /* SVG below the text on narrow screens. */
    .milestones-visual {
        order: 2;
    }
    .milestones-copy {
        order: 1;
    }
    .journey-svg {
        max-width: 330px;
    }
}


/* ==========================================================================
     AI VOICE AUDIO DEMO — "Hear CallMangal"  (Phase 2H, Part A)
     Entirely CMS-generated content inside the section (see build-content.mjs's
     audioDemoSection()) - only this presentation layer is hand-authored.
     ========================================================================== */

.audio-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

@media(max-width:860px) {
    .audio-demo-grid {
        grid-template-columns: 1fr;
    }
}

.audio-demo-card {
    background: #fff;
    border: 1px solid rgba(0, 59, 49, 0.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.audio-demo-badge {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--navy);
    background: rgba(0, 59, 49, 0.07);
    padding: 4px 10px;
    border-radius: 100px;
    margin-bottom: 10px;
}

.audio-demo-card h3 {
    font-size: 19px;
    margin: 0 0 6px;
}

.audio-demo-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 8px;
}

.audio-demo-desc {
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.audio-demo-player {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--paper-soft, #f2efe9);
    border-radius: 100px;
    padding: 8px 14px;
}

.audio-demo-playpause {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.audio-demo-playpause svg {
    width: 18px;
    height: 18px;
}

.audio-demo-progress {
    flex: 1;
    height: 6px;
    background: rgba(0, 59, 49, 0.15);
    border-radius: 100px;
    cursor: pointer;
    position: relative;
}

.audio-demo-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--navy);
    border-radius: 100px;
}

.audio-demo-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.audio-demo-transcript summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    list-style: none;
}

.audio-demo-transcript summary::-webkit-details-marker {
    display: none;
}

.audio-demo-transcript summary::before {
    content: "Show transcript";
}

.audio-demo-transcript[open] summary::before {
    content: "Hide transcript";
}

.audio-demo-transcript summary {
    font-size: 0;
}

.audio-demo-transcript summary::before {
    font-size: 13px;
}

.audio-demo-transcript-body {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-soft);
    max-height: 220px;
    overflow-y: auto;
}

.audio-demo-transcript-body p {
    margin: 0 0 8px;
}


/* ==========================================================================
     TESTIMONIALS  (Final launch patch, Part D)
     Entirely CMS-generated content inside the section (see build-content.mjs's
     testimonialSection()) - only this presentation layer is hand-authored.
     No autoplay slider - a static, responsive grid that adapts to how many
     real testimonials actually exist (1-5). Renders nothing at all when
     zero exist (task 20).
     ========================================================================== */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 48px;
    align-items: stretch;
}

.testimonial-count-1 {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}

/* Five testimonials: a clean 3-up row plus a 2-up row, rather than the
     base 2-column grid's uneven 2/2/1 wrap. */
.testimonial-count-5 {
    grid-template-columns: repeat(3, 1fr);
}

@media(max-width:900px) {
    .testimonial-count-5 {
        grid-template-columns: 1fr;
    }
}

/* Asymmetric composition for exactly 3: one large featured (dark) card
     spanning both rows, two smaller (light) cards stacked beside it - the
     "1 large + 2 smaller" layout, not a plain 3-up row. */

.testimonial-count-3 {
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: repeat(2, 1fr);
}

.testimonial-count-3 .testimonial-card:first-child {
    grid-row: 1/3;
}

@media(max-width:900px) {
    .testimonial-grid,
    .testimonial-count-2,
    .testimonial-count-3,
    .testimonial-count-4 {
        grid-template-columns: 1fr;
    }
    .testimonial-count-3 .testimonial-card:first-child {
        grid-row: auto;
    }
}

.testimonial-card {
    background: #fff;
    border: 1px solid rgba(0, 59, 49, 0.08);
    border-radius: 20px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 59, 49, 0.04);
}

.testimonial-quote-mark {
    position: absolute;
    top: 18px;
    left: 28px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 68px;
    line-height: 1;
    color: rgba(0, 59, 49, 0.08);
    pointer-events: none;
    user-select: none;
}

.testimonial-rating {
    color: #E8A83C;
    font-size: 15px;
    letter-spacing: 2px;
    position: relative;
    z-index: 1;
}

.testimonial-quote {
    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
    flex: 1;
    position: relative;
    z-index: 1;
}

.testimonial-person {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.testimonial-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.testimonial-photo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-soft);
    color: var(--navy);
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 17px;
}

.testimonial-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.testimonial-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
}

.testimonial-role {
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}

.testimonial-logo {
    height: 22px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    margin-left: auto;
    opacity: .85;
}


/* The large featured card in the asymmetric 3-up layout: dark, roomier,
     bigger quote - reuses the same navy "featured" treatment as the pricing
     table's highlighted plan, so the premium visual language is consistent
     site-wide rather than invented fresh here. */

.testimonial-count-3 .testimonial-card:first-child {
    background: var(--navy);
    color: #fff;
    padding: 44px 38px;
    justify-content: center;
}

.testimonial-count-3 .testimonial-card:first-child .testimonial-quote {
    font-size: 23px;
    line-height: 1.55;
    color: #fff;
}

.testimonial-count-3 .testimonial-card:first-child .testimonial-quote-mark {
    color: rgba(255, 255, 255, .14);
}

.testimonial-count-3 .testimonial-card:first-child .testimonial-rating {
    color: #F2C572;
}

.testimonial-count-3 .testimonial-card:first-child .testimonial-name {
    color: #fff;
}

.testimonial-count-3 .testimonial-card:first-child .testimonial-role {
    color: #B9C4DC;
}

.testimonial-count-3 .testimonial-card:first-child .testimonial-photo-fallback {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.testimonial-count-3 .testimonial-card:first-child .testimonial-logo {
    opacity: .9;
    filter: brightness(0) invert(1);
}


/* Real Estate use-case workflow steps — replaces the empty "video coming
     soon" panel with real content (Phase 2H, task 12). Swapped out entirely
     once a real walkthrough video/embed exists — see index.html's own
     comment at [data-video-slot].
     Homepage final-conversion pass: the base .case-media rule locks this
     box to aspect-ratio:16/10 with overflow:hidden, sized for a video
     thumbnail - that squeezed 4 real workflow steps' worth of copy into a
     fixed-height box, forcing cramped internal spacing. Overridden here to
     a natural, content-driven height instead - the box grows to fit the
     steps with real breathing room, not the other way around. */

.case-media-steps {
    aspect-ratio: auto;
    min-height: 400px;
    align-items: stretch;
    padding: 26px 26px 24px;
}

.case-steps {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.case-steps li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.case-step-n {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0, 216, 161, 0.18);
    color: #7FCBB4;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case-steps h4 {
    color: #fff;
    font-size: 14.5px;
    margin: 0 0 4px;
}

.case-steps p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}


/* ==========================================================================
     COOKIE / TRACKING CONSENT  (Phase 2H, Part E)
     Bottom bar + preferences modal. Built by assets/js/consent.js.
     ========================================================================== */

.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background: #fff;
    border-top: 1px solid rgba(0, 59, 49, 0.12);
    box-shadow: 0 -8px 30px -12px rgba(0, 0, 0, 0.15);
}

.consent-banner[hidden] {
    display: none!important;
}

.consent-banner-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.consent-banner-text {
    flex: 1 1 360px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
}

.consent-banner-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.consent-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.consent-btn-primary {
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy);
}

.consent-btn-primary:hover {
    background: var(--navy-hover);
}

.consent-btn-outline {
    background: #fff;
    color: var(--navy);
    border: 1px solid rgba(0, 59, 49, 0.3);
}

.consent-btn-outline:hover {
    background: rgba(0, 59, 49, 0.05);
}

.consent-btn-ghost {
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid transparent;
    text-decoration: underline;
}

.consent-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9100;
    background: rgba(0, 20, 16, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.consent-modal-overlay[hidden] {
    display: none!important;
}

.consent-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    padding: 28px;
}

.consent-modal h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

.consent-modal-intro {
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 20px;
}

.consent-category {
    border-top: 1px solid rgba(0, 59, 49, 0.1);
    padding: 14px 0;
}

.consent-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.consent-category-head strong {
    font-size: 14.5px;
}

.consent-category p {
    color: var(--ink-soft);
    font-size: 12.5px;
    line-height: 1.55;
    margin: 0;
}

.consent-always-on {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
}

.consent-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
}

.consent-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.consent-toggle span {
    position: absolute;
    inset: 0;
    background: rgba(0, 59, 49, 0.2);
    border-radius: 100px;
    transition: background .15s;
    cursor: pointer;
}

.consent-toggle span::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s;
}

.consent-toggle input:checked+span {
    background: var(--navy);
}

.consent-toggle input:checked+span::before {
    transform: translateX(16px);
}

.consent-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
    flex-wrap: wrap;
}

@media(max-width:520px) {
    .consent-banner-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .consent-banner-actions {
        justify-content: stretch;
    }
    .consent-banner-actions .consent-btn {
        flex: 1;
    }
}