/* ==========================================================================
   Ecomas Features Page Stylesheet
   Scoped under .features-page to ensure complete isolation
   Compliant with ecomas-landing-page-design-rules (No emojis, ~80% zoom safe)
   ========================================================================== */

.features-page {
    position: relative;
    overflow-x: hidden;
    background: #ffffff;
}

/* --------------------------------------------------------------------------
   Breadcrumb / Hero Section
   -------------------------------------------------------------------------- */
.features-page .breadcrumb {
    padding-top: 140px;
    padding-bottom: 70px;
    background: linear-gradient(180deg, #f8f6ff 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.features-page .breadcrumb--wrap {
    position: relative;
    z-index: 2;
}

.features-page .features-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(83, 58, 253, 0.08);
    border: 1px solid rgba(83, 58, 253, 0.16);
    border-radius: 100px;
    color: #533afd;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 22px;
}

.features-page .breadcrumb--title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #0d1738;
    margin-bottom: 20px;
}

.features-page .breadcrumb--title .accent-text {
    color: #533afd;
    position: relative;
    display: inline-block;
}

.features-page .breadcrumb--content {
    font-size: 19px;
    line-height: 1.6;
    color: #5a5869;
    max-width: 680px;
    margin: 0 auto 35px auto;
}

/* Quick Navigation Anchor Bar */
.features-page .features-nav-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
}

.features-page .features-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #ffffff;
    border: 1px solid #e9e5ff;
    border-radius: 100px;
    color: #0d1738;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(13, 23, 56, 0.04);
    transition: all 0.25s ease;
}

.features-page .features-nav-pill i {
    color: #533afd;
    font-size: 13px;
}

.features-page .features-nav-pill:hover {
    background: #533afd;
    color: #ffffff;
    border-color: #533afd;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(83, 58, 253, 0.2);
}

.features-page .features-nav-pill:hover i {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Feature Sections Layout & Common Card Elements
   -------------------------------------------------------------------------- */
.features-page .feature-block {
    padding: 75px 0;
    position: relative;
    border-bottom: 1px solid #f1eeff;
}

.features-page .feature-block.bg-alt {
    background: #faf9fd;
}

.features-page .feature-block.bg-white {
    background: #ffffff;
}

.features-page .sec-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}

.features-page .sec-badge.badge-purple {
    background: rgba(83, 58, 253, 0.08);
    color: #533afd;
    border: 1px solid rgba(83, 58, 253, 0.18);
}

.features-page .sec-badge.badge-emerald {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.features-page .sec-badge.badge-rose {
    background: rgba(225, 29, 72, 0.08);
    color: #be185d;
    border: 1px solid rgba(225, 29, 72, 0.2);
}

.features-page .sec-badge.badge-amber {
    background: rgba(217, 119, 6, 0.08);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.2);
}

.features-page .sec-title .title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: #0d1738;
    margin-bottom: 18px;
}

.features-page .sec-title .lead-text {
    font-size: 17.5px;
    line-height: 1.65;
    color: #5a5869;
    margin-bottom: 30px;
}

/* Feature Item Rows */
.features-page .feature-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.features-page .feature-point-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #ebe8ff;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 4px 14px rgba(13, 23, 56, 0.02);
    transition: all 0.25s ease;
}

.features-page .feature-point-item:hover {
    border-color: rgba(83, 58, 253, 0.3);
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(83, 58, 253, 0.06);
}

.features-page .feature-point-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.features-page .feature-point-icon.icon-purple {
    background: rgba(83, 58, 253, 0.08);
    color: #533afd;
    border: 1px solid rgba(83, 58, 253, 0.16);
}

.features-page .feature-point-icon.icon-emerald {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.features-page .feature-point-icon.icon-rose {
    background: rgba(225, 29, 72, 0.08);
    color: #be185d;
    border: 1px solid rgba(225, 29, 72, 0.2);
}

.features-page .feature-point-icon.icon-amber {
    background: rgba(217, 119, 6, 0.08);
    color: #b45309;
    border: 1px solid rgba(217, 119, 6, 0.2);
}

.features-page .feature-point-body h4 {
    margin: 0 0 4px 0;
    font-size: 16.5px;
    font-weight: 800;
    color: #0d1738;
    letter-spacing: -0.01em;
}

.features-page .feature-point-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #64748b;
}

