/* Automation page — same sheet, extra figures: pipeline, gates, bars, calculator, facts, pricing, FAQ */
.ahero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:calc(100svh - var(--head));border-bottom:1px solid var(--line)}
.ahero-copy{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:clamp(28px,6vh,72px) var(--g);border-right:1px solid var(--line)}
.ahero h1{max-width:16ch}
.ahero-fig{display:flex;flex-direction:column;justify-content:center;padding:var(--g)}
@media (max-width:959px){.ahero{grid-template-columns:minmax(0,1fr);min-height:0}.ahero-copy{border-right:0;border-bottom:1px solid var(--line);padding-top:40px;padding-bottom:40px}}

/* svg figures */
.pipe,.gates{width:100%;height:auto;color:var(--ink);background:var(--bg)}
.pipe .wire path,.gates .wire path{fill:none;stroke:var(--acc);stroke-width:1.4;stroke-dasharray:6 5;animation:dash 1.2s linear infinite}
.pipe .node rect{fill:var(--bg);stroke:currentColor;stroke-width:1.2}
.pipe .node text{font:700 12px var(--sans);fill:currentColor;text-anchor:middle;letter-spacing:-.01em}
.pipe .node .sub,.gates .sub,.pipe .tick text{font:400 9.5px var(--mono);fill:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;text-anchor:middle;font-weight:400}
.pipe .tick text{text-anchor:start;fill:var(--ink-2)}
.pipe .node.you rect{stroke:var(--acc);stroke-width:1.6}
.pipe .node.you text:not(.sub){fill:var(--acc)}
.pipe .node.stop rect{stroke-dasharray:4 3}
.gates .gate rect{fill:var(--acc)}
.gates .gate text{font:700 12px var(--sans);fill:currentColor;letter-spacing:-.01em}
.gates .gate .sub{text-anchor:start}
.gates .robot .sub,.gates .world .sub{text-anchor:middle}
.gates .robot circle,.gates .world circle{fill:var(--bg);stroke:currentColor;stroke-width:1.4}
.gates .world circle{fill:currentColor}
@media (prefers-reduced-motion:reduce){.pipe .wire path,.gates .wire path{animation:none}}

/* three columns */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.three .col{background:var(--bg);padding:clamp(22px,3vh,32px) var(--g) 36px;display:flex;flex-direction:column;gap:14px}
.three .col>.mono .num{display:inline-block;min-width:22px;color:var(--acc)}
.three h3{font:700 clamp(20px,1.7vw,26px)/1.15 var(--sans);letter-spacing:-.025em;min-height:2.3em}
.three .list li{grid-template-columns:30px 1fr;font-size:14px}
.result{margin-top:auto;padding-top:14px;color:var(--ink)}

/* how */
.how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.how-grid>*{background:var(--bg);padding:clamp(22px,3vh,32px) var(--g) 36px}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:18px 0;border-top:1px solid var(--line);position:relative}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps b{display:block;font:700 clamp(18px,1.5vw,22px)/1.2 var(--sans);letter-spacing:-.02em;margin-bottom:6px}
.steps p{color:var(--ink-2);font-size:14.5px;max-width:48ch}
.steps .tag{display:inline-block;margin-top:8px;color:var(--acc)}
.steps li:hover::before{content:"";position:absolute;inset:-1px calc(-1 * var(--g) / 2);z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--acc) 50%,transparent 50%) repeat-x 0 0/12px 1px,linear-gradient(90deg,var(--acc) 50%,transparent 50%) repeat-x 0 100%/12px 1px,linear-gradient(0deg,var(--acc) 50%,transparent 50%) repeat-y 0 0/1px 12px,linear-gradient(0deg,var(--acc) 50%,transparent 50%) repeat-y 100% 0/1px 12px;animation:ants .7s linear infinite}
.steps li:hover b{color:var(--acc)}
@media (max-width:959px){.how-grid,.three{grid-template-columns:minmax(0,1fr)}}

