/* Kres short page: seven ideas, one rhythm. Layered on site.css and morning.css. */

/* ---------- one section rhythm ---------- */
.sx{padding:var(--s-sec) 0;border-bottom:1px solid var(--rule)}
.sx__head{row-gap:0}
.sx__k{grid-column:1/-1;font:500 var(--t12)/1.3 var(--mono);letter-spacing:.04em;color:var(--hot);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.sx .hd{grid-column:1/10;margin:0}
.sx__lede{grid-column:1/8;margin-top:22px;font-size:var(--t18);line-height:1.6;color:var(--ink-2);max-width:60ch}
.sx__fig{margin-top:56px}
.sx__fig>.mrn{grid-column:1/-1}
@media (max-width:959px){
  .sx .hd,.sx__lede{grid-column:1/-1}
  .sx__fig{margin-top:36px}
}

/* ---------- 1. hero: full-bleed motion, the mark as the light source ---------- */
.hx{position:relative;min-height:min(calc(100svh - var(--nav)),880px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--rule);isolation:isolate;background:var(--bg)}
.hx__reel{position:absolute;inset:-18% -12% -18% -6%;z-index:0;display:flex;flex-direction:column;justify-content:center;gap:18px;transform:rotate(-7deg);opacity:.72}
.rl__row{display:flex;gap:18px;width:max-content;margin:0;padding:0;list-style:none;will-change:transform;animation:rlx 110s linear infinite}
.rl__row--1{animation-duration:130s;animation-direction:reverse;margin-left:-140px}
.rl__row--2{animation-duration:120s;margin-left:-60px}
.hx__reel.is-off .rl__row{animation-play-state:paused}
@keyframes rlx{to{transform:translate3d(-50%,0,0)}}
.rl__t{position:relative;flex:none;width:184px;height:232px;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 20px 40px -20px rgba(0,0,0,.9)}
.rl__br{position:absolute;left:12px;top:12px;font:600 9px/1 var(--f);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.rl__ic{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:64px;height:84px;display:flex;align-items:center;justify-content:center}
.rl__ic svg{width:100%;height:100%;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.rl__h{position:absolute;left:12px;right:12px;bottom:12px;font-weight:700;font-size:15px;line-height:1.12;letter-spacing:-.01em;color:#fff}
.rl__chip{position:absolute;right:10px;top:9px;display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;font:600 10px/1.2 var(--f);font-style:normal;color:#fff;background:rgba(10,14,24,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.rl__chip--ok{background:#F5F7FC;color:#0A1022;box-shadow:none}
.rl__chip--ok svg{width:10px;height:10px;fill:none;stroke:#2563FF;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rl__chip--live i{width:6px;height:6px;border-radius:50%;background:#3ccf8e}
/* the shade keeps the words on solid ground and lets the light fall on the reel around the mark */
.hx__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(42% 58% at 74% 46%,rgba(3,6,11,0) 0,rgba(3,6,11,.25) 55%,rgba(3,6,11,.7) 100%),
  linear-gradient(90deg,rgba(3,6,11,.97) 0,rgba(3,6,11,.9) 36%,rgba(3,6,11,.45) 60%,rgba(3,6,11,.2) 100%),
  linear-gradient(0deg,rgba(3,6,11,.96) 0,rgba(3,6,11,0) 34%)}
.hx__art{position:absolute;z-index:2;right:max(-40px,calc((100vw - 1280px) / 2 - 80px));top:50%;width:min(46vw,640px);aspect-ratio:1;transform:translateY(-54%);pointer-events:none}
.hx__art img{width:100%;height:100%;object-fit:contain;animation:hxBreathe 7s ease-in-out infinite}
@keyframes hxBreathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.025);filter:brightness(1.12)}}
.hx__in{position:relative;z-index:3;width:100%;padding-top:96px;padding-bottom:56px;row-gap:0}
.hx__k{grid-column:1/-1;font:500 var(--t14)/1.3 var(--f);color:var(--ink-2);margin:0 0 20px}
.hx .kin{grid-column:1/9;grid-row:auto;margin:0;font-size:clamp(56px,5.6vw,80px)}
.hx__lede{grid-column:1/7;margin:26px 0 0;font-size:var(--t20);line-height:1.55;color:var(--ink-2);max-width:46ch}
.hx__cta{grid-column:1/-1;margin-top:32px}
.hx__facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:720px;margin:56px 0 0;border-top:1px solid var(--rule-2)}
.hx__facts div{padding:18px 24px 0 0;display:flex;flex-direction:column-reverse;justify-content:flex-end}
.hx__facts dd{margin:0;font-weight:500;font-size:var(--t40);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.hx__facts dt{margin-top:10px;font-size:var(--t14);color:var(--ink-2)}
.fx .hx__lede,.fx .hx__cta,.fx .hx__facts,.fx .hx__k{transition:opacity .8s var(--e-out) .5s,transform 1s var(--e-out) .5s}
.fx .hx__facts{transition-delay:.7s}
.fx .hero.pre .hx__lede,.fx .hero.pre .hx__cta,.fx .hero.pre .hx__facts,.fx .hero.pre .hx__k{opacity:0;transform:translate3d(0,14px,0)}
.fx .hx__art{transition:opacity 1.4s var(--e-out) .2s}
.fx .hero.pre .hx__art{opacity:0}
@media (prefers-reduced-motion:reduce){ .rl__row,.hx__art img{animation:none} }
@media (max-width:959px){
  .hx{min-height:0;display:block}
  .hx__reel{inset:-8% -40% auto -30%;height:560px;gap:12px;opacity:.6}
  .rl__t{width:132px;height:168px;border-radius:11px}
  .rl__ic{width:46px;height:60px}
  .rl__h{font-size:12px}
  .hx__shade{background:linear-gradient(180deg,rgba(3,6,11,.35) 0,rgba(3,6,11,.6) 200px,rgba(3,6,11,.96) 340px,rgba(3,6,11,.98) 100%)}
  .hx__art{right:-6px;top:12px;width:160px;transform:none}
  .hx__in{padding-top:150px;padding-bottom:40px}
  .hx .kin,.hx__lede{grid-column:1/-1}
  .hx .kin{font-size:44px;line-height:1.04;text-wrap:balance}
  .hx__lede{font-size:var(--t16);margin-top:18px}
  .hx__cta{margin-top:24px}
  .hx__facts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:36px}
  .hx__facts div{padding:14px 8px 0 0}
  .hx__facts dd{font-size:24px}
  .hx__facts dt{font-size:13px}
}

/* ---------- 3. the operator ---------- */
.op__g{align-items:center;row-gap:40px}
.op__photo{grid-column:1/6;margin:0}
.op__photo img{display:block;width:100%;height:auto;border-radius:14px;filter:grayscale(1) contrast(1.04)}
.op__photo .fig__cap{margin-top:14px}
.op__txt{grid-column:7/13}
.op .hd{grid-column:auto}
.op__p{margin:24px 0 0;font-size:var(--t18);line-height:1.6;color:var(--ink-2);max-width:52ch}
.op__q{margin:32px 0 0;padding:0 0 0 22px;box-shadow:inset 2px 0 0 var(--hot)}
.op__q p{margin:0;font-weight:500;font-size:clamp(28px,2.6vw,36px);letter-spacing:-.02em;line-height:1.18;color:var(--ink)}
.op__q footer{margin-top:10px;font-size:var(--t14);color:var(--ink-2)}
.op__pts{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:1px solid var(--rule-2)}
.op__pts li{padding-top:16px}
.op__pts b{display:block;font-weight:560;font-size:var(--t16);color:var(--ink)}
.op__pts span{display:block;margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:959px){
  .op__photo,.op__txt{grid-column:1/-1}
  .op__photo{max-width:360px}
  .op__pts{grid-template-columns:1fr;gap:0}
  .op__pts li{padding:14px 0;border-bottom:1px solid var(--rule)}
}

/* ---------- 4. what it does: the six cards sit right under the heading ---------- */
#does .caps{margin-top:48px}

/* ---------- 5. offers ---------- */
.of{margin-top:48px;column-gap:var(--gut);row-gap:16px;align-items:stretch}
.of__c{grid-column:span 4;display:flex;flex-direction:column;padding:28px 28px 30px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--rule-2)}
.of__c--k{background:var(--raised);box-shadow:inset 0 0 0 1px rgba(179,157,255,.55)}
.of__k{margin:0;font:500 var(--t12)/1.3 var(--mono);letter-spacing:.04em;color:var(--hot)}
.of__h{margin:12px 0 0;font-weight:520;font-size:var(--t24);letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
.of__h--brand{font-size:var(--t24)}
.of__price{margin:22px 0 0;font-weight:500;font-size:var(--t40);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.of__price span{display:block;margin-top:8px;font-size:var(--t14);font-weight:400;letter-spacing:0;color:var(--ink-2)}
.of__c--k .of__price{color:var(--hot)}
.of__p{margin:16px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2)}
.of__ul{list-style:none;margin:20px 0 26px;padding:16px 0 0;border-top:1px solid var(--rule);display:grid;gap:8px;flex:1;align-content:start}
.of__ul li{position:relative;padding-left:16px;font-size:15px;line-height:1.45;color:var(--ink)}
.of__ul li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:2px;background:var(--hot)}
.of__c .btn{align-self:flex-start}
@media (min-width:960px){
  .of{grid-template-rows:repeat(6,auto);row-gap:0}
  .of__c{display:grid;grid-template-rows:subgrid;grid-row:1/span 6;row-gap:0;align-content:start}
  .of__c .btn{justify-self:start;align-self:end}
  .of__ul{align-self:stretch}
}
@media (max-width:959px){
  .of__c{grid-column:1/-1;padding:22px}
  .of__c--k{order:-1}
}

