/* SEO AI, Spectrum V3: centred immersive showcase.
   One website in the middle; the step decides the camera, the light and one note in context.
   Bright hues are light and outlines only; text uses the deeper shades (4.5:1 or better). */
@property --x{syntax:"<percentage>";inherits:true;initial-value:100%}
.s3{position:relative;isolation:isolate;padding:150px var(--gut) 140px;background:linear-gradient(180deg,rgba(255,255,255,0),#F5F9FF 26%,#fff 100%);--sc:#27CBF5;--sct:#0A6F94}
.s3[data-s=exp]{--sc:#5AA7F8;--sct:#1C5FB8}.s3[data-s=rec]{--sc:#FFC65A;--sct:#8F5E00}.s3[data-s=app]{--sc:#087FFF;--sct:#0870E6}
.s3[data-s=ver]{--sc:#19BCA9;--sct:#0A7569}.s3[data-s=mon]{--sc:#27CBF5;--sct:#0A6F94}
.s3-head{max-width:880px;margin:0 auto;text-align:center}
.s3-head h2{font-size:60px;line-height:1.02;letter-spacing:-.045em;font-weight:800;color:var(--ink);text-wrap:balance}
.s3-head p{margin:20px auto 0;max-width:640px;font-size:19.5px;line-height:1.55;color:var(--text)}

/* step selector: one pill track with a travelling indicator */
.s3-tabs{position:relative;width:max-content;max-width:100%;margin:44px auto 0;display:flex;gap:2px;padding:6px;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:0 0 0 1px rgba(11,42,102,.07),0 18px 40px -24px rgba(8,80,180,.45);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.s3-tabs [role=tab]{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-size:15.5px;font-weight:700;color:#4A6595;white-space:nowrap;transition:color .35s ease}
.s3-tabs .n{font-size:11.5px;font-weight:800;color:#9AAECB;font-variant-numeric:tabular-nums;transition:color .35s ease}
.s3-tabs [role=tab][aria-selected=true]{color:#fff}.s3-tabs [role=tab][aria-selected=true] .n{color:rgba(255,255,255,.75)}
.s3-tabs [role=tab]:hover:not([aria-selected=true]){color:var(--ink)}
.ind{position:absolute;z-index:0;left:0;top:6px;height:calc(100% - 12px);width:0;border-radius:999px;background:var(--sct);box-shadow:0 8px 20px -10px var(--sct);transition:transform .6s cubic-bezier(.65,0,.35,1),width .6s cubic-bezier(.65,0,.35,1),background-color .6s ease}

/* the stage */
.s3-wrap{position:relative;max-width:1120px;margin:40px auto 0}
.glows{position:absolute;inset:-7% -9% -6%;z-index:-1;pointer-events:none}
.glows i{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.glows i[data-s=find]{background:radial-gradient(42% 46% at 22% 40%,rgba(39,203,245,.42),transparent 70%),radial-gradient(40% 40% at 82% 70%,rgba(8,127,255,.26),transparent 70%)}
.glows i[data-s=exp]{background:radial-gradient(44% 46% at 30% 34%,rgba(90,167,248,.45),transparent 70%),radial-gradient(36% 40% at 84% 74%,rgba(39,203,245,.24),transparent 70%)}
.glows i[data-s=rec]{background:radial-gradient(42% 44% at 26% 38%,rgba(255,198,90,.42),transparent 70%),radial-gradient(36% 40% at 82% 72%,rgba(255,107,120,.22),transparent 70%)}
.glows i[data-s=app]{background:radial-gradient(44% 46% at 74% 60%,rgba(8,127,255,.36),transparent 70%),radial-gradient(34% 38% at 18% 30%,rgba(39,203,245,.26),transparent 70%)}
.glows i[data-s=ver]{background:radial-gradient(48% 50% at 50% 50%,rgba(25,188,169,.34),transparent 72%),radial-gradient(34% 36% at 12% 20%,rgba(39,203,245,.24),transparent 70%)}
.glows i[data-s=mon]{background:radial-gradient(44% 48% at 70% 40%,rgba(39,203,245,.36),transparent 70%),radial-gradient(38% 40% at 20% 70%,rgba(8,127,255,.26),transparent 70%)}
.s3[data-s=find] .glows i[data-s=find],.s3[data-s=exp] .glows i[data-s=exp],.s3[data-s=rec] .glows i[data-s=rec],.s3[data-s=app] .glows i[data-s=app],.s3[data-s=ver] .glows i[data-s=ver],.s3[data-s=mon] .glows i[data-s=mon]{opacity:1;visibility:visible;transition-delay:0s}
.s3-stage{position:relative}
.lift{position:relative;transform-origin:50% 60%;will-change:transform}
.shade{position:absolute;inset:0;border-radius:24px;box-shadow:0 2px 6px rgba(11,42,102,.06),0 60px 110px -50px rgba(8,80,180,.55);opacity:.7}
.win{position:relative;height:610px;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(11,42,102,.07)}
.cam{position:absolute;inset:0;transform-origin:16% 30%;transition:transform .95s cubic-bezier(.65,0,.35,1)}
.s3-stage[data-s=exp] .cam,.s3-stage[data-s=rec] .cam{transform:translate(-1%,1%) scale(1.13)}
.s3-stage[data-s=app] .cam{transform:scale(1.04)}
.s3-stage[data-s=mon] .cam{transform:translate(5%,20%) scale(.42);transform-origin:0 0;border-radius:28px;overflow:hidden;box-shadow:0 0 0 2px rgba(11,42,102,.08),0 50px 80px -40px rgba(8,80,180,.6)}
.cam .site{height:100%}
.cam .s-bar{height:40px}.cam .s-nav{padding:22px 40px;font-size:15px}.cam .s-nav b{font-size:19px}
.cam .s-hero{grid-template-columns:1.05fr .95fr;gap:40px;padding:34px 40px 36px}
.cam .s-title{font-size:48px;line-height:1.02;letter-spacing:-.04em}
.cam .s-p{font-size:16.5px;max-width:470px}.cam .s-btn{font-size:15px;padding:12px 18px}
.cam .s-img img{height:360px;border-radius:16px}
.cam .s-more{padding:6px 40px 40px}
/* draw-on mark around the headline */
.draw{position:absolute;left:-16px;top:-12px;width:calc(100% + 32px);height:calc(100% + 24px);overflow:visible;pointer-events:none}
.draw rect{width:calc(100% - 3px);height:calc(100% - 3px);fill:none;stroke:var(--sc);stroke-width:2.5;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke .5s ease,fill .5s ease}
.s3-stage[data-s=rec] .draw rect{stroke-dasharray:1.6 1;fill:rgba(255,198,90,.12)}
/* spotlight: a light veil over the page with the headline lifted above it (opacity only, cheap to animate) */
.dim{position:absolute;inset:0;z-index:2;background:rgba(250,252,255,.72);opacity:0;transition:opacity .8s cubic-bezier(.65,0,.35,1);pointer-events:none}
.s3-stage[data-s=exp] .dim,.s3-stage[data-s=rec] .dim{opacity:1}
.pg-before .s-title{z-index:3}
.s3-stage[data-s=ver] .draw,.s3-stage[data-s=mon] .draw{opacity:0}
.draw{transition:opacity .3s ease}
/* the note, in context beside the headline */
.note3{position:absolute;right:4.5%;top:23%;width:min(370px,40%);z-index:6;background:#fff;border-radius:18px;padding:22px 24px;box-shadow:0 2px 6px rgba(11,42,102,.08),0 40px 70px -30px rgba(8,80,180,.5);display:grid;transition:opacity .4s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.nv{grid-area:1/1}
/* a status, not a pre-heading: sentence case, pill shape */
.chip{justify-self:start;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--sct);background:color-mix(in srgb,var(--sc) 14%,#fff);border-radius:999px;padding:5px 12px 5px 10px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--sc);box-shadow:0 0 0 4px color-mix(in srgb,var(--sc) 25%,transparent)}
.nt{margin-top:10px;font-size:21px;line-height:1.25;letter-spacing:-.015em;font-weight:800;color:var(--ink)}
.nd{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--text)}
.tag{display:inline-block;margin-top:12px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#3A2700;background:#FFC65A;border-radius:6px;padding:4px 9px}
.st-ok,.st-chg{display:none}.s3-stage.ok .st-wait,.s3-stage.chg .st-wait{display:none}.s3-stage.ok .st-ok,.s3-stage.chg .st-chg{display:block}
.s3-stage[data-s=ver] .note3,.s3-stage[data-s=mon] .note3{opacity:0;transform:translateY(16px);pointer-events:none}

/* Verify: before and after on the same page */
.pg{position:absolute;inset:0}
.pg-after{clip-path:inset(0 0 0 var(--x));opacity:0;transition:opacity .35s ease;z-index:3}
.s3-stage[data-s=ver] .pg-after{opacity:1}
.pg-after .s-title{box-shadow:inset 0 -4px 0 rgba(25,188,169,.0)}
.s3-stage[data-s=ver] .pg-after .s-title::after{content:"Main heading · confirmed";position:absolute;right:0;top:-30px;font-size:12px;font-weight:800;letter-spacing:.05em;color:#fff;background:#0A7569;border-radius:6px;padding:5px 9px}
.s3-stage[data-s=ver] .pg-before .s-title::after{content:"Not marked as the main heading";position:absolute;left:0;top:-30px;font-size:12px;font-weight:800;letter-spacing:.05em;color:#4A6595;background:#fff;border-radius:6px;padding:4px 8px;box-shadow:0 0 0 1.5px #9DB3D3}
.divider{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#0B2A66;z-index:5;opacity:0;transition:opacity .3s ease}
.s3-stage[data-s=ver] .divider{opacity:1}
.hd2{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0B2A66,0 14px 30px -10px rgba(11,42,102,.45);cursor:ew-resize}
.hd2::before,.hd2::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-top:2px solid #0B2A66;border-left:2px solid #0B2A66}
.hd2::before{left:15px;transform:rotate(-45deg)}.hd2::after{right:15px;transform:rotate(135deg)}
.s3-stage[data-s=ver] .win{cursor:ew-resize;touch-action:pan-y}
.lbl3{position:absolute;bottom:20px;z-index:6;display:grid;gap:2px;padding:10px 14px;border-radius:12px;background:#fff;box-shadow:0 10px 26px -14px rgba(11,42,102,.4);font-size:14px;color:var(--muted);opacity:0;transition:opacity .35s ease}
.lbl3 b{font-size:17px;color:var(--ink)}.lbl3.b{left:20px}.lbl3.a{right:20px;text-align:right}.lbl3.a b{color:#0A7569}
.s3-stage[data-s=ver] .lbl3{opacity:1}
/* Monitor: the page steps aside and the reviews take over */
.reviews{position:absolute;right:5%;top:11%;width:47%;z-index:6;opacity:0;transform:translateX(40px);transition:opacity .45s ease,transform .8s cubic-bezier(.16,1,.3,1);pointer-events:none}
.s3-stage[data-s=mon] .reviews{opacity:1;transform:none;transition-delay:.6s,.55s}
.rt{font-size:22px;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.reviews ol{margin-top:16px;display:grid}
.reviews li{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--line)}
.reviews li b{font-size:24px;letter-spacing:-.02em;color:var(--ink)}
.reviews li span{font-size:16.5px;color:var(--muted)}
.reviews li.new span{color:#0A6F94;font-weight:700}.reviews li.ok span{color:#0A7569;font-weight:700}
.rn{margin-top:18px;font-size:14.5px;color:var(--muted)}
.illus{margin-top:14px;text-align:right;font-size:13px;color:var(--muted)}

/* caption under the stage */
.s3-cap{max-width:720px;margin:34px auto 0;text-align:center;display:grid;justify-items:center}
.cap{grid-area:1/1}
.cap h3{font-size:36px;line-height:1.08;letter-spacing:-.035em;font-weight:800;color:var(--ink)}
.cap>p{margin:12px auto 0;max-width:600px;font-size:18px;line-height:1.55;color:var(--text)}
.cap .tech{margin-top:14px}.cap .tech p{margin:10px auto 0;text-align:center}
.acts3{grid-area:2/1;margin-top:22px;display:grid}
.act{grid-area:1/1;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.act .b[aria-pressed=true]{background:var(--ice);box-shadow:inset 0 0 0 1.5px #0870E6}

@media (max-width:900px){
  .s3-head h2{font-size:40px}
  .s3-tabs{width:auto;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;border-radius:22px;margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1)}
  .s3-tabs [role=tab]{padding:10px 14px;font-size:14.5px}
  .win{height:620px}
  .cam .s-hero{grid-template-columns:1fr;padding:20px 22px}.cam .s-img{display:none}.cam .s-nav{padding:16px 22px}.cam .s-nav span{display:none}
  .cam .s-title{font-size:32px}.cam .s-more{padding:4px 22px 24px}
  .note3{left:14px;right:14px;top:auto;bottom:14px;width:auto;padding:18px 18px}
  .s3-stage[data-s=exp] .cam,.s3-stage[data-s=rec] .cam{transform:scale(1.06)}
  .s3-stage[data-s=mon] .cam{transform:translate(-30%,-20%) scale(.42);opacity:.35}
  .reviews{left:18px;right:18px;width:auto;top:40px}.reviews li b{font-size:19px}.reviews li span{font-size:15px}
  .lbl3{top:auto;bottom:14px;padding:8px 10px;font-size:12.5px}.lbl3 b{font-size:14.5px}
  .s3-stage[data-s=ver] .pg-after .s-title::after,.s3-stage[data-s=ver] .pg-before .s-title::after{font-size:10.5px}
  .cap h3{font-size:28px}.cap>p{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){.s3 *,.s3{transition:none!important}.lift{will-change:auto}}

.nbtn{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}.nbtn .b{height:42px;padding:0 16px;font-size:14.5px}
.nbtn .b[aria-pressed=true].solid{background:#0058C9}.nbtn .b[aria-pressed=true].line{background:var(--ice)}
.nsmall{font-size:13.5px;color:var(--muted)}
.thumb-l{position:absolute;left:5%;top:calc(20% - 34px);z-index:4;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0A7569;opacity:0;transition:opacity .4s ease}
.s3-stage[data-s=mon] .thumb-l{opacity:1;transition-delay:.4s}
.cam{will-change:transform}
@media (max-width:900px){.s3-stage[data-s=mon] .cam{transform:translate(8%,58%) scale(.5);opacity:0}.thumb-l{display:none}.nbtn .b{height:40px}}
.rib path{animation:none!important}


.nv>.nt:first-child{margin-top:0}
.proof figcaption{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}