/* time bars */
.time-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.time-grid>*{background:var(--bg);padding:clamp(22px,3vh,32px) var(--g) 36px}
.bars{display:grid;gap:14px;padding:18px 0}
.bars .row{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,2fr) auto;align-items:center;gap:14px}
.bars .lbl{font-size:14px;color:var(--ink-2)}
.bars .track{position:relative;height:22px;background:rgba(242,242,240,.06)}
.bars .track i{position:absolute;left:0;width:100%;height:9px;transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,.84,.26,1)}
.bars .track .was{top:0;background:rgba(242,242,240,.28);transition-delay:calc(var(--i,0) * 140ms)}
.bars .track .now{bottom:0;background:var(--acc);transition-delay:calc(var(--i,0) * 140ms + 420ms)}
.bars .track .now::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3px;background:#fff;opacity:0;transition:opacity .4s ease calc(var(--i,0) * 140ms + 1.3s)}
.is-in .bars .track i{transform:scaleX(var(--w))}
.is-in .bars .track .now::after{opacity:.9}
.bars .val{color:var(--ink);white-space:nowrap;opacity:0;transform:translateX(8px);transition:opacity .6s ease calc(var(--i,0) * 140ms + 700ms),transform .6s var(--ease) calc(var(--i,0) * 140ms + 700ms)}
.is-in .bars .val{opacity:1;transform:none}
.bars .total .track i{height:11px}
.bars .total .lbl{color:var(--ink);font-weight:700}
.bars .total .track{height:26px}
.bars .total .track .now::after{animation:none}
.sw{display:inline-block;width:14px;height:6px;margin:0 6px 0 0;vertical-align:middle}
.sw.was{background:rgba(242,242,240,.28)}.sw.now{background:var(--acc)}
.time-copy{display:flex;flex-direction:column;gap:22px;justify-content:center}
.time-copy .big{font:500 clamp(20px,2vw,28px)/1.3 var(--sans);letter-spacing:-.02em;max-width:28ch}
.time-copy .note{color:var(--ink-2);font-size:14.5px;max-width:48ch}
@media (max-width:959px){.time-grid{grid-template-columns:minmax(0,1fr)}.bars .row{grid-template-columns:minmax(0,1fr)}.bars .track{order:2}.bars .val{order:1;justify-self:end}}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.calc>*{background:var(--bg);padding:clamp(22px,3vh,32px) var(--g) 36px}
.calc-form{display:flex;flex-direction:column;gap:22px}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.field output{font:700 clamp(22px,2vw,30px)/1 var(--sans);letter-spacing:-.03em}
.field input[type=range]{width:100%;height:28px;margin:0;accent-color:var(--acc);cursor:pointer}
.field select{width:100%;min-height:48px;padding:0 12px;border:1px solid var(--ink);background:var(--bg);color:var(--ink);font:500 14px var(--sans)}
.field.check label{justify-content:flex-start;align-items:center;font-size:14px;cursor:pointer;min-height:44px;margin:0}
.field.check input{width:18px;height:18px;accent-color:var(--acc);margin-right:10px}
.calc-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
.kpi{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.kpi b{font:700 clamp(30px,3.4vw,54px)/1 var(--sans);letter-spacing:-.04em;color:var(--acc)}
.timeline{grid-column:1/-1}
.tl{position:relative;height:56px;margin:14px 0 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tl-fill{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:repeating-linear-gradient(90deg,var(--acc) 0 6px,transparent 6px 10px);opacity:.9;transition:width .5s var(--ease)}
.tl-mark{position:absolute;top:-1px;bottom:-1px;left:var(--p,0%);width:2px;background:var(--ink);transition:left .5s var(--ease)}
.tl-mark span{position:absolute;left:8px;top:8px;white-space:nowrap;color:var(--ink)}
.tl-l,.tl-r{position:absolute;bottom:-22px;color:var(--ink-3)}
.tl-l{left:0}.tl-r{right:0}
@media (max-width:959px){.calc{grid-template-columns:minmax(0,1fr)}.calc-out{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:759px){.calc-out{grid-template-columns:minmax(0,1fr)}}

/* facts */
.facts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.fact{background:var(--bg);padding:22px var(--g) 28px;display:flex;flex-direction:column;gap:8px;position:relative}
.fact b{font:700 clamp(34px,3.6vw,56px)/1 var(--sans);letter-spacing:-.045em}
.fact p{color:var(--ink-2);font-size:14px;line-height:1.5}
.fact:hover b{color:var(--acc)}
.fact:hover::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--acc) 50%,transparent 50%) repeat-x 0 0/12px 1px,linear-gradient(90deg,var(--acc) 50%,transparent 50%) repeat-x 0 100%/12px 1px,linear-gradient(0deg,var(--acc) 50%,transparent 50%) repeat-y 0 0/1px 12px,linear-gradient(0deg,var(--acc) 50%,transparent 50%) repeat-y 100% 0/1px 12px;animation:ants .7s linear infinite}
@media (max-width:1100px){.facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.facts-grid{grid-template-columns:minmax(0,1fr)}}

