/* ==========================================================================
   Agentic AI solutions — a stack of seven "folder" cards (#ai-solutions).
   Markup: index.html #ai-solutions. Behaviour: assets/js/solutions.js (in-view state + scroll depth).
   On large screens every card sticks a little lower than the one before it, so the coloured tabs pile up at the top
   while the next card slides over them. solutions.js sets .is-pinned and each card's --top, sized to the window so the
   tallest card always fits. Below 992px, on windows too short for that, or with JS off, the cards simply stack in the page flow.
   The product visuals are plain HTML/CSS (.m-*); with JS off they render in their final state.
   Uses the tokens from style.css, plus two extra accents (teal, amber) declared right below.
   ========================================================================== */

:root {
  --teal-aa: #067C82;        /* 4.97:1 with white */
  --teal-fg: #056E73;        /* 5.4:1 on --teal-bg */
  --teal-bg: #E0F6F7;
  --amber-aa: #946600;       /* 4.69:1 with white */
}

/* the score ring animates by tweening a number; browsers without @property just skip the sweep */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

/* accent per solution. --s-fill: AA fill behind white; --s-fg: text on --s-t; --s-t: pale tint; --s-ring: outline + dot grid */
[data-sol="voice"]   { --s-fill: var(--color-primary-aa); --s-fg: var(--text-accent-strong); --s-t: var(--bg-table-head);    --s-ring: rgba(var(--primary-rgb), .22); }
[data-sol="assist"]  { --s-fill: var(--chip-info-aa);     --s-fg: var(--tint-info-fg);        --s-t: var(--tint-info-bg);      --s-ring: rgba(78, 53, 223, .2); }
[data-sol="voc"]     { --s-fill: var(--chip-pink-aa);     --s-fg: var(--tint-pink-fg);        --s-t: var(--tint-pink-bg);      --s-ring: rgba(194, 30, 111, .2); }
[data-sol="quality"] { --s-fill: var(--tint-success-fg);  --s-fg: var(--tint-success-fg);     --s-t: var(--tint-success-bg);   --s-ring: rgba(2, 122, 56, .2); }
[data-sol="perf"]    { --s-fill: var(--teal-aa);          --s-fg: var(--teal-fg);             --s-t: var(--teal-bg);           --s-ring: rgba(6, 124, 130, .2); }
[data-sol="know"]    { --s-fill: var(--color-secondary);  --s-fg: var(--tint-secondary-fg);   --s-t: var(--tint-secondary-bg); --s-ring: rgba(37, 35, 93, .16); }
[data-sol="sum"]     { --s-fill: var(--amber-aa);         --s-fg: var(--tint-warning-fg);     --s-t: var(--tint-warning-bg);   --s-ring: rgba(148, 102, 0, .22); }

