/* ===========================================================================
   SCALUS IN MOTION  (/a/ test page only, Tim 30 Sep 2026)
   Ten code driven animations in the iOS 27 liquid glass idiom, painted in the
   Scalus palette: near black stage, the green / cyan / violet / orange brand
   gradient, Inter, and the three logo bars.

     1  The showreel            .mo-reel        (15s scripted film, loops)
     2  Unified inbox           [data-mo=inbox]
     3  Google review system    [data-mo=reviews]
     4  Voicemail assistant     [data-mo=voicemail]
     5  SEO and AI Search       [data-mo=search]
     6  Updates across sites    [data-mo=updates]
     7  One to one support      [data-mo=support]
     8  30 page website         [data-mo=pages]
     9  $225, everything in     [data-mo=price]
    10  The Dynamic Island      .mo-island     (fixed, follows the page)

   Every stage is a dark island in BOTH themes, same rule as the hero wall, so
   the colours below are literal on purpose. Captions use the site tokens.
   Nothing here touches sc.css or film.css; every selector is mo- scoped.
   =========================================================================== */

:root{
  --mo-green:#32cf75; --mo-cyan:#22d3ee; --mo-violet:#8b5cf6; --mo-orange:#FF4D00;
  --mo-grad:linear-gradient(95deg,#32cf75,#22d3ee,#8b5cf6,#FF4D00);
  --mo-spring:cubic-bezier(.34,1.56,.64,1);
  --mo-ease:cubic-bezier(.22,1,.36,1);
  --mo-stage:#0a0c0b;
  --mo-glass:rgba(255,255,255,.07);
  --mo-rim:inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.08);
  --mo-ink:#f5f7f6; --mo-soft:#b8c0bc; --mo-mute:#7d8681;
}

/* shared liquid glass surface: lifted blur, a bright top rim, a soft sheen */
.mo-glass{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:var(--mo-rim),0 18px 40px rgba(0,0,0,.45);border-radius:18px}

/* ---------------------------------------------------------------------------
   1. THE SHOWREEL
   --------------------------------------------------------------------------- */
.mo-reel-sec{padding:34px 0 50px}
.mo-reel{position:relative;aspect-ratio:16/8.4;max-height:620px;margin:0 auto;border-radius:30px;
  overflow:hidden;background:var(--mo-stage);isolation:isolate;color:var(--mo-ink);
  box-shadow:0 40px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.07)}
@media(max-width:760px){.mo-reel{aspect-ratio:4/5;border-radius:24px}}

.mo-reel .r-bg{position:absolute;inset:-20%;z-index:-2;filter:blur(60px);opacity:.85}
.mo-reel .r-bg i{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;
  animation:rDrift 16s ease-in-out infinite alternate}
.mo-reel .r-bg i:nth-child(1){left:6%;top:12%;background:radial-gradient(circle,rgba(50,207,117,.55),transparent 65%)}
.mo-reel .r-bg i:nth-child(2){right:4%;top:4%;background:radial-gradient(circle,rgba(139,92,246,.5),transparent 65%);animation-delay:-5s}
.mo-reel .r-bg i:nth-child(3){left:34%;bottom:0;background:radial-gradient(circle,rgba(255,77,0,.38),transparent 65%);animation-delay:-9s}
@keyframes rDrift{to{transform:translate(8%,-6%) scale(1.15)}}
.mo-reel .r-grid{position:absolute;inset:0;z-index:-1;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  transition:transform 2.4s var(--mo-ease)}
.mo-reel[data-s="3"] .r-grid{transform:scale(1.6) rotate(8deg)}
.mo-reel[data-s="4"] .r-grid{transform:scale(1.2) rotate(-6deg)}

.mo-reel .r-layer{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}

/* scene 1: the pill, the cursor, the press */
.mo-reel .r-btn{position:relative;padding:18px 34px;border-radius:999px;font-weight:700;font-size:clamp(1rem,2.2vw,1.35rem);
  letter-spacing:-.01em;color:#06140c;background:linear-gradient(180deg,#5de59a,#32cf75);
  box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 14px 40px rgba(50,207,117,.45),0 2px 0 rgba(255,255,255,.5) inset;
  transition:transform .5s var(--mo-spring),opacity .6s,filter .6s;opacity:0;transform:scale(.6);filter:blur(10px)}
