/* ==========================================================================
   Case study series: shared motion and polish.
   Linked from the five case studies, after their inline styles.

   Rules of the road
   - Nothing here hides content on its own. Hidden "before" states only apply
     under html.csm-on, which cs-motion.js adds when motion is allowed, and the
     script only puts .csm-pre on elements that are still below the fold.
   - The hero entrance is pure CSS (keyframes with backwards fill), gated on
     html.js and prefers-reduced-motion: no-preference.
   - Motion uses transform and opacity only.
   ========================================================================== */

#amx-live{
  --csm-ease:cubic-bezier(.16,1,.3,1);
  --csm-ease-io:cubic-bezier(.65,0,.35,1);
  --csm-glow:color-mix(in srgb,var(--red) 30%,transparent);
  --csm-glow-2:color-mix(in srgb,var(--red-soft) 16%,transparent);
  --csm-tint:color-mix(in srgb,var(--red) 8%,transparent);
  --csm-edge:color-mix(in srgb,var(--red) 45%,var(--line));
  --csm-grid:rgba(255,255,255,.045);
  --csm-shadow:0 50px 100px -55px rgba(0,0,0,.95);
  --csm-chip-bg:color-mix(in srgb,var(--panel) 80%,transparent);
}
html:not(.amx-dark) #amx-live{
  --csm-glow:color-mix(in srgb,var(--red) 22%,transparent);
  --csm-glow-2:color-mix(in srgb,var(--red-soft) 12%,transparent);
  --csm-tint:color-mix(in srgb,var(--red) 6%,transparent);
  --csm-grid:rgba(9,9,11,.05);
  --csm-shadow:0 40px 80px -45px rgba(20,20,45,.32);
  --csm-chip-bg:rgba(255,255,255,.86);
}

/* ---------- Reading progress (appended to <body> by the script) ---------- */
.csm-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:700;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--csm-a,#d8493f),var(--csm-b,#e7766c));
  box-shadow:0 0 12px var(--csm-a,#d8493f)}

/* ---------- Hero: glow, grid, stage ---------- */
#amx-live .hero{position:relative;isolation:isolate;padding:clamp(56px,7vw,96px) 0 clamp(60px,6.5vw,88px)}
#amx-live .hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-4% -8% -10%;
  background:
    radial-gradient(36% 48% at 76% 42%,var(--csm-glow),transparent 72%),
    radial-gradient(30% 40% at 20% 78%,var(--csm-glow-2),transparent 74%);
  will-change:transform}
#amx-live .hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;
  background-image:linear-gradient(var(--csm-grid) 1px,transparent 1px),linear-gradient(90deg,var(--csm-grid) 1px,transparent 1px);
  background-size:56px 56px;background-position:50% 0;
  -webkit-mask-image:radial-gradient(62% 70% at 72% 44%,#000,transparent 78%);
          mask-image:radial-gradient(62% 70% at 72% 44%,#000,transparent 78%)}
#amx-live .meta{position:relative;z-index:1}
#amx-live .hero h1{font-size:clamp(34px,4.7vw,56px);letter-spacing:-.03em;line-height:1.06;
  background:linear-gradient(180deg,var(--head) 40%,color-mix(in srgb,var(--head) 78%,var(--red-soft)));
  -webkit-background-clip:text;background-clip:text;color:transparent}
@media (forced-colors:active){#amx-live .hero h1{background:none;color:CanvasText}}
#amx-live .hero .sub{color:color-mix(in srgb,var(--text) 88%,var(--head))}

#amx-live .hero-grid>*{min-width:0}
#amx-live .csm-stage{position:relative}
#amx-live .csm-stage::before{content:"";position:absolute;z-index:-1;inset:6% 4% -4%;pointer-events:none;
  background:radial-gradient(closest-side,var(--csm-glow),transparent);opacity:.85}
#amx-live .hero .shot{position:relative;overflow:hidden;border-color:var(--line-soft);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset,var(--csm-shadow),0 30px 90px -45px var(--csm-glow);
  transform-origin:50% 50%;backface-visibility:hidden}
