/* =====================================================================
   Rifat Kobir — styling for the eight interactive widgets added on top of
   the original page. Deliberately a separate stylesheet rather than more
   lines in index.html's <style> block: that block is already ~1700 lines.
   Served from the same origin, so style-src 'self' is satisfied.

   Section map
     1.  Shared widget shell
     2.  Language toggle + Bengali typeface
     3.  Availability badge
     4.  ROI calculator
     5.  Workflow pipeline
     6.  Chatbot demo
     7.  Before / after slider
     8.  Quote builder
     9.  Command palette
     10. Print sheet
     11. Reduced motion
     12. Print sheet
     13. Offer window note
   ================================================================== */

/* ---------------------------------------------------------------------
   1. Shared widget shell — every new widget sits in one of these, so the
   additions read as part of the existing glass-card design language.
   ------------------------------------------------------------------ */
.fx-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius);
    padding: 28px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-card);
    transition: var(--transition);
}
.fx-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.fx-panel-icon {
    width: 44px; height: 44px; flex: 0 0 44px;
    display: grid; place-items: center;
    border-radius: 13px; font-size: 18px;
    background: rgba(79, 70, 229, 0.18);
    border: 1px solid rgba(129, 140, 248, 0.32);
    color: var(--hero-primary-light);
}
.fx-panel h3 { font-size: 20px; line-height: 1.35; }
.fx-panel-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Available to screen readers, absent from the visual layout. Used for the
   command palette's dialog heading, which aria-labelledby needs. */
.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;
}

/* The language switch translates one element per key, so a heading whose second
   half is gold has to be two elements. `.section-header h2 span` paints every
   span gold, hence this opt-out for the plain half. The CTA card carries its own
   `h2 span` gradient rule, so it needs the same escape hatch. */
.section-header h2 .t-plain,
.cta-main-card h2 .t-plain,
.modal-title .t-plain {
    background: none; color: #fff;
    -webkit-text-fill-color: #fff;
}

/* An honesty label, used under anything that produces a number. Small, but
   it is what keeps an estimate from reading as a promise. */
.fx-note {
    font-size: 11.5px; line-height: 1.65; color: var(--text-muted);
    border-left: 2px solid rgba(129, 140, 248, 0.35);
    padding-left: 10px; margin-top: 16px;
}
.fx-field { margin-bottom: 15px; }
.fx-field > label {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--text-body); margin-bottom: 7px; letter-spacing: 0.2px;
}
.fx-input, .fx-select {
    width: 100%; padding: 12px 14px;
    font-family: 'Inter', sans-serif; font-size: 14.5px;
    color: var(--text-heading); background: rgba(7, 5, 20, 0.72);
    border: 1px solid var(--border-glass); border-radius: 12px;
    transition: var(--transition);
}
.fx-select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.fx-input:focus, .fx-select:focus {
    outline: none; border-color: var(--hero-primary-light);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.18);
}
/* Visible keyboard focus on every new control. The page had none on its
   custom role="button" elements, which made a keyboard pass unreadable. */
.fx-panel :focus-visible,
.fx-chip:focus-visible,
.fx-node:focus-visible,
.ba-handle:focus-visible {
    outline: 2px solid var(--hero-cyan-light);
    outline-offset: 2px;
}
.fx-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.fx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border-radius: 12px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    border: 1px solid transparent; transition: var(--transition);
}
.fx-btn-gold { background: var(--gradient-gold); color: #14100a; }
.fx-btn-ghost {
    background: rgba(129, 140, 248, 0.08); color: var(--hero-primary-light);
    border-color: rgba(129, 140, 248, 0.32);
}
.fx-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(245, 158, 11, 0.32); }
.fx-btn-ghost:hover { background: rgba(129, 140, 248, 0.16); color: #fff; }

/* Tab / preset chips. Same visual weight as the existing .filter-btn bar so
   the page does not grow a second button vocabulary. */
.fx-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.fx-chip {
    padding: 9px 16px; border-radius: 30px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--text-muted); background: rgba(18, 14, 45, 0.6);
    border: 1px solid var(--border-glass); transition: var(--transition);
}
.fx-chip:hover { color: #fff; border-color: rgba(129, 140, 248, 0.4); }
.fx-chip.active {
    color: #14100a; background: var(--gradient-gold);
    border-color: transparent; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.28);
}