.sol { --sol-peek: 40px; --sol-h: 468px; --sol-top: calc(var(--header-h) + 14px); }
.sol .section-head { margin-bottom: 44px; }
.sol-grad { color: var(--color-primary-aa); background: linear-gradient(90deg, var(--color-primary-aa), var(--color-info)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── The stack ─────────────────────────────────────────────────────────── */
.sol-stack { position: relative; }
.sol-card {
  position: relative; margin-bottom: 28px; overflow: hidden; transform-origin: 50% 0;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 -8px 24px rgba(37, 35, 93, .05), var(--shadow-md);
}
.sol-card:last-child { margin-bottom: 0; }
/* fades the card as the next one slides over it (--sink runs 0 → 1, set by solutions.js) */
.sol-card::after { content: ""; position: absolute; inset: 0; background: var(--bg-surface); opacity: calc(var(--sink, 0) * .5); pointer-events: none; }

@media (min-width: 992px) {
  .sol.is-pinned .sol-card { position: sticky; top: var(--top); transform: scale(calc(1 - var(--sink, 0) * .045)); }
}

/* the tab strip: what's left visible once the next card covers this one */
.sol-tab {
  display: flex; align-items: center; gap: 10px; height: var(--sol-peek); padding: 0 24px;
  font-size: 13px; color: var(--s-fg); background: var(--s-t); border-bottom: 1px solid var(--s-ring);
}
.sol-tab i { font-size: 17px; }
.sol-tab strong { font-weight: 700; letter-spacing: .1px; }
.sol-count { margin-left: auto; font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; }

/* ── Card body: copy on one side, visual on the other (they swap on every second card) ── */
.sol-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: var(--sol-h); }
.sol-card:nth-of-type(even) .sol-body { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.sol-card:nth-of-type(even) .sol-visual { order: -1; margin: 14px 0 14px 14px; }

.sol-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 32px 40px 32px 44px; }
.sol-title { margin-bottom: 14px; font-size: 28px; line-height: 1.22; letter-spacing: -.4px; color: var(--text-title); }
.sol-copy p { margin-bottom: 22px; font-size: 16px; line-height: 1.6; }

.sol-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; margin-bottom: 24px; }
.sol-stat {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-content: start;   /* top-aligned, so the numbers line up when one label wraps and the other doesn't */
  padding: 14px 16px; background: var(--bg-subtle); border: 1px solid var(--border-soft); border-radius: var(--radius-md);
}
.sol-stat-ico { grid-row: 1 / span 2; align-self: start; width: 36px; height: 36px; display: grid; place-items: center; font-size: 18px; color: #fff; background: var(--s-fill); border-radius: 50%; }
.sol-stat strong { font-size: 28px; line-height: 1.15; font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.sol-stat > span:last-child { font-size: 13px; line-height: 1.35; font-weight: 500; }

/* ── Visual panel ── */
.sol-visual {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; margin: 14px 14px 14px 0;   /* minmax(0, …): the column must not grow to fit a wide mock window */ padding: 30px; overflow: hidden; border-radius: 18px;
  background:
    radial-gradient(circle at 1px 1px, var(--s-ring) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(155deg, var(--s-t) 0%, var(--bg-surface) 115%);
}

/* the mock "window" every visual is built on */
.m-win {
  position: relative; z-index: 1; width: min(100%, 440px); padding: 16px;
  font-size: 13px; line-height: 1.45; color: var(--text-body);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.m-win p { margin: 0; }
.m-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.m-av { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 18px; color: #fff; background: var(--s-fill); border-radius: 50%; }
.m-who { min-width: 0; line-height: 1.25; }
.m-who b { display: block; font-size: 14px; font-weight: 700; color: var(--text-title); }
.m-who small { display: block; overflow: hidden; font-size: 12px; color: var(--text-muted); white-space: nowrap; text-overflow: ellipsis; }
.m-live {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 3px 10px; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--tint-danger-fg); background: var(--tint-danger-bg); border-radius: var(--radius-pill);
}
.m-live > i:not(.ti) { width: 7px; height: 7px; background: currentColor; border-radius: 50%; animation: m-pulse 1.4s ease-in-out infinite; }
.m-live.m-quiet { color: var(--text-body); background: var(--bg-subtle); }
.m-live.m-ok { color: var(--tint-success-fg); background: var(--tint-success-bg); }

/* chat bubbles */
.m-win .m-msg { max-width: 88%; margin: 0 0 8px; padding: 9px 12px; color: var(--text-title); border-radius: 14px; }
.m-in { background: var(--bg-subtle); border: 1px solid var(--border-soft); border-bottom-left-radius: 4px; }
.m-win .m-out { margin-left: auto; background: var(--s-t); border: 1px solid var(--s-ring); border-bottom-right-radius: 4px; }

.m-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.m-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--text-title); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.m-tag i { color: var(--s-fg); }
.m-tag.m-ok { color: var(--tint-success-fg); background: var(--tint-success-bg); border-color: transparent; }
.m-tag.m-ok i { color: inherit; }
.m-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-size: 12px; font-weight: 700; color: #fff; background: var(--s-fill); border: 1px solid var(--s-fill); border-radius: var(--radius-pill); }
.m-btn.m-ghost { color: var(--s-fg); background: transparent; border-color: var(--s-ring); }

/* floating call-outs that overlap the corners of the panel */
.m-float {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 6px; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--text-title);
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
}
.m-float i { width: 24px; height: 24px; display: grid; place-items: center; font-size: 14px; color: #fff; background: var(--s-fill); border-radius: 50%; }
.m-float.m-warn i { background: var(--tint-danger-fg); }
.m-tr { top: 14px; right: 16px; }
.m-bl { bottom: 14px; left: 16px; }

/* voice: waveform */
.m-wave { padding: 2px 0 12px; }
.m-wave .wave { display: flex; justify-content: space-between; gap: 0; width: 100%; height: 40px; }   /* space-between spaces the bars; a fixed gap would set a minimum width wider than a phone */
.m-wave .wave i { background: var(--s-fill); }

/* assist: suggested reply */
.m-nudge { margin-top: 10px; padding: 12px; background: var(--s-t); border: 1px solid var(--s-ring); border-radius: var(--radius); }
.m-nudge-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--s-fg); }
.m-nudge-h span { margin-left: auto; font-weight: 600; }
.m-nudge p { color: var(--text-title); }
.m-nudge-a { display: flex; gap: 8px; margin-top: 10px; }

/* voc + quality: donut / score ring */
.m-split { display: flex; align-items: center; gap: 18px; }
.m-split-top { align-items: flex-start; }
.m-donut, .m-ring { position: relative; flex: none; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; }
.m-donut::before, .m-ring::before { content: ""; position: absolute; inset: 13px; background: var(--bg-surface); border-radius: 50%; }
.m-donut > div, .m-ring > div { position: relative; text-align: center; line-height: 1.1; }
.m-donut b, .m-ring b { display: block; font-size: 24px; font-weight: 800; color: var(--text-title); }
.m-donut small, .m-ring small { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.m-donut { background: conic-gradient(var(--tint-success-fg) 0 62%, var(--border-strong) 0 87%, var(--tint-danger-fg) 0); }
.m-ring { --p: var(--v); background: conic-gradient(var(--tint-success-fg) calc(var(--p) * 1%), var(--border-soft) 0); transition: --p 1.3s var(--ease) .25s; }

.m-legend, .m-audit, .m-board { margin: 0; padding: 0; list-style: none; }
.m-legend { flex: 1; display: grid; gap: 8px; }
.m-legend li { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-title); }
.m-legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.m-dot { width: 10px; height: 10px; border-radius: 50%; }
.m-g { background: var(--tint-success-fg); } .m-n { background: var(--border-strong); } .m-r { background: var(--tint-danger-fg); }

.m-themes { display: grid; gap: 9px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.m-theme { display: grid; grid-template-columns: 100px minmax(0, 1fr) 44px; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--text-title); }
.m-theme em { font-style: normal; text-align: right; white-space: nowrap; }
.m-bad { color: var(--tint-danger-fg); } .m-good { color: var(--tint-success-fg); }

.m-track { display: block; height: 7px; overflow: hidden; background: var(--border-soft); border-radius: 7px; }
.m-fill { display: block; width: var(--w); height: 100%; background: var(--s-fill); border-radius: inherit; transition: width 1s var(--ease) .3s; }

/* quality: audit checklist */
.m-audit { flex: 1; display: grid; gap: 8px; padding-top: 2px; }
.m-audit li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-title); }
.m-audit b { margin-left: auto; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.m-audit i { font-size: 16px; }
.m-pass i { color: var(--tint-success-fg); } .m-fail i { color: var(--tint-danger-fg); }
.m-evidence { display: flex; gap: 8px; margin-top: 14px; padding: 10px 12px; font-size: 12px; color: var(--tint-danger-fg); background: var(--tint-danger-bg); border-radius: var(--radius); }
.m-evidence > i { margin-top: 1px; font-size: 15px; }
.m-evidence b { font-weight: 700; }

/* performance: leaderboard + coaching */
.m-spark { flex: none; width: 84px; height: 30px; margin-left: auto; overflow: visible; }
.m-spark polyline { fill: none; stroke: var(--s-fill); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease) .3s; }
.m-board { display: grid; gap: 10px; }
.m-board li { display: grid; grid-template-columns: 30px 72px minmax(0, 1fr) 38px; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-title); }
.m-board b { text-align: right; font-variant-numeric: tabular-nums; }
.m-init { width: 30px; height: 30px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--s-fill); border-radius: 50%; }
.m-coach { display: flex; gap: 10px; margin-top: 14px; padding: 11px 12px; background: var(--s-t); border: 1px solid var(--s-ring); border-radius: var(--radius); }
.m-coach-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; font-size: 16px; color: #fff; background: var(--s-fill); border-radius: 50%; }
.m-coach b { display: block; font-size: 12.5px; color: var(--text-title); }
.m-coach p { font-size: 12.5px; color: var(--text-title); }