#amx-live .csm-glare{position:absolute;inset:-60%;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.13),transparent 70%);
  transition:opacity .5s ease}
@media (hover:hover) and (pointer:fine){#amx-live .hero:hover .csm-glare{opacity:1}}

/* tall full-page screenshots in the hero: a window that pans on hover */
#amx-live .csm-window{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:7px;background:var(--panel-2)}
#amx-live .shot .csm-window img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:fill;border-radius:0;
  transform:translate3d(0,0,0);transition:transform 1.1s var(--csm-ease)}
@media (hover:hover) and (pointer:fine){
  #amx-live .csm-pan:hover .csm-window img{transform:translate3d(0,var(--csm-pan,0),0);
    transition:transform var(--csm-pan-dur,8s) cubic-bezier(.45,.05,.55,.95)}
}

/* floating stat chips and a second screenshot (used on the CES hero) */
#amx-live .csm-chips{list-style:none}
#amx-live .csm-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 8px;border-radius:999px;
  background:var(--csm-chip-bg);border:1px solid var(--line);color:var(--head);
  font-size:13.5px;font-weight:600;line-height:1.2;white-space:nowrap;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
html:not(.amx-dark) #amx-live .csm-chip{box-shadow:0 14px 30px -16px rgba(20,20,45,.28)}
#amx-live .csm-chip .ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--red);color:#fff}
#amx-live .csm-chip .ic svg{width:15px;height:15px}

/* ---------- Hero entrance (CSS only) ---------- */
@keyframes csm-rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes csm-stage-in{from{opacity:0;transform:translate3d(0,46px,0) scale(.965)}to{opacity:1;transform:none}}
@keyframes csm-pop{from{opacity:0;transform:translate3d(0,14px,0) scale(.86)}to{opacity:1;transform:none}}
@keyframes csm-float-in{from{opacity:0;transform:translate3d(-18px,30px,0) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes csm-drift{0%{transform:translate3d(-2%,0,0) scale(1)}50%{transform:translate3d(2.5%,-2.5%,0) scale(1.06)}100%{transform:translate3d(-1%,2%,0) scale(1.03)}}
@keyframes csm-bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
@keyframes csm-ping{0%{transform:scale(1);opacity:.65}80%,100%{transform:scale(2.6);opacity:0}}
@keyframes csm-nudge{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 10px),-50%)}60%{transform:translate(calc(-50% + 8px),-50%)}}

@media (prefers-reduced-motion:no-preference){
  html.js #amx-live .hero::before{animation:csm-drift 22s ease-in-out infinite alternate}
  html.js #amx-live .hero .eyebrow{animation:csm-rise .8s var(--csm-ease) .05s backwards}
  html.js #amx-live .hero h1{animation:csm-rise .95s var(--csm-ease) .14s backwards}
  html.js #amx-live .hero .sub{animation:csm-rise .95s var(--csm-ease) .26s backwards}
  html.js #amx-live .hero .actions{animation:csm-rise .95s var(--csm-ease) .38s backwards}
  html.js #amx-live .hero .csm-stage{animation:csm-stage-in 1.25s var(--csm-ease) .22s backwards}
  html.js #amx-live .hero .csm-float{animation:csm-float-in 1.1s var(--csm-ease) .7s backwards}
  html.js #amx-live .meta .cell{animation:csm-rise .8s var(--csm-ease) .5s backwards}
  html.js #amx-live .meta .cell:nth-child(2){animation-delay:.57s}
  html.js #amx-live .meta .cell:nth-child(3){animation-delay:.64s}
  html.js #amx-live .meta .cell:nth-child(4){animation-delay:.71s}
  html.js #amx-live .cta>.wrap::before{animation:csm-drift 18s ease-in-out infinite alternate}
  html.js #amx-live .ip-status .d::after{animation:csm-ping 2.4s cubic-bezier(0,0,.2,1) infinite}
}
/* idle loops pause while their section is off screen */
#amx-live .csm-off::before,#amx-live .csm-off>.wrap::before,#amx-live .csm-off .csm-chip,
#amx-live .csm-off .ip-status .d::after{animation-play-state:paused!important}

