/* ── AI Audit CTA · final of direction A "The deliverable: the audit report assembles itself" ──
   Visual = the audit output itself: report page (01 Mapa + 04 Doporučení), savings estimate (02),
   90-day roadmap (03), page stack + presentation (05). Entrance ported from 21st "Tweenly Image Fan" (39908),
   roadmap from "Roadmap Card" (5652), ledger dot leaders from "Receipt Pricing" (26309),
   linked lift/push from "Hover Stack" (26244). Everything inside .au-stage is sized in em.
   Two compositions, chosen by the visual's own width (container query), never by the viewport:
   wide (stage 44em, 1em = stage/44) and compact (stage 28em, 1em ≤ 13px) for columns ≤ 500px. */
/* Mapa is the offer's entry point: it sits under #nabidka (no bottom padding there) at 3/4 of a section step */
#audit{padding-top:calc(var(--sec-y)*.75)}
#audit .au-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center;padding:64px;border-radius:var(--r-l);background:var(--black);color:var(--ground);overflow:hidden;overflow:clip}
#audit .au-card::before{content:"";position:absolute;z-index:-1;right:-10%;top:-20%;width:70%;height:140%;background:radial-gradient(closest-side,rgba(248,247,245,.06),transparent);pointer-events:none}
#audit .au-card :focus-visible{outline-color:var(--ground)}
#audit .au-txt .kick{margin-bottom:var(--kick-gap)}
#audit h2{margin:0 0 18px;color:var(--ground)}
#audit .au-txt>p{color:rgba(248,247,245,.74);max-width:44ch}

/* deliverables: numbered list that maps 1:1 to the visual */
#audit .au-list{list-style:none;margin:28px 0 0;padding:0;max-width:460px;border-top:1px solid rgba(248,247,245,.12)}
#audit .au-list li{display:flex;align-items:center;gap:14px;min-height:42px;padding:9px 0;border-bottom:1px solid rgba(248,247,245,.12);font-size:15.5px;line-height:1.35;color:rgba(248,247,245,.84);transition:color .35s var(--ease-out)}
#audit .au-n{flex:none;display:inline-grid;place-items:center;width:30px;height:22px;border-radius:6px;font:500 11px/1 var(--mono);letter-spacing:.02em;color:rgba(248,247,245,.66);box-shadow:inset 0 0 0 1px rgba(248,247,245,.18);transition:background .35s var(--ease-out),color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
#audit .au-list li.au-on{color:var(--ground)}
/* active row = a ring, not a filled chip: the yellow CTA stays the brightest small thing in the text column */
#audit .au-list li.au-on .au-n{background:rgba(248,247,245,.14);color:var(--ground);box-shadow:inset 0 0 0 1px rgba(248,247,245,.7)}

#audit .au-cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;margin-top:32px}
#audit .au-meta{display:inline-flex;align-items:flex-start;gap:8px;max-width:36ch;font-size:14px;line-height:1.45;color:rgba(248,247,245,.66)}
#audit .au-meta svg{flex:none;width:16px;height:16px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#audit .au-key{display:block;font-weight:500;color:var(--ground)}

/* ── visual ── */
#audit .au-vis{position:relative;min-width:0;container-type:inline-size}
/* section locals alias the site tokens (base.css / style.css): ink, --label (5.9:1 on white), --paper-2 chips */
#audit .au-stage{--au-k:var(--black);--au-m:var(--label);--au-l:rgba(0,0,0,.08);--au-chip:var(--paper-2);--io:cubic-bezier(.645,.045,.355,1);--o3:cubic-bezier(.215,.61,.355,1);
  position:relative;height:43em;font-size:11px;font-size:calc(100cqw / 44);line-height:1.3;color:var(--au-k);font-family:var(--font);text-align:left}
#audit .au-l{position:absolute}
#audit .au-b{display:inline-grid;place-items:center;flex:none;min-width:2.3em;height:1.65em;padding:0 .35em;border-radius:.45em;background:var(--au-chip);border:1px solid var(--au-l);font:500 max(10.5px,.84em)/1 var(--mono);font-style:normal;letter-spacing:.02em;color:#3d3d3a;transition:background .35s var(--ease-out),color .35s var(--ease-out),border-color .35s var(--ease-out)}
#audit .au-on .au-b{background:var(--au-k);border-color:var(--au-k);color:#fff}
#audit .au-st{display:flex;align-items:center;gap:.55em;font-size:1.1em;font-weight:500;letter-spacing:-.005em;line-height:1.2;white-space:nowrap}
#audit .au-panel{background:#fff;border-radius:10px;border:1px solid var(--au-l);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18),0 28px 56px -24px rgba(0,0,0,.65);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
#audit .au-panel.au-on{transform:translateY(-.5em);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18),0 40px 70px -24px rgba(0,0,0,.8)}