/* knowledge: search + answer */
.m-search { display: flex; align-items: center; gap: 9px; padding: 11px 16px; font-size: 14px; font-weight: 600; color: var(--text-title); border: 1.5px solid var(--s-fill); border-radius: var(--radius-pill); box-shadow: 0 0 0 4px var(--s-ring); }
.m-search > i { font-size: 18px; color: var(--s-fg); }
.m-type { display: inline-block; max-width: 24em; overflow: hidden; vertical-align: bottom; white-space: nowrap; transition: max-width 1.6s steps(38, end) .35s; }
.m-caret { width: 2px; height: 17px; margin-left: -6px; background: var(--s-fill); animation: m-blink 1s steps(2) infinite; }
.m-answer { margin-top: 12px; padding: 13px 14px; background: var(--bg-subtle); border: 1px solid var(--border-soft); border-radius: var(--radius); }
.m-answer-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--s-fg); }
.m-answer b { display: block; margin-bottom: 4px; font-size: 14px; line-height: 1.35; color: var(--text-title); }
.m-answer p { font-size: 12.5px; }
.m-learn { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 9px 12px; font-size: 12px; color: var(--s-fg); background: var(--s-t); border-radius: var(--radius); }
.m-learn > i { margin-top: 1px; font-size: 15px; }