/* ---------- Scroll reveals ---------- */
html.csm-on #amx-live .csm-pre{opacity:0;transform:translate3d(0,28px,0)}
html.csm-on #amx-live .csm-pre.csm-in{opacity:1;transform:none;
  transition:opacity .45s var(--csm-ease) var(--csm-d,0s),transform .55s var(--csm-ease) var(--csm-d,0s)}
/* section heads: the number slides, the heading rises */
html.csm-on #amx-live .sec-head.csm-pre{opacity:1;transform:none}
html.csm-on #amx-live .sec-head.csm-pre>*{opacity:0;transform:translate3d(0,22px,0)}
html.csm-on #amx-live .sec-head.csm-pre>.no{transform:translate3d(-14px,0,0) scale(.8)}
html.csm-on #amx-live .sec-head.csm-in>*{opacity:1;transform:none;
  transition:opacity .45s var(--csm-ease) var(--csm-d,0s),transform .55s var(--csm-ease) var(--csm-d,0s)}
html.csm-on #amx-live .sec-head.csm-in>h2{transition-delay:calc(var(--csm-d,0s) + .08s)}
/* groups: the container holds still and its children cascade */
html.csm-on #amx-live .csm-group.csm-pre{opacity:1;transform:none}
html.csm-on #amx-live .csm-group.csm-pre>*{opacity:0;transform:translate3d(0,24px,0)}
html.csm-on #amx-live .csm-group.csm-in>*{opacity:1;transform:none;
  transition:opacity .45s var(--csm-ease) calc(var(--csm-d,0s) + var(--csm-i,0)*60ms),
             transform .55s var(--csm-ease) calc(var(--csm-d,0s) + var(--csm-i,0)*60ms)}
/* tags inside a revealed block pop in one after another */
html.csm-on #amx-live .csm-pre .tag{opacity:0;transform:translate3d(0,8px,0)}
html.csm-on #amx-live .csm-in .tag{opacity:1;transform:none;
  transition:opacity .5s ease calc(var(--csm-d,0s) + .2s + var(--csm-t,0)*45ms),
             transform .6s var(--csm-ease) calc(var(--csm-d,0s) + .2s + var(--csm-t,0)*45ms)}
/* feature rows: copy rises, the screenshot slides in from its own side */
html.csm-on #amx-live .feature.csm-pre{opacity:1;transform:none}
html.csm-on #amx-live .feature.csm-pre>.feature-copy{opacity:0;transform:translate3d(0,26px,0)}
html.csm-on #amx-live .feature.csm-pre>.browser{opacity:0;transform:translate3d(56px,0,0)}
html.csm-on #amx-live .feature-flip.csm-pre>.browser{transform:translate3d(-56px,0,0)}
html.csm-on #amx-live .feature.csm-in>*{opacity:1;transform:none;
  transition:opacity .5s var(--csm-ease) var(--csm-d,0s),transform .6s var(--csm-ease) var(--csm-d,0s)}
html.csm-on #amx-live .feature.csm-in>.browser{transition-delay:calc(var(--csm-d,0s) + .12s)}
/* the middle email sits lower; keep that offset through the reveal */
html.csm-on #amx-live .mails.csm-pre>.mail:nth-child(2){transform:translate3d(0,48px,0)}
html.csm-on #amx-live .mails.csm-in>.mail:nth-child(2){transform:translateY(22px)}
@media(max-width:860px){
  html.csm-on #amx-live .feature.csm-pre>.browser,
  html.csm-on #amx-live .feature-flip.csm-pre>.browser{transform:translate3d(0,32px,0)}
  html.csm-on #amx-live .mails.csm-in>.mail:nth-child(2){transform:none}
}
@media print{html.csm-on #amx-live .csm-pre,html.csm-on #amx-live .csm-pre *{opacity:1!important;transform:none!important}}

/* ---------- Section heads ---------- */
#amx-live section{padding:clamp(64px,8vw,96px) 0}
#amx-live .sec-head{align-items:baseline;gap:14px;margin-bottom:16px}
#amx-live .sec-head .no,
#amx-live .feature .no{display:inline-grid;place-items:center;min-width:40px;height:26px;padding:0 10px;
  border-radius:999px;border:1px solid var(--csm-edge);background:var(--csm-tint);
  color:var(--red-soft);font-size:12px;font-weight:700;letter-spacing:.06em;flex:none}