/* 05 · page stack + presentation */
#audit .au-sheet{left:1.2em;top:2.8em;width:25.2em;height:32.6em;border-radius:6px;transform-origin:0 100%;transition:transform .6s var(--ease-out)}
#audit .au-s2{z-index:2;background:#E2E1DC;transform:rotate(3deg)}
#audit .au-s3{z-index:1;background:#B4B3AE;transform:rotate(6deg)}
#audit .au-s2.au-on{transform:rotate(5deg)}
#audit .au-s3.au-on{transform:rotate(10deg)}
#audit .au-slide{z-index:0;left:0;top:0;width:18em;height:11em;padding:.85em 1em;border-radius:8px;background:#232320;border:1px solid rgba(255,255,255,.14);transform:rotate(-4deg);transition:transform .6s var(--ease-out)}
#audit .au-slide.au-on{transform:rotate(-7deg) translate(-.6em,-1.4em)}
#audit .au-sh{display:flex;align-items:center;gap:.55em;font-size:1.05em;font-weight:500;color:rgba(248,247,245,.9)}
#audit .au-slide .au-b{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:rgba(248,247,245,.86)}
#audit .au-slide.au-on .au-b{background:var(--ground);border-color:var(--ground);color:var(--au-k)}
/* the bar chart sits in the visible strip, so the cropped dark card still reads as a slide */
#audit .au-bars{flex:none;display:flex;align-items:flex-end;gap:.3em;width:4.4em;height:1.5em;margin-left:auto}
#audit .au-bars i{flex:1;height:calc(var(--h)*100%);border-radius:2px 2px 0 0;background:rgba(255,255,255,.22)}

/* report page */
#audit .au-page{z-index:3;left:1.2em;top:2.8em;width:25.2em;height:32.6em;padding:1.4em 1.3em;border-radius:6px;background:#fff;box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
#audit .au-ph{display:flex;align-items:center;gap:.65em}
#audit .au-logo{flex:none;display:block;width:1.9em;height:1.9em;border-radius:25%;background:var(--yellow)}
#audit .au-logo svg{display:block;width:100%;height:100%}
#audit .au-ph b{font-size:1.2em;font-weight:500;letter-spacing:-.01em}
#audit .au-pn{margin-left:auto;font:400 max(10.5px,.92em)/1 var(--mono);color:var(--au-m);transition:color .35s var(--ease-out)}
#audit .au-pn.au-on{color:var(--au-k);font-weight:500}
#audit .au-ps{margin-top:.55em;padding-bottom:1em;border-bottom:1px solid var(--au-l);font-size:1em;color:var(--au-m)}
#audit .au-sec{position:relative;margin-top:1.1em}
#audit .au-sec::before{content:"";position:absolute;inset:-.55em -.7em;border-radius:8px;background:var(--ground);opacity:0;transition:opacity .45s var(--ease-out);z-index:0}
#audit .au-sec.au-on::before{opacity:1}
#audit .au-sec>*{position:relative}
#audit .au-map{display:grid;grid-template-columns:repeat(3,6.6em);grid-auto-rows:4.5em;gap:1.3em 1.4em;margin-top:.85em}
/* wires: solid = today's connection, dashed = proposed connection (same meaning as product card 02) */
#audit .au-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#audit .au-wires path{fill:none;stroke:rgba(20,20,20,.24);stroke-width:1.3}
#audit .au-wires .au-dash{stroke:var(--faint);stroke-dasharray:3 3}
#audit .au-node{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 .2em;background:#fff;border:1px solid var(--au-l);border-radius:8px;text-align:center}
#audit .au-ic{position:relative;display:grid;place-items:center;width:2em;height:2em;margin-bottom:.3em;border-radius:.5em;background:var(--au-chip);border:1px solid var(--au-l)}
#audit .au-ic svg{width:1.2em;height:1.2em;fill:none;stroke:#3d3d3a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#audit .au-node b{font-size:1.04em;font-weight:500;line-height:1.1}
/* findings: ink badge at the icon's top-right (size of card 01's .ob-c1-ok, never yellow) */
#audit .au-fx .au-ic::after{content:"";position:absolute;right:-.62em;top:-.42em;width:1.3em;height:1.3em;box-sizing:border-box;border-radius:50%;border:.17em solid #fff;background:var(--au-k) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.6v5.6' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12.5' r='1.35' fill='%23fff'/%3E%3C/svg%3E") 50% 50%/62% no-repeat;transition:opacity .3s ease,transform .45s var(--ease-out)}
#audit .au-recs{list-style:none;margin:.75em 0 0;padding:0;display:grid;gap:.5em}
#audit .au-recs li{display:flex;align-items:center;gap:.6em;font-size:1.04em;color:#3d3d3a;white-space:nowrap}
#audit .au-ck{flex:none;display:grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;background:var(--au-k)}
#audit .au-ck svg{width:.8em;height:.8em;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#audit .au-pf{position:absolute;left:1.3em;right:1.3em;bottom:1.4em;display:grid;gap:.55em}
#audit .au-pf i{height:.42em;border-radius:3px;background:var(--paper-2)}
#audit .au-pf i:nth-child(2){width:88%}
#audit .au-pf i:nth-child(3){width:56%}

