/* AI & Automation page. Loaded only on tmpl-automation.php. */

/* ---------- Invoice demo ---------- */
.ae-demo{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--line-2);border-radius:26px;padding:clamp(22px,3.2vw,44px);position:relative;overflow:hidden;box-shadow:0 50px 100px -60px rgba(0,0,0,.9)}
.ae-demo::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 50% 0%,rgba(139,108,246,.16),transparent 70%)}
.ae-steps{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 28px;position:relative}
.ae-step{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mut);border:1px solid var(--line);border-radius:100px;padding:7px 14px 7px 8px;transition:color .3s,border-color .3s,background .3s}
.ae-step i{font-style:normal;font-family:var(--f-mono);font-size:11px;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06)}
.ae-step.on{color:#fff;border-color:rgba(47,125,246,.6);background:rgba(47,125,246,.14)}
.ae-step.on i{background:var(--blue);color:#fff}
.ae-step.done{color:var(--sub)}
.ae-step.done i{background:rgba(47,125,246,.3);color:#fff}
.ae-step.human.on{border-color:rgba(255,74,79,.6);background:rgba(255,74,79,.12)}
.ae-step.human.on i{background:var(--red)}

.ae-stage{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:0;position:relative}
.ae-doc{background:#EEF1F5;color:#1A1F29;border-radius:6px;padding:22px 22px 20px;font-size:13px;line-height:1.5;position:relative;overflow:hidden;transform:rotate(-1.6deg) translateY(18px);opacity:.25;transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1);box-shadow:0 24px 50px -24px rgba(0,0,0,.8)}
.ae-demo.arrived .ae-doc{opacity:1;transform:rotate(-1.6deg)}
.ae-doc .hd{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px dashed #B9C0CB;padding-bottom:10px;margin-bottom:10px}
.ae-doc .sup{font-family:Georgia,'Times New Roman',serif;font-size:17px;font-weight:700;letter-spacing:-.01em}
.ae-doc .tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:#6B7380;text-align:right}
.ae-doc table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12.5px}
.ae-doc td{padding:3px 0}
.ae-doc td:last-child{text-align:right}
.ae-doc .tot td{border-top:1px solid #B9C0CB;padding-top:6px;font-weight:700}
.ae-doc [data-f]{border-radius:3px;transition:background .3s,box-shadow .3s}
.ae-doc [data-f].hit{background:rgba(47,125,246,.2);box-shadow:0 0 0 1.5px rgba(47,125,246,.75)}
.ae-doc .scan{position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,rgba(47,125,246,.28) 70%,rgba(47,125,246,.75) 98%,transparent);opacity:0;pointer-events:none}
.ae-demo.scanning .ae-doc .scan{opacity:1;animation:ae-scan 1.5s linear infinite}
@keyframes ae-scan{from{top:-30%}to{top:100%}}

.ae-link{height:2px;position:relative;margin:0 8px;background:repeating-linear-gradient(90deg,rgba(90,160,255,.45) 0 6px,transparent 6px 12px)}
.ae-demo.scanning .ae-link{animation:ae-flow .6s linear infinite}
.ae-link::after{content:"";position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left:7px solid rgba(90,160,255,.7)}
@keyframes ae-flow{from{background-position:0 0}to{background-position:12px 0}}

.ae-bill{background:#0F1218;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .5s,box-shadow .5s}
.ae-demo.posted .ae-bill{border-color:rgba(62,207,142,.55);box-shadow:0 0 0 4px rgba(62,207,142,.08)}
.ae-bill .bh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--sub)}
.ae-bill .bh b{color:#fff;font-weight:600}
.ae-status{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;padding:4px 9px;border-radius:100px;background:rgba(255,255,255,.06);color:var(--mut);white-space:nowrap}
.ae-status.busy{background:rgba(47,125,246,.16);color:var(--blue-glow)}
.ae-status.wait{background:rgba(255,74,79,.14);color:#FF8A8D}
.ae-status.ok{background:rgba(62,207,142,.15);color:#5FE0A6}
.ae-bill dl{margin:0;padding:6px 16px 4px}
.ae-bill .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:13.5px}
.ae-bill .row:last-child{border-bottom:0}
.ae-bill dt{color:var(--mut)}
.ae-bill dd{margin:0;color:#fff;font-family:var(--f-mono);font-size:12.5px;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.ae-bill .row.filled dd{opacity:1;transform:none}
.ae-bill .row.big dd{font-size:14px;font-weight:500}
.ae-bill .bf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.02);font-size:12.5px;color:var(--mut)}
.ae-approve{font:600 13px var(--f-body);color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:9px;padding:8px 15px;cursor:default;transition:background .25s,box-shadow .25s,transform .15s}
.ae-approve.wait{background:var(--red);border-color:var(--red);cursor:pointer;animation:ae-pulse 1.1s ease-in-out infinite}
.ae-approve.pressed{background:#1F9D63;border-color:#1F9D63;transform:scale(.97);animation:none}
@keyframes ae-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,74,79,.55)}50%{box-shadow:0 0 0 8px rgba(255,74,79,0)}}

.ae-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:26px;position:relative}
.ae-log{color:var(--sub);font-size:15px;opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.ae-log.show{opacity:1;transform:none}
.ae-log b{color:#fff}
.ae-replay{padding:11px 20px;font-size:14px}

/* ---------- Calculator ---------- */
.ae-calc{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(18px,3vw,34px);align-items:stretch}
.ae-sliders,.ae-results{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--line-2);border-radius:24px;padding:clamp(24px,3vw,38px)}
.ae-field + .ae-field{margin-top:26px}
.ae-field label{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--sub);margin-bottom:12px}
.ae-field label output{font-family:var(--f-mono);color:#fff;font-size:14px}
.ae-field input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--blue) var(--p,50%),rgba(255,255,255,.12) var(--p,50%));outline-offset:6px}
.ae-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px rgba(47,125,246,.35);cursor:pointer}
.ae-field input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 5px rgba(47,125,246,.35);cursor:pointer}
.ae-field input[type=range]:focus-visible{outline:2px solid var(--blue-glow)}
.ae-results{display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(90% 80% at 100% 0%,rgba(139,108,246,.28),transparent 60%),linear-gradient(160deg,#17153A 0%,#0C0F1C 75%);border-color:rgba(185,166,255,.3)}
.ae-big{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ae-big .k{font-family:var(--f-disp);font-size:clamp(34px,4.4vw,52px);font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ae-big .l{color:var(--sub);font-size:14px;margin-top:8px}
.ae-big .wide{grid-column:1 / -1;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}
.ae-big .wide .k{color:var(--blue-glow)}
.ae-note{color:var(--mut);font-size:13px;margin-top:22px;line-height:1.55}
.ae-results .btn{margin-top:22px;align-self:flex-start}

/* ---------- What we automate: each job, and the systems it runs between ---------- */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cap{position:relative;padding:24px 26px 28px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--line);transition:border-color .3s,transform .3s}
.cap:hover{border-color:rgba(185,166,255,.4);transform:translateY(-3px)}
.cap-flow{display:flex;align-items:center;margin:0 0 24px;padding:12px;border-radius:14px;background:rgba(4,6,11,.5);border:1px solid rgba(255,255,255,.06)}
.cap-flow span{flex:none;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 9px;border-radius:8px;color:#D9DEE8;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);white-space:nowrap}
.cap-flow span.ai{color:#fff;background:rgba(139,108,246,.24);border-color:rgba(185,166,255,.6);box-shadow:0 0 14px -4px rgba(139,108,246,.8)}
.cap-flow i{position:relative;flex:1;min-width:12px;height:1px;margin:0 2px;background:rgba(255,255,255,.18)}
.cap-flow i::after{content:"";position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:#B9A6FF;box-shadow:0 0 8px #B9A6FF;opacity:0}
.cap:hover .cap-flow i::after{animation:cap-run 1.2s var(--ease) infinite}
.cap:hover .cap-flow i:nth-of-type(2)::after{animation-delay:.6s}
@keyframes cap-run{0%{left:0;opacity:0}20%,80%{opacity:1}100%{left:calc(100% - 5px);opacity:0}}
.cap h3{font-family:var(--f-disp);font-size:20px;letter-spacing:-.015em;line-height:1.25;color:#fff}
.cap h3+p{margin-top:10px;color:var(--sub);font-size:15px;line-height:1.62}

/* The comparison table, as the short version of the three cards above it */
.fit-cmp{margin-top:34px}
.fit-cmp-h{font-family:var(--f-disp);font-size:clamp(20px,1.9vw,24px);letter-spacing:-.02em;margin-bottom:14px}

/* ---------- Built with: tool cards ---------- */
.tools{display:grid;gap:28px}
.tools-group{display:grid;gap:14px}
.tg-l{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;letter-spacing:.16em;color:#B9A6FF}
.tg-l::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.tools-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tools-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool{position:relative;padding:24px 22px 22px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--line);transition:border-color .3s,transform .3s}
.tool:hover{border-color:rgba(185,166,255,.4);transform:translateY(-3px)}
.tool b{display:block;font-family:var(--f-disp);font-size:19px;letter-spacing:-.015em;color:#fff;margin-bottom:10px}
.tool p{color:var(--sub);font-size:14.5px;line-height:1.6}
.tools-group.ai .tool{background:radial-gradient(90% 90% at 100% 0%,rgba(139,108,246,.18),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border-color:rgba(185,166,255,.22)}
.tools-note{max-width:78ch;color:var(--sub);font-size:16px;line-height:1.7;padding:20px 22px;border-left:2px solid #8B6CF6;background:rgba(139,108,246,.06);border-radius:0 14px 14px 0}

/* ---------- In practice: before and after ---------- */
.bfa{display:grid;gap:16px}
.bfa-card{position:relative;display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2fr);gap:12px 32px;align-items:start;padding:30px 30px 30px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));border:1px solid var(--line)}
.bfa-n{font-size:12px;letter-spacing:.16em;color:#B9A6FF;grid-column:1}
.bfa-card h3{grid-column:1;font-family:var(--f-disp);font-size:clamp(22px,2.2vw,28px);letter-spacing:-.025em;line-height:1.12}
.bfa-cols{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bfa-before,.bfa-after{padding:20px 20px 18px;border-radius:16px}
.bfa-before{background:rgba(255,74,79,.05);border:1px solid rgba(255,74,79,.18)}
.bfa-after{background:rgba(62,213,152,.05);border:1px solid rgba(62,213,152,.22)}
.bfa-before .mono,.bfa-after .mono{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.14em;margin-bottom:10px}
.bfa-before .mono{color:#FF9497}.bfa-after .mono{color:#7EE8B5}
.bfa-before .mono::before,.bfa-after .mono::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.bfa-before p,.bfa-after p{color:var(--sub);font-size:15px;line-height:1.65}
.bfa-after p{color:#D3DBE7}
.bfa-after a{color:var(--blue-glow);text-decoration:underline;text-decoration-color:rgba(90,160,255,.4);text-underline-offset:3px}

/* ---------- Where AI fits ---------- */
.fit3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fit{padding:30px 28px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--line)}
.fit-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:22px}
.fit-ic svg{width:22px;height:22px}
.fit.ai .fit-ic{color:#D9CCFF;background:rgba(139,108,246,.2);box-shadow:inset 0 0 0 1px rgba(185,166,255,.4)}
.fit.rule .fit-ic{color:#A9CCFF;background:rgba(47,125,246,.18);box-shadow:inset 0 0 0 1px rgba(90,160,255,.4)}
.fit.human .fit-ic{color:#FFD38A;background:rgba(255,190,90,.14);box-shadow:inset 0 0 0 1px rgba(255,190,90,.4)}
.fit h3{font-family:var(--f-disp);font-size:clamp(19px,1.7vw,22px);letter-spacing:-.015em;line-height:1.25;margin-bottom:12px}
.fit p{color:var(--sub);font-size:15px;line-height:1.66}
.fit-note{margin-top:22px;max-width:80ch;color:var(--sub);font-size:16px;line-height:1.7}
.fit-note a{color:var(--blue-glow);text-decoration:underline;text-decoration-color:rgba(90,160,255,.4);text-underline-offset:3px}

@media (max-width:1100px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.caps{grid-template-columns:1fr}.cap{padding:20px 20px 24px}}
@media (max-width:860px){
  .bfa-card{grid-template-columns:1fr;padding:24px 22px}
  .bfa-cols{grid-column:1;grid-row:auto;grid-template-columns:1fr}
  .fit3{grid-template-columns:1fr}
  .tools-grid,.tools-grid.two{grid-template-columns:1fr}
  .ae-stage{grid-template-columns:1fr;gap:22px}
  .ae-link{width:2px;height:34px;margin:0 auto;background:repeating-linear-gradient(180deg,rgba(90,160,255,.45) 0 6px,transparent 6px 12px)}
  .ae-link::after{right:-4px;top:auto;bottom:-6px;border:5px solid transparent;border-top:7px solid rgba(90,160,255,.7)}
  .ae-calc{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ae-doc,.ae-bill dd,.ae-log{transition:none}
  .ae-demo.scanning .ae-doc .scan,.ae-approve.wait,.cap:hover .cap-flow i::after{animation:none}
  .cap,.cap:hover{transform:none}
}