html:not(.amx-dark) #amx-live .sec-head .no,
html:not(.amx-dark) #amx-live .feature .no{color:color-mix(in srgb,var(--red) 80%,#000)}
#amx-live .feature .no{display:inline-grid;margin-bottom:14px}
#amx-live .sec-head h2{letter-spacing:-.025em}
#amx-live .sec-intro{color:color-mix(in srgb,var(--text) 92%,var(--head))}
#amx-live .csm-pull{margin-top:22px;padding:4px 0 4px 22px;border-left:2px solid var(--red);
  font-size:clamp(19px,2.1vw,23px);font-weight:600;line-height:1.45;color:var(--head);letter-spacing:-.01em;max-width:58ch}
#amx-live .csm-note{margin-top:22px;padding:22px 24px;border:1px solid var(--line-soft);border-radius:14px;
  background:linear-gradient(135deg,var(--csm-tint),transparent 60%),var(--panel);max-width:72ch}

/* ---------- Before / brief cards ---------- */
#amx-live .col{border-color:var(--line-soft);padding:30px 30px 26px;transition:border-color .3s}
#amx-live .col.brief{border-color:var(--csm-edge);background:linear-gradient(160deg,var(--csm-tint),transparent 55%),var(--panel)}
#amx-live .col.brief h4{color:var(--red-soft)}
html:not(.amx-dark) #amx-live .col.brief h4{color:color-mix(in srgb,var(--red) 80%,#000)}

/* ---------- Steps become a timeline ---------- */
#amx-live .step{position:relative;grid-template-columns:64px 1fr;border-top:0;
  background:linear-gradient(var(--line-soft),var(--line-soft)) 64px 0/calc(100% - 64px) 1px no-repeat}
#amx-live .step:last-child{border-bottom:0}
#amx-live .step .no{display:grid;place-items:center;width:38px;height:38px;padding:0;margin-top:-6px;border-radius:50%;
  border:1px solid var(--csm-edge);background:var(--bg);color:var(--red-soft);font-size:12.5px;
  box-shadow:0 0 0 5px var(--bg),0 0 26px -8px var(--csm-glow);position:relative;z-index:1}
html:not(.amx-dark) #amx-live .step .no{color:color-mix(in srgb,var(--red) 80%,#000)}
#amx-live .step::before{content:"";position:absolute;left:18.5px;top:68px;bottom:-14px;width:1px;
  background:linear-gradient(var(--csm-edge),var(--line-soft));transform-origin:50% 0}
#amx-live .step:last-child::before{display:none}
html.csm-on #amx-live .step.csm-pre::before{transform:scaleY(0)}
html.csm-on #amx-live .step.csm-pre.csm-in::before{transform:scaleY(1);transition:transform 1.1s var(--csm-ease-io) calc(var(--csm-d,0s) + .3s)}
@media(max-width:600px){
  #amx-live .step{grid-template-columns:52px 1fr;background-position:52px 0;background-size:calc(100% - 52px) 1px}
}

/* ---------- Lead journey: a line that draws across the steps ---------- */
#amx-live .flow{list-style:none;margin:46px 0 26px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;counter-reset:f}
#amx-live .flow li{position:relative;padding:0 16px 0 0;counter-increment:f}
#amx-live .flow li::before{content:counter(f,decimal-leading-zero);position:relative;z-index:1;display:grid;place-items:center;
  width:34px;height:34px;margin-bottom:16px;border-radius:50%;border:1px solid var(--csm-edge);background:var(--bg);
  box-shadow:0 0 0 5px var(--bg),0 0 24px -6px var(--csm-glow);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--red-soft)}
