/* MarketAlong product pages: shared layer on top of v10.css + spectrum.css.
   Same tokens as the approved SEO AI page; light only; no eyebrow text; buttons stay MarketAlong blue.
   Ribbon, breadcrumb, status and footer rules are copied from seo-ai-v31/v35/v36/v37 so these pages
   do not depend on the SEO AI draft cascade. */
:root{--ink2:#0B2A66;--soft:#F5F9FF;--lift2: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)}
body{background:#fff}
main{display:block}

/* ---------- ribbon (same artwork, motion and safeguards as seo-ai-v35/v36) */
[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}}}}
.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:rbFlowA 18s ease-in-out infinite alternate}
  .rb-core{animation:rbFlowB 23s ease-in-out infinite alternate}
  .rb-glint{opacity:.95;animation:rbTravel 20s linear infinite}.rb-glint.g2{animation-delay:-10s}
  @keyframes rbFlowA{0%{transform:none;opacity:1}33%{transform:translate(-44px,30px) rotate(-1deg) scale(1.04);opacity:.74}66%{transform:translate(30px,-22px) rotate(.7deg) scale(.985);opacity:.92}100%{transform:translate(-14px,-34px) rotate(-.4deg) scale(1.025);opacity:.8}}
  @keyframes rbFlowB{0%{transform:none}33%{transform:translate(40px,-20px) rotate(.85deg) scale(1.03)}66%{transform:translate(-26px,28px) rotate(-.6deg) scale(1.012)}100%{transform:translate(18px,16px) rotate(.35deg) scale(1.02)}}
  @keyframes rbTravel{from{offset-distance:0%}to{offset-distance:100%}}
  .rb-off .rb-layer,.rb-off .rb-glint{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.ribseg{transition:none!important;animation:none!important}}
.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}
/* a soft white light behind text the ribbon may pass near, so it always reads */
.halo,.pb-list,.lim-list,.lim2,.fair-list,.never,.lc-pr,.wx-areas,.ld-five,.pf-list,.wx-src,.pr-list,.alt-list,.ci-foot,.an-srcs,.rp-src,.lc-src,.cv-src,.mr-src,.ct-src,.rt-src,.cd-src,.pp-status,.pp-cta{position:relative}
.halo::before,.pb-list::before,.lim-list::before,.lim2::before,.fair-list::before,.never::before,.lc-pr::before,.wx-areas::before,.ld-five::before,.wx-src::before,.pr-list::before,.alt-list::before,.ci-foot::before,.an-srcs::before,.ct-src::before,.rt-src::before,.cd-src::before,.rp-src::before,.lc-src::before,.cv-src::before,.mr-src::before,.pp-status::before,.pp-cta::before{content:"";position:absolute;z-index:-1;inset:-40px -80px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.96),rgba(255,255,255,.86) 62%,rgba(255,255,255,0))}