/* ---------------------------------------------------------------------
   2. Language toggle + Bengali typeface.

   Inter and Poppins ship no Bengali glyphs, so Bengali text would land on
   whatever the OS happens to have (Nirmala UI on Windows, something else
   on Android). Noto Sans Bengali is self-hosted in assets/fonts and only
   covers U+0980-09FE, so Latin inside Bengali text still renders in Inter.
   ------------------------------------------------------------------ */
html[lang="bn"] body,
html[lang="bn"] .fx-input,
html[lang="bn"] .fx-select,
html[lang="bn"] .fx-btn,
html[lang="bn"] .fx-chip { font-family: 'Noto Sans Bengali', 'Inter', sans-serif; }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3,
html[lang="bn"] h4, html[lang="bn"] h5, html[lang="bn"] h6 {
    font-family: 'Noto Sans Bengali', 'Poppins', sans-serif;
}
/* Bengali has a taller x-height and ascenders that collide at the page's
   default line-height. */
html[lang="bn"] body { line-height: 1.85; }

/* Bengali is a connected script: the tracking that makes a 9.5px Latin label
   legible pulls its conjuncts apart instead. The uppercase is left alone —
   Bengali has no letter case, so it is simply a no-op there. */
html[lang="bn"] .countdown-box-mini .lbl {
    letter-spacing: 0;
    font-size: 9px;
}

