/* c2-magic.css: styles for c2_magic, all scoped under .c2-magic. Engine tokens from ../research-deck/styles.css and
   brand.css. Stage 0 is the question alone; stage 1 (.c2m-s1) opens the answer line; stage 2 (.c2m-on) opens the body, which lifts and compacts the headline.
   Motion is a short fade and rise (<=400ms); .c2m-still (api.reduce) and prefers-reduced-motion switch it off. */
.c2-magic{--c2m-e:cubic-bezier(.22,1,.36,1);flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;text-align:center}
.c2-magic .c2m-in{margin-block:auto;display:flex;flex-direction:column;align-items:center;min-width:0;width:100%}
.c2-magic .c2m-head{display:flex;flex-direction:column;align-items:center}
/* the answer line: collapsed at stage 0 so the question sits alone in the middle */
.c2-magic .c2m-lw{display:grid;grid-template-rows:0fr;width:100%;justify-items:center;transition:grid-template-rows .4s var(--c2m-e)}
.c2-magic .c2m-lw>.c2m-line{min-height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(10px);padding-top:0}
.c2-magic.c2m-s1 .c2m-lw{grid-template-rows:1fr}
.c2-magic.c2m-s1 .c2m-lw>.c2m-line{overflow:visible;visibility:visible;opacity:1;transform:none;padding-top:clamp(18px,4vh,40px)}
.c2-magic .c2m-h1{font-size:clamp(40px,min(5.4vw,10vh),88px);line-height:1.04;font-weight:400;letter-spacing:-.04em;max-width:none;color:var(--ink);transition:font-size .4s var(--c2m-e)}
.c2-magic .c2m-line{margin:0;max-width:34ch;font-size:clamp(20px,min(2.3vw,4.6vh),38px);line-height:1.3;font-weight:400;letter-spacing:-.015em;color:var(--muted);text-wrap:balance;transition:font-size .4s var(--c2m-e),max-width .4s var(--c2m-e),opacity .35s ease,transform .4s var(--c2m-e),padding-top .4s var(--c2m-e)}
.c2-magic .c2m-line span{display:inline}
/* body: collapsed to zero height at stage 0, so the statement sits in the middle with lots of air */
.c2-magic .c2m-body{display:grid;grid-template-rows:0fr;width:100%;transition:grid-template-rows .4s var(--c2m-e)}
.c2-magic .c2m-bin{min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.4vh,24px);opacity:0;visibility:hidden;transform:translateY(12px);padding-top:0;transition:opacity .35s ease,transform .4s var(--c2m-e),padding-top .4s var(--c2m-e)}
.c2-magic .c2m-intro{margin:0;font-size:clamp(13px,1.7vh,15px);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.c2-magic .c2m-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);width:min(100%,1080px)}
.c2-magic .c2m-card{border-radius:24px;padding:clamp(16px,3vh,32px) clamp(18px,2vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1.6vh,16px);text-align:left;min-height:clamp(110px,22vh,210px);opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .4s var(--c2m-e)}
.c2-magic .c2m-n{font-family:Montserrat,Inter,sans-serif;font-size:clamp(24px,4.2vh,40px);font-weight:300;line-height:1;letter-spacing:-.03em;color:var(--blue)}
.c2-magic .c2m-ct{margin:0;font-family:Montserrat,Inter,sans-serif;font-size:clamp(18px,min(1.9vw,3.6vh),30px);font-weight:500;line-height:1.25;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;align-self:stretch}
.c2-magic .c2m-close{margin:clamp(2px,.6vh,6px) 0 0;max-width:52ch;font-size:clamp(15px,min(1.45vw,2.8vh),22px);line-height:1.45;color:var(--ink);text-wrap:balance;opacity:0;transition:opacity .35s ease}
/* stage 1: headline compacts and lifts; body fades and rises in, cards a beat apart */
.c2-magic.c2m-on .c2m-lw>.c2m-line{padding-top:clamp(10px,2vh,18px)}
.c2-magic.c2m-on .c2m-h1{font-size:clamp(30px,min(3.6vw,6.6vh),60px)}
.c2-magic.c2m-on .c2m-line{font-size:clamp(16px,min(1.55vw,3vh),24px);max-width:60ch}
.c2-magic.c2m-on .c2m-body{grid-template-rows:1fr}
.c2-magic.c2m-on .c2m-bin{overflow:visible;visibility:visible;opacity:1;transform:none;padding-top:clamp(18px,4.4vh,44px);transition-delay:.06s}
.c2-magic.c2m-on .c2m-card{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0)*.08s)}
.c2-magic.c2m-on .c2m-close{opacity:1;transition-delay:.3s}
/* desktop: the statement breaks after "customers," */
@media (min-width:761px){.c2-magic .c2m-line{max-width:none}.c2-magic .c2m-line span{display:block}.c2-magic.c2m-on .c2m-line span{display:inline}.c2-magic.c2m-on .c2m-close{max-width:none}}
/* phone: stacked, may scroll */
@media (max-width:760px){
 .c2-magic{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
 .c2-magic .c2m-h1{font-size:40px}
 .c2-magic .c2m-line{font-size:21px}
 .c2-magic.c2m-on .c2m-h1{font-size:30px}
 .c2-magic.c2m-on .c2m-line{font-size:17px}
 .c2-magic .c2m-cards{grid-template-columns:1fr;gap:10px}
 .c2-magic .c2m-card{min-height:0;padding:16px 18px;flex-direction:row;align-items:baseline;gap:14px}
 .c2-magic .c2m-n{font-size:26px}
 .c2-magic .c2m-ct{font-size:18px}
 .c2-magic .c2m-close{font-size:16px}
 .c2-magic.c2m-on .c2m-bin{padding-top:20px}
}
.c2-magic.c2m-still,.c2-magic.c2m-still *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.c2-magic,.c2-magic *{transition:none!important;animation:none!important}}