html:not(.amx-dark) #amx-live .flow li::before{color:color-mix(in srgb,var(--red) 80%,#000)}
#amx-live .flow li::after{content:"";position:absolute;top:16px;left:34px;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),color-mix(in srgb,var(--red) 30%,transparent));transform-origin:0 50%}
#amx-live .flow li:last-child::after{display:none}
#amx-live .flow b{display:block;color:var(--head);font-size:15.5px;font-weight:700;line-height:1.3}
#amx-live .flow span{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--muted)}
html.csm-on #amx-live .flow.csm-pre>li{transition-delay:calc(var(--csm-d,0s) + var(--csm-i,0)*240ms)!important}
html.csm-on #amx-live .flow.csm-pre li::before{transform:scale(.55)}
html.csm-on #amx-live .flow.csm-pre.csm-in li::before{transform:none;transition:transform .7s var(--csm-ease) calc(var(--csm-d,0s) + var(--csm-i,0)*240ms)}
html.csm-on #amx-live .flow.csm-pre li::after{transform:scaleX(0)}
html.csm-on #amx-live .flow.csm-pre.csm-in li::after{transform:scaleX(1);
  transition:transform .42s var(--csm-ease-io) calc(var(--csm-d,0s) + .12s + var(--csm-i,0)*240ms)}
@media(max-width:1000px){
  #amx-live .flow{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:30px}
  #amx-live .flow li:nth-child(4)::after{display:none}
}
@media(max-width:760px){
  #amx-live .flow{grid-template-columns:1fr;row-gap:0}
  #amx-live .flow li{padding:4px 0 24px 52px;min-height:58px}
  #amx-live .flow li::before{position:absolute;left:0;top:0;margin:0}
  #amx-live .flow li:nth-child(4)::after{display:block}
  #amx-live .flow li::after{top:40px;bottom:4px;left:16px;right:auto;width:2px;height:auto;transform-origin:50% 0;
    background:linear-gradient(180deg,var(--red),color-mix(in srgb,var(--red) 25%,transparent))}
  html.csm-on #amx-live .flow.csm-pre li::after{transform:scaleY(0)}
  html.csm-on #amx-live .flow.csm-pre.csm-in li::after{transform:scaleY(1)}
}

/* ---------- Screenshot frames ---------- */
#amx-live .browser{position:relative;border-color:var(--line-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,var(--csm-shadow)}
#amx-live .browser .bar{padding:11px 14px;gap:7px}
#amx-live .browser .bar .b{width:11px;height:11px;flex:none}
#amx-live .browser .bar .b:nth-child(1),#amx-live .shot-bar .bar .b:nth-child(1){background:#ff6058}
#amx-live .browser .bar .b:nth-child(2),#amx-live .shot-bar .bar .b:nth-child(2){background:#febc2e}
#amx-live .browser .bar .b:nth-child(3),#amx-live .shot-bar .bar .b:nth-child(3){background:#2ac741}
#amx-live .browser .bar .url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* zoom affordance on screenshots that open the lightbox */
#amx-live .csm-zoomable{cursor:zoom-in;pointer-events:auto}
#amx-live .csm-zoomable:focus-visible{outline:2px solid var(--red-soft);outline-offset:-4px}
#amx-live .csm-z::after{content:"";position:absolute;right:14px;top:56px;width:36px;height:36px;border-radius:50%;z-index:3;pointer-events:none;
  background:rgba(12,12,16,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2M11 8v6M8 11h6'/%3E%3C/svg%3E") center/18px no-repeat;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transform:scale(.85);transition:opacity .25s,transform .35s var(--csm-ease)}
#amx-live .shot.csm-z::after{top:18px;right:18px}
#amx-live .csm-z:hover::after,#amx-live .csm-z:focus-within::after{opacity:1;transform:none}
#amx-live .csm-expand{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex:none;
  font:600 12px/1 Inter,system-ui,sans-serif;color:var(--muted);background:transparent;border:1px solid var(--line);
  border-radius:7px;padding:6px 10px;cursor:pointer;transition:color .2s,border-color .2s}