/* 02 · savings estimate (ledger with dot leaders); the demo label sits right under the claim */
#audit .au-save{z-index:4;left:27.4em;top:7.6em;width:16.6em;padding:1.2em 1.3em 1em}
#audit .au-per{margin-left:auto;font:400 max(10.5px,.84em)/1 var(--mono);color:var(--au-m)}
/* "ušetří měsíčně" is longer than the old "měsíčně": it drops to its own line under the title instead of running off the card */
#audit .au-save .au-st{flex-wrap:wrap;white-space:normal;row-gap:.3em}
#audit .au-save .au-per{flex-basis:100%;margin-left:0}
#audit .au-big{display:flex;align-items:baseline;gap:.55em;margin-top:.75em;white-space:nowrap}
#audit .au-hl{position:relative;z-index:0;font-size:2.8em;font-weight:500;letter-spacing:-.035em;line-height:1}
#audit .au-hl::before{content:"";position:absolute;z-index:-1;left:-.05em;right:-.08em;bottom:.02em;height:.38em;border-radius:2px;background:var(--yellow);transform-origin:0 50%}
#audit .au-big small{font:500 .98em/1 var(--mono);color:var(--au-m)}
#audit .au-ledger{list-style:none;margin:.95em 0 0;padding:.8em 0 0;border-top:1px solid var(--au-l);display:grid;gap:.42em}
#audit .au-ledger li{display:flex;align-items:baseline;gap:.4em;font-size:1.02em;color:var(--au-m);white-space:nowrap}
#audit .au-ledger i{flex:1;min-width:1em;border-bottom:1px dotted rgba(0,0,0,.28);transform:translateY(-.28em)}
#audit .au-ledger b{font:500 max(10.5px,.92em)/1 var(--mono);color:var(--au-k)}
/* sample-data tag, the site-wide recipe (same as #hero .hx-note): 11px mono, .06em, --label (5.9:1 on white), no icon */
#audit .au-demo{display:flex;align-items:center;margin-top:.85em;padding-top:.7em;border-top:1px dashed rgba(0,0,0,.14);font:400 11px/1.2 var(--mono);letter-spacing:.06em;color:var(--label);white-space:nowrap}
#audit .au-demo svg{display:none}

/* 03 · 90-day roadmap (Roadmap Card: line + dots + phase labels) */
#audit .au-road{z-index:5;left:10.6em;top:32.6em;width:33.4em;padding:1.15em 1.3em 1.25em}
#audit .au-tl{position:relative;list-style:none;margin:1.05em 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
#audit .au-tl::before,#audit .au-tl::after{content:"";position:absolute;left:16.66%;right:16.66%;top:.55em;height:1px;background:rgba(0,0,0,.12)}
#audit .au-tl::after{right:auto;width:16.66%;height:1.5px;margin-top:-.25px;background:var(--au-k);transform-origin:0 50%}
#audit .au-tl li{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.2em;padding-top:1.75em;text-align:center}
#audit .au-tl i{position:absolute;left:50%;top:0;display:grid;place-items:center;width:1.1em;height:1.1em;margin-left:-.55em;border-radius:50%;background:#fff;border:1.5px solid rgba(20,20,20,.2)}
#audit .au-tl .au-now i{background:var(--au-k);border-color:var(--au-k);box-shadow:0 0 0 .18em #fff}
#audit .au-tl .au-now i::after{content:"";width:.38em;height:.38em;border-radius:50%;background:#fff}
#audit .au-tl em{font:400 max(10.5px,.92em)/1.2 var(--mono);font-style:normal;color:var(--au-m);white-space:nowrap}
#audit .au-tl span{font-size:1.02em;font-weight:500;white-space:nowrap}

