/* Section: studio vs AG.digital comparison */
/* ---------- compare (after process, dark). One pinned scene, flow of yard.education, page styles (see docs/compare-section.md):
   hook → dot grows into "Sure," → phrases roll → circle grid: grey snake = a typical studio (winding, dashed = waiting),
   white snake = AG.digital (green head while it grows) → finale: big studio time + typed tags → row → bar → green block → pricing ---------- */
/* no seam with the process section above: the comparison reads as its continuation */
.cmp{margin-top:-2px;padding-top:2px;--bg:var(--night);--ink-2:var(--mist);--line:rgba(255,255,255,.12);--stc:#8c8a86;background:var(--bg);color:var(--paper)}
.cmp-intro{position:relative;height:100vh;overflow:hidden}
.cmp-say{position:absolute;left:50%;bottom:calc(50% + 56px);transform:translateX(-50%);width:min(18em, calc(100% - 240 * var(--u)));margin:0;text-align:center;font-family:var(--xh);font-size:var(--fs-display);line-height:1.06;letter-spacing:-.035em}
/* the first sentence holds one line; the second wraps in even lines; the whole thing sits above the centre, where the dot appears */
.cmp-say .l1,.cmp-say .l2{display:block}
.cmp-say .l1{white-space:nowrap}
.cmp-say .l2{text-wrap:balance}
.cmp-say .l1>span,.cmp-say .l2>span{opacity:.2}
.cmp-cw{position:absolute;inset:0;z-index:3}
.cmp-card{position:absolute;inset:0;display:grid;place-items:center;background:var(--green);color:var(--ink);clip-path:circle(0px at 50% 50%)}
.cmp-a{margin:0;font-family:var(--xh);font-size:var(--fs-display);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.cmp-roll{position:absolute;left:calc(50% + 8px);right:16px;top:16px;bottom:16px;z-index:2}
.cmp-roll p{position:absolute;left:0;right:0;top:50%;margin:0;transform:translateY(-50%);text-align:center;font-family:var(--xh);font-size:var(--fs-display);line-height:1.05;letter-spacing:-.04em}
/* letters come in like the header logo: soft blur, one by one */
.cmp-a .w,.cmp-roll .w{display:inline-block;white-space:nowrap}
.cmp-a i,.cmp-roll i{display:inline-block;font-style:normal;visibility:hidden}

.cmp-race{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);column-gap:calc(80 * var(--u));padding:calc(40 * var(--u) + 104px) calc(120 * var(--u)) calc(40 * var(--u) + 16px)}
.cmp-left{display:flex;flex-direction:column;min-height:0}
.cmp-leg{display:flex;gap:16px calc(80 * var(--u) + 24px);margin-bottom:calc(32 * var(--u) + 12px)}
/* the studio counter keeps the width of its longest value ("45 days 06 hours"), so ours never shifts while it counts */
.cmp-trk{flex:none}
.cmp-trk .nm{font:var(--eb-font);letter-spacing:-.01em;color:var(--ink-2)}
.cmp-trk.ag .nm{color:var(--paper)}
.cmp-clock{display:flex;align-items:flex-start;transform-origin:0 0;width:max-content;gap:calc(16 * var(--u) + 6px);margin:calc(10 * var(--u) + 6px) 0 0;font-family:var(--xh);font-size:var(--fs-display);line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap;color:rgba(244,244,244,.5)}
.cmp-trk.ag .cmp-clock{color:var(--paper)}
.cmp-clock i{margin:.08em 0 0 .3em;font-family:var(--sans);font-style:normal;font-size:var(--fs-body);letter-spacing:-.01em;color:var(--ink-2)}
.cmp-gw{flex:1;min-height:0;container-type:size}
/* --k = finale shrink; outlines keep a real 3px whatever the scale */
.cmp-grid{--k:1;--gy:0px;position:relative;width:min(100cqw, 100cqh * 7 / 6);aspect-ratio:7 / 6;transform-origin:0 100%;transform:translateY(var(--gy)) scale(var(--k))}
.cmp-l{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7, 1fr);grid-template-rows:repeat(6, 1fr);gap:calc(8 * var(--u) + 6px)}
.cmp-l i{position:relative;align-self:center;justify-self:center;width:100%;aspect-ratio:1;border-radius:50%;border:calc(3px / var(--k)) solid rgba(255,255,255,calc(.13 * (1 - var(--w, 0))))}
/* waiting time: the outline turns dashed smoothly, cell by cell */
.cmp-l i::after{content:"";position:absolute;inset:calc(-3px / var(--k));border-radius:50%;border:calc(3px / var(--k)) dashed rgba(244,244,244,.6);opacity:var(--w, 0)}
.cmp-snake{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.cmp-snake path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cmp-snake .s{stroke:var(--stone-2)}   /* the usual way stays in the background */
.cmp-snake .a{stroke:var(--paper)}
.cmp-snake .h{stroke:url(#cmpHead)}
.cmp-snake .seed{fill:var(--green)}
.cmp-steps{position:relative;min-height:0;overflow:hidden;-webkit-mask:linear-gradient(transparent, #000 20%, #000 80%, transparent);mask:linear-gradient(transparent, #000 20%, #000 80%, transparent)}
.cmp-steps ol{list-style:none;position:absolute;left:0;right:0;top:0}
.cmp-steps li{height:calc(var(--sh) * 1px);display:flex;flex-direction:column;justify-content:center;opacity:.18}
.cmp-steps li.on{opacity:1}
.cmp-steps .m{font-family:var(--xhmono);font-size:var(--fs-body);line-height:1.2;color:var(--ink-2)}
.cmp-steps h3{margin-top:calc(12 * var(--u) + 8px);font-family:var(--xh);font-weight:400;font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.03em}
.cmp-steps .st,.cmp-steps .ag{display:grid;grid-template-columns:calc(110 * var(--u) + 40px) minmax(0, 1fr);margin-top:calc(14 * var(--u) + 8px);max-width:34em;font-size:var(--fs-body);line-height:1.4;letter-spacing:-.01em}
.cmp-steps .st{color:var(--ink-2)}
.cmp-steps .ag{margin-top:calc(8 * var(--u) + 4px);color:var(--paper)}
.cmp-steps .st b,.cmp-steps .ag b{font-weight:400;font-family:var(--xhmono);font-size:calc(var(--fs-body) * .85);padding-top:.12em}
.cmp-steps .ag b{color:var(--green)}

/* finale */
.cmp-fin{position:absolute;inset:0;z-index:2;pointer-events:none;padding:calc(40 * var(--u) + 104px) calc(120 * var(--u)) 0}
.cmp-big{display:flex;justify-content:space-between;font-family:var(--xh);font-size:max(48px, calc(170 * var(--u)));line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums;visibility:hidden}
.cmp-big span{display:flex;align-items:flex-start}
.cmp-big i{margin:.08em 0 0 .25em;font-family:var(--sans);font-style:normal;font-size:var(--fs-lead);letter-spacing:-.01em;color:var(--ink-2)}
.cmp-tags p{position:absolute;display:grid;justify-items:start;row-gap:8px}
/* underlines: each counter runs to its edge (studio to the column gap, ours to the side gap) */
.cmp-ul{position:absolute;height:1px;background:rgba(255,255,255,.18);transform-origin:0 50%;transform:scaleX(0)}
.cmp-tags p{margin:0;font-family:var(--xh);font-size:var(--fs-body-l);line-height:1.2;letter-spacing:-.01em}
.cmp-tags span{display:block;padding:.42em .75em .46em;border-radius:6px;background:var(--tag-dark);color:var(--chip-ink);white-space:nowrap}
.cmp-tags .ag span{background:var(--paper);color:var(--ink)}
.cmp-tags span:empty{display:none}
.cmp-tags span.on::after{content:"";display:inline-block;width:.42em;height:.8em;margin-left:.08em;vertical-align:-.06em;border-radius:2px;background:currentColor;animation:cmpBlink .9s steps(1) infinite}
@keyframes cmpBlink{50%{opacity:0}}
.cmp-row{--cs:56px;position:absolute;left:calc(120 * var(--u));right:calc(120 * var(--u));bottom:calc(150 * var(--u) + 96px);display:flex;justify-content:space-between;gap:calc(6 * var(--u) + 4px);visibility:hidden}
.cmp-row i{flex:none;width:var(--cs);height:var(--cs);border-radius:50%;background:var(--stone-3);visibility:hidden}
.cmp-end{position:absolute;left:16px;right:16px;bottom:calc(60 * var(--u) + 36px);margin:0;text-align:center;font-family:var(--xh);font-size:var(--fs-lead);line-height:1.25;letter-spacing:-.015em;visibility:hidden}
.cmp-end b{font-weight:400;color:var(--green)}
.cmp-bw{position:absolute;inset:0;z-index:4;pointer-events:none}
/* the contact block lives inside the circle on desktop: the circle opens and the form appears in it */
.cmp-blk .ct{position:absolute;inset:0;min-height:0;margin:0;border-radius:0;background:none;pointer-events:auto}
.cmp-blk{position:absolute;inset:0;background:var(--paper);visibility:hidden}

/* pricing placeholder: the green block of the compare scene opens into it */
.prc{min-height:100vh;margin:0;padding:calc(80 * var(--u) + 40px) calc(104 * var(--u)) calc(80 * var(--u));border-radius:0;background:var(--paper);color:var(--ink)}
@media (max-width:820px){
  .cmp-say{width:calc(100% - 32px)}
  .cmp-say .l1{white-space:normal;text-wrap:balance}
  .cmp-roll{left:calc(50% + 5px);right:10px}
  .cmp-roll p,.cmp-a{font-size:var(--fs-h3)}
  .cmp-race{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0, 1fr);row-gap:12px;padding:118px 16px 16px}
  .cmp-left{display:contents}
  .cmp-leg{margin-bottom:4px}
  .cmp-clock{font-size:var(--fs-h3)}
  .cmp-clock i{font-size:12px}
  .cmp-gw{flex:none;height:min(42vh, calc((100vw - 32px) * 6 / 7))}
  .cmp-l{gap:5px}
  .cmp-steps .st,.cmp-steps .ag{grid-template-columns:92px minmax(0, 1fr)}
  .cmp-fin{padding:118px 16px 0}
  .cmp-big{flex-wrap:wrap;gap:6px 18px;justify-content:flex-start}
  .cmp-tags{flex-direction:column;gap:12px}
  .cmp-tags span{white-space:normal}
  .cmp-row{left:16px;right:16px;bottom:150px;gap:4px}
  .cmp-row i{border-radius:6px}
  .cmp-end{bottom:72px}
}