#amx-live .csm-expand:hover{color:var(--head);border-color:var(--red)}
#amx-live .csm-expand:focus-visible{outline:2px solid var(--red-soft);outline-offset:2px}
#amx-live .csm-expand svg{width:13px;height:13px}
@media(max-width:600px){#amx-live .csm-expand span{display:none}#amx-live .csm-expand{padding:6px 8px}}

/* ---------- Results ---------- */
#amx-live .result-stat{gap:18px}
#amx-live .rstat{position:relative;overflow:hidden;padding:30px 28px 28px;border-color:var(--line-soft);
  background:radial-gradient(120% 90% at 0% 0%,var(--csm-tint),transparent 62%),var(--panel);
  transition:border-color .3s,transform .4s var(--csm-ease)}
#amx-live .rstat::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--red),transparent 85%);transform-origin:0 50%}
#amx-live .rstat:hover{border-color:var(--csm-edge);transform:translateY(-3px)}
#amx-live .rstat .big{font-size:clamp(40px,4.6vw,56px);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
#amx-live .rstat .lab{font-size:14.5px}
html.csm-on #amx-live .result-stat.csm-pre .rstat::before{transform:scaleX(0)}
html.csm-on #amx-live .result-stat.csm-in .rstat::before{transform:scaleX(1);
  transition:transform 1.1s var(--csm-ease-io) calc(var(--csm-d,0s) + .25s + var(--csm-i,0)*90ms)}
#amx-live .subline{gap:10px}
#amx-live .subline>span{padding:8px 15px;border:1px solid var(--line-soft);border-radius:999px;background:var(--amx-surf);font-size:14px}
#amx-live [data-count]{font-variant-numeric:tabular-nums}
#amx-live .csm-counting{display:inline-block;text-align:right}
#amx-live .csm-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Review ---------- */
#amx-live .review{position:relative;overflow:hidden;margin:0 auto;border-color:var(--line-soft);
  background:radial-gradient(90% 70% at 100% 0%,var(--csm-tint),transparent 62%),var(--panel)}
#amx-live .review::before{content:"\201C";position:absolute;right:30px;top:-24px;font:800 190px/1 Georgia,"Times New Roman",serif;
  color:var(--red);opacity:.13;pointer-events:none}

/* ---------- In progress card ---------- */
#amx-live .ip-card{border-color:var(--line-soft);background:radial-gradient(80% 90% at 0 0,var(--csm-tint),transparent 62%),var(--panel)}
#amx-live .ip-status{background:var(--csm-tint);border-color:var(--csm-edge)}
#amx-live .ip-status .d{position:relative}
#amx-live .ip-status .d::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--red)}
#amx-live .ip-mod{transition:border-color .25s,transform .35s var(--csm-ease)}
#amx-live .ip-mod:hover{border-color:var(--csm-edge);transform:translateY(-2px)}

/* ---------- Before and after: nudge the handle once it is seen ---------- */
@media (prefers-reduced-motion:no-preference){
  #amx-live .ba.in .ba-line span{animation:csm-nudge 1.5s var(--csm-ease) .7s 1 both}
}

/* ---------- Buttons ---------- */
#amx-live .btn{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 10px 30px -12px var(--csm-glow)}
#amx-live .btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--csm-ease)}
#amx-live .btn:hover::after{transform:translateX(120%)}

/* ---------- Closing call to action ---------- */
#amx-live .cta{padding:clamp(64px,9vw,112px) 0}
#amx-live .cta>.wrap{position:relative;isolation:isolate;overflow:hidden;width:min(1016px,calc(100% - 32px));margin:0 auto;
  padding:clamp(44px,6.5vw,80px) clamp(22px,5vw,64px);border:1px solid var(--line-soft);border-radius:28px;
  background:linear-gradient(180deg,var(--csm-tint),transparent 70%),var(--panel)}
