/* AI tool pages (the AI tools group, generated by ops/build_offer_pages.py with offer.css): the problem
   figures, the how-it-works map, where the tool runs and the source list (the price section is in
   offer.css, shared with every service). Layout only; every color, size and radius comes from ka.css tokens.
   Motion: ai-tool.js. GSAP moves only the map's wires (scale), comets and rings (transform, opacity),
   tiles (scale) and stroke dashes; CSS here transitions colors, shadows and the tiles' unlit cover. */

/* ---------- the problem in numbers, under the hero ---------- */
.pg-tool main>section.tool-why{padding-top:8px;padding-bottom:clamp(40px,5vw,64px)}
.tool-why .kicker{margin-bottom:14px}
.pstats{display:grid;gap:16px}
@media (min-width:761px){
  .pstats.two{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  /* one figure: the number beside its sentence and source */
  .pstats:not(.two) .pstat{grid-template-columns:minmax(0,auto) minmax(0,1fr);column-gap:clamp(28px,4vw,56px);align-items:center}
}
.pstat{display:grid;align-content:start;gap:10px;margin:0;padding:clamp(20px,2.6vw,28px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pstat:first-child{background:linear-gradient(160deg,var(--tint) 0,var(--surface) 62%)}
.pstat-v{margin:0;max-width:none;font:700 clamp(34px,4.2vw,52px)/1.02 var(--disp);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;text-wrap:balance}
.pstat figcaption{display:grid;gap:8px}
.pstat-c{margin:0;font-size:var(--fs-base);line-height:1.55;color:var(--ink);max-width:60ch}
.pstat-n{margin:0;font-size:var(--fs-ui);line-height:1.55;color:var(--body);max-width:60ch}
.pstat-s{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--mut)}
.pstat-s .ext{color:var(--blue)}

/* ---------- how it works: the node map ----------
   The Portfolio system map's language (work.css .sysmap): a card with a star field, tiles joined by
   wires, and the tiles lit. Five kinds of node, told apart by icon, tile and label: input (outlined),
   code (tint), AI model (the button gradient), the person who approves (the hero: the ink tile with a
   sky halo, larger, its label a gradient pill) and output (outlined in blue). From 900px the steps sit
   in a row and each node's wire runs from its tile to the next one's; below that they stack, with the
   wire running down the tiles' column. Every wire is placed by CSS from its own node's box, so it meets
   the tiles at any width with no script. */
.hiw{position:relative;overflow:hidden;margin-top:32px;padding:22px 16px 14px;border-radius:var(--r-lg)}
.hiw-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hiw-sky circle{fill:var(--blue2);opacity:.24}
.hiw-sky circle.b{fill:var(--sky);opacity:.6}
.hiw-sky circle.c{fill:var(--sky);opacity:.4}
.hiw-con path{fill:none;stroke:var(--line-2);stroke-width:1;stroke-linejoin:round;stroke-linecap:round}
.hiw-sky circle.hiw-off,.hiw-con path.hiw-off{opacity:0}
.hiw-flow{--tile:44px;--hero:56px;--col:56px;--vgap:20px;position:relative;z-index:1;display:grid;gap:var(--vgap);list-style:none;padding:0;margin:0}
.hiw-node{--t:var(--tile);--tn:var(--tile);position:relative;display:grid;grid-template-columns:var(--col) minmax(0,1fr);column-gap:16px;align-items:start}
.hiw-node.is-hero{--t:var(--hero)}
.hiw-node.pre-hero{--tn:var(--hero)}
.hiw-ico{position:relative;z-index:2;isolation:isolate;justify-self:center;display:grid;place-items:center;width:var(--t);height:var(--t);border-radius:13px;color:var(--blue);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--blue2);transition:color var(--dur-ui) var(--ease-ui),box-shadow var(--dur-ui) var(--ease-ui)}
.hiw-ico svg{position:relative;z-index:1;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.k-code .hiw-ico{background:var(--tint-2);box-shadow:inset 0 0 0 1.5px var(--tint-line)}
.k-ai .hiw-ico{color:#fff;background:var(--grad-btn);box-shadow:0 6px 16px color-mix(in srgb,var(--blue) 22%,transparent)}
.k-output .hiw-ico{background:var(--tint);box-shadow:inset 0 0 0 2px var(--blue)}
.k-approve .hiw-ico{border-radius:17px;color:#fff;background:var(--ink);box-shadow:0 0 0 5px var(--surface),0 0 0 6.5px color-mix(in srgb,var(--sky) 55%,transparent),0 8px 22px color-mix(in srgb,var(--ink) 28%,transparent)}
.k-approve .hiw-ico svg{width:28px;height:28px}
.hiw-t{display:block;min-width:0;padding-top:2px}
.hiw-k{display:block;padding:4px 0;font:700 var(--fs-xs)/1.3 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--mut)}
.k-approve .hiw-k{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--grad-btn);color:#fff;letter-spacing:.08em;box-shadow:0 4px 12px color-mix(in srgb,var(--blue) 22%,transparent)}
/* five steps in a row at 900 to 1099px leave a 145 to 170px column: the pill stays on one line */
@media (min-width:900px) and (max-width:1099px){.k-approve .hiw-k{white-space:nowrap;padding:4px 6px;font-size:11.5px;letter-spacing:.03em}}
.hiw-n{display:block;margin-top:2px;font:600 var(--fs-lg)/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.k-approve .hiw-n{color:var(--blue)}
.hiw-l{display:block;margin-top:4px;font-size:var(--fs-sm);line-height:1.5;color:var(--body);text-wrap:pretty}
/* the wire from this node's tile to the next one's: down the tiles' column on phones */
.hiw-w{position:absolute;left:calc(var(--col) / 2 - 1.5px);top:calc(var(--t) + 8px);width:3px;height:calc(100% + var(--vgap) - var(--t) - 16px);border-radius:3px;background:linear-gradient(180deg,var(--blue2),var(--sky));transform-origin:50% 0;pointer-events:none}
/* the comets and rings ai-tool.js adds: a bright head with a tail along the wire */
.hiw-pk{position:absolute;z-index:3;left:calc(var(--col) / 2);top:calc(var(--t) + 8px);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px color-mix(in srgb,var(--sky) 85%,transparent),0 0 18px 5px color-mix(in srgb,var(--sky) 70%,transparent);opacity:0;pointer-events:none}
.hiw-pk::before{content:"";position:absolute;left:50%;bottom:50%;width:3px;height:44px;margin-left:-1.5px;border-radius:3px;background:linear-gradient(0deg,color-mix(in srgb,var(--sky) 95%,transparent),transparent)}
.hiw-rip{position:absolute;inset:0;z-index:-2;border-radius:inherit;box-shadow:0 0 0 1.5px var(--sky);opacity:0;pointer-events:none}
@media (min-width:900px){
  .hiw{margin-top:36px;padding:34px 26px 28px}
  .hiw-flow{--tile:48px;--hero:64px;--gap:18px;grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--gap);row-gap:0}
  .hiw-node{display:flex;flex-direction:column;align-items:center;text-align:center}
  .hiw-ico{margin:calc((var(--hero) - var(--t)) / 2) 0}
  .hiw-t{padding-top:16px}
  .hiw-l{max-width:24ch;margin-inline:auto}
  .hiw-w{left:calc(50% + var(--t) / 2 + 8px);top:calc(var(--hero) / 2 - 1.5px);width:calc(100% + var(--gap) - (var(--t) + var(--tn)) / 2 - 16px);height:3px;background:linear-gradient(90deg,var(--blue2),var(--sky));transform-origin:0 50%}
  .hiw-pk{left:calc(50% + var(--t) / 2 + 8px);top:calc(var(--hero) / 2)}
  .hiw-pk::before{left:auto;right:50%;bottom:auto;top:50%;width:44px;height:3px;margin:-1.5px 0 0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--sky) 95%,transparent))}
}
@media (max-width:600px){.hiw-n{font-size:17px}}
/* live (ai-tool.js): tiles wait unlit, under a cover that fades as each one lights */
.hiw-ico::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line-2);opacity:0;transition:opacity var(--dur-ui) var(--ease-ui)}
.hiw-live .hiw-node:not(.on) .hiw-ico{color:var(--mut);box-shadow:none}
.hiw-live .hiw-node:not(.on) .hiw-ico::after{opacity:1}
@media print{.hiw-pk,.hiw-rip{display:none}}