.mo-reel[data-s="1"] .r-btn{opacity:1;transform:none;filter:none}
.mo-reel[data-s="1"].press .r-btn{transform:scale(.92);transition-duration:.14s}
.mo-reel[data-s="2"] .r-btn{opacity:0;transform:scale(2.4);filter:blur(16px)}
.mo-reel .r-ripple{position:absolute;width:120px;aspect-ratio:1;border-radius:50%;border:2px solid rgba(50,207,117,.8);opacity:0}
.mo-reel.press .r-ripple{animation:rRipple .9s var(--mo-ease) forwards}
@keyframes rRipple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(4)}}
.mo-reel .r-cursor{position:absolute;left:50%;top:50%;width:26px;height:26px;z-index:5;opacity:0;
  transform:translate(260px,200px);transition:transform 1.3s var(--mo-ease),opacity .4s;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.mo-reel.cur .r-cursor{opacity:1;transform:translate(34px,6px)}
.mo-reel.press .r-cursor{transform:translate(34px,6px) scale(.85);transition-duration:.14s}
.mo-reel[data-s="2"] .r-cursor{opacity:0}

/* scene 2: a site assembles itself */
.mo-reel .r-site{width:min(64%,640px);aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  opacity:0;transform:scale(.4) rotateX(24deg);filter:blur(12px);
  transition:transform 1s var(--mo-spring),opacity .6s,filter .7s}
@media(max-width:760px){.mo-reel .r-site{width:78%;aspect-ratio:9/15}}
.mo-reel[data-s="2"] .r-site{opacity:1;transform:none;filter:none}
.mo-reel[data-s="3"] .r-site{opacity:0;transform:scale(1.8) translateY(-10%);filter:blur(20px);transition-duration:1.2s}
.mo-reel .r-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.07)}
.mo-reel .r-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.mo-reel .r-bar i:nth-child(2){background:#febc2e}.mo-reel .r-bar i:nth-child(3){background:#28c840}
.mo-reel .r-bar span{margin:0 auto;font-size:.68rem;color:var(--mo-mute);background:rgba(255,255,255,.06);padding:3px 14px;border-radius:99px}
.mo-reel .r-body{padding:6% 7%;display:grid;gap:12px;align-content:start}
.mo-reel .r-body>*{opacity:0;transform:translateY(18px);transition:opacity .5s,transform .7s var(--mo-spring)}
.mo-reel[data-s="2"] .r-body>*{opacity:1;transform:none}
.mo-reel .r-body>*:nth-child(2){transition-delay:.12s}.mo-reel .r-body>*:nth-child(3){transition-delay:.24s}
.mo-reel .r-body>*:nth-child(4){transition-delay:.36s}.mo-reel .r-body>*:nth-child(5){transition-delay:.5s}
.mo-reel .r-h{height:22px;width:62%;border-radius:8px;background:var(--mo-grad);background-size:200% 100%;animation:rShine 3s linear infinite}
.mo-reel .r-h.s{width:44%;background:rgba(255,255,255,.85);animation:none}
.mo-reel .r-p{height:9px;width:54%;border-radius:5px;background:rgba(255,255,255,.18)}
.mo-reel .r-cta{height:28px;width:120px;border-radius:99px;background:#32cf75}
.mo-reel .r-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:6px}
.mo-reel .r-cards i{aspect-ratio:4/3;border-radius:10px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
@media(max-width:760px){.mo-reel .r-cards{grid-template-columns:1fr}.mo-reel .r-cards i{aspect-ratio:16/7}}
@keyframes rShine{to{background-position:-200% 0}}

/* scene 3: kinetic words, one per beat */
.mo-reel .r-word{font-weight:800;letter-spacing:-.045em;line-height:.95;text-align:center;
  font-size:clamp(2.6rem,9vw,7.4rem);padding:0 4%}
.mo-reel .r-word span{display:inline-block;background:var(--mo-grad);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;opacity:0}
.mo-reel .r-word span.go{animation:rWord .72s var(--mo-ease) both}
@keyframes rWord{0%{opacity:0;filter:blur(18px);transform:scale(1.35) translateY(8%);background-position:0 0}
  40%{opacity:1;filter:blur(0);transform:scale(1)}
  80%{opacity:1;filter:blur(0);transform:scale(.97);background-position:-120% 0}
  100%{opacity:0;filter:blur(10px);transform:scale(.9)}}
.mo-reel .r-word small{display:block;font-size:.16em;letter-spacing:.24em;text-transform:uppercase;color:var(--mo-soft);
  margin-top:1.1em;font-weight:700;opacity:0}
.mo-reel[data-s="3"] .r-word small{opacity:1;transition:opacity .4s .2s}

/* scene 4: the orbit, every part circling the logo */
.mo-reel .r-orbit{position:relative;width:min(58vmin,440px);aspect-ratio:1;opacity:0;transform:scale(.5) rotate(-40deg);
  transition:opacity .6s,transform 1.1s var(--mo-spring)}
.mo-reel[data-s="4"] .r-orbit{opacity:1;transform:none}
.mo-reel[data-s="5"] .r-orbit{opacity:0;transform:scale(.2);transition-duration:.8s}
.mo-reel .r-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(255,255,255,.14);animation:rSpin 14s linear infinite}
.mo-reel .r-chip{position:absolute;left:50%;top:50%;
  transform:rotate(calc(var(--i) * 60deg)) translateY(calc(min(58vmin,440px) / -2)) rotate(calc(var(--i) * -60deg));
  margin:-17px 0 0 -58px;width:116px;height:34px;display:grid;place-items:center}
.mo-reel .r-chip b{display:block;padding:8px 14px;border-radius:99px;font-size:.78rem;font-weight:700;white-space:nowrap;
  background:rgba(255,255,255,.08);box-shadow:var(--mo-rim),0 8px 20px rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:rSpin 14s linear infinite reverse}
.mo-reel .r-chip b::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;background:var(--c,#32cf75);box-shadow:0 0 10px var(--c,#32cf75)}
@keyframes rSpin{to{transform:rotate(360deg)}}
@media(max-width:760px){.mo-reel .r-orbit{width:62vw}.mo-reel .r-chip{transform:rotate(calc(var(--i) * 60deg)) translateY(-31vw) rotate(calc(var(--i) * -60deg))}}

/* the logo bars, used by the orbit core, the end card and the island */
.mo-bars{display:inline-flex;align-items:flex-end;gap:.16em;height:1em}
.mo-bars i{display:block;width:.26em;border-radius:.08em;background:#32cf75}
.mo-bars i:nth-child(1){height:45%;background:#FF4D00}
.mo-bars i:nth-child(2){height:72%;background:#5de59a}
.mo-bars i:nth-child(3){height:100%}
.mo-reel .r-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1;border-radius:32%;
  display:grid;place-items:center;font-size:clamp(2rem,6vmin,3.4rem);
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));box-shadow:var(--mo-rim),0 30px 60px rgba(0,0,0,.5),0 0 80px rgba(50,207,117,.25)}
.mo-reel[data-s="4"] .r-core .mo-bars i{animation:rBar 1.2s var(--mo-spring) both}
.mo-reel[data-s="4"] .r-core .mo-bars i:nth-child(2){animation-delay:.12s}
.mo-reel[data-s="4"] .r-core .mo-bars i:nth-child(3){animation-delay:.24s}
@keyframes rBar{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}

/* scene 5: the end card */
.mo-reel .r-end{text-align:center;opacity:0;transform:translateY(20px) scale(.96);filter:blur(10px);
  transition:opacity .8s,transform 1s var(--mo-spring),filter .8s}
.mo-reel[data-s="5"] .r-end{opacity:1;transform:none;filter:none}
.mo-reel .r-end img{width:min(52vw,420px);height:auto;display:block;margin:0 auto 18px}
.mo-reel .r-end p{font-size:clamp(1rem,2.4vw,1.5rem);font-weight:600;color:var(--mo-soft);letter-spacing:-.01em}
.mo-reel .r-end p b{color:#fff}
.mo-reel .r-end .r-tag{display:inline-block;margin-top:14px;padding:8px 16px;border-radius:99px;font-size:.8rem;font-weight:700;
  background:rgba(50,207,117,.14);color:#5de59a;box-shadow:inset 0 0 0 1px rgba(50,207,117,.35)}

/* progress hairline + pause, the film's only controls */
.mo-reel .r-prog{position:absolute;left:22px;right:70px;bottom:22px;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.mo-reel .r-prog i{display:block;height:100%;width:100%;background:var(--mo-grad);transform-origin:left;transform:scaleX(0)}
.mo-reel .r-pause{position:absolute;right:16px;bottom:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);box-shadow:var(--mo-rim);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:auto}
.mo-reel .r-pause svg{width:16px;height:16px}
.mo-reel .r-pause .pl{display:none}
.mo-reel.paused .r-pause .pa{display:none}.mo-reel.paused .r-pause .pl{display:block}
.mo-reel.paused *,.mo-reel.paused *::before{animation-play-state:paused !important}

/* ---------------------------------------------------------------------------
   THE BENTO
   --------------------------------------------------------------------------- */
.mo-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mo-bento .w2{grid-column:span 2}
.mo-bento .w3{grid-column:1/-1}
@media(max-width:1000px){.mo-bento{grid-template-columns:1fr 1fr}.mo-bento .w2,.mo-bento .w3{grid-column:1/-1}}
@media(max-width:680px){.mo-bento{grid-template-columns:1fr;gap:14px}}

.mo-tile{position:relative;border-radius:28px;overflow:hidden;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.35),inset 0 1px 0 rgba(var(--wa),.07);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--mo-ease),border-color .3s}
.mo-tile:hover{border-color:var(--line-2)}
/* the specular that follows the pointer, liquid glass style */
.mo-tile::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.1),transparent 45%)}
.mo-tile:hover::after{opacity:1}
.mo-stage{position:relative;height:300px;margin:10px 10px 0;border-radius:18px;overflow:hidden;background:var(--mo-stage);color:var(--mo-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.05);isolation:isolate;font-size:14px}
.mo-stage::before{content:'';position:absolute;inset:-30%;z-index:-1;filter:blur(50px);opacity:.7;
  background:radial-gradient(40% 40% at 20% 20%,var(--g1,rgba(50,207,117,.3)),transparent 70%),radial-gradient(40% 40% at 85% 80%,var(--g2,rgba(139,92,246,.28)),transparent 70%)}