#amx-live .cta>.wrap::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:110%;aspect-ratio:2/1;left:-5%;top:-55%;
  background:radial-gradient(closest-side,var(--csm-glow),transparent 72%)}
#amx-live .cta>.wrap::after{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0;
  background-image:linear-gradient(var(--csm-grid) 1px,transparent 1px),linear-gradient(90deg,var(--csm-grid) 1px,transparent 1px);
  background-size:44px 44px;background-position:50% 0;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(70% 80% at 50% 0%,#000,transparent 75%)}
#amx-live .cta h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.03em}
#amx-live .cta .fine{border-top-color:var(--line-soft)}

/* ---------- Lightbox (appended to <body>) ---------- */
.csm-lb{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:68px 3vw 22px;font-family:Inter,system-ui,sans-serif}
.csm-lb[hidden]{display:none}
.csm-lb-bg{position:absolute;inset:0;background:rgba(5,5,9,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.csm-lb-stage{position:relative;display:flex;justify-content:center;max-width:min(1480px,94vw);max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px)}
.csm-lb-img{display:block;max-width:100%;max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);width:auto;height:auto;
  border-radius:10px;box-shadow:0 40px 120px -20px rgba(0,0,0,.85);cursor:zoom-out}
.csm-lb.is-tall .csm-lb-stage{display:block;width:min(940px,94vw);overflow-y:auto;overscroll-behavior:contain;border-radius:10px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.csm-lb.is-tall .csm-lb-stage:focus-visible{outline:2px solid #fff;outline-offset:3px}
.csm-lb.is-tall .csm-lb-img{width:100%;max-width:none;max-height:none;border-radius:0;cursor:default}
.csm-lb-cap{position:relative;margin:14px auto 0;max-width:72ch;text-align:center;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.csm-lb-close{position:absolute;top:14px;right:14px;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);background:rgba(22,22,28,.75);color:#fff;cursor:pointer;transition:background .2s,border-color .2s}
.csm-lb-close:hover{background:rgba(40,40,50,.9);border-color:rgba(255,255,255,.5)}
.csm-lb-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
.csm-lb-close svg{width:20px;height:20px}
html.csm-lock,html.csm-lock body{overflow:hidden}

/* ---------- Legibility: lift the dimmest greys a touch on the dark theme ---------- */
html.amx-dark #amx-live .rstat .lab,
html.amx-dark #amx-live .flow span,
html.amx-dark #amx-live .subline,
html.amx-dark #amx-live .stack-item span,
html.amx-dark #amx-live .tag,
html.amx-dark #amx-live .col:not(.brief) h4,
html.amx-dark #amx-live .ip-mod .s,
html.amx-dark #amx-live .mail figcaption{color:#9d9da6}
html.amx-dark #amx-live .scrollhint,
html.amx-dark #amx-live .meta .k,
html.amx-dark #amx-live .shot .cap,
html.amx-dark #amx-live .cta .fine{color:#8c909a}

/* ---------- Frontline: Search Console panel (injected by amx-fx.js) ----------
   The page's `#amx-live *{margin:0;padding:0}` reset outranks the panel's
   class-only rules, so the tiles lost their padding and the chart its gap. */
#amx-live .amx-gsc{padding:clamp(20px,3vw,28px);border-color:var(--line-soft);
  background:radial-gradient(90% 80% at 100% 0%,var(--csm-tint),transparent 60%),var(--panel)}
#amx-live .amx-gsc-head{margin-bottom:18px}
#amx-live .amx-gsc-tile{padding:16px 18px;border-radius:12px;transition:border-color .25s}
#amx-live .amx-gsc-tile:hover{border-color:var(--csm-edge)}
#amx-live .amx-gsc-num{font-variant-numeric:tabular-nums}
#amx-live .amx-gsc-lab{margin-top:9px}
#amx-live .amx-gsc-chart{margin:18px 0 0}