/* ---------- breadcrumb, status */
.crumbs{max-width:var(--max);margin:0 auto;padding:4px var(--gut) 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--pale)}
.crumbs a:hover{color:var(--cobalt)}.crumbs [aria-current]{color:var(--ink);font-weight:600}
.pp-status{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:15px;color:var(--text)}
.pp-status .st{background:#E6F0FD;color:var(--deep);box-shadow:inset 0 0 0 1px #B9D6FB}

/* ---------- shared type */
.pp-h1{font-size:clamp(42px,5.4vw,80px);line-height:1;letter-spacing:-.045em;font-weight:800;color:var(--ink);text-wrap:balance}
.pp-h1 span{background:linear-gradient(90deg,#0870E6 0%,#087FFF 45%,#0A8FC4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-lead{font-size:19.5px;line-height:1.55;color:var(--text);max-width:580px;text-wrap:pretty}
.pp-h2{font-size:clamp(32px,3.6vw,52px);line-height:1.05;letter-spacing:-.04em;font-weight:800;color:var(--ink);text-wrap:balance;max-width:900px}
.pp-h3{font-size:26px;line-height:1.2;letter-spacing:-.02em;font-weight:800;color:var(--ink)}
.pp-intro{margin-top:18px;max-width:660px;font-size:18px;line-height:1.6;color:var(--text);text-wrap:pretty}
.pp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.tlink{font-size:16px;font-weight:700;color:var(--deep)}
.illus{font-size:13px;font-weight:600;color:var(--muted)}

/* ---------- sections */
.pp-sec{padding:104px var(--gut)}
.pp-in{max-width:var(--max);margin:0 auto}

/* the customer problem: a statement and the situations people recognise, set as text, not cards */
.pb-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 90px;align-items:start}
.pb-list{display:grid}
.pb-list li{padding:22px 0;border-top:1px solid var(--line);font-size:21px;line-height:1.45;letter-spacing:-.01em;color:var(--ink);font-weight:600}
.pb-list li:last-child{border-bottom:1px solid var(--line)}
.pb-list li span{display:block;margin-top:6px;font-size:16.5px;font-weight:400;color:var(--text);letter-spacing:0}

/* workflow: a real sequence */
.pf-list{margin-top:56px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;counter-reset:s;position:relative}
.pf-list::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:2px;background:linear-gradient(90deg,#B9D6FB,#087FFF 50%,#B9D6FB)}
.pf-list li{position:relative;display:grid;gap:8px;align-content:start;padding-right:22px}
.pf-n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 2px #087FFF;font-weight:800;font-size:16px;color:var(--deep);margin-bottom:14px;position:relative}
.pf-list b{font-size:17.5px;line-height:1.3;color:var(--ink)}
.pf-list li>span:last-child{font-size:15.5px;line-height:1.5;color:var(--text)}
.pf-list.five{grid-template-columns:repeat(5,minmax(0,1fr))}

/* planned capabilities and audiences */
.pc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:60px 90px}
.pc-note{margin-top:14px;font-size:15px;color:var(--text);max-width:560px}
.pc-dl{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:30px 40px}
.pc-dl dt{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pc-dl dd{margin-top:6px;font-size:16px;line-height:1.55;color:var(--text)}
.pc-aud{padding:36px;border-radius:20px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);align-self:start}
.pc-aud ul{margin-top:20px;display:grid;gap:18px}
.pc-aud b{display:block;font-size:17px;color:var(--ink)}.pc-aud span{display:block;margin-top:3px;font-size:15.5px;line-height:1.5;color:var(--text)}

/* ecosystem */
.pe-list{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pe-list li{padding:28px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 40px -30px rgba(11,42,102,.35)}
.pe-name{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:18px;font-weight:800;color:var(--ink)}
.pe-name a{color:var(--cobalt)}
.pe-list li>p:last-child{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--text)}

/* FAQ */
.pq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 80px;align-items:start}
.pq-list details{border-top:1px solid var(--line)}.pq-list details:last-child{border-bottom:1px solid var(--line)}
.pq-list summary{display:flex;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font-size:18.5px;font-weight:700;color:var(--ink)}
.pq-list summary::-webkit-details-marker{display:none}
.pq-list summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--cobalt);font-weight:700;transition:transform .3s var(--out)}
.pq-list details[open] summary::after{transform:rotate(45deg)}
.pq-list details p{padding:0 50px 24px 0;font-size:16.5px;line-height:1.6;color:var(--text);max-width:720px}