/* the pattern the tool is built on, under the map */
.trust .hiw-pat{margin-top:0}
.hiw-pat{margin-top:16px;max-width:860px;padding:18px 22px 10px;border-radius:var(--r);background:var(--tint);border:1px solid var(--tint-line)}
.hiw-pat-k{margin:0 0 6px;font:700 var(--fs-xs)/1.25 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--blue)}
.hiw-pat p:not(.hiw-pat-k){font-size:var(--fs-ui);line-height:1.6;color:var(--body);max-width:72ch}

/* ---------- where the tool runs (in the data box) ---------- */
.runs{display:flex;align-items:center;gap:10px;width:fit-content;max-width:100%;margin:-2px 0 10px;padding:7px 14px 7px 10px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--tint-line);font:600 var(--fs-sm)/1.35 var(--sans);color:var(--ink)}
.runs::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--blue2);box-shadow:0 0 0 3px var(--tint-2)}
.runs-ours::before{background:var(--sky)}
.runs-mixed::before{background:linear-gradient(90deg,var(--sky) 50%,var(--blue2) 50%)}

/* ---------- sources, after the FAQ ---------- */
.srcs{margin-top:44px;max-width:760px}
.srcs h2{font-size:var(--fs-xl);margin-bottom:12px}
.src-list{padding-left:22px;font-size:var(--fs-sm);line-height:1.55;color:var(--body)}
.src-list li{margin-bottom:8px;padding-left:4px}
.src-list li::marker{color:var(--mut);font-variant-numeric:tabular-nums}
.src-y{color:var(--mut)}