/* ---------- 6. proof ---------- */
.pr{margin-top:48px;row-gap:48px}
.pr__stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--rule-2)}
.pr__stats div{padding:20px 24px 0 0;display:flex;flex-direction:column}
.pr__stats dd{margin:0;font-weight:500;font-size:var(--t40);letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.pr__stats dt{margin-top:10px;font-size:15px;line-height:1.45;color:var(--ink-2);max-width:24ch}
.pr__q{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:start}
.pr__q blockquote{margin:0}
.pr__q .about__lead p{margin:0;font-weight:500;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.pr__q footer{margin-top:12px;font-size:var(--t14);color:var(--ink-2)}
.pr__q2 p{margin:0;font-size:var(--t18);line-height:1.55;color:var(--ink-2)}
.pr__names{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:20px}
.pr__k{margin:0 0 12px;font-weight:500;font-size:var(--t14);color:var(--ink-2)}
.pr__names .names{display:flex;flex-wrap:wrap;column-gap:1.4em;row-gap:4px;margin:0;padding:0;list-style:none}
.pr__names .names li{display:inline-block;white-space:nowrap;padding:0;border:0;font-size:var(--t20);font-weight:500;letter-spacing:-.01em;line-height:1.7;color:var(--ink-2)}
@media (max-width:959px){
  .pr__stats{grid-template-columns:1fr 1fr;row-gap:24px}
  .pr__stats div:nth-child(3){grid-column:1/-1}
  .pr__stats dd{font-size:28px}
  .pr__q{grid-template-columns:1fr;gap:28px}
  .pr__names .names li{font-size:var(--t16)}
}

/* ---------- 7. audit and questions ---------- */
.sx.audit .sx__k .badge{margin:0}
.sx.audit .audit__g{margin-top:48px}
.sx.audit .audit__l{grid-column:1/6}
.faq__g{align-items:start}
.faq__h{grid-column:1/5!important}
.faq__l{grid-column:5/13}
.faq details{border-top:1px solid var(--rule-2)}
.faq details:last-child{border-bottom:1px solid var(--rule-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font-weight:500;font-size:var(--t20);letter-spacing:-.01em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px/1 var(--f);color:var(--ink-2);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.faq details p{margin:0;padding:0 0 22px;font-size:var(--t16);line-height:1.6;color:var(--ink-2);max-width:62ch}
@media (max-width:959px){
  .sx.audit .audit__l{grid-column:1/-1}
  .faq__h,.faq__l{grid-column:1/-1!important}
  .faq__l{margin-top:24px}
  .faq summary{font-size:var(--t18)}
}
.sec.final{border-bottom:0}

/* phone: the headline leads the copy (site.css orders hero children for the old hero) */
@media (max-width:959px){
  .hx .hx__k,.hx .kin,.hx .hx__lede,.hx .hx__cta,.hx .hx__facts{order:0}
  .hx__shade{background:linear-gradient(180deg,rgba(3,6,11,.3) 0,rgba(3,6,11,.66) 96px,rgba(3,6,11,.97) 150px,rgba(3,6,11,.98) 100%)}
  .hx__in{padding-top:150px}
}

/* tighter rhythm: about one viewport per idea */
.sx{padding:96px 0}
@media (max-width:959px){ .sx{padding:64px 0} }
/* phone: the six capability cards swipe sideways instead of stacking */
@media (max-width:959px){
  #does .caps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;background:none;border:0;border-radius:0;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);padding:0 var(--pad) 8px;scrollbar-width:none}
  #does .caps::-webkit-scrollbar{display:none}
  #does .cap{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:var(--pad);border-radius:12px;box-shadow:inset 0 0 0 1px var(--rule-2);overflow:hidden}
  #does .sx__head::after{content:"Swipe for all six";grid-column:1/-1;margin-top:14px;font:500 var(--t12)/1.3 var(--mono);color:var(--ink-2)}
}

/* ---------- round 14 critique, folded in ---------- */
/* the morning: the destination is already up when the ad leaves; no dark gap between windows */
.mrn .beat.is-on { transition: opacity .2s ease 0s, visibility 0s; }

/* full-bleed tonal bands break the module rhythm: the morning and the proof sit on the raised ground */
#loop, #proof { background: #070B15; }

/* one type scale: 12 mono labels, 16 body, 20 ledes and card titles, 40 numbers and the pull quote, 52 headings, the display line */
.hx__k, .hx__facts dt, .op__q footer, .op__pts span, .of__price span, .of__p, .of__ul li, .pr__stats dt, .pr__k, .pr__q footer, .pr__q2 p,
.faq details p, .sx .audit__get li, .sx .cap p, .foot p { font-size: 16px; }
.sx__lede, .hx__lede, .op__p, .sx .lede, .final__p, .of__h, .of__h--brand, .faq summary, .pr__q .about__lead p, .pr__names .names li, .sx .cap h3 { font-size: 20px; }
.op__q p, .of__price, .pr__stats dd, .hx__facts dd { font-size: 40px; }
.pr__q .about__lead p { font-weight: 500; line-height: 1.45; letter-spacing: -.01em; }
.pr__q2 p { line-height: 1.6; }
@media (max-width:959px){
  .sx__lede, .hx__lede, .op__p, .sx .lede, .final__p, .of__h, .of__h--brand, .faq summary, .pr__q .about__lead p, .sx .cap h3 { font-size: 18px; }
  .op__q p, .of__price, .pr__stats dd { font-size: 30px; }
  .hx__facts dd { font-size: 24px; }
  .hx__facts dt { font-size: 13px; }
}

/* Fig. 3: the same month on one labeled $0 to $45K axis */
.cm { margin-top: 56px; row-gap: 0; }
.cm__plot { grid-column: 1 / -1; position: relative; padding-top: 30px; border-top: 1px solid var(--rule-2); }
.cm__axis { position: absolute; top: 10px; left: calc(240px + 24px); right: calc(240px + 24px); height: 14px; }
.cm__axis span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(-50%); font: 500 12px/1 var(--mono); color: var(--ink-2); }
.cm__axis span:first-child { transform: none; }
.cm__axis span:last-child { transform: translateX(-100%); }
.cm__row { display: grid; grid-template-columns: 240px minmax(0, 1fr) 240px; column-gap: 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.cm__row p { margin: 0; }
.cm__n { font-size: 16px; color: var(--ink); font-weight: 500; }
.cm__v { font-size: 16px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cm__bar { position: relative; height: 26px; background: linear-gradient(90deg, rgba(190,205,255,.14) 1px, transparent 1px) 0 0 / 33.333% 100%; box-shadow: inset -1px 0 0 rgba(190,205,255,.14); }
.cm__bar i { position: absolute; top: 5px; bottom: 5px; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 3px; background: var(--ink-2); }
.cm__row--k .cm__n, .cm__row--k .cm__v { color: var(--hot); }
.cm__row--k .cm__bar i { background: var(--hot); }
.cm__row--rng .cm__bar i { background: repeating-linear-gradient(135deg, rgba(214,221,235,.75) 0 3px, rgba(214,221,235,.3) 3px 6px); }
.cm .fig__cap { grid-column: 1 / -1; margin-top: 16px; }
@media (max-width: 959px) {
  .cm__axis { left: 0; right: 0; }
  .cm__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .cm__bar { grid-column: 1 / -1; grid-row: 2; }
  .cm__v { text-align: right; font-size: 14px; }
  .cm__plot { padding-top: 34px; }
}

/* ---------- AD1 ---------- */
/* phones on short screens (a 375x553 Safari window): the art steps back and the stack tightens so the button is on the first screen */
@media (max-width:959px) and (max-height:619px){
  .hx__art{width:128px;top:8px;right:-4px}
  .hx__in{padding-top:110px}
  .hx__shade{background:linear-gradient(180deg,rgba(3,6,11,.3) 0,rgba(3,6,11,.66) 72px,rgba(3,6,11,.97) 112px,rgba(3,6,11,.98) 100%)}
  .hx__k{margin-bottom:14px}
  .hx .kin{font-size:40px}
  .hx__lede{margin-top:14px}
  .hx__cta{margin-top:20px}
}
/* desktop hero: the reel fades out before it reaches the headline */
@media (min-width:960px){
  .hx__reel{-webkit-mask-image:linear-gradient(90deg,transparent 0 56%,#000 76%);mask-image:linear-gradient(90deg,transparent 0 56%,#000 76%)}
}
/* the sticky nav is solid, so nothing shows through it */
.nav{background:#03060B}
/* the audit note sits under the list */
.audit__note{margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:52ch}

/* ---------- AD2 ---------- */
/* phone: the swipe cards share one picture height, so no card ends in a long empty tail */
@media (max-width:959px){
  #does .cap__vis{height:344px;flex:none;align-items:center!important;padding:14px 16px}
}
/* phone hero: the reel moves at twice the pace and shows through more above the words */
@media (max-width:959px){
  .rl__row{animation-duration:55s}
  .rl__row--1{animation-duration:62s}
  .hx__shade{background:linear-gradient(180deg,rgba(3,6,11,.2) 0,rgba(3,6,11,.38) 96px,rgba(3,6,11,.97) 150px,rgba(3,6,11,.98) 100%)}
}
@media (max-width:959px) and (max-height:619px){
  .hx__shade{background:linear-gradient(180deg,rgba(3,6,11,.2) 0,rgba(3,6,11,.38) 72px,rgba(3,6,11,.97) 112px,rgba(3,6,11,.98) 100%)}
}
/* Brand Builder: the product name, then his headline */
.of__hd .of__h{margin:12px 0 0}
.of__tag{margin:6px 0 0;font-weight:450;font-size:20px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
@media (max-width:959px){ .of__tag{font-size:18px} }

/* who it's for: three tabs, one illustrated example each */
#who{background:#070B15}
.aud__g{margin-top:40px;row-gap:28px}
.aud__tabs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.aud__tabs button{-webkit-appearance:none;appearance:none;border:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 18px 10px 14px;border-radius:999px;background:transparent;color:var(--ink-2);font:500 16px/1.2 var(--f);box-shadow:inset 0 0 0 1px var(--rule-2);transition:background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}
.aud__tabs button:hover{color:var(--ink)}
.aud__tabs button[aria-selected="true"]{background:rgba(139,108,255,.16);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(179,157,255,.6)}
.aud__tabs button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.aud__n{font:500 12px/1 var(--mono);color:var(--ink-2)}
.aud__tabs button[aria-selected="true"] .aud__n{color:var(--hot)}
.aud__panes{grid-column:1/-1;display:grid;row-gap:48px}
.aud__pane{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center}
.aud__pane:focus-visible{outline:2px solid var(--cyan);outline-offset:6px;border-radius:14px}
.aud__txt{grid-column:1/6}
.aud__txt h3{margin:0;font-weight:500;font-size:40px;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.aud__txt p{margin:18px 0 0;font-size:20px;line-height:1.55;color:var(--ink-2);max-width:40ch}
.aud__vis{grid-column:7/13;display:flex;height:340px;padding:32px;gap:28px;border-radius:14px;background:#060A12;box-shadow:inset 0 0 0 1px var(--rule-2)}
.aud__vis .aud__ad{font-size:9px;flex:none}
.aud__rep{flex:1;min-width:0}
.aud__cap{grid-column:1/-1;margin:0}
/* with script: the panes share one cell, so switching never moves the page */
.aud.is-js .aud__panes{row-gap:0}
.aud.is-js .aud__pane{grid-area:1/1;transition:opacity .28s cubic-bezier(.4,0,.2,1),visibility 0s .28s}
.aud.is-js .aud__pane:not(.is-on){opacity:0;visibility:hidden}
.aud.is-js .aud__pane.is-on{opacity:1;visibility:visible;transition:opacity .28s cubic-bezier(.4,0,.2,1) .06s,visibility 0s}
@media (prefers-reduced-motion:reduce){ .aud.is-js .aud__pane,.aud.is-js .aud__pane.is-on,.aud__tabs button{transition:none} }
@media (max-width:959px){
  .aud__g{margin-top:28px;row-gap:22px}
  .aud__tabs button{font-size:15px;padding:9px 14px 9px 12px;gap:8px}
  .aud__pane{grid-template-columns:minmax(0,1fr);row-gap:22px;align-items:start}
  .aud__txt,.aud__vis{grid-column:1/-1}
  .aud__txt h3{font-size:30px}
  .aud__txt p{font-size:18px;margin-top:12px}
  .aud__vis{height:auto;padding:18px 16px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;gap:10px 14px;align-items:start}
  .aud__vis .aud__ad{font-size:6px;grid-column:1;grid-row:1/span 2}
  .aud__vis .aud__rep{display:contents}
  .aud__vis .aud__rep>.cx-k{grid-column:2;grid-row:1;align-self:end}
  .aud__vis .aud__rep .cx-stats{grid-column:2;grid-row:2;grid-template-columns:minmax(0,1fr);gap:6px;align-self:center}
  .aud__vis .aud__rep .cx-stats p{flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 10px!important}
  .aud__vis .aud__rep .cx-stats b{font-size:18px}
  .aud__vis .aud__rep .cx-stats em{display:none}
  .aud__vis .aud__rep .cx-rule{grid-column:1/-1;grid-row:3}
  /* the panes share two rows (subgrid): the picture first, like the swipe cards, then the words, so a tab switch never moves the picture */
  .aud__pane{row-gap:20px}
  .aud__vis{grid-row:1}
  .aud__txt{grid-row:2}
  .aud.is-js .aud__panes{grid-template-rows:auto auto}
  .aud.is-js .aud__pane{grid-area:auto;grid-column:1;grid-row:1/span 2;grid-template-rows:subgrid;row-gap:20px}
  .aud.is-js .aud__vis{align-self:stretch}
  .aud.is-js .aud__txt{align-self:start}
}

/* ---------- AD3 ---------- */
/* phone: each swipe card is as tall as its own picture and caption, so no card ends in an empty band */
@media (max-width:959px){ #does .caps{align-items:flex-start} }

/* ---------- AD4 ---------- */
@media (max-width:959px){
  /* swipe cards: one height again, and the picture takes up the difference, so no card ends early and no caption has space under it */
  #does .caps{align-items:stretch}
  #does .cap__vis{height:auto;min-height:344px;flex:1 0 auto}
  /* a rule's status sits under its text on phones, so the text keeps the width */
  .capx .cx-rule{grid-template-columns:auto minmax(0,1fr);row-gap:4px}
  .capx .cx-rule>b{grid-column:2}
  /* the tabs: three equal columns, labels wrap inside */
  .aud__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .aud__tabs button{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;min-height:0;padding:10px 12px 12px;border-radius:12px;font-size:14px;line-height:1.25;text-align:left}
}
/* who it's for, desktop: a larger ad, the numbers as rows (no label wraps), and the status under its rule */
@media (min-width:960px){
  .aud__vis{height:380px;padding:36px;gap:28px}
  .aud__vis .aud__ad{font-size:12px}
  .aud__rep .cx-stats{grid-template-columns:minmax(0,1fr);gap:8px}
  .aud__rep .cx-stats p{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:10px 14px!important}
  .aud__rep .cx-stats small{grid-column:1;grid-row:1}
  .aud__rep .cx-stats em{grid-column:1;grid-row:2}
  .aud__rep .cx-stats b{grid-column:2;grid-row:1/span 2;font-size:22px}
  .aud__rep .cx-stats p:not(:has(em)) b{grid-row:1}
  .aud__rep .cx-rule{grid-template-columns:auto minmax(0,1fr);row-gap:4px}
  .aud__rep .cx-rule>b{grid-column:2}
}
/* the beat: the status rolls from its first word to its last, and the rule's edge turns green */
.aud__st{display:inline-grid;overflow:hidden;vertical-align:bottom}
.aud__st>span{grid-area:1/1;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.aud__st-a{color:var(--ink-2)}
.aud__st-b{color:#3ccf8e;transform:translateY(110%);opacity:0}
.aud__pane.is-beat .aud__st-a{transform:translateY(-110%);opacity:0}
.aud__pane.is-beat .aud__st-b{transform:none;opacity:1}
.aud__rep .cx-rule{transition:box-shadow .42s ease,background-color .42s ease}
.aud__pane.is-beat .aud__rep .cx-rule{box-shadow:inset 0 0 0 1px rgba(60,207,142,.5);background:rgba(60,207,142,.06)}
.aud:not(.is-js) .aud__st-a{display:none}
.aud:not(.is-js) .aud__st-b{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){ .aud__st>span,.aud__rep .cx-rule{transition:none} }

/* ---------- AD5 ---------- */
@media (max-width:959px){
  /* swipe cards: one picture height and one caption row for all six, so every caption starts at the same line;
     slightly wider cards keep the longest caption close to the others (at most one line of space under any caption) */
  #does .caps{align-items:stretch}
  #does .cap{flex-basis:88%}
  #does .cap>h3,#does .cap>p{padding:0 18px}
  #does .cap__vis{height:344px;min-height:0;flex:none}
}
/* small phones: the tabs fit every label in two lines */
@media (max-width:379px){
  .aud__tabs{gap:6px}
  .aud__tabs button{padding:9px 8px 10px;letter-spacing:-.01em}
}
/* the narrowest phones: the cards widen a little more, so the longest caption still wraps like the others */
@media (max-width:369px){ #does .cap{flex-basis:94%} }