/* ask */
.pa{padding:130px var(--gut) 260px;text-align:center}
.pa-in{max-width:780px;margin:0 auto;display:grid;justify-items:center}
.pa-lead{margin-top:18px;max-width:600px;font-size:19px;line-height:1.55;color:var(--text)}
.pa-form{margin-top:34px;width:100%;text-align:left;display:grid;gap:18px;padding:34px;border-radius:14px;background:#fff;box-shadow:var(--lift2)}
.pa-form label{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;font-size:15px;font-weight:700;color:var(--ink)}
.pa-form input,.pa-form select,.pa-form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #C9D6EA;border-radius:12px;padding:13px 14px;min-height:50px}
.pa-form textarea{resize:vertical;min-height:110px}
.pa-form input:focus,.pa-form select:focus,.pa-form textarea:focus{outline:none;border-color:#0870E6;box-shadow:0 0 0 3px rgba(8,127,255,.18)}
.pa-form [aria-invalid="true"]{border-color:#C3364A}
.req,.opt{font-size:13px;font-weight:600;color:#4A6595}.req{color:#0870E6}
.pa-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.err{min-height:0;margin-top:6px;font-size:14px;font-weight:600;color:#C3364A}.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.how{font-size:14.5px;line-height:1.5;color:#4A6595}
.pa-form .btn{justify-self:start}
.pa-result:empty{display:none}
.pa-result{padding:16px 18px;border-radius:14px;font-size:15.5px;line-height:1.5;color:var(--ink);background:#E6F0FD;box-shadow:inset 0 0 0 1px #B9D6FB}
.pa-result button{margin-top:10px;font-weight:700;color:var(--deep);text-decoration:underline}
.pa-alt{margin-top:24px;font-size:15.5px;color:var(--text)}.pa-alt a{color:var(--deep);font-weight:700}

/* footer (as seo-ai-v37) */
.ft{border-top:1px solid var(--line);background:transparent}
.ft-in{max-width:var(--max);margin:0 auto;padding:44px var(--gut) 44px;display:grid;grid-template-columns:auto 1fr;gap:16px 40px;align-items:start}
.ft nav{display:flex;gap:24px;justify-content:flex-end;flex-wrap:wrap;font-size:15px;font-weight:600;color:var(--ink)}
.ft-brand{display:grid;gap:14px;max-width:440px;grid-row:span 2}.ft-brand img{width:104px;height:auto}
.ft-brand p{font-size:15.5px;line-height:1.55;color:var(--text)}
.ft-mail{grid-column:2;justify-self:end;font-size:15px;color:var(--text)}.ft-mail a{color:var(--deep);font-weight:700}
.ft-small{grid-column:1/-1;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;color:var(--text)}

/* entrance: content is always visible; motion only settles it into place */
@media (prefers-reduced-motion:no-preference){.js .rise{transition:transform .9s var(--out)}.js .rise.lo{transform:translateY(26px)}}

@media (max-width:1100px){
  .pf-list,.pf-list.five{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 0}.pf-list::before{display:none}
  .pc-grid,.pq-in,.pb-grid{grid-template-columns:1fr}
  .pe-list{grid-template-columns:1fr}
}
@media (max-width:760px){
  .pp-sec{padding:84px var(--gut)}
  .pa{padding:90px var(--gut) 200px}
  .pp-lead{font-size:17.5px}
  .pb-list li{font-size:18.5px}
  .pf-list,.pf-list.five{grid-template-columns:1fr;gap:22px}
  .pf-list li{grid-template-columns:46px 1fr;column-gap:16px;padding-right:0}.pf-n{grid-row:span 2;margin:0}
  .pc-dl{grid-template-columns:1fr}.pc-aud{padding:24px}
  .pa-form{padding:22px 18px}.pa-2{grid-template-columns:1fr}.pa-form .btn{justify-self:stretch;justify-content:center;white-space:normal;height:auto;min-height:56px;text-align:center}
  .ft-in{grid-template-columns:1fr}.ft nav{justify-content:flex-start}.ft-mail{grid-column:1;justify-self:start}.ft-brand{grid-row:auto}
  .pq-list details p{padding-right:0}
}

/* small notes that the ribbon may pass behind use the darker body text token (measured: muted text fell below 4.5:1 over the ribbon) */
.illus{color:var(--text)}
/* switch, shared by product pages that need one */
.sw{flex:none;position:relative;width:50px;height:30px}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}.sw input:disabled{cursor:not-allowed}
.sw span{position:absolute;inset:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px #8DA2C2;transition:background-color .25s ease,box-shadow .25s ease}
.sw span::after{content:"";position:absolute;left:5px;top:5px;width:20px;height:20px;border-radius:50%;background:#4A6595;transition:transform .3s var(--out),background-color .25s ease}
.sw input:checked+span{background:#0870E6;box-shadow:none}.sw input:checked+span::after{transform:translateX(20px);background:#fff}
.sw input:disabled+span{opacity:.55}
.sw input:focus-visible+span{outline:2px solid var(--electric);outline-offset:3px}
/* workflow lists: ::before is the connector line, so the soft white backing uses ::after */
.pf-list::after{content:"";position:absolute;z-index:-1;inset:-40px -80px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.96),rgba(255,255,255,.86) 62%,rgba(255,255,255,0))}
/* every source line (class ending in "-src") gets the same soft white backing, so links stay readable over the ribbon */
[class$="-src"]{position:relative}
[class$="-src"]::before{content:"";position:absolute;z-index:-1;inset:-40px -80px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.96),rgba(255,255,255,.86) 62%,rgba(255,255,255,0))}
/* an img's height attribute would otherwise override aspect-ratio; class rules that set a height still win */
img{height:auto}
/* long product names: hero buttons may wrap on small screens instead of overflowing */
@media (max-width:760px){.pp-cta .btn{white-space:normal;height:auto;min-height:56px;padding-block:12px;max-width:100%}}
/* "Illustrative example" notes sometimes sit outside cards, over the ribbon */
.illus{position:relative}
.illus::before{content:"";position:absolute;z-index:-1;inset:-20px -60px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.96),rgba(255,255,255,.86) 62%,rgba(255,255,255,0))}