/* summarization: transcript → summary */
.m-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); align-items: center; gap: 10px; }
.m-script { display: grid; gap: 10px; padding-right: 20px; }
.m-line { position: relative; display: block; width: var(--w); height: 8px; background: var(--border); border-radius: 8px; transform-origin: 0 50%; transition: transform .6s var(--ease); }
.m-line.m-hit { background: var(--s-fill); }
.m-line.m-hit i { position: absolute; top: -3px; left: calc(100% + 6px); font-size: 14px; color: var(--s-fill); }
.m-line:nth-child(2) { transition-delay: .08s; } .m-line:nth-child(3) { transition-delay: .16s; } .m-line:nth-child(4) { transition-delay: .24s; }
.m-line:nth-child(5) { transition-delay: .32s; } .m-line:nth-child(6) { transition-delay: .4s; }  .m-line:nth-child(7) { transition-delay: .48s; }
.m-arrow { width: 28px; height: 28px; display: grid; place-items: center; color: var(--s-fg); background: var(--s-t); border-radius: 50%; }
.m-card { padding: 11px 12px; background: var(--bg-surface); border: 1px solid var(--s-ring); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.m-card-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; font-weight: 700; color: var(--s-fg); }
.m-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; margin: 0; font-size: 12px; }
.m-card dt { font-weight: 600; color: var(--text-muted); }
.m-card dd { margin: 0; font-weight: 600; color: var(--text-title); }

/* ── Motion: everything is in its final state without JS. With JS, a card "plays" once it scrolls into view. ── */
.m-msg, .m-nudge, .m-answer, .m-learn, .m-float, .m-card, .m-coach, .m-evidence, .m-donut {
  transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--k, 0) * .4s + .15s);
}
.js .sol-card:not(.is-live) :is(.m-msg, .m-nudge, .m-answer, .m-learn, .m-float, .m-card, .m-coach, .m-evidence) { opacity: 0; transform: translateY(8px); }
.js .sol-card:not(.is-live) .m-donut { opacity: 0; transform: scale(.85); }
.js .sol-card:not(.is-live) .m-fill { width: 0; }
.js .sol-card:not(.is-live) .m-ring { --p: 0; }
.js .sol-card:not(.is-live) .m-type { max-width: 0; }
.js .sol-card:not(.is-live) .m-line { transform: scaleX(0); }
.js .sol-card:not(.is-live) .m-spark polyline { stroke-dashoffset: 1; }
.js .sol-card:not(.is-live) *, .sol-card.is-covered * { animation-play-state: paused; }
.sol-card.is-live .m-float { animation: m-bob 5s ease-in-out 1.4s infinite alternate; }
.sol-card.is-live .m-bl { animation-delay: 2.2s; }
@keyframes m-pulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes m-blink { 50% { opacity: 0; } }
@keyframes m-bob { to { translate: 0 -6px; } }

/* ── Small screens: plain stacked cards, copy above the visual ── */
@media (max-width: 991.98px) {
  .sol { --sol-peek: 38px; }
  .sol-body, .sol-card:nth-of-type(even) .sol-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sol-copy { padding: 26px 24px 12px; }
  .sol-title { font-size: 24px; }
  .sol-visual, .sol-card:nth-of-type(even) .sol-visual { order: 2; margin: 8px 12px 12px; padding: 24px 16px; }
  .m-float { display: none; }   /* the panel is too short for corner call-outs that don't sit on top of the window */
}
@media (max-width: 767.98px) {
  .sol-tab { padding: 0 18px; }
}
@media (max-width: 575.98px) {
  .sol-stats { grid-template-columns: 1fr; }
  .sol-visual, .sol-card:nth-of-type(even) .sol-visual { padding: 16px 10px; }
  .m-win { padding: 14px 12px; }
  .m-sum { grid-template-columns: minmax(0, 1fr); }
  .m-arrow { justify-self: center; transform: rotate(90deg); }
  .m-donut, .m-ring { width: 88px; height: 88px; }
  .m-theme { grid-template-columns: 88px minmax(0, 1fr) 40px; }
  .m-board li { grid-template-columns: 30px 60px minmax(0, 1fr) 34px; gap: 8px; }
}