/* pricing */
.price{border-top:1px solid var(--line)}
.price-row{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,2fr);gap:16px;padding:16px var(--g);border-bottom:1px solid var(--line);align-items:baseline;position:relative}
.price-row.head{padding-top:12px;padding-bottom:12px;color:var(--ink-3)}
.price-row b{font:700 clamp(16px,1.3vw,19px)/1.25 var(--sans);letter-spacing:-.015em}
.price-row .num{font:700 clamp(18px,1.6vw,24px)/1.1 var(--sans);letter-spacing:-.03em}
.price-row>span:last-child{color:var(--ink-2);font-size:14.5px;max-width:60ch}
.price-row:not(.head):hover b,.price-row:not(.head):hover .num{color:var(--acc)}
.price-row:not(.head):hover::before{content:"";position:absolute;inset:0 calc(var(--g) / 2);z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--acc) 50%,transparent 50%) repeat-x 0 0/12px 1px,linear-gradient(90deg,var(--acc) 50%,transparent 50%) repeat-x 0 100%/12px 1px,linear-gradient(0deg,var(--acc) 50%,transparent 50%) repeat-y 0 0/1px 12px,linear-gradient(0deg,var(--acc) 50%,transparent 50%) repeat-y 100% 0/1px 12px;animation:ants .7s linear infinite}
.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;padding:24px var(--g) 40px}
.terms p{color:var(--ink-2);font-size:14.5px;max-width:52ch}
.terms b{color:var(--ink)}
@media (max-width:759px){.price-row{grid-template-columns:minmax(0,1fr) auto}.price-row>span:last-child{grid-column:1/-1}.price-row.head{display:none}.terms{grid-template-columns:minmax(0,1fr)}}

/* faq */
.faq{border-top:1px solid var(--line);padding:0 var(--g) 24px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/1 var(--mono);color:var(--ink-3);transition:transform var(--t),color var(--t)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--acc)}
.faq summary b{font:700 clamp(16px,1.3vw,19px)/1.25 var(--sans);letter-spacing:-.015em}
.faq summary:hover b{color:var(--acc)}
.faq p{padding:0 0 18px 52px;color:var(--ink-2);font-size:14.5px;max-width:62ch}

.back-link a{text-decoration:none;color:var(--ink-2)}
.back-link a:hover{color:var(--acc)}

/* odometer: big numbers roll like a mechanical counter — drum of 0–9 twice, 1.15em per row (must match ODO in automation.js) */
.od{display:inline-flex;height:1.15em;overflow:hidden;line-height:1.15;font-variant-numeric:tabular-nums}
.od>span{display:block;height:1.15em}
.od .od-r{display:block;transition:transform 1.2s cubic-bezier(.45,.02,.15,1);will-change:transform}
.od .od-r.no-t{transition:none!important}
.od .od-r i{display:block;height:1.15em;font-style:normal}
.price-row .od>span{margin-right:-.03em}
@media (prefers-reduced-motion:reduce){.od .od-r{transition:none!important}}

/* reveal for figures and grids */
.page-auto [data-reveal]:not(.card){opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s var(--ease)}
.page-auto [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.page-auto [data-reveal]:not(.card){opacity:1;transform:none}.bars .track i,.bars .val,.bars .track .now::after{transition:none!important}.bars .val{opacity:1;transform:none}}

html.is-shot .ahero{min-height:0}

/* language switch */
.lang{display:inline-flex;align-items:stretch;border:1px solid var(--line);font:500 11px/1 var(--mono);letter-spacing:.06em}
.lang a,.lang b{display:inline-flex;align-items:center;min-height:30px;padding:0 9px;text-decoration:none;color:var(--ink-3);font-weight:500;transition:color var(--t),background var(--t)}
.lang b{color:var(--bg);background:var(--ink)}
.lang a:hover{color:var(--acc)}
@media (max-width:759px){.lang a,.lang b{min-height:28px;padding:0 7px}}