/* Section: studio vs AG.digital comparison */
/* ---------- compare (Figma 468:2937, last three frames). One pinned, scrubbed scene:
   statement on the light page → a dark circle rises ("Scroll to reveal") and grows into the dark panel →
   the clock: step names on a drum (left), dial with both times and the billed totals (right), five steps.
   The clock is built in design px on a stage (1920x1080 desktop, 390x844 mobile) scaled to fit the screen.
   The old flow (grid race, "Sure," card) is archived in design/_archive/compare-flow ---------- */
.cmp{background:var(--page);color:var(--ink)}
.cmp-intro{position:relative;height:100vh;overflow:hidden}

/* intro */
.cmp-paper{position:absolute;inset:0;background:var(--page);color:var(--ink)}
.cmp-say{position:absolute;left:50%;top:max(96px, 27vh);transform:translateX(-50%);width:min(calc(1100 * var(--u)), calc(100% - 240 * var(--u)));margin:0;text-align:center;font-family:var(--xh);font-size:var(--fs-display);line-height:1.1;letter-spacing:var(--ls)}
.cmp-say::before{content:"•  Comparison";display:block;margin-bottom:max(16px, calc(32 * var(--u)));font:var(--eb-font);letter-spacing:0}
.cmp-say .l1,.cmp-say .l2{display:inline}
.cmp-say .l1>span,.cmp-say .l2>span{opacity:.2}
/* the circle grows inside the panel frame: 20 from the edges, radius 24 (mobile: full screen), so it never fills the sides */
.cmp-clip{position:absolute;inset:calc(20 * var(--u));border-radius:calc(24 * var(--u));overflow:hidden}
.cmp-sheet{position:absolute;inset:calc(-20 * var(--u));background:var(--night);clip-path:circle(0px at 50% 150%)}
.cmp-sr{position:absolute;left:0;right:0;bottom:max(20px, calc(62 * var(--u)));margin:0;text-align:center;font-family:var(--mono);font-size:var(--fs-caption);line-height:1.4;color:var(--paper);opacity:0}