/* ── entrance (JS adds .au-js, then .au-in when visible, .au-done when settled). Screen only: print shows the final state. ── */
@media screen{
  #audit.au-js:not(.au-in) .au-page{opacity:0;transform:translateY(9em);filter:blur(10px)}
  #audit.au-js:not(.au-in) .au-sheet{opacity:0;transform:none}
  #audit.au-js:not(.au-in) .au-slide{opacity:0;transform:translate(1.5em,3em)}
  #audit.au-js:not(.au-in) .au-save{opacity:0;transform:translate(-11em,3em) scale(.94);filter:blur(5px)}
  #audit.au-js:not(.au-in) .au-road{opacity:0;transform:translate(-5em,-9em) scale(.94);filter:blur(5px)}
  #audit.au-js:not(.au-in) .au-node,#audit.au-js:not(.au-in) .au-recs li,#audit.au-js:not(.au-in) .au-ledger li{opacity:0;transform:translateY(.6em)}
  #audit.au-js:not(.au-in) .au-fx .au-ic::after{opacity:0;transform:scale(.4)}
  #audit.au-js:not(.au-in) .au-wires{opacity:0}
  #audit.au-js:not(.au-in) .au-hl::before,#audit.au-js:not(.au-in) .au-tl::after{transform:scaleX(0)}
  #audit.au-js:not(.au-in) .au-tl li{opacity:0;transform:translateY(1.6em)}
}
#audit.au-in:not(.au-done) .au-page{transition:opacity .9s var(--o3),transform .9s var(--o3),filter .9s var(--o3)}
#audit.au-in:not(.au-done) .au-sheet,#audit.au-in:not(.au-done) .au-slide{transition:opacity .05s linear .8s,transform 1.1s var(--io) .8s}
#audit.au-in:not(.au-done) .au-s3{transition-delay:.86s}
#audit.au-in:not(.au-done) .au-slide{transition-delay:.92s}
#audit.au-in:not(.au-done) .au-save{transition:opacity .5s var(--o3) .85s,transform 1.1s var(--io) .85s,filter 1.1s var(--io) .85s}
#audit.au-in:not(.au-done) .au-road{transition:opacity .5s var(--o3) .97s,transform 1.1s var(--io) .97s,filter 1.1s var(--io) .97s}
#audit.au-in:not(.au-done) .au-node,#audit.au-in:not(.au-done) .au-recs li,#audit.au-in:not(.au-done) .au-ledger li{transition:opacity .45s var(--o3) calc(.55s + var(--d,0s)),transform .45s var(--o3) calc(.55s + var(--d,0s))}
#audit.au-in:not(.au-done) .au-fx .au-ic::after{transition:opacity .3s ease calc(1.5s + var(--d,0s)),transform .45s var(--ease-out) calc(1.5s + var(--d,0s))}
#audit.au-in:not(.au-done) .au-wires{transition:opacity .6s 1.15s}
#audit.au-in:not(.au-done) .au-hl::before{transition:transform .6s var(--o3) 1.9s}
#audit.au-in:not(.au-done) .au-tl li{transition:opacity .4s var(--o3) calc(1.6s + var(--d,0s)),transform .4s var(--o3) calc(1.6s + var(--d,0s))}
#audit.au-in:not(.au-done) .au-tl::after{transition:transform .7s var(--o3) 2.1s}
#audit .au-node:nth-child(3),#audit .au-ledger li:nth-child(2),#audit .au-tl li:nth-child(2){--d:.15s}
#audit .au-node:nth-child(4),#audit .au-ledger li:nth-child(3),#audit .au-tl li:nth-child(3){--d:.3s}
#audit .au-node:nth-child(5),#audit .au-ledger li:nth-child(4){--d:.45s}
#audit .au-node:nth-child(6){--d:.6s}
#audit .au-node:nth-child(7){--d:.75s}
#audit .au-recs li{--d:.9s}
#audit .au-recs li:nth-child(2){--d:1.05s}
#audit .au-recs li:nth-child(3){--d:1.2s}
#audit .au-ledger li{--d:.55s}
#audit .au-ledger li:nth-child(2){--d:.67s}
#audit .au-ledger li:nth-child(3){--d:.79s}
#audit .au-ledger li:nth-child(4){--d:.91s}