.lang-toggle {
    display: inline-flex; align-items: center; padding: 3px;
    border-radius: 30px; background: rgba(7, 5, 20, 0.7);
    border: 1px solid var(--border-glass);
}
.lang-toggle button {
    padding: 5px 11px; border: none; background: none; cursor: pointer;
    border-radius: 30px; font-size: 12px; font-weight: 700;
    color: var(--text-muted); font-family: 'Inter', sans-serif;
    transition: var(--transition);
}
.lang-toggle button[aria-pressed="true"] { background: var(--hero-gradient); color: #fff; }
.lang-toggle button:hover { color: #fff; }

/* ---------------------------------------------------------------------
   3. Availability badge — the honest replacement for the fake "8 people
   are viewing this" scarcity that came out of the page earlier.
   ------------------------------------------------------------------ */
.avail-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px; border-radius: 30px; font-size: 12.5px; font-weight: 600;
    color: #6EE7B7; background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.32);
}
.avail-badge.is-full { color: #FBBF24; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.34); }
.avail-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
    background: currentColor; box-shadow: 0 0 0 0 currentColor;
    animation: availPulse 2.4s ease-out infinite;
}
@keyframes availPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    100% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
}
.avail-badge time { font-weight: 700; color: #fff; }

/* ---------------------------------------------------------------------
   4. ROI calculator
   ------------------------------------------------------------------ */
.roi-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.lab-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 24px; align-items: start; }
.roi-inputs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.roi-out {
    background: linear-gradient(160deg, rgba(79, 70, 229, 0.16), rgba(6, 182, 212, 0.08));
    border: 1px solid rgba(129, 140, 248, 0.28);
    border-radius: 16px; padding: 22px;
}
.roi-hero-num {
    font-family: 'Poppins', sans-serif; font-weight: 800; line-height: 1.1;
    font-size: clamp(30px, 5vw, 42px);
    background: var(--hero-text-gradient);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.roi-hero-label { font-size: 12.5px; color: var(--text-muted); margin-bottom: 20px; }
.roi-rows { display: grid; gap: 1px; background: var(--border-glass); border-radius: 12px; overflow: hidden; }
.roi-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 12px 14px; background: rgba(7, 5, 20, 0.6); font-size: 13px;
}
.roi-row span:first-child { color: var(--text-muted); }
.roi-row b { font-family: 'Poppins', sans-serif; font-size: 16px; color: var(--text-heading); white-space: nowrap; }
.roi-row.is-total b { color: #FBBF24; }

/* ---------------------------------------------------------------------
   5. Workflow pipeline.

   Built from flex-laid-out buttons with CSS connectors rather than a
   coordinate-based SVG: the row has to reflow to a vertical stack under
   900px, and marching dashes (an animated repeating-gradient) survive
   every browser, unlike SMIL <animateMotion>.
   ------------------------------------------------------------------ */
.pipe { display: flex; align-items: stretch; gap: 34px; margin-bottom: 24px; }
.fx-node {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 18px 12px; cursor: pointer; text-align: center;
    background: rgba(18, 14, 45, 0.66);
    border: 1px solid var(--border-glass); border-radius: 16px;
    font-family: 'Inter', sans-serif; transition: var(--transition);
}
.fx-node:hover { border-color: rgba(129, 140, 248, 0.45); transform: translateY(-3px); }
.fx-node[aria-pressed="true"] {
    border-color: rgba(245, 158, 11, 0.5);
    background: rgba(40, 28, 12, 0.72);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25), 0 14px 30px rgba(245, 158, 11, 0.16);
}
.fx-node-ico {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 12px; font-size: 16px;
    color: var(--hero-primary-light); background: rgba(79, 70, 229, 0.2);
    border: 1px solid rgba(129, 140, 248, 0.3);
}
.fx-node[aria-pressed="true"] .fx-node-ico { color: #FBBF24; background: rgba(245, 158, 11, 0.18); border-color: rgba(245, 158, 11, 0.4); }
.fx-node-name { font-size: 12.5px; font-weight: 600; color: var(--text-heading); line-height: 1.4; }
.fx-node-tool { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); }
.fx-node:not(:last-child)::after {
    content: ''; position: absolute; top: 50%; right: -34px;
    width: 34px; height: 3px; transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, var(--hero-primary-light) 0 7px, transparent 7px 14px);
    background-size: 14px 3px;
    animation: pipeFlow 0.85s linear infinite;
}
@keyframes pipeFlow { to { background-position: 14px 0; } }
.pipe-detail {
    background: rgba(7, 5, 20, 0.6); border: 1px solid var(--border-glass);
    border-left: 3px solid var(--gold); border-radius: 14px; padding: 18px 20px;
}
.pipe-detail h4 { font-size: 15.5px; margin-bottom: 5px; }
.pipe-detail p { font-size: 13.5px; color: var(--text-body); }
.pipe-detail-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.pipe-detail-meta b { color: #FBBF24; }

/* ---------------------------------------------------------------------
   6. Chatbot demo. Bubble geometry and the three-dot typing indicator are
   lifted from chat-app-design.html so the two files look related; the
   palette is the portfolio's. No network call is involved anywhere — an
   LLM key in a static page would be public, so this is a scripted tree.
   ------------------------------------------------------------------ */
.bot { display: flex; flex-direction: column; }
.bot-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border-glass); }
.bot-avatar {
    width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center;
    border-radius: 50%; font-size: 17px; color: #fff;
    background: linear-gradient(135deg, #4F46E5, #06B6D4);
}
.bot-head h4 { font-size: 15px; }
.bot-status { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6EE7B7; }
.bot-log {
    display: flex; flex-direction: column; gap: 12px;
    min-height: 210px; max-height: 320px; overflow-y: auto;
    padding: 18px 4px; scrollbar-width: thin;
}
.bot-msg { display: flex; }
.bot-msg.is-user { justify-content: flex-end; }
.bot-bubble {
    max-width: 82%; padding: 11px 15px; font-size: 13.5px; line-height: 1.65;
    border-radius: 16px; white-space: pre-line;
}
.bot-msg.is-bot .bot-bubble {
    background: rgba(32, 36, 58, 0.9); color: var(--text-body);
    border: 1px solid var(--border-glass); border-bottom-left-radius: 4px;
}
.bot-msg.is-user .bot-bubble {
    background: linear-gradient(135deg, #4F46E5, #6D5BE8); color: #fff;
    border-bottom-right-radius: 4px;
}
.bot-typing { display: flex; gap: 4px; padding: 14px 16px; }
.bot-typing span {
    width: 7px; height: 7px; border-radius: 50%; background: var(--hero-primary-light);
    animation: botBlink 1.4s infinite both;
}
.bot-typing span:nth-child(2) { animation-delay: 0.2s; }
.bot-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes botBlink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.bot-choices { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-glass); }
.bot-choice {
    padding: 9px 15px; border-radius: 30px; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; text-align: left;
    color: var(--hero-primary-light); background: rgba(79, 70, 229, 0.12);
    border: 1px solid rgba(129, 140, 248, 0.3); transition: var(--transition);
}
.bot-choice:hover { background: rgba(79, 70, 229, 0.26); color: #fff; transform: translateY(-2px); }
/* The closing line takes the place of the buttons at the end of the script. */
.bot-choices .fx-note { margin-top: 0; }

/* ---------------------------------------------------------------------
   7. Before / after slider. Two stacked panes, the top one revealed with
   clip-path. Deliberately text and numbers rather than screenshots: the
   CSP allows img-src 'self' only, and there are no real before/after
   captures to self-host yet.
   ------------------------------------------------------------------ */
.ba {
    position: relative; overflow: hidden; user-select: none;
    border-radius: 16px; border: 1px solid var(--border-glass);
    min-height: 260px; touch-action: pan-y;
}
.ba-pane { position: absolute; inset: 0; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.ba-before { background: linear-gradient(150deg, rgba(60, 12, 18, 0.92), rgba(20, 8, 14, 0.95)); }
.ba-after {
    background: linear-gradient(150deg, rgba(6, 46, 40, 0.94), rgba(8, 20, 26, 0.96));
    clip-path: inset(0 0 0 50%);
}
.ba-tag {
    align-self: flex-start; padding: 5px 12px; border-radius: 30px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
}
.ba-before .ba-tag { color: #FCA5A5; background: rgba(239, 68, 68, 0.16); border: 1px solid rgba(239, 68, 68, 0.34); }
.ba-after .ba-tag { color: #6EE7B7; background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.34); }
.ba-headline { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(26px, 4vw, 34px); line-height: 1.1; }
.ba-before .ba-headline { color: #F87171; }
.ba-after .ba-headline { color: #34D399; }
.ba-headline small { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.3px; margin-top: 4px; }
.ba-stats { display: grid; gap: 7px; font-size: 12.5px; }
.ba-stats div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 6px; border-bottom: 1px dashed rgba(255, 255, 255, 0.08); }
.ba-stats b { color: #fff; white-space: nowrap; }
.ba-handle {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 42px;
    transform: translateX(-21px); cursor: ew-resize; z-index: 3;
    display: grid; place-items: center; background: none; border: none; padding: 0;
}
.ba-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: 20px; width: 2px; background: rgba(255, 255, 255, 0.85); }
.ba-handle span {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    font-size: 13px; color: #0b0714; background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.ba-hint { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-top: 10px; }

/* ---------------------------------------------------------------------
   8. Quote builder
   ------------------------------------------------------------------ */
.quote-list { list-style: none; display: grid; gap: 8px; }
/* Shown for a moment when print or send is pressed with nothing ticked —
   cheaper for the visitor than a dialog they have to dismiss. */
.quote-list.needs-pick {
    outline: 2px solid rgba(245, 158, 11, 0.75);
    outline-offset: 6px; border-radius: 15px;
}
.quote-item > label {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px;
    padding: 12px 14px; cursor: pointer; border-radius: 13px;
    background: rgba(7, 5, 20, 0.55); border: 1px solid var(--border-glass);
    transition: var(--transition);
}
.quote-item > label:hover { border-color: rgba(129, 140, 248, 0.4); background: rgba(18, 14, 45, 0.75); }
.quote-item input:checked + .quote-name { color: #fff; }
.quote-item > label:has(input:checked) { border-color: rgba(245, 158, 11, 0.45); background: rgba(40, 28, 12, 0.6); }
.quote-item input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; }
.quote-name { font-size: 13.5px; font-weight: 600; color: var(--text-body); line-height: 1.4; }
.quote-name small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); }
.quote-price { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; color: #FBBF24; white-space: nowrap; }
.quote-total {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px;
    margin-top: 18px; padding: 16px 18px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(239, 68, 68, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.quote-total-label { font-size: 12.5px; color: var(--text-body); }
.quote-total-label b { display: block; font-family: 'Poppins', sans-serif; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.quote-total-val { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(18px, 3vw, 24px); color: #FBBF24; }

/* The printable sheet. A direct child of <body> and display:none on screen,
   which is what lets the print rules in section 10 hide the entire page with
   one selector instead of fighting nested stacking contexts. */
.quote-sheet { display: none; }
.quote-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 2px solid #111; padding-bottom: 12px; margin-bottom: 18px; }
.quote-sheet h1 { font-size: 22px; margin-bottom: 2px; }
.quote-sheet table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.quote-sheet th, .quote-sheet td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #d4d4d8; font-size: 12.5px; }
.quote-sheet th { background: #f4f4f5; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.quote-sheet td:last-child, .quote-sheet th:last-child { text-align: right; white-space: nowrap; }
.quote-sheet tfoot td { font-weight: 700; border-top: 2px solid #111; border-bottom: none; font-size: 14px; }
.quote-sheet-foot { font-size: 10.5px; line-height: 1.6; color: #52525b; border-top: 1px solid #d4d4d8; padding-top: 10px; }

/* ---------------------------------------------------------------------
   9. Command palette. The one widget whose rows are built by script — it
   exists only as a keyboard affordance, so a no-JS visitor loses nothing
   that is not reachable from the nav.
   ------------------------------------------------------------------ */
.cmdk-hint {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
    border-radius: 8px; cursor: pointer; font-size: 11.5px; font-weight: 600;
    color: var(--text-muted); background: rgba(7, 5, 20, 0.6);
    border: 1px solid var(--border-glass); font-family: 'Inter', sans-serif;
    transition: var(--transition);
}
/* The navbar has to hold the language toggle, this chip and the burger.
   Below 1100px the chip goes first — the palette is a keyboard shortcut,
   and a keyboard implies a screen wide enough to keep the hint. */
.nav-utils { display: flex; align-items: center; gap: 10px; }
@media (max-width: 1100px) { .cmdk-hint { display: none; } }
.cmdk-hint:hover { color: #fff; border-color: rgba(129, 140, 248, 0.45); }
.cmdk-hint kbd {
    font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 700;
    padding: 1px 5px; border-radius: 5px; color: var(--hero-primary-light);
    background: rgba(79, 70, 229, 0.22); border: 1px solid rgba(129, 140, 248, 0.3);
}
.cmdk {
    position: fixed; inset: 0; z-index: 12000;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 12vh 20px 20px;
    background: rgba(3, 2, 10, 0.72);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.cmdk[hidden] { display: none; }
.cmdk-box {
    width: 100%; max-width: 560px; overflow: hidden;
    background: rgba(16, 13, 38, 0.97); border: 1px solid rgba(129, 140, 248, 0.28);
    border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
    animation: cmdkIn 0.18s ease-out;
}
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-12px) scale(0.98); } }
.cmdk-input-row { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--border-glass); color: var(--text-muted); }
.cmdk-input {
    flex: 1; min-width: 0; border: none; background: none; outline: none;
    font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text-heading);
}
.cmdk-input::placeholder { color: var(--text-muted); }
.cmdk-input-row kbd { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: rgba(129, 140, 248, 0.16); border: 1px solid var(--border-glass); }
.cmdk-list { list-style: none; max-height: 46vh; overflow-y: auto; padding: 8px; margin: 0; }
.cmdk-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px; cursor: pointer; font-size: 13.5px; color: var(--text-body); }
.cmdk-row .cmdk-ico { width: 26px; text-align: center; color: var(--hero-primary-light); font-size: 13px; }
.cmdk-row .cmdk-kind { margin-left: auto; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.cmdk-row[aria-selected="true"] { background: rgba(79, 70, 229, 0.28); color: #fff; }
.cmdk-empty { padding: 26px; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ---------------------------------------------------------------------
   10. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 980px) {
    .roi-layout { grid-template-columns: 1fr; }
    .lab-grid { grid-template-columns: 1fr; }
    .pipe { flex-direction: column; gap: 26px; }
    .fx-node { flex-direction: row; text-align: left; gap: 14px; padding: 14px 16px; }
    .fx-node-ico { flex: 0 0 40px; }
    /* The connector rotates with the layout: horizontal dashes marching
       right become vertical dashes marching down. */
    .fx-node:not(:last-child)::after {
        top: 100%; right: auto; left: 27px;
        width: 3px; height: 26px; transform: none;
        background: repeating-linear-gradient(180deg, var(--hero-primary-light) 0 7px, transparent 7px 14px);
        background-size: 3px 14px;
        animation-name: pipeFlowDown;
    }
    @keyframes pipeFlowDown { to { background-position: 0 14px; } }
}
@media (max-width: 560px) {
    .fx-panel { padding: 20px 18px; }
    .roi-inputs-2 { grid-template-columns: 1fr; }
    .quote-item > label { grid-template-columns: auto 1fr; }
    .quote-price { grid-column: 2; }
    .bot-bubble { max-width: 90%; }
    .cmdk { padding: 8vh 12px 12px; }
    /* The two panes are absolutely positioned, so the wrapper needs to be
       tall enough for whichever of them wraps to the most lines. */
    .ba { min-height: 340px; }
    .ba-pane { padding: 18px 20px; }
}

/* ---------------------------------------------------------------------
   11. Reduced motion — every looping animation added here is decorative.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .fx-node:not(:last-child)::after,
    .avail-dot,
    .cmdk-box { animation: none; }
    .bot-typing span { animation: none; opacity: 0.55; }
    .fx-btn:hover, .fx-node:hover, .bot-choice:hover { transform: none; }
    .ba-after { transition: none; }

    /* The rest of this block is about elements that predate these widgets.
       index.html had no reduced-motion rule at all, so the two marquees kept
       scrolling and the hero kept floating for visitors who had asked the
       operating system for less motion. The marquees matter most: they are
       full-width, continuous, and horizontal, which is the pattern most
       likely to trigger vestibular symptoms. Only `animation` is dropped —
       the reveal transitions stay, since they are one-shot and short.

       These live here rather than in index.html because the inline <style>
       is already the longest thing in that file, and nothing in JS listens
       for animationend, so stopping them cannot break any behaviour. */
    .marquee-row.row-left,
    .marquee-row.row-right,
    .ribbon-track,
    .ai-agent-chip,
    .floating-card,
    .avatar-rotating-orbit,
    .avatar-glow-ring,
    .global-ambient-mesh,
    .pedestal-light-beam,
    .nav-cta,
    .agent-dot,
    .pulse-dot,
    .online-pulse,
    .dock-status-indicator,
    .hero-badge .dot { animation: none; }
}

/* ---------------------------------------------------------------------
   12. Print sheet.

   index.html previously had no @media print rules at all, so printing it
   produced the full dark-themed page. #quoteSheet is a direct child of
   <body>, which is what makes "hide every body child, show that one" work
   without fighting nested stacking contexts.
   ------------------------------------------------------------------ */
@media print {
    @page { size: A4; margin: 14mm; }

    html, body {
        background: #fff !important;
        color: #111 !important;
        overflow: visible !important;
    }
    body > * { display: none !important; }
    body > .quote-sheet { display: block !important; }

    .quote-sheet {
        font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.6;
        /* Keep the table header shading and the accent rule; without this
           most browsers drop every background when printing. */
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .quote-sheet h1, .quote-sheet h2, .quote-sheet h3, .quote-sheet b, .quote-sheet strong { color: #111 !important; }
    .quote-sheet a { color: #111 !important; text-decoration: underline; }
    .quote-sheet table { page-break-inside: avoid; }
}

/* ---------------------------------------------------------------------
   13. Offer window note — the line under the countdown that says the
   window repeats. Kept quiet on purpose: it is a clarification, not a
   second sales pitch competing with the timer above it.
   ------------------------------------------------------------------ */
.countdown-cycle-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    text-align: center;
    color: rgba(226, 232, 240, 0.62);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}