/* SEO AI, Spectrum V2: customer-first. One example website stays in view; each step changes what surrounds it.
   Step colours support meaning: find cyan, explain sky, recommend amber, approve blue, verify teal, monitor blue-cyan.
   Bright hues are for light, outlines and markers; text uses the deeper shades (all 4.5:1 or better). */
:root{--cobalt:#0870E6;--electric:#087FFF}
.status b{background:#0870E6}
.hero{position:relative;isolation:isolate}

.hero h1 span{display:inline;background:linear-gradient(90deg,#0870E6 0%,#087FFF 45%,#0A8FC4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rib{position:absolute;z-index:-1;pointer-events:none;overflow:visible}
.rib-hero{left:-8%;width:116%;top:-60px;height:640px}
@media (prefers-reduced-motion:no-preference){.rib path{animation:ribShift 18s ease-in-out infinite alternate}@keyframes ribShift{to{transform:translateY(-14px)}}}
.proof::before{display:none}
.frame{box-shadow:0 0 0 1px rgba(255,255,255,.6),0 2px 4px rgba(11,42,102,.08),0 50px 90px -40px rgba(8,80,180,.55)}
.proof .pm{border-color:#27CBF5}.proof .pm i,.note.left .ref{background:#0A6F94}
.note.right .nk{color:#8F5E00}
.wait{color:#8F5E00}.wait span{background:#FFC65A;box-shadow:0 0 0 4px rgba(255,198,90,.3)}

/* ---------- the journey */
.journey{position:relative;isolation:isolate;padding:150px var(--gut) 150px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(244,249,255,.92) 30%,#fff 100%)}
.journey>*{max-width:calc(var(--max) - 2 * var(--gut));margin-left:auto;margin-right:auto}
.journey .spx.amb{left:-10%;right:-10%;top:0;bottom:0;max-width:none;filter:blur(90px);-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.journey .spx.amb i:nth-child(1){left:-6%;top:8%;width:36%;height:40%;background:#27CBF5;opacity:.3}
.journey .spx.amb i:nth-child(2){right:-4%;left:auto;top:42%;width:34%;height:44%;background:#FF6B78;opacity:.18}
.journey .spx.amb i:nth-child(3){left:42%;top:70%;width:30%;height:30%;background:#FFC65A;opacity:.22}
.journey .spx.amb i:nth-child(4){left:30%;top:20%;width:40%;height:40%;background:#087FFF;opacity:.1}
.j-head h2{font-size:58px;line-height:1.02;letter-spacing:-.042em;font-weight:800;color:var(--ink);max-width:900px;text-wrap:balance}
.j-head p{margin-top:20px;font-size:19.5px;line-height:1.55;max-width:680px;color:var(--text)}
.jtabs{position:relative;margin-top:52px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--line)}
.jtabs [role=tab]{display:flex;align-items:baseline;gap:10px;padding:0 12px 18px 0;text-align:left}
.jtabs .n{font-size:13px;font-weight:800;color:#9AAECB;font-variant-numeric:tabular-nums;transition:color .3s ease}
.jtabs b{font-size:20px;letter-spacing:-.02em;font-weight:800;color:#8DA2C2;transition:color .3s ease}
.jtabs [role=tab][aria-selected=true] b{color:var(--ink)}.jtabs [role=tab][aria-selected=true] .n{color:var(--sct)}
.jtabs [role=tab]:hover b{color:var(--ink)}
.jind{position:absolute;left:0;bottom:-2px;height:3px;width:0;border-radius:2px;background:var(--sc);transition:transform .6s cubic-bezier(.65,0,.35,1),width .6s cubic-bezier(.65,0,.35,1),background-color .6s ease}
.journey{--sc:#27CBF5;--sct:#0A6F94}
.journey[data-s=exp]{--sc:#5AA7F8;--sct:#1C5FB8}.journey[data-s=rec]{--sc:#FFC65A;--sct:#8F5E00}.journey[data-s=app]{--sc:#087FFF;--sct:#0870E6}
.journey[data-s=ver]{--sc:#19BCA9;--sct:#0A7569}.journey[data-s=mon]{--sc:#27CBF5;--sct:#0A6F94}

.jscene{margin-top:52px;display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:56px;align-items:center}
.jv{position:relative}
.jv-page{border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(11,42,102,.06),0 2px 6px rgba(11,42,102,.05),0 50px 90px -42px rgba(8,80,180,.45);background:#fff}
.cam{position:relative;transform-origin:0 0;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.jscene[data-s=exp] .cam,.jscene[data-s=rec] .cam{transform:translate(-1.5%,-4%) scale(1.08)}
.jscene[data-s=mon] .cam{transform:scale(.9) translate(2%,3%);filter:saturate(.9)}
.cam .s-title{transition:box-shadow .8s cubic-bezier(.65,0,.35,1);box-shadow:0 0 0 100vmax rgba(255,255,255,0);border-radius:10px;z-index:2}
.jscene[data-s=exp] .before .s-title,.jscene[data-s=rec] .before .s-title{box-shadow:0 0 0 100vmax rgba(250,252,255,.72)}
/* the mark on the headline: one element whose colour and words follow the step */
.cam .pm{border-color:var(--sc);transition:border-color .5s ease,background-color .5s ease}
.cam .pm i{left:auto;right:-6px;top:-15px;height:24px;font-size:11.5px;background:var(--sct);transition:background-color .5s ease}
.cam .pm i::after{content:"Needs attention"}
.jscene[data-s=exp] .before .pm i::after{content:"Explained"}
.jscene[data-s=rec] .before .pm{border-style:dashed;background:rgba(255,198,90,.12)}.jscene[data-s=rec] .before .pm i{color:#3A2700;background:#FFC65A}
.jscene[data-s=rec] .before .pm i::after{content:"Recommended · not live yet"}
.jscene[data-s=app] .before .pm i::after{content:"Waiting for your approval"}
.jscene[data-s=app].approved .before .pm i::after{content:"Approved · your team makes the change"}
.jscene[data-s=ver] .before .pm{border-style:dashed;border-color:#9DB3D3}.jscene[data-s=ver] .before .pm i{background:#fff;color:#4A6595;box-shadow:0 0 0 1.5px #9DB3D3}
.jscene[data-s=ver] .before .pm i::after{content:"Before · improvement needed"}
.jscene[data-s=mon] .before .pm{border-color:#19BCA9}.jscene[data-s=mon] .before .pm i{background:#0A7569}.jscene[data-s=mon] .before .pm i::after{content:"Checked"}
.after .pm.ok{border-color:#19BCA9}.after .pm.ok i{background:#0A7569}.after .pm.ok i::after{content:"After · updated page checked"}
.after .pm.ok i{font-size:0}.after .pm.ok i::after{font-size:11.5px}
.before .pm i{font-size:0}.before .pm i::after{font-size:11.5px}
.after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x,100%));opacity:0;transition:opacity .3s ease;z-index:3}
.jscene[data-s=ver] .after{opacity:1}
.split{position:absolute;top:0;bottom:0;left:var(--x,100%);width:2px;margin-left:-1px;background:#0B2A66;opacity:0;z-index:4;transition:opacity .3s ease}
.split span{position:absolute;bottom:16px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:6px;white-space:nowrap}
.split span:first-child{right:10px;background:#fff;color:#4A6595;box-shadow:0 0 0 1px var(--line)}.split span:last-child{left:10px;background:#0A7569;color:#fff}
.jscene[data-s=ver] .split{opacity:1}
.sweep{position:absolute;left:0;right:0;top:0;height:140px;z-index:5;pointer-events:none;opacity:0;transform:translateY(-150px);background:linear-gradient(180deg,rgba(39,203,245,0),rgba(39,203,245,.18) 70%,rgba(39,203,245,.6) 100%)}
.history{position:absolute;right:-28px;bottom:-34px;width:min(330px,62%);background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 2px 6px rgba(11,42,102,.08),0 40px 70px -30px rgba(8,80,180,.5);display:grid;gap:2px;opacity:0;transform:translate(24px,16px);transition:opacity .45s ease,transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:6}
.history li{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.history li:last-child{border-bottom:0}.history b{color:var(--ink)}.history span{color:var(--muted);font-size:13.5px}.history li.ok span{color:#0A7569;font-weight:700}
.history li:first-child span{color:#0A6F94;font-weight:700}
.jscene[data-s=mon] .history{opacity:1;transform:none;transition-delay:.25s,.25s}

/* the step's words */
.jpanels{display:grid}.jp{grid-area:1/1}
.jk{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sct)}
.jp h3{margin-top:10px;font-size:40px;line-height:1.06;letter-spacing:-.035em;font-weight:800;color:var(--ink);text-wrap:balance}
.jd{margin-top:14px;font-size:18px;line-height:1.55;color:var(--text);max-width:480px}
.card{margin-top:26px;padding:22px 24px;background:#fff;border-radius:16px;box-shadow:inset 3px 0 0 var(--sc),0 1px 2px rgba(11,42,102,.06),0 24px 48px -30px rgba(8,80,180,.4)}
.flag{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:var(--ink)}.flag span{flex:none;width:10px;height:10px;border-radius:50%;background:#27CBF5;box-shadow:0 0 0 5px rgba(39,203,245,.2)}
.sub2{margin-top:8px;font-size:15px;line-height:1.5;color:var(--muted)}
.q{font-size:19px;line-height:1.4;font-weight:700;color:var(--ink)}
.why{margin-top:14px;font-size:15.5px;line-height:1.5;color:var(--text)}.why b,.sure b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.lab{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sct)}
.big2{margin-top:6px;font-size:22px;line-height:1.25;font-weight:800;color:var(--ink)}
.sure{margin-top:14px;font-size:15px;color:var(--text)}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.b{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:10px;font-size:15.5px;font-weight:700;transition:background-color .2s ease,transform .16s var(--out)}
.b.solid{background:#0870E6;color:#fff}.b.solid:hover,.b.solid[aria-pressed=true]{background:#0058C9}
.b.line{box-shadow:inset 0 0 0 1.5px var(--pale);color:#0870E6}.b.line:hover,.b.line[aria-pressed=true]{background:var(--ice)}
.b:active{transform:scale(.97)}
.actmsg{margin-top:12px;font-size:15px;font-weight:700;color:#0870E6}
.flow{margin-top:18px;display:grid;gap:0;border-top:1px solid var(--line);padding-top:6px}
.flow li{position:relative;padding:10px 0 10px 26px;display:grid;gap:2px}
.flow li::before{content:"";position:absolute;left:0;top:15px;width:11px;height:11px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--pale);background:#fff}
.flow li.you::before{background:#087FFF;box-shadow:none}
.flow b{font-size:15.5px;color:var(--ink)}.flow span{font-size:14px;line-height:1.45;color:var(--muted)}
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.ba>div{border-radius:12px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line)}
.ba .after{position:static;opacity:1;clip-path:none;background:#E9F8F6;box-shadow:none}
.ba .lab{color:var(--muted)}.ba .after .lab{color:#0A7569}
.st-b{margin-top:4px;font-size:17px;font-weight:800;color:#4A6595}.st-a{margin-top:4px;font-size:17px;font-weight:800;color:#0A7569}
.to{font-size:22px;color:var(--pale)}
.log li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
.log li:last-child{border-bottom:0}.log b{color:var(--ink)}.log span{color:var(--muted);text-align:right}
.log li.new span{color:#0A6F94;font-weight:700}.log li.ok span{color:#0A7569;font-weight:700}
.tech{margin-top:18px}
.tech summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:700;color:#0870E6;list-style:none}
.tech summary::-webkit-details-marker{display:none}.tech summary::after{content:"+";font-size:18px;line-height:1}.tech[open] summary::after{content:"–"}
.tech p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--muted);max-width:480px}

@media (max-width:1180px){
  .jscene{grid-template-columns:minmax(0,1fr);gap:40px}
  .jtabs{display:flex;overflow-x:auto;scrollbar-width:none;gap:22px;margin-left:calc(var(--gut)*-1);margin-right:calc(var(--gut)*-1);padding:0 var(--gut)}
  .jtabs [role=tab]{flex:none}
  .history{right:12px;bottom:12px}
}
@media (max-width:760px){
  .journey{padding:96px var(--gut)}.j-head h2{font-size:36px}.j-head p{font-size:17px}
  .jp h3{font-size:30px}.jtabs b{font-size:17px}
  .ba{grid-template-columns:1fr}.to{display:none}
  .history{position:relative;right:auto;bottom:auto;width:auto;margin-top:12px;display:none}.jscene[data-s=mon] .history{display:grid}
}
@media (prefers-reduced-motion:reduce){.journey *,.journey{transition:none!important}}
.jscene[data-s=ver] .before .pm i{right:auto;left:-6px}

/* no eyebrows: caption in sentence case; headline sits first */
.proof figcaption{text-transform:none;letter-spacing:0;font-size:13px;font-weight:500}
.jp h3{margin-top:0}
.proof .pm i{left:auto;right:-6px;top:-15px;height:24px;font-size:11.5px;padding:0 9px;border-radius:99px}