.attribution-page .staff-brand{gap:7px}.attribution-page .staff-brand img{width:270px}.attribution-page h1,.attribution-page h2,.attribution-page h3{word-break:auto;overflow-wrap:normal}.staff-nav-panel .is-current{background:var(--mist);color:var(--cyan)}
.feature-breadcrumb{height:62px;display:flex;align-items:center;background:var(--paper)}.feature-breadcrumb .staff-shell{display:flex;gap:11px;align-items:center;color:#66828c;font-size:14px}.feature-breadcrumb b{color:var(--ink)}
.attribution-hero{padding:70px 0 92px;background:linear-gradient(115deg,var(--paper) 0 55%,#e8f5f5 55%)}.attribution-hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center}.attribution-hero__copy h1{font-size:clamp(46px,4.15vw,58px);line-height:1.14;letter-spacing:-.055em;margin:0 0 28px;font-weight:900}.attribution-hero__visual{position:relative;min-height:560px;border-radius:150px 8px 8px 8px;background:linear-gradient(145deg,#0b475a,#062b3a);box-shadow:var(--shadow);overflow:hidden}.attribution-hero__visual:before{content:"";position:absolute;width:380px;height:380px;border:1px solid rgba(255,255,255,.16);border-radius:50%;right:-90px;top:-90px;box-shadow:0 0 0 75px rgba(255,255,255,.035),0 0 0 150px rgba(255,255,255,.025)}.route-card,.route-result{position:absolute;background:#fff;border:1px solid var(--line);box-shadow:0 24px 55px rgba(0,0,0,.25);display:flex;flex-direction:column}.route-card small,.route-result small{color:var(--cyan);font-weight:800}.route-card b,.route-result b{font-size:20px}.route-card span,.route-result span{font-size:13px;color:#66828c}.route-card.is-staff{left:45px;top:70px;width:255px;padding:24px;border-radius:10px}.route-card.is-order{right:42px;top:215px;width:285px;padding:26px;border-radius:10px}.route-card.is-order strong{font-size:30px;margin:10px 0}.order-status{align-self:flex-start;background:#e0f7ea;color:#198557!important;padding:5px 9px}.route-result{left:70px;bottom:48px;width:275px;padding:23px;border-radius:10px;border-left:6px solid var(--yellow)}.route-result span{color:var(--green);font-weight:800}.route-line{position:absolute;inset:0}.route-line:before{content:"";position:absolute;left:200px;top:170px;width:250px;height:145px;border-right:3px solid var(--cyan);border-bottom:3px solid var(--cyan);border-radius:0 0 60px 0}.route-line i{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 8px rgba(255,176,0,.16)}.route-line i:nth-child(1){left:193px;top:162px}.route-line i:nth-child(2){left:442px;top:307px}.route-line i:nth-child(3){left:250px;bottom:141px}
.section-intro{max-width:none}.section-intro h2,.feature-split h2,.attribution-how h2,.use-cases h2{font-size:clamp(38px,4.5vw,62px);line-height:1.2;letter-spacing:-.045em;margin:0 0 24px}.section-intro>p:last-child{max-width:820px}.section-intro>p:last-child,.feature-split>div>p{font-size:18px;color:#5d7b85}.attribution-pain{padding:120px 0;background:var(--paper)}.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}.pain-grid article{min-height:300px;padding:34px;background:#fff;border:1px solid var(--line)}.pain-grid span{font-size:13px;font-weight:800;color:var(--cyan)}.pain-grid h3{font-size:27px;line-height:1.35;margin:72px 0 18px}.pain-grid p{color:#607d87}.pain-grid .is-yellow{background:var(--yellow);border-color:var(--yellow);transform:translateY(-22px)}.pain-grid .is-yellow span{color:var(--ink)}
.attribution-how{padding:110px 0;background:var(--ink);color:#fff}.attribution-how .staff-section-head>p{color:#b7d0d6}.attribution-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:70px 0 0;padding:0;list-style:none;background:#376473}.attribution-steps li{min-height:330px;padding:28px;background:var(--ink);position:relative}.attribution-steps li:before{content:"";position:absolute;left:28px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--yellow)}.attribution-steps b{color:var(--yellow);font-size:13px}.attribution-steps i{display:grid;place-items:center;width:66px;height:66px;margin:38px 0 28px;border-radius:50%;background:#154c5d;color:#fff;font-style:normal;font-weight:800}.attribution-steps h3{font-size:23px;line-height:1.35}.attribution-steps p{color:#b7d0d6}.step-note{margin:28px 0 0;color:#91b1bb;font-size:14px}
.commerce-connect,.performance{padding:120px 0}.commerce-connect{background:#fff}.performance{background:var(--mist)}.feature-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:95px;align-items:center}.feature-split.is-reverse{grid-template-columns:1.1fr .9fr}.feature-split.is-reverse>div:first-child{order:2}.feature-split ul{padding:0;margin:35px 0 0;list-style:none}.feature-split li{padding:13px 0;border-bottom:1px solid var(--line);font-weight:700}.feature-split li:before{content:"↗";color:var(--cyan);margin-right:12px}.connect-visual{position:relative;min-height:520px;border-radius:70px 8px 8px 8px;background:linear-gradient(145deg,#e1f5f7,#fff7e4);box-shadow:var(--shadow)}.connect-visual svg{position:absolute;inset:0;width:100%;height:100%}.connect-visual path{fill:none;stroke:var(--cyan);stroke-width:3;stroke-dasharray:7 8}.connect-center,.connect-node{position:absolute;z-index:1;display:grid;place-items:center;background:#fff;border:1px solid var(--line);box-shadow:0 12px 35px rgba(7,52,70,.15)}.connect-center{left:50%;top:50%;width:160px;height:160px;transform:translate(-50%,-50%);border-radius:50%;background:var(--ink);color:#fff}.connect-center small{color:var(--yellow);font-weight:800}.connect-center b{font-size:21px}.connect-node{width:128px;height:72px;border-radius:7px;font-weight:800}.connect-node.n1{left:35px;top:50px}.connect-node.n2{right:35px;top:50px}.connect-node.n3{left:35px;bottom:50px}.connect-node.n4{right:35px;bottom:50px}
.dashboard{min-height:500px;padding:30px;background:#fff;border:18px solid #dcebec;border-radius:14px;box-shadow:var(--shadow)}.dashboard-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}.dashboard-head span{font-size:12px;background:var(--mist);padding:6px 10px}.dashboard-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}.dashboard-metrics div{background:var(--mist);padding:15px}.dashboard-metrics small,.dashboard-metrics b,.dashboard-metrics em{display:block}.dashboard-metrics b{font-size:20px}.dashboard-metrics em{font-style:normal;color:var(--green);font-size:11px}.dashboard-chart{height:180px;display:flex;align-items:end;gap:12px;border-bottom:1px solid var(--line);padding:15px}.dashboard-chart i{flex:1;height:35%;background:var(--cyan);border-radius:5px 5px 0 0}.dashboard-chart i:nth-child(2){height:55%}.dashboard-chart i:nth-child(3){height:43%}.dashboard-chart i:nth-child(4){height:72%}.dashboard-chart i:nth-child(5){height:62%}.dashboard-chart i:nth-child(6){height:88%;background:var(--yellow)}.dashboard-chart i:nth-child(7){height:78%}.dashboard-chart i:nth-child(8){height:94%}.dashboard-order{display:grid;grid-template-columns:1fr 1fr auto;gap:15px;margin-top:22px;font-size:12px}.metric-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.metric-tags span{padding:10px 14px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:700}
.growth-value{padding:120px 0;background:var(--paper)}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:65px}.value-grid article{padding:38px;border-top:5px solid var(--cyan);background:#fff;box-shadow:0 16px 45px rgba(7,52,70,.09)}.value-grid article:nth-child(2){border-color:var(--yellow);transform:translateY(-20px)}.value-grid article:nth-child(3){border-color:var(--green)}.value-grid i{font-style:normal;font-size:13px;font-weight:800;color:var(--cyan)}.value-grid h3{font-size:27px;margin:55px 0 15px}.value-grid p{color:#607d87}
.use-cases{padding:115px 0;background:#fff}.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:65px}.case-grid article{min-height:230px;padding:35px;border:1px solid var(--line);background:var(--paper)}.case-grid span{font-size:12px;font-weight:800;color:var(--cyan)}.case-grid h3{font-size:25px;margin:35px 0 12px}.case-grid p{color:#607d87}.staff-final-cta p:not(.staff-kicker){max-width:700px;margin:20px auto 0;color:#527380;font-size:18px}
@media(max-width:1050px){.attribution-hero__grid,.feature-split,.feature-split.is-reverse{grid-template-columns:1fr}.feature-split.is-reverse>div:first-child{order:0}.attribution-hero__visual{min-height:520px}.pain-grid{grid-template-columns:1fr}.pain-grid .is-yellow{transform:none}.attribution-steps{grid-template-columns:1fr 1fr}.value-grid{grid-template-columns:1fr}.value-grid article:nth-child(2){transform:none}.attribution-page .staff-brand img{width:235px}}
@media(max-width:680px){.attribution-page .staff-brand img{width:190px}.feature-breadcrumb{height:54px}.feature-breadcrumb .staff-shell{font-size:12px}.attribution-hero{padding:46px 0 65px;background:var(--paper)}.attribution-hero__copy h1{font-size:39px}.attribution-hero__visual{min-height:500px;margin-top:15px;border-radius:80px 6px 6px 6px}.route-card.is-staff{left:18px;top:55px;width:220px}.route-card.is-order{right:16px;top:210px;width:230px}.route-result{left:25px;bottom:35px;width:245px}.route-line:before{left:120px;top:150px;width:145px}.route-line i:nth-child(1){left:113px;top:142px}.route-line i:nth-child(2){left:258px;top:287px}.route-line i:nth-child(3){display:none}.attribution-pain,.commerce-connect,.performance,.growth-value,.use-cases{padding:80px 0}.section-intro h2,.feature-split h2,.attribution-how h2,.use-cases h2{font-size:36px}.pain-grid{margin-top:40px}.pain-grid article{min-height:250px}.pain-grid h3{margin-top:45px}.pain-conclusion{font-size:17px}.attribution-how{padding:80px 0}.attribution-steps{grid-template-columns:1fr}.attribution-steps li{min-height:260px}.connect-visual{min-height:420px}.connect-center{width:125px;height:125px}.connect-node{width:100px;height:58px;font-size:12px}.connect-node.n1,.connect-node.n3{left:14px}.connect-node.n2,.connect-node.n4{right:14px}.dashboard{padding:16px;border-width:8px;min-height:430px}.dashboard-metrics{grid-template-columns:1fr}.dashboard-metrics div:nth-child(n+2){display:none}.dashboard-order{grid-template-columns:1fr auto}.dashboard-order b{display:none}.value-grid,.case-grid{grid-template-columns:1fr}.value-grid{margin-top:40px}.case-grid{margin-top:40px}.staff-final-cta p:not(.staff-kicker){font-size:16px}}

/* Functional visuals: inspired by STAFF START's icon-led hierarchy, adapted to SOOCKER. */
.card-icon{display:grid;place-items:center;width:62px;height:62px;margin:28px 0 24px;border-radius:50%;background:var(--cyan2);color:var(--cyan)}
.card-icon svg,.attribution-steps i svg,.value-grid i svg,.connect-node svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pain-grid article{min-height:320px}.pain-grid h3{margin:0 0 14px}.pain-grid .is-yellow .card-icon{background:rgba(255,255,255,.66);color:var(--ink)}
.attribution-steps i svg{width:32px;height:32px}
.platform-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:30px}
.platform-logos img{width:100%;height:111px;object-fit:contain;padding:5px;background:#fff;border:1px solid var(--line)}
.connect-visual .connect-lines{position:absolute;inset:0;width:100%;height:100%}
.connect-visual .connect-lines path{fill:none;stroke:var(--cyan);stroke-width:3;stroke-dasharray:7 8}
.connect-node{height:82px;grid-template-columns:30px auto;gap:8px;padding:0 12px}
.connect-node svg{position:static;width:25px;height:25px;color:var(--cyan)}
.connect-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-top:18px}
.connect-center>img{position:static;width:90px;height:auto;filter:none}
.connect-center>b{font-size:18px;transform:translateY(-5px)}
.value-grid i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--cyan2);color:var(--cyan)}
.value-grid article:nth-child(2) i{background:#fff0c7;color:#bc7b00}.value-grid article:nth-child(3) i{background:#e2f6ed;color:var(--green)}
.value-grid h3{margin-top:34px}
@media(max-width:680px){.pain-grid article{min-height:280px}.pain-grid h3{margin-top:0}.platform-logos{grid-template-columns:repeat(2,1fr)}.connect-node{width:110px;height:66px;padding:0 8px;grid-template-columns:24px auto}.connect-node svg{width:21px;height:21px}}

/* Use-case cards */
.use-cases .staff-section-head>p{font-size:18px;color:#6e8992}
.case-grid{gap:20px}
.case-grid article{position:relative;min-height:285px;padding:34px 36px 30px;border:0;border-top:5px solid var(--cyan);background:#f3fbfc;box-shadow:0 14px 38px rgba(7,52,70,.08);overflow:hidden;transition:transform .2s,box-shadow .2s}
.case-grid article:hover{transform:translateY(-4px);box-shadow:0 22px 48px rgba(7,52,70,.13)}
.case-grid article:after{content:"";position:absolute;width:160px;height:160px;right:-72px;bottom:-82px;border:1px solid currentColor;border-radius:50%;opacity:.12;box-shadow:0 0 0 28px currentColor}
.case-card-top{display:flex;justify-content:space-between;align-items:center}
.case-card-top span{font-size:13px}
.case-card-top i{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:#fff;color:var(--cyan);box-shadow:0 9px 24px rgba(7,52,70,.1)}
.case-card-top svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.case-grid h3{margin:28px 0 10px}.case-grid p{margin:0 0 24px}.case-grid article>b{font-size:13px;color:var(--ink);border-bottom:2px solid currentColor;padding-bottom:4px}
.case-grid .case-consider{border-color:var(--yellow);background:#fff9e9;color:#aa7000}.case-grid .case-consider i{color:#bc7b00}
.case-grid .case-new{border-color:var(--green);background:#f0faf6;color:#19875c}.case-grid .case-new i{color:var(--green)}
.case-grid .case-care{border-color:#7b68cf;background:#f6f3ff;color:#6f5bc4}.case-grid .case-care i{color:#7b68cf}
.case-grid article h3,.case-grid article p{color:var(--ink)}
@media(max-width:680px){.case-grid article{min-height:260px;padding:28px}.case-card-top i{width:60px;height:60px}.case-card-top svg{width:29px;height:29px}}

/* Core feature pages: full-width title, description below. */
.staff-section-head{display:block}
.staff-section-head>div,.staff-section-head h2{width:100%;max-width:none}
.staff-section-head>p{max-width:860px;margin:22px 0 0}
@media(min-width:681px){.attribution-hero__copy h1{font-size:clamp(46px,4.2vw,60px)}}
.case-text-link{display:block;width:max-content;margin:24px auto 0;font-weight:800;border-bottom:2px solid var(--ink)}