/*
 * Industry pages (marketing/solution.blade.php). Builds on home-base.css (the CSS iPhone and its chat) and home.css
 * (nav, footer, FAQ, kicker and headings); adds the hero, numbers, flows, stack, before/after bars, reasons and quotes.
 */

/* ---------- Hero: copy beside the phone ---------- */
.sl-hero { position: relative; overflow: hidden; padding: 7.5rem 0 3.5rem; }
.sl-hero-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(50rem 30rem at 85% 30%, rgba(61, 220, 151, .1), transparent 70%),
        radial-gradient(40rem 28rem at 0% 0%, rgba(41, 92, 81, .35), transparent 70%);
}
.sl-hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(238, 245, 242, .08) 1px, transparent 1.2px); background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(60% 60% at 70% 40%, #000, transparent 75%); mask-image: radial-gradient(60% 60% at 70% 40%, #000, transparent 75%);
}
.sl-hero-grid { display: grid; gap: 3rem; align-items: center; }
.sl-hero-copy { text-align: center; }
.sl-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: 1.25rem; font-size: .78rem; color: var(--text-3); }
.sl-crumbs a { color: var(--text-2); }
.sl-crumbs a:hover { color: var(--mint); }
.sl-crumbs [aria-current] { color: var(--text-2); }
.sl-title { margin: 1rem auto 0; max-width: 40rem; font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; color: var(--text); }
.sl-title em { font-style: normal; color: var(--mint); }
.sl-lede { margin: 1.25rem auto 0; max-width: 34rem; font-size: 1.08rem; line-height: 1.7; color: var(--text-2); }
.sl-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.sl-ticks { display: grid; gap: .5rem; justify-content: center; margin-top: 1.75rem; font-size: .88rem; color: var(--text-2); }
.sl-ticks li { display: flex; align-items: center; gap: .5rem; }
.sl-ticks svg { width: 1rem; height: 1rem; flex: none; color: var(--mint); }
.sl-phone { margin-top: 0; }

@media (min-width: 1100px) {
    .sl-hero { padding: 8.5rem 0 4.5rem; }
    .sl-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.5rem; }
    .sl-hero-copy { text-align: left; }
    .sl-crumbs, .sl-actions, .sl-ticks { justify-content: flex-start; }
    .sl-title, .sl-lede { margin-left: 0; margin-right: 0; }
    .sl-phone .hero-uc { justify-content: center; }
}

/* ---------- Numbers band ---------- */
.sl-stats { padding: 1rem 0 2rem; }
.sl-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 900px) { .sl-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.sl-stat { padding: 1.4rem 1.25rem; border-radius: 1.25rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sl-stat b { display: block; font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; color: var(--mint); }
.sl-stat span { display: block; margin-top: .3rem; font-size: .92rem; font-weight: 600; color: var(--text); }
.sl-stat small { display: block; margin-top: .25rem; font-size: .78rem; line-height: 1.45; color: var(--text-3); }

/* ---------- Flows: what, why, and the trigger → message it runs ---------- */
.sl-flows { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 700px) { .sl-flows { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sl-flows { grid-template-columns: repeat(3, 1fr); } }
.sl-flow {
    display: flex; flex-direction: column; padding: 1.5rem; border-radius: 1.4rem;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, transform .25s;
}
.sl-flow:hover { box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .35); transform: translateY(-2px); }
.sl-flow-ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem; font-size: 1.35rem; background: rgba(61, 220, 151, .1); }
.sl-flow h3 { margin-top: 1rem; font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.sl-flow p { margin-top: .45rem; font-size: .9rem; line-height: 1.6; color: var(--text-2); }
.sl-flow-run { display: grid; gap: .5rem; margin-top: auto; padding-top: 1.25rem; }
.sl-flow-when { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--text-3); }
.sl-flow-when i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(61, 220, 151, .18); }
.sl-flow-msg {
    justify-self: start; max-width: 100%; padding: .55rem .8rem; border-radius: .3rem 1rem 1rem 1rem;
    font-size: .84rem; color: var(--text); background: #17241f;
}