/* Five product stories. Each has its own composition, not browser chrome. */
.features-page .feature-art { --fv-ink:#172340; --fv-muted:#677080; --fv-line:#e3e3eb; --fv-accent:#533afd; position:relative; margin:0; width:100%; min-width:0; color:var(--fv-ink); font-family:var(--font-body,Arial,sans-serif); line-height:1.5; }
.features-page .feature-art *, .features-page .feature-art *::before, .features-page .feature-art *::after { box-sizing:border-box; }
.features-page .feature-art p { margin:0; }
.features-page .fv-art-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-bottom:24px; }
.features-page .fv-index { font-size:11px; font-weight:700; letter-spacing:.12em; }
.features-page .fv-example { color:var(--fv-muted); font-size:11px; border-left:1px solid #cccbd6; padding-left:10px; }
.features-page .feature-art figcaption { font-size:12px; line-height:1.65; color:var(--fv-muted); margin-top:20px; max-width:48ch; }
.features-page .feature-art button { font:inherit; cursor:pointer; color:var(--fv-muted); background:none; border:0; transition:background-color .18s,color .18s,border-color .18s; }
.features-page .feature-art button:focus-visible { outline:3px solid #533afd; outline-offset:4px; }
.features-page .fv-controls { display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; }
.features-page .fv-controls button { border:1px solid var(--fv-line); border-radius:6px; padding:10px 13px; font-size:12px; min-height:44px; background:#fff; font-weight:700; }
.features-page .fv-controls button.is-active { color:#fff; background:#533afd; border-color:#533afd; }
.features-page .fv-controls button:not(.is-active):hover { color:#533afd; background:#f1efff; border-color:#c8bfff; }
/* 01: A request unfolds into an annotated workflow and a paper receipt. */
.features-page .fv-actions { padding:28px; background:#f4f2fb; border-radius:16px 48px 16px 16px; }
.features-page .fv-action-scene { position:relative; padding-left:42px; }
.features-page .fv-action-track { position:absolute; left:16px; top:36px; bottom:38px; width:1px; background:#d4cdea; }
.features-page .fv-customer-note { position:relative; padding:18px 26px 19px 20px; background:#fff; border:1px solid #e5dff5; border-radius:12px 12px 0 12px; margin-left:22px; box-shadow:0 6px 12px #352c5a06; }
.features-page .fv-note-label { display:block; font-size:11px; color:#777184; margin-bottom:8px; }
.features-page .fv-customer-note p { font-size:18px; line-height:1.45; letter-spacing:-.02em; font-weight:600; }
.features-page .fv-note-corner { position:absolute; right:-1px; bottom:-14px; width:15px; height:15px; clip-path:polygon(0 0,100% 0,100% 100%); background:#fff; }
.features-page .fv-agent-mark { display:flex; gap:12px; align-items:center; margin:26px 0 22px -42px; position:relative; }
.features-page .fv-agent-mark > img { object-fit:contain; width:48px; height:48px; padding:8px; background:#fff; border:1px solid #ddd6f0; border-radius:12px; }
.features-page .fv-agent-mark strong { display:block; font-size:15px; line-height:1.5; }
.features-page .fv-agent-mark div > span { display:block; color:#6c607b; font-size:12px; line-height:1.8; }
.features-page .fv-action-steps { margin:0 0 22px; padding:0; list-style:none; display:grid; gap:16px; }
.features-page .fv-action-steps li { display:flex; align-items:center; gap:12px; }
.features-page .fv-action-steps li > span { color:#716a84; font-size:10px; font-family:monospace; letter-spacing:.06em; }
.features-page .fv-action-steps li > div { flex:1; }
.features-page .fv-action-steps strong { display:block; font-size:13px; font-weight:600; line-height:1.65; }
.features-page .fv-action-steps small { display:block; color:#6c607b; font-size:11px; line-height:1.65; }
.features-page .fv-action-steps i { color:#5e41b6; font-size:11px; }
.features-page .fv-answer-ticket { position:relative; background:#fff; border:1px solid #ddd6ed; border-top:3px solid #7962bd; border-radius:3px; padding:18px; box-shadow:5px 6px 0 #e8e3f4; }
.features-page .fv-ticket-head { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; font-size:10px; color:#796a92; margin-bottom:13px; }
.features-page .fv-ticket-head i { margin-right:5px; color:#4d7b68; }
.features-page .fv-answer-ticket p { font-size:14px; line-height:1.7; min-height:71px; }
.features-page .fv-ticket-tear { border-top:1px dashed #ded9e9; margin:16px -18px 12px; }
.features-page .fv-ticket-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; font-size:10px; color:#6b6278; }
/* 02: Four channels flow into a shared, tabbed conversation folder. */
.features-page .fv-inbox { padding:28px 0 0; }
.features-page .fv-channel-rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; position:relative; z-index:2; }
.features-page .fv-channel-rail button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; min-height:84px; border:1px solid #dedee7; border-radius:9px; background:#fff; font-size:11px; color:#5b6675; }
.features-page .fv-channel-rail img { width:26px; height:26px; object-fit:contain; }
.features-page .fv-channel-rail button > i { font-size:24px; color:#715bb0; }
.features-page .fv-channel-rail .is-active { border-color:#9f93be; background:#f5f2fb; color:#49336e; box-shadow:0 3px 0 #e8e1f3; }
.features-page .fv-channel-rail button:hover { border-color:#9f93be; }
.features-page .fv-routing-lines { height:46px; display:grid; grid-template-columns:repeat(4,1fr); position:relative; margin:0 12%; }
.features-page .fv-routing-lines::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:#d8d6e3; }
.features-page .fv-routing-lines span { width:1px; background:#d8d6e3; margin:0 auto; }
.features-page .fv-inbox-folder { position:relative; padding-top:32px; margin-top:22px; }
.features-page .fv-inbox-folder::before { content:''; position:absolute; height:23px; top:-23px; left:50%; border-left:1px solid #d8d6e3; }
.features-page .fv-folder-tab { position:absolute; top:0; left:0; background:#ebe7f2; padding:10px 22px; border-radius:9px 9px 0 0; font-size:12px; font-weight:600; }
.features-page .fv-folder-tab i { margin-right:8px; color:#6d5a99; }
.features-page .fv-inbox-sheet { background:#fff; position:relative; border:1px solid #dedbe8; padding:24px; border-radius:0 12px 0 0; box-shadow:8px 8px 0 #ebe7f2; min-height:305px; }
.features-page .fv-contact-heading { display:flex; align-items:center; gap:10px; padding-bottom:20px; border-bottom:1px solid #eeeaf3; }
.features-page .fv-contact-avatar { flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:#f0edf5; color:#6d5a99; font-size:12px; font-weight:700; }
.features-page .fv-contact-heading strong { display:block; font-size:15px; line-height:1.5; }
.features-page .fv-contact-heading div > span { display:block; font-size:11px; line-height:1.5; color:#626674; }
.features-page .fv-contact-state { margin-left:auto; color:#386b58; font-size:10px; background:#edf6f0; padding:3px 7px; border-radius:3px; }
.features-page .fv-incoming-message { margin:20px 22px 18px 0; background:#f4f2f8; padding:13px 16px; border-radius:0 12px 12px 12px; }
.features-page .fv-incoming-message p, .features-page .fv-inbox-reply p { font-size:14px; line-height:1.65; }
.features-page .fv-inbox-reply { display:flex; gap:10px; align-items:flex-start; margin-bottom:24px; }
.features-page .fv-inbox-reply img { flex-shrink:0; width:26px; height:26px; object-fit:contain; margin-top:4px; }
.features-page .fv-inbox-context { padding-top:14px; border-top:1px dashed #dedbe8; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:#6f6782; font-size:10px; }
.features-page .fv-inbox-context strong { font-weight:600; color:#5c457f; }
.features-page .fv-folder-bottom { position:relative; padding:16px 24px; background:#ebe7f2; border:1px solid #dedbe8; border-top:0; border-radius:0 0 12px 12px; font-size:11px; color:#6b5b83; box-shadow:8px 8px 0 #ebe7f2; }
.features-page .fv-folder-bottom i { margin-right:6px; }
/* 03: A photographic art-board with contact sheet and editorial annotation. */
.features-page .fv-studio { padding:26px; background:#f7f3ef; border-radius:12px; }
.features-page .fv-studio-stage { position:relative; padding:14px 70px 8px 12px; min-height:420px; max-width:480px; margin:0 auto; }
.features-page .fv-studio-print { max-width:330px; }
.features-page .fv-studio-print { position:relative; z-index:2; margin-left:24px; background:#fff; padding:12px 12px 16px; border:1px solid #e5dcd3; box-shadow:0 10px 25px #3c30221a; transform:rotate(-3deg); }
.features-page .fv-studio-print > img { display:block; width:100%; aspect-ratio:480/643; height:auto; object-fit:contain; background:#ebe2d9; }
.features-page .fv-print-label { display:flex; justify-content:space-between; gap:10px; color:#7b6e61; font-size:8px; letter-spacing:.1em; line-height:1.5; padding-bottom:10px; }
.features-page .fv-print-caption { padding:13px 2px 0; }
.features-page .fv-print-caption strong { display:block; font-size:13px; font-weight:600; line-height:1.5; }
.features-page .fv-print-caption > span { display:block; font-size:9px; color:#817264; margin-top:4px; }
.features-page .fv-contact-sheet { position:absolute; z-index:1; top:22px; bottom:60px; left:0; width:61%; background:#e9ded3; padding:10px; transform:rotate(7deg); border:1px solid #ddd0c3; }
.features-page .fv-contact-sheet img { width:100%; height:100%; object-fit:cover; }
.features-page .fv-contact-sheet > span { position:absolute; bottom:8px; left:12px; font-size:7px; letter-spacing:.14em; color:#5e5045; background:#fff; padding:4px; }
.features-page .fv-art-direction { position:absolute; z-index:3; right:-9px; bottom:42px; width:136px; padding:17px 13px; background:#f4eddf; border:1px solid #ded2bd; box-shadow:0 5px 12px #44331a09; transform:rotate(3deg); }
.features-page .fv-art-direction > span:first-child { display:block; color:#756344; font-size:8px; letter-spacing:.12em; margin-bottom:12px; }
.features-page .fv-art-direction strong { display:block; white-space:pre-line; color:#5a4936; font-family:Georgia,serif; font-size:20px; font-weight:400; line-height:1.35; }
.features-page .fv-direction-line { display:block; width:30px; height:1px; background:#af9576; margin-top:16px; }
.features-page .fv-studio-corner { width:20px; height:20px; position:absolute; border-color:#b5a99d; border-style:solid; }
.features-page .fv-studio-corner--tl { top:0; left:0; border-width:1px 0 0 1px; }
.features-page .fv-studio-corner--br { bottom:0; right:0; border-width:0 1px 1px 0; }
.features-page .fv-studio-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:28px; }
.features-page .fv-scene-select { display:flex; flex-wrap:wrap; gap:2px; }
.features-page .fv-scene-select button { padding:10px 9px; min-height:44px; font-size:11px; border-bottom:2px solid transparent; border-radius:0; }
.features-page .fv-scene-select button.is-active { border-bottom-color:#8d6a49; color:#674a30; font-weight:700; }
.features-page .fv-gallery-arrows { display:flex; gap:5px; }
.features-page .fv-gallery-arrows button { width:44px; height:44px; border:1px solid #dcd0c3; border-radius:6px; display:grid; place-items:center; background:#fff; color:#715b46; }
.features-page .fv-gallery-arrows button:hover { background:#e9ded3; }
/* 04: Source documents become a tangible, connected knowledge book. */
.features-page .fv-context { padding:28px 0 0; }
.features-page .fv-knowledge-layout { display:grid; grid-template-columns:minmax(0,1.1fr) 35px minmax(0,1fr); align-items:center; min-height:300px; }
.features-page .fv-source-stack { display:grid; gap:14px; }
.features-page .fv-source-stack button { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:#fff; border:1px solid #e1daca; padding:14px 12px; border-radius:7px; }
.features-page .fv-source-stack button.is-active { border-color:#b39969; background:#fcf7ed; box-shadow:3px 3px 0 #e8dfcd; }
.features-page .fv-source-stack button > span:nth-child(2) { flex:1; min-width:0; }
.features-page .fv-source-stack strong { display:block; font-size:12px; color:#544a35; font-weight:600; line-height:1.6; }
.features-page .fv-source-stack small { display:block; font-size:10px; line-height:1.5; color:#756344; }
.features-page .fv-source-stack button > i { font-size:10px; color:#756344; }
.features-page .fv-source-icon { flex-shrink:0; color:#756344; font-size:18px; }
.features-page .fv-knowledge-spine { position:relative; height:220px; display:flex; flex-direction:column; justify-content:space-between; }
.features-page .fv-knowledge-spine::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#d5cbb5; }
.features-page .fv-knowledge-spine > span { height:1px; width:50%; background:#d5cbb5; }
.features-page .fv-knowledge-spine > i { position:absolute; right:-5px; top:50%; transform:translateY(-50%); color:#756344; font-size:12px; background:#faf9fd; padding:4px 0; }
.features-page .fv-knowledge-book { position:relative; min-height:280px; padding:25px 17px 25px 25px; border:1px solid #d8cab0; border-left:6px solid #c8b58e; background:#f3ecd9; border-radius:2px 12px 12px 2px; box-shadow:5px 3px 0 #fff,7px 5px 0 #e3dac5,0 10px 20px #4a39290a; }
.features-page .fv-book-brand { display:flex; align-items:center; gap:10px; }
.features-page .fv-book-brand img { width:32px; height:32px; object-fit:contain; }
.features-page .fv-book-brand span { font-size:8px; color:#6f5d40; line-height:1.8; letter-spacing:.05em; }
.features-page .fv-book-brand strong { font-size:10px; color:#5f5037; }
.features-page .fv-book-rule { height:1px; background:#d8c9ac; margin:22px 0; }
.features-page .fv-book-source { display:block; font-size:10px; color:#6f5d40; margin-bottom:9px; }
.features-page .fv-knowledge-book > strong { display:block; font-family:Georgia,serif; font-size:22px; font-weight:400; color:#50432f; line-height:1.3; min-height:56px; }
.features-page .fv-knowledge-book > span:last-of-type { display:block; font-size:10px; color:#6f5d40; margin-top:9px; line-height:1.6; min-height:32px; }
.features-page .fv-book-bottom { display:flex; gap:7px; align-items:center; margin-top:24px; font-size:8px; color:#6f5d40; }
.features-page .fv-context-answer { position:relative; margin:24px 0 0 24px; padding:22px; background:#fff; border:1px solid #e1daca; border-radius:9px; box-shadow:4px 4px 0 #eee7d9; }
.features-page .fv-context-answer::before { content:''; position:absolute; width:1px; height:25px; background:#d5cbb5; right:23%; top:-25px; }
.features-page .fv-context-label { color:#756344; font-size:9px; font-weight:700; letter-spacing:.11em; }
.features-page .fv-context-answer p { font-size:16px; line-height:1.6; margin:12px 0 18px; min-height:52px; }
.features-page .fv-context-answer > div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; border-top:1px solid #eee9df; padding-top:12px; font-size:9px; color:#6f5d40; }
.features-page .fv-context-answer small { color:#626674; font-size:9px; }
/* 05: An editorial report, drawn from one consistent example dataset. */
.features-page .fv-analytics { padding:28px; border:1px solid #e1dfe9; border-top:4px solid #8776b2; border-radius:3px 3px 15px 15px; background:#fff; box-shadow:9px 9px 0 #f0edf5; }
.features-page .fv-report-top { display:flex; justify-content:space-between; gap:20px; margin:10px 0 16px; }
.features-page .fv-report-eyebrow { font-size:10px; letter-spacing:.1em; color:#6c607b; }
.features-page .fv-report-total { display:flex; align-items:center; gap:18px; margin-top:10px; }
.features-page .fv-report-total strong { font-size:72px; line-height:1; font-weight:500; letter-spacing:-.07em; color:#392c54; font-variant-numeric:tabular-nums; }
.features-page .fv-report-total > span { font-size:12px; line-height:1.5; color:#6c607b; }
.features-page .fv-report-period { font-size:9px; line-height:1.8; color:#6c607b; text-align:center; padding-top:6px; }
.features-page .fv-report-period i { margin:5px; }
.features-page .fv-activity-chart { display:flex; gap:12px; margin:20px 0 0; }
.features-page .fv-chart-axis { display:flex; flex-direction:column; justify-content:space-between; font-size:9px; color:#6c607b; padding:30px 0 35px; }
.features-page .fv-chart-plot { flex:1; min-width:0; }
.features-page .fv-chart-plot svg { display:block; width:100%; overflow:visible; }
.features-page .fv-chart-grid { stroke:#e8e3ee; stroke-width:1; fill:none; vector-effect:non-scaling-stroke; }
.features-page .fv-chart-area { fill:#f2edf9; }
.features-page .fv-chart-line { fill:none; stroke:#8164ad; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.features-page .fv-chart-days { display:flex; justify-content:space-between; color:#6c607b; font-size:9px; padding-top:0; }
.features-page .fv-analytics .fv-controls { margin-top:20px; }
.features-page .fv-analytics .fv-controls button { padding:8px 10px; font-size:10px; }
.features-page .fv-report-tear { margin:26px -28px 22px; border-top:1px dashed #dcd5e5; position:relative; }
.features-page .fv-report-tear::before, .features-page .fv-report-tear::after { content:''; position:absolute; top:-8px; width:15px; height:15px; border:1px solid #e1dfe9; border-radius:50%; background:#fff; }
.features-page .fv-report-tear::before { left:-8px; }
.features-page .fv-report-tear::after { right:-8px; }
.features-page .fv-report-breakdown > span { display:block; color:#6c607b; font-size:9px; letter-spacing:.08em; margin-bottom:14px; }
.features-page .fv-report-breakdown > div { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:#766784; padding:9px 0; border-bottom:1px solid #f1edf5; }
.features-page .fv-report-breakdown strong { font-weight:600; font-variant-numeric:tabular-nums; }
.features-page .fv-channel-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:2px; }
.features-page .fv-channel-dot--wa { background:#759783; }
.features-page .fv-channel-dot--ig { background:#a7849b; }
.features-page .fv-channel-dot--web { background:#8c80ac; }
/* The unenhanced examples remain readable if JavaScript is unavailable. */
.features-page:not([data-visuals-ready]) .feature-art button { display:none; }
@media (max-width:1199px) and (min-width:992px) {
 .features-page .fv-art-direction { right:-18px; width:116px; }
 .features-page .fv-art-direction strong { font-size:18px; }
 .features-page .fv-studio-stage { padding-right:55px; }
 .features-page .fv-source-stack button { padding:12px 9px; gap:7px; }
 .features-page .fv-knowledge-layout { grid-template-columns:minmax(0,1.1fr) 25px minmax(0,1fr); }
}
@media (max-width:991px) {
 .features-page .feature-art { max-width:600px; margin-left:auto; margin-right:auto; }
 .features-page .fv-studio-stage { max-width:490px; margin:0 auto; }
 .features-page .feature-block { scroll-margin-top:90px; }
}
@media (max-width:575px) {
 .features-page .feature-art { width:calc(100% - 32px); }
 .features-page .fv-actions, .features-page .fv-studio, .features-page .fv-analytics { padding:22px 18px; }
 .features-page .fv-art-heading { gap:8px; padding-bottom:22px; }
 .features-page .fv-index { font-size:9px; letter-spacing:.08em; }
 .features-page .fv-example { font-size:9px; }
 .features-page .fv-action-scene { padding-left:28px; }
 .features-page .fv-action-track { left:12px; }
 .features-page .fv-agent-mark { margin-left:-28px; }
 .features-page .fv-agent-mark strong { font-size:13px; }
 .features-page .fv-agent-mark > img { width:38px; height:38px; padding:6px; }
 .features-page .fv-customer-note { margin-left:5px; padding:16px; }
 .features-page .fv-customer-note p { font-size:17px; }
 .features-page .fv-answer-ticket { padding:15px; }
 .features-page .fv-ticket-tear { margin-left:-15px; margin-right:-15px; }
 .features-page .fv-inbox-sheet { padding:20px 16px; }
 .features-page .fv-channel-rail { gap:6px; }
 .features-page .fv-channel-rail button { min-height:78px; font-size:10px; gap:8px; }
 .features-page .fv-studio-stage { padding:14px 52px 12px 0; min-height:0; }
 .features-page .fv-studio-print { margin-left:20px; padding:9px 9px 14px; }
 .features-page .fv-art-direction { right:-8px; bottom:50px; width:107px; padding:14px 10px; }
 .features-page .fv-art-direction strong { font-size:17px; }
 .features-page .fv-print-caption strong { font-size:11px; }
 .features-page .fv-print-label { font-size:7px; }
 .features-page .fv-studio-controls { gap:6px; }
 .features-page .fv-scene-select button { padding:8px 7px; font-size:10px; }
 .features-page .fv-knowledge-layout { grid-template-columns:1fr; }
 .features-page .fv-source-stack { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .features-page .fv-source-stack button { flex-direction:column; justify-content:center; text-align:center; padding:14px 8px; gap:8px; min-height:100px; }
 .features-page .fv-source-stack strong { font-size:12px; line-height:1.4; }
 .features-page .fv-source-stack small, .features-page .fv-source-stack button > i { display:none; }
 .features-page .fv-source-icon { font-size:20px; }
 .features-page .fv-knowledge-spine { height:30px; flex-direction:row; justify-content:space-around; }
 .features-page .fv-knowledge-spine::before { top:14px; left:16.67%; right:16.67%; bottom:auto; height:1px; width:auto; }
 .features-page .fv-knowledge-spine > span { width:1px; height:15px; }
 .features-page .fv-knowledge-spine > i { top:auto; bottom:0; left:50%; right:auto; padding:0; transform:translateX(-50%) rotate(90deg); background:none; }
 .features-page .fv-knowledge-book { padding:20px 22px; min-height:0; }
 .features-page .fv-book-brand { gap:12px; }
 .features-page .fv-book-brand span { font-size:10px; }
 .features-page .fv-book-brand strong { font-size:12px; }
 .features-page .fv-book-rule { margin:15px 0; }
 .features-page .fv-book-source { font-size:12px; }
 .features-page .fv-knowledge-book > strong { font-size:26px; min-height:0; }
 .features-page .fv-knowledge-book > span:last-of-type { font-size:12px; min-height:0; }
 .features-page .fv-book-bottom { font-size:10px; margin-top:16px; }
 .features-page .fv-context-answer { margin-left:10px; padding:18px; }
 .features-page .fv-report-total strong { font-size:64px; }
 .features-page .fv-report-total { gap:13px; }
 .features-page .fv-report-total > span { font-size:11px; }
 .features-page .fv-report-tear { margin-left:-18px; margin-right:-18px; }
 .features-page .fv-analytics .fv-controls { gap:5px; }
 .features-page .fv-analytics .fv-controls button { padding:8px; }
}
@media (prefers-reduced-motion:reduce) {
 .features-page .feature-art *, .features-page .feature-art *::before, .features-page .feature-art *::after { transition:none !important; animation:none !important; scroll-behavior:auto; }
}

/* --------------------------------------------------------------------------
   Comparison Section: Ecomas vs Legacy Bots
   Strict adherence to landing-page-design-rules
   -------------------------------------------------------------------------- */
.features-page .comparison-section {
    padding: 75px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    position: relative;
    border-bottom: 1px solid #ebe8ff;
}

.features-page .comp-col-card {
    border-radius: 20px;
    padding: 28px 24px;
    height: 100%;
    position: relative;
    transition: all 0.3s ease;
}

.features-page .comp-col-card.legacy {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.features-page .comp-col-card.ecomas {
    background: #ffffff;
    border: 2px solid #533afd;
    box-shadow: 0 20px 50px rgba(83, 58, 253, 0.12), 0 0 0 6px rgba(83, 58, 253, 0.04);
}

.features-page .comp-header {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
    margin-bottom: 18px;
}

.features-page .comp-col-card.ecomas .comp-header {
    border-bottom-color: #f1eeff;
}

.features-page .comp-header h3 {
    font-size: 23px;
    font-weight: 800;
    margin: 0 0 4px 0;
}

.features-page .comp-col-card.legacy .comp-header h3 {
    color: #64748b;
}

.features-page .comp-col-card.ecomas .comp-header h3 {
    color: #0d1738;
}

.features-page .comp-header p {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
}

.features-page .comp-points-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.features-page .comp-point-item {
    display: flex;
    gap: 12px;
}

.features-page .comp-point-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.features-page .comp-point-icon.cross {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.features-page .comp-point-icon.check {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.features-page .comp-point-text h4 {
    margin: 0 0 2px 0;
    font-size: 14.5px;
    font-weight: 800;
    color: #0d1738;
}

.features-page .comp-point-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #64748b;
}

.features-page .comp-stat-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
    text-align: center;
}

.features-page .comp-stat-footer .metric-label {
    font-size: 11.5px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.features-page .comp-stat-footer .metric-val {
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
}

.features-page .comp-col-card.legacy .metric-val {
    color: #64748b;
}
.features-page .comp-col-card .metric-val.comp-capability {
    font-size: 28px;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.features-page .comp-col-card.ecomas .metric-val {
    color: #533afd;
}

.features-page .comp-vs-bridge {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e9e5ff;
    box-shadow: 0 10px 25px rgba(83, 58, 253, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: #533afd;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   High-Converting Bottom CTA Banner
   -------------------------------------------------------------------------- */
.features-page .features-bottom-cta {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.features-page .features-cta-box {
    background: linear-gradient(135deg, #0d1738 0%, #1a1040 100%);
    border-radius: 28px;
    padding: 70px 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 70px -15px rgba(13, 23, 56, 0.3);
}

.features-page .features-cta-box h2 {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.features-page .features-cta-box p {
    font-size: 18px;
    color: #c7d2fe;
    max-width: 620px;
    margin: 0 auto 35px auto;
    line-height: 1.6;
}

.features-page .features-cta-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.features-page .btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #533afd;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(83, 58, 253, 0.4);
    transition: all 0.25s ease;
}

.features-page .btn-cta-primary:hover {
    background: #432cd9;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(83, 58, 253, 0.5);
}

.features-page .btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.features-page .btn-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-2px);
}

.features-page .features-cta-assurances {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
}

.features-page .features-cta-assurances span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.features-page .features-cta-assurances i {
    color: #10b981;
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints & Zoom Calibrations
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .features-page .breadcrumb {
        padding-top: 100px;
        padding-bottom: 50px;
    }
    
    .features-page .breadcrumb--title {
        font-size: 36px;
    }
    
    .features-page .sec-title .title {
        font-size: 32px;
    }
    
    .features-page .feature-block {
        padding: 70px 0;
    }
    
    .features-page .comp-vs-bridge {
        margin: 25px auto;
    }
    
    .features-page .features-cta-box {
        padding: 45px 24px;
    }
    
    .features-page .features-cta-box h2 {
        font-size: 28px;
    }
}