/* SEO AI, Spectrum V3.2: additions on top of v34.css. Same tokens; light only; no eyebrows. */

/* the continuous ribbon: one clip per section, one moving SVG inside it */
[data-rib]{position:relative;isolation:isolate}
.ribclip{position:absolute;top:0;bottom:0;z-index:-1;overflow:hidden;pointer-events:none}
.ribseg{position:absolute;left:0;display:block;overflow:visible;will-change:transform;
  transform:translate(var(--rbx,0px),var(--rby,0px));transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .ribseg{animation:ribDrift linear both;animation-timeline:scroll(root)}
    @keyframes ribDrift{from{translate:0 0}to{translate:0 -70px}}
  }
}
@media (prefers-reduced-motion:reduce){.ribseg{transition:none!important;animation:none!important}}
/* sections the ribbon passes through keep their light grounds */
.s3{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(245,249,255,.7) 26%,rgba(255,255,255,.5) 100%)}

/* final call to action: text in the upper part, the ribbon builds beneath and to the right */
.end{padding:150px var(--gut) 300px;text-align:center}
.end-in{max-width:820px;margin:0 auto;display:grid;justify-items:center;gap:0}
.end h2{font-size:60px;line-height:1.02;letter-spacing:-.045em;font-weight:800;color:var(--ink);text-wrap:balance}
.end-in>p:not(.status){margin-top:20px;max-width:560px;font-size:19.5px;line-height:1.55;color:var(--text)}
.end .cta{margin-top:30px;justify-content:center}
.end .status{margin-top:18px;justify-content:center}
.ft{background:transparent}

/* light-only example website: blue actions instead of navy */
.site .s-btn{background:#0870E6;color:#fff}
.site .s-nav em{color:#0870E6;box-shadow:inset 0 0 0 1.5px #0870E6}

/* completed approval state */
.done{display:none;margin-top:14px;align-items:center;gap:10px;font-size:15px;font-weight:700}
.done span{display:none;align-items:center;gap:8px;border-radius:999px;padding:6px 12px}
.done .d-ok{color:#0870E6;background:#E6F0FD}.done .d-chg{color:#4A6595;background:#F3F7FD}
.done span::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.undo{font-size:14px;font-weight:700;color:#4A6595;text-decoration:underline;text-underline-offset:3px;padding:6px 4px}
.undo:hover{color:#0870E6}
.s3-stage.ok .nbtn,.s3-stage.chg .nbtn{display:none}
.s3-stage.ok .done,.s3-stage.chg .done{display:flex}
.s3-stage.ok .done .d-ok,.s3-stage.chg .done .d-chg{display:inline-flex}

@media (max-width:900px){
  .end{padding:100px var(--gut) 300px}.end h2{font-size:38px}.end-in>p:not(.status){font-size:17px}
  .end .cta{flex-direction:column;align-items:stretch;width:100%}.end .cta .btn{justify-content:center}
}
/* the ribbon never fights text: a soft white clearing (not a card) sits behind text that the ribbon can pass near */
.end-in,.note,.s3-head,.cap,.illus,.proof figcaption{position:relative}
.end-in::before,.note::before,.s3-head::before,.cap::before{content:"";position:absolute;z-index:-1;inset:-48px -90px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.94),rgba(255,255,255,.82) 62%,rgba(255,255,255,0))}
.illus,.proof figcaption{z-index:1}
.illus::before,.proof figcaption::before{content:"";position:absolute;z-index:-1;inset:-10px -24px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0))}
.s3-tabs{background:rgba(255,255,255,.96)}
/* accessibility correction (documented): where the ribbon can sit behind small text, use the deeper approved tokens */
.end .tlink{color:var(--deep)}
.illus,.proof figcaption{color:var(--text)}
.s3-tabs{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
/* leaving Monitor: the original page is already in place underneath, so the improved page just fades away quickly */
.s3-stage[data-s=mon] .pg-before{opacity:1!important}
.s3-stage[data-from=mon]:not([data-s=mon]):not([data-s=ver]) .pg-after{transition-delay:0s,0s,0s;transition-duration:.85s,.22s,.6s}
.s3-stage:not([data-s=mon]) .reviews{transition-duration:.12s,.3s;transition-delay:0s,0s}
/* Living ribbon: the segment carries the stage shift (transform) and the scroll drift (translate);
   the two layers inside carry the idle drift (their own transform), so no two timelines fight over one property. */
.ribseg .rb-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
.rb-glint{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;offset-rotate:0deg;offset-anchor:center;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,.55) 35%,rgba(255,255,255,0));opacity:0;will-change:offset-distance}
@media (prefers-reduced-motion:no-preference){
  .rb-glow{animation:rbBreathA 28s ease-in-out infinite alternate}
  .rb-core{animation:rbBreathB 34s ease-in-out infinite alternate}
  .rb-glint{opacity:.85;animation:rbTravel 26s linear infinite}.rb-glint.g2{animation-delay:-13s}
  @keyframes rbBreathA{0%{transform:none;opacity:1}50%{transform:translate(-30px,22px) rotate(-.7deg) scale(1.03);opacity:.78}100%{transform:translate(22px,-18px) rotate(.5deg) scale(.985);opacity:1}}
  @keyframes rbBreathB{0%{transform:none}50%{transform:translate(26px,-14px) rotate(.6deg) scale(1.02)}100%{transform:translate(-18px,20px) rotate(-.45deg) scale(1.01)}}
  @keyframes rbTravel{from{offset-distance:0%}to{offset-distance:100%}}
  .rb-off .rb-layer,.rb-off .rb-glint{animation-play-state:paused}
}
.rb-hold .rb-layer,.rb-hold .rb-glint{animation-play-state:paused}
.rb-lite .rb-layer{animation:none!important}.rb-lite .rb-glint{display:none}