/* ---------- Stack ---------- */
.sl-stack { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) { .sl-stack { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; } }
.sl-link { display: inline-block; margin-top: 1.5rem; font-size: .9rem; font-weight: 600; color: var(--mint); }
.sl-stack-list { display: grid; gap: .75rem; }
@media (min-width: 560px) { .sl-stack-list { grid-template-columns: repeat(2, 1fr); } }
.sl-stack-list li {
    display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center;
    padding: 1rem 1.1rem; border-radius: 1.1rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.sl-stack-list li span { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; font-size: 1.15rem; background: rgba(255, 255, 255, .05); }
.sl-stack-list b { font-size: .92rem; color: var(--text); }
.sl-stack-list small { font-size: .78rem; color: var(--text-3); }

/* ---------- Before / after bars ---------- */
.sl-bars { max-width: 52rem; margin: 3rem auto 0; padding: 1.75rem; border-radius: 1.5rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sl-bars-key { display: flex; justify-content: flex-end; gap: 1.25rem; margin-bottom: 1rem; font-size: .76rem; font-weight: 600; color: var(--text-3); }
.sl-bars-key span { display: inline-flex; align-items: center; gap: .4rem; }
.sl-bars-key span::before { content: ""; width: .7rem; height: .7rem; border-radius: .2rem; }
.sl-bars-key .is-before::before { background: rgba(255, 255, 255, .22); }
.sl-bars-key .is-after::before { background: var(--mint); }
.sl-bar-row { display: grid; gap: .35rem; padding: .85rem 0; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .sl-bar-row { grid-template-columns: 13rem 1fr; column-gap: 1.5rem; align-items: center; } .sl-bar-label { grid-row: span 2; } }
.sl-bar-label { font-size: .9rem; font-weight: 600; color: var(--text); }
.sl-bar { display: flex; align-items: center; gap: .6rem; }
.sl-bar i { display: block; height: .7rem; width: var(--w); max-width: calc(100% - 3rem); border-radius: 9999px; transform-origin: left; }
.sl-bar.is-before i { background: rgba(255, 255, 255, .22); }
.sl-bar.is-after i { height: .85rem; background: linear-gradient(90deg, #295c51, var(--mint)); box-shadow: 0 0 18px rgba(61, 220, 151, .3); }
.sl-bar b { font-size: .8rem; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sl-bar.is-after b { color: var(--mint); }
/* Bars grow in when the card scrolls into view (solution.js adds .is-in); without JS they are simply drawn */
.js .sl-bars:not(.is-in) .sl-bar i { transform: scaleX(0); }
.sl-bar i { transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.sl-bar-row:nth-of-type(2) i { transition-delay: .08s; } .sl-bar-row:nth-of-type(3) i { transition-delay: .16s; }
.sl-bar-row:nth-of-type(4) i { transition-delay: .24s; } .sl-bar-row:nth-of-type(5) i { transition-delay: .32s; }
.sl-bar-row:nth-of-type(6) i { transition-delay: .4s; }
.sl-bars-note { margin-top: 1rem; font-size: .76rem; color: var(--text-3); }

/* ---------- Reasons ---------- */
.sl-reasons { display: grid; gap: 1px; margin-top: 3rem; overflow: hidden; border-radius: 1.5rem; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 700px) { .sl-reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sl-reasons { grid-template-columns: repeat(3, 1fr); } }
.sl-reason { padding: 1.75rem; background: var(--bg); }
.sl-reason-n { font-size: .78rem; font-weight: 700; color: var(--mint); font-variant-numeric: tabular-nums; }
.sl-reason h3 { margin-top: .75rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.sl-reason p { margin-top: .45rem; font-size: .88rem; line-height: 1.6; color: var(--text-2); }

/* ---------- Quotes ---------- */
.sl-quotes { display: grid; gap: 1rem; margin-top: 3rem; }
@media (min-width: 900px) { .sl-quotes { grid-template-columns: repeat(3, 1fr); } }
.sl-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.6rem; border-radius: 1.4rem; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sl-quote blockquote { font-size: .98rem; line-height: 1.65; color: var(--text); }
.sl-quote figcaption { display: flex; align-items: center; gap: .7rem; }
.sl-quote-av { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; font-size: .74rem; font-weight: 800; color: #04140e; background: linear-gradient(135deg, var(--mint), #1f8a64); }
.sl-quote b { display: block; font-size: .88rem; color: var(--text); }
.sl-quote small { display: block; font-size: .76rem; color: var(--text-3); }

/* ---------- Other industries ---------- */
.solution-page .sl-more { padding-top: 1rem; }
.sl-more-label { text-align: center; font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.sl-more-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 56rem; margin: 1.25rem auto 0; }
.sl-more-list a {
    display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 9999px;
    font-size: .84rem; font-weight: 600; color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
    transition: color .2s, box-shadow .2s;
}
.sl-more-list a:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .4); }

@media (prefers-reduced-motion: reduce) {
    .sl-bar i, .sl-flow { transition: none; }
}

/* ---------- Flow builder (partials/flow-builder): copy beside a mock canvas of nodes and connectors ---------- */
.fb { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .fb { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; } }
.fb-points { display: grid; gap: .6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.fb-points li { display: flex; align-items: flex-start; gap: .55rem; font-size: .95rem; color: var(--text); }
.fb-points span { display: grid; place-items: center; flex: none; width: 1.2rem; height: 1.2rem; margin-top: .15rem; border-radius: 50%; font-size: .62rem; font-weight: 800; color: #04140e; background: var(--mint); }
.fb-frame { border-radius: 1.4rem; overflow: hidden; background: #0b1512; box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px #000; }
.fb-bar { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.fb-bar b { flex: 1; min-width: 0; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.fb-bar em { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.fb-lights { display: flex; gap: .3rem; }
.fb-lights i { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255, 255, 255, .14); }
/* On phones the canvas keeps its size and scrolls sideways */
.fb-scroll { overflow-x: auto; scrollbar-width: none; }
.fb-scroll::-webkit-scrollbar { display: none; }
.fb-canvas { position: relative; min-width: 38rem; aspect-ratio: 5 / 3; margin: 1rem; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 18px 18px; }
.fb-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fb-wires path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 5 5; animation: fbDash 1.2s linear infinite; }
.fb-wires path.is-live { stroke: var(--mint); stroke-width: 2; }
@keyframes fbDash { to { stroke-dashoffset: -10; } }
.fb-packet { fill: #eafff5; filter: drop-shadow(0 0 3px var(--mint)); }
.fb-node { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: .45rem .6rem; border-radius: .7rem; background: #13201b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 24px -14px #000; }
.fb-node b { display: flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; color: #eef5f2; white-space: nowrap; }
.fb-node small { font-size: .64rem; line-height: 1.3; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-node.is-trigger { box-shadow: inset 0 0 0 1px rgba(246, 196, 83, .45); }
.fb-node.is-ai { background: linear-gradient(135deg, rgba(61, 220, 151, .2), #13201b 70%); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .5), 0 0 24px -8px var(--glow); }
.fb-node.is-menu { justify-content: flex-start; gap: .25rem; padding: .55rem .6rem; }
.fb-btn { position: absolute; left: .6rem; right: .6rem; top: calc(var(--y) - 7.5%); height: 15%; display: flex; align-items: center; padding: 0 .45rem; border-radius: .4rem; font-size: .64rem; font-weight: 600; color: #8fd4f5; background: rgba(255, 255, 255, .05); }
.fb-btn.is-live { box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .5); }
/* Ports: the dots wires connect to */
.fb-in, .fb-out { position: absolute; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-radius: 50%; background: #0b1512; box-shadow: 0 0 0 2px var(--mint); }
.fb-in { left: -.25rem; }
.fb-out { right: -.25rem; }
.fb-btn .fb-out { right: calc(-.6rem - .25rem); }
@media (prefers-reduced-motion: reduce) { .fb-wires path { animation: none; } .fb-packet { display: none; } }

/* ---------- Everything it can do (partials/capabilities): a list on the left, the open item explained on the right ---------- */
.cx { margin-top: 3rem; border-radius: 1.75rem; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); box-shadow: inset 0 0 0 1px var(--line); }
.cx-list { display: grid; padding: .75rem; }
.cx-group { margin: 1rem .75rem .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.cx-group:first-child { margin-top: .5rem; }
.cx-item { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .6rem .75rem; border: 0; border-radius: .9rem; font: inherit; text-align: left; color: var(--text-2); background: transparent; cursor: pointer; transition: background .2s, color .2s; }
.cx-item:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.cx-item[aria-selected="true"] { color: var(--text); background: rgba(61, 220, 151, .1); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .25); }
.cx-item:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.cx-ico { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: .6rem; font-size: 1rem; background: rgba(255, 255, 255, .05); }
.cx-item[aria-selected="true"] .cx-ico { background: rgba(61, 220, 151, .16); }
.cx-name { flex: 1; min-width: 0; font-size: .92rem; font-weight: 600; }
.cx-chev { width: 1rem; height: 1rem; flex: none; opacity: 0; transition: opacity .2s, transform .2s; }
.cx-item:hover .cx-chev, .cx-item[aria-selected="true"] .cx-chev { opacity: 1; }
.cx-item[aria-selected="true"] .cx-chev { color: var(--mint); }

/* The open item: on phones, right under its row */
.cx-detail { margin: .25rem .25rem .9rem; padding: 1.25rem; border-radius: 1.2rem; background: #0b1512; box-shadow: inset 0 0 0 1px var(--line); animation: cxIn .35s cubic-bezier(.2, .8, .2, 1) both; }
.cx-detail[hidden] { display: none; }
.cx-head { display: flex; align-items: center; gap: .9rem; }
.cx-big { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; flex: none; border-radius: 1rem; font-size: 1.6rem; background: radial-gradient(circle at 30% 20%, rgba(61, 220, 151, .35), rgba(61, 220, 151, .08)); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .3); }
.cx-head small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.cx-head b { display: block; margin-top: .1rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--text); }
.cx-text { margin-top: 1rem; font-size: 1rem; line-height: 1.65; color: var(--text-2); }
/* A WhatsApp chat showing it in action */
.cx-chat { display: flex; flex-direction: column; gap: .45rem; margin-top: 1.4rem; padding: 1.1rem; border-radius: 1.1rem; background: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.2px) 0 0 / 14px 14px, #0f1915; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); }
.cx-msg { max-width: 82%; }
.cx-msg p { padding: .5rem .75rem; border-radius: .9rem; font-size: .86rem; line-height: 1.45; color: #eef5f2; }
.cx-msg.is-in { align-self: flex-start; }
.cx-msg.is-in p { border-top-left-radius: .25rem; background: #1f2c27; }
.cx-msg.is-out { align-self: flex-end; }
.cx-msg.is-out p { border-top-right-radius: .25rem; background: #0d5c45; }
.cx-btns { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.cx-btns span { padding: .35rem .7rem; border-radius: .7rem; font-size: .78rem; font-weight: 600; color: #53bdeb; background: #1f2c27; }
@keyframes cxIn { from { opacity: 0; transform: translateY(8px); } }

/* Wide screens: the list on the left, the open detail beside it. The panel sets the height (with a floor, so it
   doesn't jump much between items) and the list scrolls inside that same height */
.cx-panel { display: none; }
@media (min-width: 1024px) {
    .cx { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 1rem; padding: 1rem; }
    .cx-list { height: 0; min-height: 100%; padding: 0 .4rem .5rem 0; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent;
        -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 2.5rem), transparent); }
    .cx-panel { display: flex; }
    .cx-panel .cx-detail { flex: 1; min-height: 34rem; margin: 0; padding: 2rem; border-radius: 1.4rem; }
    .cx-head b { font-size: 1.7rem; }
    .cx-chev { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) { .cx-detail { animation: none; } }

/* The message the item itself sends, tagged in the demo chat */
.cx-msg.is-node p { box-shadow: 0 0 0 1.5px var(--mint), 0 0 24px -6px var(--glow, rgba(61, 220, 151, .35)); }
.cx-tag { display: inline-block; margin-bottom: .3rem; padding: .15rem .5rem; border-radius: 9999px; font-size: .66rem; font-weight: 800; letter-spacing: .04em; color: #04140e; background: var(--mint); }
.cx-msg.is-out .cx-tag { float: right; }

/* Grouped list (features without chat demos): numbered columns, every option at a glance */
.cl { display: grid; gap: 2.5rem 2rem; margin-top: 3rem; }
@media (min-width: 760px) { .cl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cl-head { display: flex; align-items: center; gap: .7rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.cl-head span { font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--mint); font-variant-numeric: tabular-nums; }
.cl-group ul { display: grid; gap: 1.2rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.cl-group li { display: flex; gap: .85rem; align-items: flex-start; }
.cl-ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: .75rem; font-size: 1.1rem; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); }
.cl-group b { display: block; font-size: .96rem; font-weight: 700; color: var(--text); }
.cl-group small { display: block; margin-top: .2rem; font-size: .86rem; line-height: 1.55; color: var(--text-2); }

/* A CRM event inside the demo (not a chat message): a centred note */
.cx-sys { align-self: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: .2rem 0; }
.cx-sys > span:last-child { padding: .35rem .8rem; border-radius: 9999px; font-size: .78rem; font-weight: 700; color: var(--text); background: rgba(61, 220, 151, .1); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .35); }
.cx-sys .cx-tag { margin: 0; }