.mo-cap{padding:20px 24px 24px}
.mo-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.mo-kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.mo-cap h3{margin:10px 0 8px;font-size:1.3rem;letter-spacing:-.02em}
.mo-cap p{color:var(--ink-soft);margin:0;font-size:.97rem;line-height:1.55}
.mo-note{text-align:center;color:var(--ink-mute);font-size:.82rem;margin-top:22px}

/* ---------------------------------------------------------------------------
   2. UNIFIED INBOX
   --------------------------------------------------------------------------- */
.ib{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:18px;--g1:rgba(34,211,238,.28)}
.ib-src{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;align-items:center}
.ib-s{display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:600;color:var(--mo-mute);transition:color .3s}
.ib-s span{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;
  background:var(--c);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px rgba(0,0,0,.35);transition:transform .4s var(--mo-spring),box-shadow .4s}
.ib-s svg{width:17px;height:17px}
.ib-s.on{color:#fff}
.ib-s.on span{transform:scale(1.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 4px rgba(255,255,255,.08),0 0 24px var(--c)}
.ib-box{position:relative;padding:14px 12px 12px;overflow:hidden;display:flex;flex-direction:column}
.ib-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:1.05rem;letter-spacing:-.02em;padding:4px 4px 10px}
.ib-head b{font-size:.72rem;min-width:22px;height:22px;padding:0 7px;border-radius:99px;display:grid;place-items:center;background:#32cf75;color:#06140c;transition:transform .4s var(--mo-spring)}
.ib-head b.bump{transform:scale(1.3)}
.ib-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ib-list li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:13px;
  background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  animation:ibIn .7s var(--mo-spring) both}
.ib-list li.out{animation:ibOut .4s var(--mo-ease) forwards}
.ib-list li.fresh{background:rgba(50,207,117,.12);box-shadow:inset 0 0 0 1px rgba(50,207,117,.35)}
@keyframes ibIn{from{opacity:0;transform:translateY(-22px) scale(.94);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes ibOut{to{opacity:0;transform:scale(.9);filter:blur(4px)}}
.ib-list .av{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--c);color:#fff}
.ib-list .av svg{width:14px;height:14px}
.ib-list .tx{min-width:0}
.ib-list .tx b{display:block;font-size:.8rem}
.ib-list .tx span{display:block;font-size:.74rem;color:var(--mo-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-list time{font-size:.66rem;color:var(--mo-mute)}
.ib-island{position:absolute;left:50%;top:10px;transform:translateX(-50%);height:26px;width:26px;border-radius:99px;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.5);display:flex;align-items:center;gap:8px;padding:0 10px;
  overflow:hidden;white-space:nowrap;font-size:.72rem;font-weight:700;color:#fff;opacity:0;
  transition:width .55s var(--mo-spring),opacity .3s;z-index:3}
.ib-island i{flex:none;width:8px;height:8px;border-radius:50%;background:#32cf75;box-shadow:0 0 8px #32cf75}
.ib-island.on{width:190px;opacity:1}
.ib-spark{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 16px 6px var(--c,#32cf75);opacity:0;z-index:4;pointer-events:none}
@media(max-width:680px){
  .ib{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:14px}
  .ib-box{padding-top:44px;border-radius:6px}
  .ib-island.on{width:170px}
  .ib-src{grid-template-rows:none;grid-template-columns:repeat(6,1fr);justify-items:center}
  .ib-s{flex-direction:column;gap:3px;font-size:.6rem}
  .ib-s span{width:30px;height:30px}
  .mo-t-inbox .mo-stage{height:340px}
}

/* ---------------------------------------------------------------------------
   3. GOOGLE REVIEW SYSTEM
   --------------------------------------------------------------------------- */
.rv{padding:18px;display:grid;grid-template-rows:auto 1fr;gap:12px;--g1:rgba(251,188,5,.22);--g2:rgba(50,207,117,.22)}
.rv-sms{justify-self:start;max-width:88%;padding:10px 13px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.1);
  font-size:.8rem;line-height:1.4;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .4s,transform .6s var(--mo-spring)}
.rv-sms a{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border-radius:10px;background:rgba(66,133,244,.2);color:#8ab4f8;font-weight:700;text-decoration:none;position:relative;overflow:hidden}
.rv-sms a::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:rgba(255,255,255,.6);opacity:0}
.rv.p1 .rv-sms,.rv.p2 .rv-sms,.rv.p3 .rv-sms{opacity:1;transform:none}
.rv.p2 .rv-sms a::after{animation:rvTap .6s ease-out}
@keyframes rvTap{0%{opacity:.8;transform:scale(0)}100%{opacity:0;transform:scale(14)}}
.rv-card{align-self:end;padding:16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;
  opacity:.35;transform:scale(.97);transition:opacity .5s,transform .6s var(--mo-spring)}
.rv.p2 .rv-card,.rv.p3 .rv-card{opacity:1;transform:none}
.mo-score{grid-row:span 2;font-size:2.7rem;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;
  display:block;overflow:hidden;height:1em}
.mo-score .roll{display:flex;flex-direction:column;transition:transform .9s var(--mo-spring)}
.mo-score .roll span{display:block;height:1em;line-height:1em}
.rv-stars{display:flex;gap:3px}
.rv-stars svg{width:20px;height:20px;fill:rgba(255,255,255,.14);transition:fill .2s,transform .45s var(--mo-spring)}
.rv-stars svg.on{fill:#FBBC05;transform:scale(1.28);filter:drop-shadow(0 0 8px rgba(251,188,5,.7))}
.rv-stars svg.set{transform:none}
.mo-rmeta{font-size:.74rem;color:var(--mo-soft);display:flex;align-items:center;gap:6px}
.mo-rmeta svg{width:14px;height:14px}
.rv-toast{position:absolute;left:50%;top:12px;transform:translate(-50%,-60px);padding:8px 14px 8px 10px;border-radius:99px;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 26px rgba(0,0,0,.55);display:flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;
  white-space:nowrap;transition:transform .6s var(--mo-spring)}
.rv-toast i{width:20px;height:20px;border-radius:50%;background:#FBBC05;display:grid;place-items:center;color:#000;font-style:normal;font-size:.7rem}
.rv.p3 .rv-toast{transform:translate(-50%,0)}

/* ---------------------------------------------------------------------------
   4. VOICEMAIL ASSISTANT
   --------------------------------------------------------------------------- */
.vm{padding:18px;display:flex;flex-direction:column;gap:12px;--g1:rgba(255,77,0,.24);--g2:rgba(34,211,238,.2)}
.vm-call{display:flex;align-items:center;gap:12px;padding:12px 14px;transition:transform .6s var(--mo-spring),opacity .4s}
.vm-ic{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#ff3b30;color:#fff}
.vm-ic svg{width:18px;height:18px}
.vm-ic::before,.vm-ic::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #ff3b30;opacity:0}
.vm.p1 .vm-ic::before{animation:vmRing 1.2s ease-out infinite}
.vm.p1 .vm-ic::after{animation:vmRing 1.2s .4s ease-out infinite}
@keyframes vmRing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.vm-call b{display:block;font-size:.9rem}
.vm-call small{font-size:.74rem;color:var(--mo-soft)}
.vm-call .vm-when{margin-left:auto;font-size:.7rem;color:var(--mo-mute)}
.vm-listen{display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .6s var(--mo-spring)}
.vm.p2 .vm-listen,.vm.p3 .vm-listen{opacity:1;transform:none}
.vm-wave{display:flex;align-items:center;gap:3px;height:34px;flex:1}
.vm-wave i{flex:1;max-width:5px;border-radius:3px;background:linear-gradient(180deg,#22d3ee,#8b5cf6);height:20%;transform-origin:center}
.vm.p2 .vm-wave i{animation:vmBar .9s ease-in-out infinite alternate}
@keyframes vmBar{0%{height:14%}100%{height:var(--h,80%)}}
.vm-listen small{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#22d3ee;white-space:nowrap}
.vm.p3 .vm-listen small{color:#32cf75}
.vm-trans{font-size:.8rem;line-height:1.5;color:var(--mo-soft);min-height:3em;font-style:italic}
.vm-trans .caret{display:inline-block;width:2px;height:1em;background:#22d3ee;vertical-align:-2px;margin-left:1px;animation:vmCaret .8s steps(1) infinite}
@keyframes vmCaret{50%{opacity:0}}
.vm-card{margin-top:auto;padding:12px 14px;display:grid;gap:8px;opacity:0;transform:translateY(30px) scale(.95);transition:opacity .4s,transform .7s var(--mo-spring)}
.vm.p3 .vm-card{opacity:1;transform:none}
.vm-card .top{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:.86rem}
.vm-card .top span{font-size:.66rem;font-weight:700;color:#32cf75;background:rgba(50,207,117,.14);padding:3px 8px;border-radius:99px}
.vm-chips{display:flex;flex-wrap:wrap;gap:6px}
.vm-chips span{font-size:.7rem;font-weight:600;padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

/* ---------------------------------------------------------------------------
   5. SEO AND AI SEARCH
   --------------------------------------------------------------------------- */
.se{padding:16px 18px;display:flex;flex-direction:column;gap:12px;--g1:rgba(66,133,244,.22);--g2:rgba(139,92,246,.26)}
.se-seg{position:relative;align-self:center;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.se-seg span{position:relative;z-index:1;padding:6px 16px;font-size:.74rem;font-weight:700;text-align:center;color:var(--mo-soft);transition:color .3s}
.se-seg::before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:99px;background:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(0,0,0,.3);transition:transform .55s var(--mo-spring)}
.se.ai .se-seg::before{transform:translateX(100%)}
.se:not(.ai) .se-seg span:first-child,.se.ai .se-seg span:last-child{color:#fff}
.se-view{position:relative;flex:1}
.se-g,.se-ai{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;justify-content:center;transition:opacity .5s,transform .6s var(--mo-ease),filter .5s}
.se.ai .se-g,.se:not(.ai) .se-ai{opacity:0;transform:scale(.96);filter:blur(8px);pointer-events:none}
.se-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);font-size:.84rem}
.se-bar svg{width:15px;height:15px;color:var(--mo-soft);flex:none}
.se-bar .caret{display:inline-block;width:2px;height:1em;background:#8ab4f8;vertical-align:-2px;animation:vmCaret .8s steps(1) infinite}
.se-res{position:relative;height:150px}
.se-row{position:absolute;left:0;right:0;height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.05);
  font-size:.8rem;transition:transform .9s var(--mo-spring),background .5s,box-shadow .5s;transform:translateY(calc(var(--pos) * 50px))}
.se-row .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.68rem;font-weight:800;background:rgba(255,255,255,.1)}
.se-row small{margin-left:auto;color:var(--mo-mute);font-size:.7rem}
.se-row.you{background:rgba(50,207,117,.1);box-shadow:inset 0 0 0 1px rgba(50,207,117,.3)}
.se-row.you.top{background:rgba(50,207,117,.18);box-shadow:inset 0 0 0 1px rgba(50,207,117,.6),0 0 30px rgba(50,207,117,.25)}
.se-row.you .n{background:#32cf75;color:#06140c}
.se-row.you small{color:#FBBC05}
.se-q{align-self:flex-end;max-width:82%;padding:9px 13px;border-radius:18px 18px 6px 18px;background:#0a84ff;font-size:.8rem;line-height:1.4}
.se-a{align-self:flex-start;max-width:90%;padding:10px 13px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.09);font-size:.8rem;line-height:1.5;min-height:38px}
.se-a .hl{font-weight:800;background:var(--mo-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rShine 2.4s linear infinite}
.se-dots{display:inline-flex;gap:4px;padding:4px 0}
.se-dots i{width:7px;height:7px;border-radius:50%;background:var(--mo-soft);animation:seDot 1s ease-in-out infinite}
.se-dots i:nth-child(2){animation-delay:.15s}.se-dots i:nth-child(3){animation-delay:.3s}
@keyframes seDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.se-src{display:flex;gap:6px;flex-wrap:wrap;opacity:0;transition:opacity .5s}
.se-src.on{opacity:1}
.se-src span{font-size:.66rem;font-weight:700;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.07);color:var(--mo-soft)}

/* ---------------------------------------------------------------------------
   6. UPDATES ACROSS EVERY SITE
   --------------------------------------------------------------------------- */
.up{display:grid;place-items:center;--g1:rgba(50,207,117,.3);--g2:rgba(34,211,238,.22)}
.up-field{position:relative;width:100%;height:100%}
.up-orb{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px;border-radius:50%;display:grid;place-items:center;z-index:2;
  background:radial-gradient(circle at 35% 30%,#7af0ae,#32cf75 45%,#138a4a);box-shadow:0 0 0 6px rgba(50,207,117,.14),0 0 50px rgba(50,207,117,.55);
  color:#06140c;font-weight:800;font-size:.72rem;text-align:center;line-height:1.1}
.up-orb svg{width:24px;height:24px}
.up.go .up-orb svg{animation:rSpin 1.2s var(--mo-ease)}
.up-ring{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px;border-radius:50%;border:2px solid rgba(50,207,117,.7);opacity:0}
.up.go .up-ring{animation:upRing 2.2s var(--mo-ease) forwards}
.up.go .up-ring:nth-child(2){animation-delay:.35s}.up.go .up-ring:nth-child(3){animation-delay:.7s}
@keyframes upRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5.5)}}
.up-site{position:absolute;width:58px;height:44px;border-radius:9px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  padding:6px;display:grid;gap:4px;align-content:start;overflow:hidden;transform:translate(-50%,-50%);transition:box-shadow .4s,background .4s}
.up-site i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.2)}
.up-site i:first-child{width:60%;background:rgba(255,255,255,.35);transition:background .4s}
.up-site i:nth-child(3){width:70%}
.up-site b{position:absolute;right:4px;bottom:4px;width:15px;height:15px;border-radius:50%;background:#32cf75;display:grid;place-items:center;
  transform:scale(0);transition:transform .5s var(--mo-spring)}
.up-site b svg{width:10px;height:10px;color:#06140c}
.up-site::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%)}
.up-site.done{background:rgba(50,207,117,.1);box-shadow:inset 0 0 0 1px rgba(50,207,117,.4)}
.up-site.done i:first-child{background:var(--mo-grad)}
.up-site.done b{transform:scale(1)}
.up-site.done::after{animation:upSweep .8s var(--mo-ease)}
@keyframes upSweep{to{transform:translateX(120%)}}
.up-count{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:.74rem;font-weight:700;color:var(--mo-soft);white-space:nowrap;
  padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.up-count b{color:#fff;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------------------
   7. ONE TO ONE SUPPORT
   --------------------------------------------------------------------------- */
.su{padding:0;display:flex;flex-direction:column;--g1:rgba(50,207,117,.22);--g2:rgba(255,77,0,.18)}
.su-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.07)}
.su-av{position:relative;width:38px;height:38px;border-radius:50%;background:url(/assets/img/founder/tim-mccartney.jpg) 46.5% 22%/340% auto no-repeat;
  box-shadow:0 0 0 2px #0a0c0b,0 0 0 4px #32cf75}
.su-av::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;border-top-color:#32cf75;border-right-color:#22d3ee;animation:rSpin 3s linear infinite}
.su-head b{display:block;font-size:.86rem}
.su-head small{display:flex;align-items:center;gap:5px;font-size:.7rem;color:var(--mo-soft)}
.su-head small::before{content:'';width:6px;height:6px;border-radius:50%;background:#32cf75;box-shadow:0 0 6px #32cf75}
.su-body{flex:1;display:flex;flex-direction:column;gap:7px;padding:14px 14px 12px;justify-content:flex-end;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 28px);mask-image:linear-gradient(180deg,transparent,#000 28px)}
.su-body>*{flex:none}
.su-m{max-width:84%;padding:8px 12px;border-radius:18px;font-size:.79rem;line-height:1.4;animation:ibIn .6s var(--mo-spring) both}
.su-m.them{align-self:flex-end;background:#0a84ff;border-bottom-right-radius:6px}
.su-m.tim{align-self:flex-start;background:rgba(255,255,255,.1);border-bottom-left-radius:6px}
.su-m.card{padding:6px;background:rgba(255,255,255,.1);width:70%}
.su-site{border-radius:12px;overflow:hidden;background:#101312}
.su-site .ph{height:62px;display:grid;place-items:center;background:linear-gradient(135deg,#1c2622,#131816);transition:background .8s}
.su-site .ph svg{width:44px;height:44px;opacity:.25;transition:opacity .8s,transform .8s var(--mo-spring)}
.su-site.new .ph{background:linear-gradient(135deg,#32cf75,#22d3ee 55%,#8b5cf6)}
.su-site.new .ph svg{opacity:1;transform:scale(1.1);color:#fff}
.su-site .ln{padding:7px 8px;display:grid;gap:4px}
.su-site .ln i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.18)}
.su-site .ln i:last-child{width:60%}
.su-read{align-self:flex-end;font-size:.64rem;color:var(--mo-mute);animation:ibIn .5s both}

/* ---------------------------------------------------------------------------
   8. 30 PAGE WEBSITE
   --------------------------------------------------------------------------- */
.pg{display:grid;place-items:center;padding-top:44px;perspective:900px;--g1:rgba(139,92,246,.3);--g2:rgba(34,211,238,.24)}
.pg-ring{position:relative;width:96px;height:130px;transform-style:preserve-3d;animation:pgSpin 18s linear infinite;animation-play-state:paused}
.pg.run .pg-ring{animation-play-state:running}
@keyframes pgSpin{from{transform:rotateX(-10deg) rotateY(0)}to{transform:rotateX(-10deg) rotateY(-360deg)}}
.pg-card{position:absolute;inset:0;border-radius:10px;padding:8px;display:grid;gap:5px;align-content:start;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.08);
  transform:rotateY(calc(var(--i) * 36deg)) translateZ(170px);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.pg-card b{font-size:.62rem;font-weight:800;color:#fff;letter-spacing:.02em}
.pg-card i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.2)}
.pg-card i.img{height:34px;border-radius:5px;background:linear-gradient(135deg,var(--a,#32cf75),var(--b,#22d3ee));opacity:.8}
.pg-card i.s{width:60%}
.pg-count{position:absolute;left:18px;top:16px;font-weight:800;letter-spacing:-.04em;line-height:.9}
.pg-count b{display:block;font-size:3rem;font-variant-numeric:tabular-nums;background:var(--mo-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-count span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mo-soft)}
@media(max-width:680px){.pg-card{transform:rotateY(calc(var(--i) * 36deg)) translateZ(150px)}}

/* ---------------------------------------------------------------------------
   9. $225, EVERYTHING IN
   --------------------------------------------------------------------------- */
.mo-t-price .mo-stage{height:auto;min-height:300px}
.pr{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center;padding:30px 34px;--g1:rgba(50,207,117,.3);--g2:rgba(255,77,0,.22)}
@media(max-width:760px){.pr{grid-template-columns:1fr;padding:24px 20px;gap:18px}}
.pr-big{display:flex;align-items:flex-start;font-weight:800;letter-spacing:-.06em;line-height:.9;font-size:clamp(4.4rem,11vw,7.6rem)}
.pr-big sup{font-size:.42em;margin:.12em .04em 0 0;color:#5de59a}
.pr-dig{display:inline-block;height:.9em;overflow:hidden}
.pr-dig span{display:flex;flex-direction:column;transition:transform 1.8s var(--mo-spring)}
.pr-dig span i{font-style:normal;height:.9em;background:linear-gradient(180deg,#fff,#b8c0bc);-webkit-background-clip:text;background-clip:text;color:transparent}
.pr-per{margin-top:8px;font-size:1.05rem;font-weight:600;color:var(--mo-soft)}
.pr-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pr-pills span{font-size:.76rem;font-weight:700;padding:7px 13px;border-radius:99px;background:rgba(255,255,255,.08);box-shadow:var(--mo-rim)}
.pr-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
@media(max-width:460px){.pr-list{grid-template-columns:1fr}}
.pr-list li{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;opacity:.25;transform:translateX(-8px);transition:opacity .4s,transform .6s var(--mo-spring)}
.pr-list li.on{opacity:1;transform:none}
.pr-list svg{flex:none;width:22px;height:22px}
.pr-list circle{fill:rgba(50,207,117,.16)}
.pr-list path{fill:none;stroke:#32cf75;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .5s .1s var(--mo-ease)}
.pr-list li.on path{stroke-dashoffset:0}
.pr-all{grid-column:1/-1;margin-top:6px;font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:0;transition:opacity .6s;
  background:var(--mo-grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rShine 3s linear infinite}
.pr.done .pr-all{opacity:1}

/* ---------------------------------------------------------------------------
   10. THE DYNAMIC ISLAND
   Black pill, top centre, the way iOS draws it. Collapsed it is the logo bars.
   It springs open to name the section you are reading, with a ring that
   fills as you move down the page. Tap it to go back to the top.
   --------------------------------------------------------------------------- */
.mo-island{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:9990;height:40px;min-width:40px;
  transform:translate(-50%,-80px) scale(.6);opacity:0;border:0;padding:0 8px;cursor:pointer;
  display:flex;align-items:center;gap:10px;border-radius:99px;background:#000;color:#fff;font:700 .82rem/1 var(--font,'Inter',sans-serif);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 14px 34px rgba(0,0,0,.5);white-space:nowrap;overflow:hidden;
  transition:transform .6s var(--mo-spring),opacity .35s,width .55s var(--mo-spring)}
.mo-island.show{transform:translate(-50%,0) scale(1);opacity:1}
/* the island and the site's top bar share the top edge. dock.js puts
   ch-nav-off on <html> while the bar is away; the moment the bar comes back
   (a scroll up), the island tucks up out of its way */
html:not(.ch-nav-off) .mo-island.show{transform:translate(-50%,-80px) scale(.6);opacity:0;pointer-events:none}
.mo-island .mo-bars{font-size:16px;flex:none;margin-left:4px}
.mo-island .lbl{display:inline-block;transition:opacity .25s,filter .25s,transform .4s var(--mo-spring)}
.mo-island.swap .lbl{opacity:0;filter:blur(6px);transform:translateY(6px)}
.mo-island svg.is-ring{flex:none;width:24px;height:24px;transform:rotate(-90deg)}
.mo-island svg.is-ring circle{fill:none;stroke-width:3}
.mo-island svg.is-ring .t{stroke:rgba(255,255,255,.15)}
.mo-island svg.is-ring .f{stroke:#32cf75;stroke-linecap:round;stroke-dasharray:57;stroke-dashoffset:57}
.mo-island.pop{animation:isPop .5s var(--mo-spring)}
@keyframes isPop{40%{transform:translate(-50%,0) scale(1.07,1.12)}}
@media(max-width:680px){.mo-island{height:34px;font-size:.74rem;top:calc(env(safe-area-inset-top,0px) + 10px)}}

/* ---------------------------------------------------------------------------
   Reduced motion: every stage shows its finished frame and holds still.
   --------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .mo-reel *,.mo-stage *,.mo-island{animation:none !important;transition:none !important}
  .mo-tile{transform:none !important}
}

/* sc.css swaps the white wordmark for the dark one in light mode; the film is
   a dark stage in both themes, so it keeps the white one */
[data-theme="light"] .mo-reel .r-end img[src$="scalus-long-white.png"]{content:url("/assets/img/scalus/scalus-long-white.png")}