/* ── compact composition: whenever the visual column is ≤ 500px (phones, 601–640, 901–1260).
   Recomposed for legibility, not shrunk: 28em stage, 1em capped at 13px, panels under the report. ── */
@container (max-width:500px){
  #audit .au-stage{font-size:min(calc(100cqw / 28),13px);width:28em;height:45.6em;margin:0 auto}
  #audit .au-sheet,#audit .au-page{left:.3em;top:2.7em;width:26em;height:28.4em}
  #audit .au-page{padding:1.3em 1.3em}
  #audit .au-ph{padding-bottom:.85em;border-bottom:1px solid var(--au-l)}
  #audit .au-ps,#audit .au-pf{display:none}
  #audit .au-s2{transform:rotate(2deg)}
  #audit .au-s3{transform:rotate(4deg)}
  #audit .au-s2.au-on{transform:rotate(3.5deg)}
  #audit .au-s3.au-on{transform:rotate(7deg)}
  #audit .au-slide{width:14em;height:8em;padding:.6em .85em}
  #audit .au-bars{width:3.6em;height:1.3em}
  #audit .au-map{grid-template-columns:repeat(3,1fr);grid-auto-rows:3.9em;gap:1.05em;margin-top:.75em}
  #audit .au-ic{width:1.7em;height:1.7em;margin-bottom:.22em}
  #audit .au-ic svg{width:1.05em;height:1.05em}
  #audit .au-fx .au-ic::after{right:-.58em;top:-.4em;width:1.2em;height:1.2em;border-width:.15em}
  #audit .au-recs{margin-top:.6em;gap:.45em}
  #audit .au-save{left:13.1em;top:28.7em;width:14.9em;padding:1em 1em .85em}
  #audit .au-road{left:0;top:30.3em;width:12.7em;padding:1em .95em .5em}
  #audit .au-save .au-st,#audit .au-road .au-st{font-size:1em}
  #audit .au-save .au-st{gap:.42em}
  #audit .au-save .au-b,#audit .au-road .au-b{min-width:2.05em;padding:0 .28em}
  #audit .au-road .au-st{gap:.5em}
  #audit .au-big{margin-top:.65em}
  #audit .au-hl{font-size:2.5em}
  #audit .au-ledger{margin-top:.8em;padding-top:.7em;gap:.34em}
  #audit .au-ledger i{min-width:.5em}
  #audit .au-demo{margin-top:.7em;padding-top:.6em}
  #audit.au-js:not(.au-in) .au-save{transform:translate(-4em,-6em) scale(.94)}
  #audit.au-js:not(.au-in) .au-road{transform:translate(3em,-8em) scale(.94)}
  #audit .au-tl{grid-template-columns:1fr;margin-top:.9em}
  #audit .au-tl::before,#audit .au-tl::after{left:.55em;right:auto;top:.6em;bottom:2.4em;width:1px;height:auto}
  #audit .au-tl::after{bottom:auto;height:2.6em;width:1.5px;margin:0 0 0 -.25px;transform-origin:50% 0}
  #audit.au-js:not(.au-in) .au-tl::after{transform:scaleY(0)}
  #audit .au-tl li{align-items:flex-start;text-align:left;padding:0 0 .7em 2em;gap:.1em}
  #audit .au-tl i{left:0;margin-left:0}
}

/* ── card layout ── */
@media (min-width:901px) and (max-width:1180px){
  #audit .au-card{padding:56px 48px;gap:44px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:900px){
  #audit .au-card{grid-template-columns:1fr;gap:44px;padding:44px 32px 40px}
  #audit .au-list{max-width:none}
  #audit .au-vis{width:100%;max-width:540px;justify-self:center}
}
@media (max-width:600px){
  #audit .au-card{gap:32px;padding:34px 22px 28px}
  #audit h2{margin-bottom:16px}
  #audit .au-txt>p{font-size:16px}
  #audit .au-list{margin-top:24px}
  #audit .au-list li{font-size:15px;gap:12px}
  #audit .au-cta{margin-top:26px;gap:14px}
  #audit .au-vis{max-width:none;width:auto;justify-self:stretch;margin:0 -12px}
}
@media (prefers-reduced-motion:reduce){
  #audit .au-card *,#audit .au-card *::before,#audit .au-card *::after{transition:none!important;animation:none!important}
}