/* the clock stage; the dark panel behind it is the sheet itself */
/* --dh: extra design px when the screen is taller than the frame; the card stretches to the panel edges, the dial keeps the middle */
.cmp-stg{--dh:0px;position:absolute;left:50%;top:50%;transform-origin:0 0;visibility:hidden}
.cmp-m{display:none}
.cmp p{margin:0}
.cmp-d{width:1920px;height:calc(1080px + var(--dh))}
.cmp-d .titles{position:absolute;left:120px;top:calc(178px + var(--dh) / 2);width:776px;height:812px;overflow:hidden;
  -webkit-mask:linear-gradient(transparent 0, rgba(0,0,0,.75) 36%, #000 44%, #000 52%, rgba(0,0,0,.75) 60%, transparent 100%);mask:linear-gradient(transparent 0, rgba(0,0,0,.75) 36%, #000 44%, #000 52%, rgba(0,0,0,.75) 60%, transparent 100%)}
.cmp-d .list{display:flex;flex-direction:column;gap:71px;will-change:transform}
.cmp-d .list p{font:500 80px/1.1 var(--sans);letter-spacing:-.5px;color:#f0efeb;text-align:center;will-change:filter,opacity}
/* named cmp-card: the plain .card belongs to the card section (its styles and card.js would reach in here) */
.cmp-card{position:absolute;overflow:hidden}
.cmp-d .cmp-card{left:961px;top:40px;width:919px;height:calc(1000px + var(--dh));border-radius:16px}
/* the card image is stretched to the card (fill), never cropped */
.cmp .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:inherit;pointer-events:none}
.cmp-d .dialbox{position:absolute;left:120px;top:calc(160.5px + var(--dh) / 2);width:679px;height:679px}
.cmp-d .dialbox img,.cmp-d .arcs{position:absolute;left:-15px;top:-16.67px;width:710px;height:712px}
/* arcs: share of the circle; full circle = the longest studio time + 20%. White: the studio, green: us */
.cmp .arcs{overflow:visible}.cmp .arcs circle{fill:none}.cmp .arcs .w{stroke:#fff}.cmp .arcs .g{stroke:var(--green)}
/* card title: "Delivery time and Total billed" */
.cmp .ttl{position:absolute;transform:translateX(-50%);text-align:center;color:#f1f0ec}
.cmp-d .ttl{left:459px;top:39px;width:232px;font:400 28px/1.32 var(--sans);letter-spacing:-.5px}
.cmp .time{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
.cmp .time .a,.cmp .time .s,.cmp .usd{display:grid;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmp .time .a,.cmp .time .s{justify-items:center}
.cmp .usd{justify-items:end}
.cmp .time span,.cmp .usd span,.cmp-m .title span,.cmp-m .path span{grid-area:1/1}
.cmp .time .a{color:var(--green)}
.cmp .time .s{color:#f1f0ec}
.cmp-d .time{left:459.5px;top:calc(488px + var(--dh) / 2)}
.cmp-d .time .a,.cmp-d .time .s{font:500 80px/1.1 var(--sans);letter-spacing:-.5px}
/* the totals sit in a panel at the bottom of the card; it hides the lower part of the dial */
.cmp .rows{position:absolute;display:flex;flex-direction:column;overflow:hidden;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.cmp-d .rows{left:12px;right:12px;bottom:12px;padding:24px;gap:24px;border-radius:12px;background:rgba(37,37,37,.7)}
.cmp .row{display:flex;justify-content:space-between}
.cmp-d .row{align-items:flex-start;padding:16px 0}
.cmp .who{display:flex;flex-direction:column;white-space:nowrap}
.cmp-d .who{gap:4px}
.cmp .who i{font-family:var(--mono);font-style:normal;opacity:.8}
.cmp-d .who b{font:500 24px/1.4 var(--sans)}
.cmp-d .who i{font-size:16px;line-height:1.4}
.cmp-d .usd{font:500 56px/1.16 var(--sans);letter-spacing:-.5px}
.cmp .ag{color:var(--green)} .cmp .ag i{color:var(--paper)}
.cmp .stx{color:var(--paper)}
.cmp .div{display:block;width:100%;height:1px}

/* mobile stage 390 x 844 (Figma 472:5140) */
@media (max-width:820px){
  .cmp-d{display:none}
  .cmp-m{display:block;width:390px;height:calc(844px + var(--dh))}
  /* everything 24 lower than Figma 472:5140: the fixed nav ends at ~68 (the ticker folds away on scroll) */
  .cmp-m .stl,.cmp-m .path{position:absolute;top:240px;display:grid;font:400 12px/1.4 var(--mono);color:#f1f0ec;opacity:.5}
  .cmp-m .stl{left:32px}
  .cmp-m .path{right:32px;justify-items:end}
  .cmp-m .title{position:absolute;left:16px;top:107px;width:358px;display:grid;justify-items:center;font:500 48px/1.1 var(--sans);letter-spacing:-.5px;color:#f0efeb;text-align:center}
  .cmp-m .cmp-card{left:20px;top:265px;width:350px;height:calc(539px + var(--dh));border-radius:16px}
  .cmp-m .dialbox{position:absolute;left:8px;top:calc(103px + var(--dh) / 2);width:334px;height:333px}
  .cmp-m .dialbox img,.cmp-m .arcs{position:absolute;left:0;top:0;width:334px;height:335px}
  .cmp-m .ttl{left:177px;top:27px;width:144px;font:500 18px/1.32 var(--sans)}
  .cmp-m .time{left:175px;top:calc(270px + var(--dh) / 2);gap:2px}
  .cmp-m .time .a{font:500 48px/1.1 var(--sans);letter-spacing:-.2818px}
  .cmp-m .time .s{font:500 48px/1.16 var(--sans);letter-spacing:-.2818px}
  .cmp-m .rows{left:0;right:0;bottom:-2px;padding:20px 16px;gap:20px;border-radius:12px;background:rgba(37,37,37,.5)}
  .cmp-m .row{align-items:center}
  .cmp-m .who b{font:500 16px/1.4 var(--sans)}
  .cmp-m .who i{font-size:13px;line-height:1.4}
  .cmp-m .usd{font:500 32px/1.16 var(--sans);letter-spacing:-.5px}
  /* intro (Figma 472:5131): statement from the top, a bigger circle */
  .cmp-clip{inset:0;border-radius:0}
  .cmp-sheet{inset:0}
  .cmp-say{top:144px;width:calc(100% - 32px);max-width:336px}   /* under the fixed nav + ticker (ends ~103) with a 40 gap */
  .cmp-sr{bottom:64px;font-size:var(--fs-body)}
}